switches gcp-projects to use react-hookz

Signed-off-by: Brian Fletcher <brian@roadie.io>
backstage · Feb 15, 2022 · 24cda4c · 24cda4c
1 parent 1c9891e
commit 24cda4c
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/plugins/gcp-projects/package.json b/plugins/gcp-projects/package.json
@@ -38,7 +38,7 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.57",
     "react-router-dom": "6.0.0-beta.0",
-    "react-use": "^17.2.4"
+    "react-hookz": "^1.0.12"
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0"

diff --git a/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx b/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx
@@ -27,7 +27,7 @@ import {
   Typography,
 } from '@material-ui/core';
 import React from 'react';
-import useAsync from 'react-use/lib/useAsync';
+import { useAsync } from 'react-hookz';
 import { gcpApiRef } from '../../api';
 
 import {
@@ -61,9 +61,9 @@ const DetailsPage = () => {
   const classes = useStyles();
 
   const {
-    loading,
+    status,
+    result: details,
     error,
-    value: details,
   } = useAsync(
     async () =>
       api.getProject(
@@ -72,7 +72,7 @@ const DetailsPage = () => {
     [location.search],
   );
 
-  if (loading) {
+  if (status === 'loading') {
     return <LinearProgress />;
   } else if (error) {
     return (

diff --git a/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx b/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx
@@ -18,7 +18,7 @@
 import { Button, LinearProgress, Tooltip, Typography } from '@material-ui/core';
 import React from 'react';
 
-import useAsync from 'react-use/lib/useAsync';
+import { useAsync } from 'reach-hookz';
 import { gcpApiRef, Project } from '../../api';
 
 import {
@@ -58,9 +58,9 @@ const labels = (
 const PageContents = () => {
   const api = useApi(gcpApiRef);
 
-  const { loading, error, value } = useAsync(() => api.listProjects());
+  const { status, result, error } = useAsync(() => api.listProjects());
 
-  if (loading) {
+  if (status === 'loading') {
     return <LinearProgress />;
   } else if (error) {
     return (
@@ -108,7 +108,7 @@ const PageContents = () => {
           },
         ]}
         data={
-          value?.map((project: Project) => ({
+          result?.map((project: Project) => ({
             id: project.projectId,
             name: project.name,
             projectNumber: project?.projectNumber || 'Error',