Merge pull request #9570 from RoadieHQ/port-core-components-reach-hookz

ports core-components to react-hookz..

.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

@@ -64,7 +64,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 { useDebouncedEffect } 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(
+  useDebouncedEffect(
     () => {
       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

@@ -20529,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==