From 24cda4c9b1d27b847a29b7cb258e43311eca260b Mon Sep 17 00:00:00 2001 From: Brian Fletcher Date: Tue, 15 Feb 2022 12:52:59 +0000 Subject: [PATCH 1/4] switches gcp-projects to use react-hookz Signed-off-by: Brian Fletcher --- plugins/gcp-projects/package.json | 2 +- .../components/ProjectDetailsPage/ProjectDetailsPage.tsx | 8 ++++---- .../src/components/ProjectListPage/ProjectListPage.tsx | 8 ++++---- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/plugins/gcp-projects/package.json b/plugins/gcp-projects/package.json index 992336300f..b96570a3bb 100644 --- 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 index 36247ac492..00a4355675 100644 --- 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 ; } else if (error) { return ( diff --git a/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx b/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx index d5a57432b3..f78010db90 100644 --- 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 ; } 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', From e242726f78cfe7e77102a28b369baddf8fc53c91 Mon Sep 17 00:00:00 2001 From: Brian Fletcher Date: Tue, 15 Feb 2022 12:54:13 +0000 Subject: [PATCH 2/4] adds changeset Signed-off-by: Brian Fletcher --- .changeset/weak-timers-punch.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/weak-timers-punch.md diff --git a/.changeset/weak-timers-punch.md b/.changeset/weak-timers-punch.md new file mode 100644 index 0000000000..a25724cb8f --- /dev/null +++ b/.changeset/weak-timers-punch.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-gcp-projects': patch +--- + +Switches to use react-hookz in place of react-use. From ac578f2f4467cd438723692debfa2b8c19b6cba3 Mon Sep 17 00:00:00 2001 From: Brian Fletcher Date: Tue, 15 Feb 2022 12:56:20 +0000 Subject: [PATCH 3/4] fixes react typo Signed-off-by: Brian Fletcher --- .../src/components/ProjectListPage/ProjectListPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx b/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx index f78010db90..67902db4fe 100644 --- 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 'reach-hookz'; +import { useAsync } from 'react-hookz'; import { gcpApiRef, Project } from '../../api'; import { From eca7c3a92db406018128a6f176dfdbdfa1f4fdda Mon Sep 17 00:00:00 2001 From: Brian Fletcher Date: Tue, 15 Feb 2022 14:08:46 +0000 Subject: [PATCH 4/4] fixes imports Signed-off-by: Brian Fletcher --- plugins/gcp-projects/package.json | 2 +- .../ProjectDetailsPage/ProjectDetailsPage.tsx | 16 +++++----------- .../ProjectListPage/ProjectListPage.tsx | 7 +++++-- yarn.lock | 12 ++++++++++++ 4 files changed, 23 insertions(+), 14 deletions(-) diff --git a/plugins/gcp-projects/package.json b/plugins/gcp-projects/package.json index b96570a3bb..079b1d2d71 100644 --- 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-hookz": "^1.0.12" + "@react-hookz/web": "^12.3.0" }, "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 index 00a4355675..b900b81695 100644 --- 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-hookz'; +import { useAsync, useMountEffect } from '@react-hookz/web'; import { gcpApiRef } from '../../api'; import { @@ -60,18 +60,12 @@ const DetailsPage = () => { const api = useApi(gcpApiRef); const classes = useStyles(); - const { - status, - result: details, - error, - } = useAsync( - async () => - api.getProject( - decodeURIComponent(location.search.split('projectId=')[1]), - ), - [location.search], + const [{ status, result: details, error }, { execute }] = useAsync(async () => + api.getProject(decodeURIComponent(location.search.split('projectId=')[1])), ); + useMountEffect(execute); + if (status === 'loading') { return ; } else if (error) { diff --git a/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx b/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx index 67902db4fe..dea12f4b60 100644 --- 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-hookz'; +import { useAsync, useMountEffect } from '@react-hookz/web'; import { gcpApiRef, Project } from '../../api'; import { @@ -58,7 +58,10 @@ const labels = ( const PageContents = () => { const api = useApi(gcpApiRef); - const { status, result, error } = useAsync(() => api.listProjects()); + const [{ status, result, error }, { execute }] = useAsync(() => + api.listProjects(), + ); + useMountEffect(execute); if (status === 'loading') { return ; diff --git a/yarn.lock b/yarn.lock index 90a6ef9c24..d1973a686c 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"