chore: close modal and clear queries on success

opengovsg · Jan 30, 2024 · dfa9bcd · dfa9bcd
1 parent 6552b56
commit dfa9bcd
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 8 deletions.
diff --git a/frontend/src/features/admin-form/assistance/mutations.ts b/frontend/src/features/admin-form/assistance/mutations.ts
@@ -1,4 +1,6 @@
-import { useMutation } from 'react-query'
+import { useContext } from 'react'
+import { useMutation, useQueryClient } from 'react-query'
+import { useParams } from 'react-router-dom'
 
 import { ContentTypes } from '~shared/types/assistance'
 
@@ -9,8 +11,21 @@ import {
 import { parseModelOutput } from '~features/admin-form/assistance/utils'
 import { useCreateFormField } from '~features/admin-form/create/builder-and-design/mutations/useCreateFormField'
 
+import { adminFormKeys } from '../common/queries'
+import { MagicFormBuilderModalOnCloseContext } from '../create/builder-and-design/BuilderAndDesignContent/FormBuilder'
+
 export const useAssistanceMutations = () => {
   const { createFieldsMutation } = useCreateFormField()
+  const { formId } = useParams()
+
+  if (!formId) {
+    throw new Error('Form ID is required')
+  }
+
+  const queryClient = useQueryClient()
+
+  const onCloseContext = useContext(MagicFormBuilderModalOnCloseContext)
+  const { onClose } = onCloseContext || {}
 
   const createFieldsFromPromptMutation = useMutation((prompt: string) =>
     generateQuestions(prompt)
@@ -22,7 +37,12 @@ export const useAssistanceMutations = () => {
         if (data.content) {
           formFields = JSON.parse(parseModelOutput(data.content))
         }
-        return createFieldsMutation.mutate(formFields)
+        return createFieldsMutation.mutate(formFields, {
+          onSuccess: () => {
+            queryClient.invalidateQueries(adminFormKeys.id(formId))
+            onClose()
+          },
+        })
       }),
   )
 
@@ -32,7 +52,12 @@ export const useAssistanceMutations = () => {
       if (data.content) {
         formFields = JSON.parse(parseModelOutput(data.content))
       }
-      return createFieldsMutation.mutate(formFields)
+      return createFieldsMutation.mutate(formFields, {
+        onSuccess: () => {
+          queryClient.invalidateQueries(adminFormKeys.id(formId))
+          onClose()
+        },
+      })
     }),
   )
 

diff --git a/...src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FormBuilder.tsx b/...src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FormBuilder.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react'
+import { createContext, useCallback, useMemo } from 'react'
 import { Droppable } from 'react-beautiful-dnd'
 import {
   Box,
@@ -48,6 +48,12 @@ interface FormBuilderProps extends FlexProps {
   placeholderProps: DndPlaceholderProps
 }
 
+type OnCloseContext = {
+  onClose: () => void
+}
+export const MagicFormBuilderModalOnCloseContext =
+  createContext<OnCloseContext>({ onClose: () => undefined })
+
 export const FormBuilder = ({
   placeholderProps,
   ...props
@@ -106,10 +112,14 @@ export const FormBuilder = ({
 
   return (
     <>
-      <MagicFormBuilderModal
-        isOpen={magicFormBuilderModalDisclosure.isOpen}
-        onClose={magicFormBuilderModalDisclosure.onClose}
-      />
+      <MagicFormBuilderModalOnCloseContext.Provider
+        value={{ onClose: magicFormBuilderModalDisclosure.onClose }}
+      >
+        <MagicFormBuilderModal
+          isOpen={magicFormBuilderModalDisclosure.isOpen}
+          onClose={magicFormBuilderModalDisclosure.onClose}
+        />
+      </MagicFormBuilderModalOnCloseContext.Provider>
       <Flex
         mb={0}
         flex={1}