ports core-components to react-hookz..

..as far as possible.

There are a couple of hooks that have not been implemented in react-hookz.

 - useWindowSize, useCopyToClipboard, useObservable

I have not changed these. I am not very familiar with the debounce pattern
so I hope I have ported that correctly.

Signed-off-by: Brian Fletcher <brian@roadie.io>

.changeset/silver-beds-wonder.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Port supported react-use functions to react-hookz.

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",

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) {

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) => {

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<T>(
     );
   }, [searchParamsString, setQueryParamState, stateName]);
 
-  useDebounce(
+  useDebouncedCallback(
     () => {
       const queryString = joinQueryString(
         searchParamsString,
@@ -87,8 +87,8 @@ export function useQueryParamState<T>(
         setSearchParams(queryString, { replace: true });
       }
     },
-    debounceTime,
     [setSearchParams, queryParamState, searchParamsString, stateName],
+    debounceTime,
   );
 
   return [queryParamState, setQueryParamState];

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 <Progress />;
   } else if (error) {
     return (

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<SidebarIntroLocalStorage>(SIDEBAR_INTRO_LOCAL_STORAGE);
+    useLocalStorageValue<SidebarIntroLocalStorage>(SIDEBAR_INTRO_LOCAL_STORAGE);
 
   const { starredItemsDismissed, recentlyViewedItemsDismissed } =
     dismissedIntro ?? {};

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 ? (
     <Page themeId="home">

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==