fix(gogov): reset GoGov states in share modal (#6776)

* fix: reset GoGov states in share modal * fix: invalidate all gogov calls after mutation * fix: only invalidate query based on formId * chore: remove unneeded useEffect dependency * chore: use useEffect return cleanup * fix: remove unneeded gogov key
opengovsg · Oct 12, 2023 · 5da577e · 5da577e
1 parent be434e0
commit 5da577e
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 15 deletions.
diff --git a/frontend/src/features/admin-form/share/ShareFormModal.tsx b/frontend/src/features/admin-form/share/ShareFormModal.tsx
@@ -194,9 +194,15 @@ export const ShareFormModal = ({
       setGoLinkSuffixInput(goLinkSuffixData?.goLinkSuffix ?? '')
       setGoLinkHelperText(goLinkClaimSuccessHelperText)
     }
+    return () => {
+      // before unmount or after any changes to goLinkSuffix, will reset the states first
+      setGoLinkSaved(false)
+      setGoLinkSuffixInput('')
+      setGoLinkHelperText(undefined)
+    }
   }, [goLinkSuffixData?.goLinkSuffix])
 
-  const { claimGoLinkMutation } = useListShortenerMutations()
+  const { claimGoLinkMutation } = useListShortenerMutations(formId ?? '')
 
   const [goLinkHelperText, setGoLinkHelperText] = useState<
     goLinkHelperTextType | undefined
@@ -209,7 +215,6 @@ export const ShareFormModal = ({
       setClaimGoLoading(true)
       await claimGoLinkMutation.mutateAsync({
         linkSuffix: goLinkSuffixInput,
-        formId: formId ?? '',
         adminEmail: user.email,
       })
       setClaimGoLoading(false)
@@ -236,7 +241,7 @@ export const ShareFormModal = ({
       setGoLinkHelperText(getGoLinkClaimFailureHelperText(errMessage))
       return
     }
-  }, [user, claimGoLinkMutation, goLinkSuffixInput, formId])
+  }, [user, claimGoLinkMutation, goLinkSuffixInput])
 
   const FormLinkSection = () => (
     <FormControl isReadOnly>

diff --git a/frontend/src/features/link-shortener/mutations.ts b/frontend/src/features/link-shortener/mutations.ts
@@ -1,18 +1,15 @@
-import { useMutation } from 'react-query'
+import { useMutation, useQueryClient } from 'react-query'
 
 import { claimGoLink } from './GoGovService'
+import { goGovKeys } from './queries'
+
+export const useListShortenerMutations = (formId: string) => {
+  const queryClient = useQueryClient()
 
-export const useListShortenerMutations = () => {
   const claimGoLinkMutation = useMutation(
-    ({
-      linkSuffix,
-      formId,
-      adminEmail,
-    }: {
-      linkSuffix: string
-      formId: string
-      adminEmail: string
-    }) => claimGoLink(linkSuffix, formId, adminEmail),
+    ({ linkSuffix, adminEmail }: { linkSuffix: string; adminEmail: string }) =>
+      claimGoLink(linkSuffix, formId, adminEmail),
+    { onSuccess: () => queryClient.invalidateQueries(goGovKeys.id(formId)) },
   )
 
   return { claimGoLinkMutation }

diff --git a/frontend/src/features/link-shortener/queries.ts b/frontend/src/features/link-shortener/queries.ts
@@ -2,10 +2,14 @@ import { useQuery, UseQueryResult } from 'react-query'
 
 import { getGoLinkSuffix } from './GoGovService'
 
+export const goGovKeys = {
+  id: (id: string) => ['gogov', id] as const,
+}
+
 export const useGoLink = (
   formId: string,
 ): UseQueryResult<{ goLinkSuffix: string }> => {
-  return useQuery(formId, () => getGoLinkSuffix(formId), {
+  return useQuery(goGovKeys.id(formId), () => getGoLinkSuffix(formId), {
     enabled: !!formId,
   })
 }