From 5ca9c26c58a6647576e096fc581c561b705115de Mon Sep 17 00:00:00 2001 From: shreeyash07 Date: Tue, 3 Dec 2024 16:32:03 +0545 Subject: [PATCH] Add retrigger button and mutation for the region in geo area project edit page --- .../AddAdminLevelForm/index.tsx | 3 + .../RegionCard/AddAdminLevelPane/index.tsx | 3 + .../ProjectEdit/GeoAreas/RegionCard/index.tsx | 123 +++++++++++++++--- app/views/ProjectEdit/GeoAreas/index.tsx | 28 +++- 4 files changed, 137 insertions(+), 20 deletions(-) diff --git a/app/views/ProjectEdit/GeoAreas/RegionCard/AddAdminLevelPane/AddAdminLevelForm/index.tsx b/app/views/ProjectEdit/GeoAreas/RegionCard/AddAdminLevelPane/AddAdminLevelForm/index.tsx index 7c5894ec3c..e62fb2b3e6 100644 --- a/app/views/ProjectEdit/GeoAreas/RegionCard/AddAdminLevelPane/AddAdminLevelForm/index.tsx +++ b/app/views/ProjectEdit/GeoAreas/RegionCard/AddAdminLevelPane/AddAdminLevelForm/index.tsx @@ -151,6 +151,7 @@ interface Props { value: PartialAdminLevel; isPublished?: boolean; adminLevelOptions?: AdminLevelType[]; + onAdminLevelAddSuccess: () => void; } function AddAdminLevelForm(props: Props) { @@ -160,6 +161,7 @@ function AddAdminLevelForm(props: Props) { onSave, value: valueFromProps, isPublished, + onAdminLevelAddSuccess, onDelete, } = props; @@ -268,6 +270,7 @@ function AddAdminLevelForm(props: Props) { } if (isDefined(result) && ok) { + onAdminLevelAddSuccess(); alert.show( 'Admin level is successfully updated!', { variant: 'success' }, diff --git a/app/views/ProjectEdit/GeoAreas/RegionCard/AddAdminLevelPane/index.tsx b/app/views/ProjectEdit/GeoAreas/RegionCard/AddAdminLevelPane/index.tsx index 5142989f93..de12cbb25d 100644 --- a/app/views/ProjectEdit/GeoAreas/RegionCard/AddAdminLevelPane/index.tsx +++ b/app/views/ProjectEdit/GeoAreas/RegionCard/AddAdminLevelPane/index.tsx @@ -18,6 +18,7 @@ interface Props { adminLevelOptions?: AdminLevelType[]; name: string; regionId: string; + onAdminLevelAddSuccess: () => void; } function AddAdminLevelPane(props: Props) { @@ -28,6 +29,7 @@ function AddAdminLevelPane(props: Props) { isPublished, adminLevelOptions, name, + onAdminLevelAddSuccess, regionId, } = props; @@ -36,6 +38,7 @@ function AddAdminLevelPane(props: Props) { name={name} > void; navigationDisabled?: boolean; isPublished: boolean; + onAdminLevelAddSuccess: () => void; + onRegionRetriggerSuccess: () => void; onRegionPublishSuccess: () => void; - onRegionRemoveSuccess: () => void; + onRegionDeleteSuccess: () => void; } function RegionCard(props: Props) { @@ -153,8 +168,10 @@ function RegionCard(props: Props) { onTempAdminLevelChange, navigationDisabled, onAdminLevelUpdate, + onAdminLevelAddSuccess, + onRegionRetriggerSuccess, onRegionPublishSuccess, - onRegionRemoveSuccess, + onRegionDeleteSuccess, } = props; // setting this so that when user add an admin level, it is updated @@ -226,6 +243,48 @@ function RegionCard(props: Props) { }, ); + const [ + retriggerRegion, + { + loading: retriggerRegionPending, + }, + ] = useMutation( + RETRIGGER_REGION, + { + onCompleted: (response) => { + if (!response.retriggerRegion) { + return; + } + + const { ok, errors } = response.retriggerRegion; + + if (errors) { + const formError = transformToFormError( + removeNull(response.retriggerRegion.errors) as ObjectError[], + ); + alert.show( + formError?.[internal] as string, + { variant: 'error' }, + ); + } + + if (ok) { + alert.show( + 'Selected region retrigger successfully', + { variant: 'success' }, + ); + onRegionRetriggerSuccess(); + } + }, + onError: () => { + alert.show( + 'Failed to retrigger region.', + { variant: 'error' }, + ); + }, + }, + ); + const [ deleteAdminLevel, { @@ -300,7 +359,7 @@ function RegionCard(props: Props) { 'Region is successfully deleted!', { variant: 'success' }, ); - onRegionRemoveSuccess(); + onRegionDeleteSuccess(); } }, onError: () => { @@ -312,6 +371,19 @@ function RegionCard(props: Props) { }, ); + const handleRegionRetriggerClick = useCallback( + () => { + if (region.id) { + retriggerRegion({ + variables: { + regionId: region.id, + }, + }); + } + }, + [retriggerRegion, region], + ); + const handleDeleteRegionClick = useCallback( () => { if (region.id) { @@ -460,6 +532,7 @@ function RegionCard(props: Props) { isPublished, adminLevelOptions: adminLevels, regionId: region.id, + onAdminLevelAddSuccess, }), [ region.id, @@ -467,6 +540,7 @@ function RegionCard(props: Props) { adminLevels, handleAdminLevelSave, handleAdminLevelDelete, + onAdminLevelAddSuccess, ], ); @@ -497,20 +571,36 @@ function RegionCard(props: Props) { onExpansionChange={handleExpansion} expansionTriggerArea="arrow" headerActions={( - - - + <> + {!isPublished && region.status === 'FAILED' && ( + + + + )} + + + + )} > + {!isPublished && region.status === 'FAILED' && ( + + )} {!isPublished && ( )} @@ -547,6 +637,7 @@ function RegionCard(props: Props) { navigationDisabled || pendingPublishRegion || adminLevels.length < 1 + || region.status === 'FAILED' )} > Publish Area diff --git a/app/views/ProjectEdit/GeoAreas/index.tsx b/app/views/ProjectEdit/GeoAreas/index.tsx index 1a6e268fb0..ff77a57273 100644 --- a/app/views/ProjectEdit/GeoAreas/index.tsx +++ b/app/views/ProjectEdit/GeoAreas/index.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { IoAdd, } from 'react-icons/io5'; @@ -21,7 +21,7 @@ import { import _ts from '#ts'; import RegionsMap from './RegionsMap'; -import RegionCard from './RegionCard'; +import RegionCard, { Props as RegionCardProps } from './RegionCard'; import CustomGeoAddModal from './CustomGeoAddModal'; import styles from './styles.css'; @@ -47,6 +47,7 @@ const REGIONS_FOR_GEO_AREAS = gql` } title public + status } } } @@ -97,6 +98,8 @@ function GeoAreas(props: Props) { data: regions, loading: regionsLoading, refetch: regionsRefetch, + startPolling, + stopPolling, } = useQuery( REGIONS_FOR_GEO_AREAS, { @@ -106,6 +109,21 @@ function GeoAreas(props: Props) { }, ); + const shouldPoll = useMemo(() => regions?.project?.regions?.some( + (region) => region.status === 'INITIATED', + ), [regions?.project?.regions]); + + useEffect( + () => { + if (shouldPoll) { + startPolling(500); + } else { + stopPolling(); + } + }, + [shouldPoll, startPolling, stopPolling], + ); + const handleRegionSet = useCallback( (value: string | undefined) => { setActiveRegion(value); @@ -137,7 +155,7 @@ function GeoAreas(props: Props) { ); const regionRendererParams = useCallback( - (_: number, data: Region) => { + (_: number, data: Region): RegionCardProps => { const isExpanded = data.id === activeRegion; return { region: data, @@ -151,7 +169,9 @@ function GeoAreas(props: Props) { onTempAdminLevelChange: isExpanded ? setTempAdminLevel : undefined, onAdminLevelUpdate: isExpanded ? updateMapTriggerId : undefined, onRegionPublishSuccess: regionsRefetch, - onRegionRemoveSuccess: regionsRefetch, + onRegionDeleteSuccess: regionsRefetch, + onAdminLevelAddSuccess: regionsRefetch, + onRegionRetriggerSuccess: regionsRefetch, navigationDisabled, }; },