From f922de37c65fb51926e47b56f499790fa89563b3 Mon Sep 17 00:00:00 2001 From: Lykke Axlin Date: Mon, 27 Sep 2021 16:13:55 +0200 Subject: [PATCH] refactor states to use useAsyncFn Signed-off-by: Lykke Axlin Co-authored-by: klaraab --- .../EditProjectDialog/EditProjectDialog.tsx | 16 +- .../EntityBazaarInfoCard.tsx | 155 ++++++++---------- .../src/components/SortView/SortView.tsx | 1 - 3 files changed, 71 insertions(+), 101 deletions(-) diff --git a/plugins/bazaar/src/components/EditProjectDialog/EditProjectDialog.tsx b/plugins/bazaar/src/components/EditProjectDialog/EditProjectDialog.tsx index bb179b4331..82b6da492f 100644 --- a/plugins/bazaar/src/components/EditProjectDialog/EditProjectDialog.tsx +++ b/plugins/bazaar/src/components/EditProjectDialog/EditProjectDialog.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useState, useEffect, Dispatch, SetStateAction } from 'react'; +import React, { useState, useEffect } from 'react'; import { Entity } from '@backstage/catalog-model'; import { useApi } from '@backstage/core-plugin-api'; import { ProjectDialog } from '../ProjectDialog'; @@ -24,7 +24,7 @@ import { bazaarApiRef } from '../../api'; type Props = { entity: Entity; bazaarProject: BazaarProject; - setBazaarProject: Dispatch>; + fetchBazaarProject: () => Promise; open: boolean; handleClose: () => void; isAddForm: boolean; @@ -33,7 +33,7 @@ type Props = { export const EditProjectDialog = ({ entity, bazaarProject, - setBazaarProject, + fetchBazaarProject, open, handleClose, }: Props) => { @@ -64,15 +64,7 @@ export const EditProjectDialog = ({ formValues.status, ); - if (updateResponse.status === 'ok') - setBazaarProject((oldProject: BazaarProject) => { - return { - ...oldProject, - community: formValues.community, - announcement: formValues.announcement, - status: formValues.status, - }; - }); + if (updateResponse.status === 'ok') fetchBazaarProject(); handleClose(); }; diff --git a/plugins/bazaar/src/components/EntityBazaarInfoCard/EntityBazaarInfoCard.tsx b/plugins/bazaar/src/components/EntityBazaarInfoCard/EntityBazaarInfoCard.tsx index 192954d84a..2b6b8c3a41 100644 --- a/plugins/bazaar/src/components/EntityBazaarInfoCard/EntityBazaarInfoCard.tsx +++ b/plugins/bazaar/src/components/EntityBazaarInfoCard/EntityBazaarInfoCard.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { Grid, makeStyles, @@ -52,12 +52,11 @@ import { identityApiRef, useRouteRef, } from '@backstage/core-plugin-api'; -import { useAsync } from 'react-use'; import { Member, BazaarProject } from '../../types'; import { bazaarApiRef } from '../../api'; -import { stringifyEntityRef } from '@backstage/catalog-model'; import { rootRouteRef } from '../../routes'; import { Alert } from '@material-ui/lab'; +import { useAsyncFn } from 'react-use'; const useStyles = makeStyles({ description: { @@ -91,22 +90,10 @@ export const EntityBazaarInfoCard = () => { const [open, setOpen] = useState(false); const [popoverOpen, setPopoverOpen] = useState(false); const [openDelete, setOpenDelete] = useState(false); - const [isMember, setIsMember] = useState(false); - const [members, setMembers] = useState([]); - const [bazaarProject, setBazaarProject] = useState({ - entityRef: '', - name: '', - community: '', - announcement: '', - status: 'proposed', - updatedAt: '', - membersCount: 0, - }); const [isBazaar, setIsBazaar] = useState(false); const routeRef = useRouteRef(rootRouteRef); - - const getInitMemberStatus = async () => { + const [members, fetchMembers] = useAsyncFn(async () => { const response = await bazaarApi.getMembers(entity); const dbMembers = response.data.map((obj: any) => { const member: Member = { @@ -120,38 +107,40 @@ export const EntityBazaarInfoCard = () => { dbMembers.sort(sortMembers); - setMembers(dbMembers); - setIsMember( - dbMembers - .map((member: Member) => member.userId) - .indexOf(identity.getUserId()) >= 0, - ); - }; - - const getMetadata = async () => { - const response = await bazaarApi.getMetadata(entity); - - if (response.status !== 404) { - setIsBazaar(true); - const data = await response.json().then((resp: any) => resp.data); - - setBazaarProject({ - entityRef: data[0].entity_ref, - name: data[0].name, - community: data[0].community, - announcement: data[0].announcement, - status: data[0].status, - updatedAt: data[0].updated_at, - membersCount: data[0].members_count, - }); - } - }; - - const { loading, error } = useAsync(async () => { - await getInitMemberStatus(); - await getMetadata(); + return dbMembers; }); + const [bazaarProject, fetchBazaarProject] = useAsyncFn(async () => { + const response = await bazaarApi.getMetadata(entity); + const metadata = await response.json().then((resp: any) => resp.data[0]); + + return { + entityRef: metadata.entity_ref, + name: metadata.name, + community: metadata.community, + announcement: metadata.announcement, + status: metadata.status, + updatedAt: metadata.updated_at, + membersCount: metadata.members_count, + } as BazaarProject; + }); + + useEffect(() => { + fetchMembers(); + fetchBazaarProject(); + }, [fetchMembers, fetchBazaarProject]); + + useEffect(() => { + const isBazaarMember = + members?.value + ?.map((member: Member) => member.userId) + .indexOf(identity.getUserId()) >= 0; + const isBazaarProject = bazaarProject !== undefined; + + setIsMember(isBazaarMember); + setIsBazaar(isBazaarProject); + }, [bazaarProject, members, identity]); + const onOpen = (event: React.SyntheticEvent) => { setAnchorEl(event.currentTarget); setPopoverOpen(true); @@ -170,37 +159,21 @@ export const EntityBazaarInfoCard = () => { }; const handleMembersClick = async () => { - setIsMember(!isMember); - - const newMember: Member = { - userId: identity.getUserId(), - entityRef: stringifyEntityRef(entity), - }; - if (!isMember) { - setMembers((prevMembers: Member[]) => { - const newMembers: Member[] = [newMember, ...prevMembers]; - - newMembers.sort(sortMembers); - return newMembers; - }); await bazaarApi.addMember(entity); } else { - setMembers( - members.filter( - (member: Member) => member.userId !== identity.getUserId(), - ), - ); await bazaarApi.deleteMember(entity); } + + fetchMembers(); }; const links: IconLinkVerticalProps[] = [ { label: 'Community', icon: , - href: bazaarProject.community, - disabled: bazaarProject.community === '', + href: bazaarProject?.value?.community, + disabled: bazaarProject?.value?.community === '', }, { label: isMember ? 'Leave' : 'Join', @@ -212,10 +185,12 @@ export const EntityBazaarInfoCard = () => { }, ]; - if (loading) { + if (bazaarProject.loading || members.loading) { return ; - } else if (error) { - return {error.message}; + } else if (bazaarProject.error) { + return {bazaarProject?.error?.message}; + } else if (members.error) { + return {members?.error?.message}; } else if (!isBazaar) { return ( @@ -239,21 +214,25 @@ export const EntityBazaarInfoCard = () => { } return ( - + {bazaarProject?.value && ( + + )} - + {bazaarProject?.value && ( + + )} { - {bazaarProject.announcement - ? bazaarProject.announcement + {bazaarProject?.value?.announcement + ? bazaarProject?.value?.announcement .split('\n') .map((str: string, i: number) => ( { - + {' '} - {members.length ? ( - members.slice(0, 3).map(member => { + {members?.value?.length ? ( + members.value.slice(0, 3).map((member: Member) => { return (
{ return !bazaarProjectRefs?.includes(stringifyEntityRef(entity)); }); - // setFilteredCatalogEntities(filtered); return filtered; };