diff --git a/.changeset/silver-beds-wonder.md b/.changeset/silver-beds-wonder.md new file mode 100644 index 0000000000..73ce3f9567 --- /dev/null +++ b/.changeset/silver-beds-wonder.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Port supported react-use functions to react-hookz. diff --git a/packages/core-components/package.json b/packages/core-components/package.json index ecb910c50b..5406d55d52 100644 --- a/packages/core-components/package.json +++ b/packages/core-components/package.json @@ -60,7 +60,8 @@ "react-sparklines": "^1.7.0", "react-syntax-highlighter": "^15.4.5", "react-text-truncate": "^0.17.0", - "react-use": "^17.2.4", + "react-use": "^17.3.2", + "@react-hookz/web": "^12.3.0", "react-virtualized-auto-sizer": "^1.0.6", "react-window": "^1.8.6", "remark-gfm": "^3.0.1", diff --git a/packages/core-components/src/components/LogViewer/useLogViewerSearch.tsx b/packages/core-components/src/components/LogViewer/useLogViewerSearch.tsx index 7f0069bc44..14f71984f4 100644 --- a/packages/core-components/src/components/LogViewer/useLogViewerSearch.tsx +++ b/packages/core-components/src/components/LogViewer/useLogViewerSearch.tsx @@ -15,7 +15,7 @@ */ import { useMemo, useState } from 'react'; -import useToggle from 'react-use/lib/useToggle'; +import { useToggle } from '@react-hookz/web'; import { AnsiLine } from './AnsiProcessor'; export function applySearchFilter(lines: AnsiLine[], searchText: string) { diff --git a/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx b/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx index 69952d487a..da489725e4 100644 --- a/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx +++ b/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx @@ -18,7 +18,7 @@ import { makeStyles } from '@material-ui/core/styles'; import Tooltip, { TooltipProps } from '@material-ui/core/Tooltip'; import React, { useState } from 'react'; import TextTruncate, { TextTruncateProps } from 'react-text-truncate'; -import useMountedState from 'react-use/lib/useMountedState'; +import { useIsMounted } from '@react-hookz/web'; type Props = { text: TextTruncateProps['text']; @@ -41,7 +41,7 @@ const useStyles = makeStyles( export function OverflowTooltip(props: Props) { const [hover, setHover] = useState(false); - const isMounted = useMountedState(); + const isMounted = useIsMounted(); const classes = useStyles(); const handleToggled = (truncated: boolean) => { diff --git a/packages/core-components/src/hooks/useQueryParamState.ts b/packages/core-components/src/hooks/useQueryParamState.ts index 72ccafd99f..a5a90bdd53 100644 --- a/packages/core-components/src/hooks/useQueryParamState.ts +++ b/packages/core-components/src/hooks/useQueryParamState.ts @@ -18,7 +18,7 @@ import { isEqual } from 'lodash'; import qs from 'qs'; import { useEffect, useState } from 'react'; import { useSearchParams } from 'react-router-dom'; -import useDebounce from 'react-use/lib/useDebounce'; +import { useDebouncedCallback } from '@react-hookz/web'; function stringify(queryParams: any): string { // Even though these setting don't look nice (e.g. escaped brackets), we should keep @@ -75,7 +75,7 @@ export function useQueryParamState( ); }, [searchParamsString, setQueryParamState, stateName]); - useDebounce( + useDebouncedCallback( () => { const queryString = joinQueryString( searchParamsString, @@ -87,8 +87,8 @@ export function useQueryParamState( setSearchParams(queryString, { replace: true }); } }, - debounceTime, [setSearchParams, queryParamState, searchParamsString, stateName], + debounceTime, ); return [queryParamState, setQueryParamState]; diff --git a/packages/core-components/src/layout/ProxiedSignInPage/ProxiedSignInPage.tsx b/packages/core-components/src/layout/ProxiedSignInPage/ProxiedSignInPage.tsx index adcd6ced8f..13a61d259f 100644 --- a/packages/core-components/src/layout/ProxiedSignInPage/ProxiedSignInPage.tsx +++ b/packages/core-components/src/layout/ProxiedSignInPage/ProxiedSignInPage.tsx @@ -20,7 +20,7 @@ import { useApi, } from '@backstage/core-plugin-api'; import React from 'react'; -import useAsync from 'react-use/lib/useAsync'; +import { useAsync, useMountEffect } from '@react-hookz/web'; import { ErrorPanel } from '../../components/ErrorPanel'; import { Progress } from '../../components/Progress'; import { ProxiedSignInIdentity } from './ProxiedSignInIdentity'; @@ -56,7 +56,7 @@ export type ProxiedSignInPageProps = SignInPageProps & { export const ProxiedSignInPage = (props: ProxiedSignInPageProps) => { const discoveryApi = useApi(discoveryApiRef); - const { loading, error } = useAsync(async () => { + const [{ status, error }, { execute }] = useAsync(async () => { const identity = new ProxiedSignInIdentity({ provider: props.provider, discoveryApi, @@ -65,9 +65,11 @@ export const ProxiedSignInPage = (props: ProxiedSignInPageProps) => { await identity.start(); props.onSignInSuccess(identity); - }, []); + }); - if (loading) { + useMountEffect(execute); + + if (status === 'loading') { return ; } else if (error) { return ( diff --git a/packages/core-components/src/layout/Sidebar/Intro.tsx b/packages/core-components/src/layout/Sidebar/Intro.tsx index 7b2c5fa4d7..1fcc54188f 100644 --- a/packages/core-components/src/layout/Sidebar/Intro.tsx +++ b/packages/core-components/src/layout/Sidebar/Intro.tsx @@ -21,7 +21,7 @@ import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import CloseIcon from '@material-ui/icons/Close'; import React, { useContext, useState } from 'react'; -import useLocalStorage from 'react-use/lib/useLocalStorage'; +import { useLocalStorageValue } from '@react-hookz/web'; import { sidebarConfig, SidebarContext, @@ -155,7 +155,7 @@ export function SidebarIntro(_props: {}) { recentlyViewedItemsDismissed: false, }; const [dismissedIntro, setDismissedIntro] = - useLocalStorage(SIDEBAR_INTRO_LOCAL_STORAGE); + useLocalStorageValue(SIDEBAR_INTRO_LOCAL_STORAGE); const { starredItemsDismissed, recentlyViewedItemsDismissed } = dismissedIntro ?? {}; diff --git a/packages/core-components/src/layout/SignInPage/SignInPage.tsx b/packages/core-components/src/layout/SignInPage/SignInPage.tsx index 2eac16cbf4..6092f2862f 100644 --- a/packages/core-components/src/layout/SignInPage/SignInPage.tsx +++ b/packages/core-components/src/layout/SignInPage/SignInPage.tsx @@ -25,7 +25,7 @@ import Button from '@material-ui/core/Button'; import Grid from '@material-ui/core/Grid'; import Typography from '@material-ui/core/Typography'; import React, { useState } from 'react'; -import useMount from 'react-use/lib/useMount'; +import { useMountEffect } from '@react-hookz/web'; import { Progress } from '../../components/Progress'; import { Content } from '../Content/Content'; import { ContentHeader } from '../ContentHeader/ContentHeader'; @@ -149,7 +149,7 @@ export const SingleSignInPage = ({ } }; - useMount(() => login({ checkExisting: true })); + useMountEffect(() => login({ checkExisting: true })); return showLoginPage ? ( diff --git a/yarn.lock b/yarn.lock index 90a6ef9c24..cc14124b9d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4362,6 +4362,18 @@ resolved "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570" integrity sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA= +"@react-hookz/deep-equal@^1.0.1": + version "1.0.1" + resolved "https://registry.npmjs.org/@react-hookz/deep-equal/-/deep-equal-1.0.1.tgz#1e9aad97b964879b54a3909f36f0727befa13e1f" + integrity sha512-6k/pU2jNlgYvKOy84vpCAZ8MGVwybvAdjzrh4UicCVOCPxz0LSBws1OE6O5TO4sPHaSw+yLfNzNK8RicGFc1Kw== + +"@react-hookz/web@^12.3.0": + version "12.3.0" + resolved "https://registry.npmjs.org/@react-hookz/web/-/web-12.3.0.tgz#a9a1311a15171a57d68a3db61492f913d4fd455a" + integrity sha512-Uujp2RfX/oDEtAbdkV0W/nhiQ5ZYVH+MEq04T7/8TstyiwoIlvsRbEic6c6gQA6sQ/lw93cZ8NP8R7AYjiqDvg== + dependencies: + "@react-hookz/deep-equal" "^1.0.1" + "@rjsf/core@^3.2.1": version "3.2.1" resolved "https://registry.npmjs.org/@rjsf/core/-/core-3.2.1.tgz#8a7b24c9a6f01f0ecb093fdfc777172c12b1b009" @@ -20517,7 +20529,7 @@ react-use@^17.2.4: ts-easing "^0.2.0" tslib "^2.1.0" -react-use@^17.3.1: +react-use@^17.3.1, react-use@^17.3.2: version "17.3.2" resolved "https://registry.npmjs.org/react-use/-/react-use-17.3.2.tgz#448abf515f47c41c32455024db28167cb6e53be8" integrity sha512-bj7OD0/1wL03KyWmzFXAFe425zziuTf7q8olwCYBfOeFHY1qfO1FAMjROQLsLZYwG4Rx63xAfb7XAbBrJsZmEw==