temp commit

opengovsg · May 2, 2024 · 64da7c6 · 64da7c6
1 parent cf3fddf
commit 64da7c6
Show file tree

Hide file tree

Showing 7 changed files with 180 additions and 124 deletions.
diff --git a/frontend/src/features/admin-form/assistance/mutations.ts b/frontend/src/features/admin-form/assistance/mutations.ts
@@ -1,5 +1,4 @@
-import { useContext } from 'react'
-import { useMutation, useQueryClient } from 'react-query'
+import { useMutation } from 'react-query'
 import { useParams } from 'react-router-dom'
 import { StatusCodes } from 'http-status-codes'
 
@@ -15,8 +14,6 @@ import { parseModelOutput } from '~features/admin-form/assistance/utils'
 import { useCreateFormField } from '~features/admin-form/create/builder-and-design/mutations/useCreateFormField'
 
 import { useToast } from '../../../hooks/useToast'
-import { adminFormKeys } from '../common/queries'
-import { MagicFormBuilderModalOnCloseContext } from '../create/builder-and-design/BuilderAndDesignContent/FormBuilder'
 
 export const useAssistanceMutations = () => {
   const { createFieldsMutation } = useCreateFormField()
@@ -28,11 +25,6 @@ export const useAssistanceMutations = () => {
 
   const toast = useToast({ status: 'success', isClosable: true })
 
-  const queryClient = useQueryClient()
-
-  const onCloseContext = useContext(MagicFormBuilderModalOnCloseContext)
-  const { onClose } = onCloseContext || {}
-
   const createFieldsFromPromptMutation = useMutation(
     (prompt: string) =>
       generateQuestions(ContentTypes.PROMPT, prompt)
@@ -48,49 +40,34 @@ export const useAssistanceMutations = () => {
             try {
               formFields = JSON.parse(parseModelOutput(data.content))
             } catch (e) {
+              console.log('erorrr', e)
               toast({
                 description: `Error creating form. Reason: ${e}`,
                 status: 'warning',
               })
-              return
+              throw e
             }
           }
-          return createFieldsMutation.mutate(formFields, {
-            onSuccess: () => {
-              queryClient.invalidateQueries(adminFormKeys.id(formId))
-              onClose()
-              toast({
-                description: 'Successfully created form',
-              })
-            },
-            onError: () => {
-              toast({
-                description: 'Error creating form.',
-                status: 'warning',
-              })
-            },
-          })
+          return createFieldsMutation.mutate(formFields)
         }),
     {
-      onError: (error: Error) => {
-        if (error instanceof HttpError) {
-          let errorMessage
-          switch (error.code) {
-            case StatusCodes.TOO_MANY_REQUESTS:
-              errorMessage =
-                'Too many forms created! Please try creating again later.'
-
-              break
-
-            default:
-              errorMessage = 'An error occured. Please try again.'
-          }
-          toast({
-            description: `${errorMessage}`,
-            status: 'danger',
-          })
-        }
-      },
+      // onError: (error: Error) => {
+      //   if (error instanceof HttpError) {
+      //     let errorMessage
+      //     switch (error.code) {
+      //       case StatusCodes.TOO_MANY_REQUESTS:
+      //         errorMessage =
+      //           'Too many forms created! Please try creating again later.'
+      //         break
+      //       default:
+      //         errorMessage = 'An error occured. Please try again.'
+      //     }
+      //     toast({
+      //       description: `${errorMessage}`,
+      //       status: 'danger',
+      //     })
+      //   }
+      // },
     },
   )
 
@@ -116,28 +93,27 @@ export const useAssistanceMutations = () => {
               return
             }
           }
-          return createFieldsMutation.mutate(formFields, {
-            onSuccess: () => {
-              queryClient.invalidateQueries(adminFormKeys.id(formId))
-              onClose()
-              toast({
-                description: 'Successfully created form',
-              })
-            },
-            onError: () => {
-              toast({
-                description: 'Error creating form.',
-                status: 'warning',
-              })
-            },
-          })
+          return createFieldsMutation.mutate(formFields)
         }),
     {
       onError: (error: Error) => {
-        toast({
-          description: 'Too many forms generated! Please try again later.',
-          status: 'danger',
-        })
+        if (error instanceof HttpError) {
+          let errorMessage
+          switch (error.code) {
+            case StatusCodes.TOO_MANY_REQUESTS:
+              errorMessage =
+                'Too many forms created! Please try creating again later.'
+
+              break
+
+            default:
+              errorMessage = 'An error occured. Please try again.'
+          }
+          toast({
+            description: `${errorMessage}`,
+            status: 'danger',
+          })
+        }
       },
     },
   )

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 { createContext, useCallback, useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import { Droppable } from 'react-beautiful-dnd'
 import {
   Box,
@@ -48,12 +48,6 @@ interface FormBuilderProps extends FlexProps {
   placeholderProps: DndPlaceholderProps
 }
 
-type OnCloseContext = {
-  onClose: () => void
-}
-export const MagicFormBuilderModalOnCloseContext =
-  createContext<OnCloseContext>({ onClose: () => undefined })
-
 export const FormBuilder = ({
   placeholderProps,
   ...props
@@ -112,14 +106,10 @@ export const FormBuilder = ({
 
   return (
     <>
-      <MagicFormBuilderModalOnCloseContext.Provider
-        value={{ onClose: magicFormBuilderModalDisclosure.onClose }}
-      >
-        <MagicFormBuilderModal
-          isOpen={magicFormBuilderModalDisclosure.isOpen}
-          onClose={magicFormBuilderModalDisclosure.onClose}
-        />
-      </MagicFormBuilderModalOnCloseContext.Provider>
+      <MagicFormBuilderModal
+        isOpen={magicFormBuilderModalDisclosure.isOpen}
+        onClose={magicFormBuilderModalDisclosure.onClose}
+      />
       <Flex
         mb={0}
         flex={1}

diff --git a/...ures/admin-form/create/builder-and-design/MagicFormBuilderModal/MagicFormBuilderModal.tsx b/...ures/admin-form/create/builder-and-design/MagicFormBuilderModal/MagicFormBuilderModal.tsx
@@ -28,7 +28,7 @@ export const MagicFormBuilderModal = ({
     <Modal isOpen={isOpen} onClose={onClose} size={modalSize}>
       <ModalContent py={{ base: 'initial', md: '4.5rem' }}>
         <ModalCloseButton />
-        <MagicFormBuilderWizardProvider>
+        <MagicFormBuilderWizardProvider onClose={onClose}>
           <MagicFormBuilderModalContent onClose={onClose} />
         </MagicFormBuilderWizardProvider>
       </ModalContent>

diff --git a/...n-form/create/builder-and-design/MagicFormBuilderModal/MagicFormBuilderWizardProvider.tsx b/...n-form/create/builder-and-design/MagicFormBuilderModal/MagicFormBuilderWizardProvider.tsx
@@ -1,11 +1,16 @@
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
+import { useQueryClient } from 'react-query'
+import { useParams } from 'react-router-dom'
 import { useFeatureIsOn } from '@growthbook/growthbook-react'
 
 import { featureFlags } from '~shared/constants'
 import { MagicFormBuilderMode } from '~shared/types'
 
+import { useToast } from '~hooks/useToast'
+
 import { useAssistanceMutations } from '~features/admin-form/assistance/mutations'
+import { adminFormKeys } from '~features/admin-form/common/queries'
 
 import {
   MagicFormBuilderFlowStates,
@@ -43,64 +48,111 @@ export const useMagicFormBuilderWizardProvider = () => {
   }
 }
 
-const useMagicFormBuilderWizardContext =
-  (): MagicFormBuilderWizardContextReturn => {
-    const { formMethods, currentStep, direction, setCurrentStep } =
-      useMagicFormBuilderWizardProvider()
+const useMagicFormBuilderWizardContext = (
+  onClose: () => void,
+): MagicFormBuilderWizardContextReturn => {
+  const { formMethods, currentStep, direction, setCurrentStep } =
+    useMagicFormBuilderWizardProvider()
 
-    const { handleSubmit } = formMethods
+  const { formId } = useParams()
+  console.log('form id', formId)
+  console.log('onclose 2: ', onClose)
 
-    const { createFieldsFromPromptMutation, createFieldsFromPdfMutation } =
-      useAssistanceMutations()
+  if (!formId) {
+    throw new Error('Form ID is required')
+  }
 
-    const handleDetailsSubmit = handleSubmit((inputs) => {
-      if (currentStep === MagicFormBuilderFlowStates.Landing) {
-        if (inputs.magicFormBuilderMode === MagicFormBuilderMode.Pdf) {
-          setCurrentStep([MagicFormBuilderFlowStates.PdfDetails, 1])
-        }
-        if (inputs.magicFormBuilderMode === MagicFormBuilderMode.Prompt) {
-          setCurrentStep([MagicFormBuilderFlowStates.PromptDetails, 1])
-        }
-      }
+  const { handleSubmit } = formMethods
 
-      if (currentStep === MagicFormBuilderFlowStates.PdfDetails) {
-        createFieldsFromPdfMutation.mutate(inputs.pdfFileText)
-      }
+  const { createFieldsFromPromptMutation, createFieldsFromPdfMutation } =
+    useAssistanceMutations()
+  const toast = useToast({ status: 'success', isClosable: true })
+
+  const queryClient = useQueryClient()
+  console.log(queryClient)
 
-      if (currentStep === MagicFormBuilderFlowStates.PromptDetails) {
-        createFieldsFromPromptMutation.mutate(inputs.prompt)
+  const handleDetailsSubmit = handleSubmit((inputs) => {
+    if (currentStep === MagicFormBuilderFlowStates.Landing) {
+      if (inputs.magicFormBuilderMode === MagicFormBuilderMode.Pdf) {
+        setCurrentStep([MagicFormBuilderFlowStates.PdfDetails, 1])
       }
-    })
-
-    const handleBack = () => {
-      if (
-        currentStep === MagicFormBuilderFlowStates.PdfDetails ||
-        currentStep === MagicFormBuilderFlowStates.PromptDetails
-      ) {
-        setCurrentStep([MagicFormBuilderFlowStates.Landing, -1])
+      if (inputs.magicFormBuilderMode === MagicFormBuilderMode.Prompt) {
+        setCurrentStep([MagicFormBuilderFlowStates.PromptDetails, 1])
       }
     }
 
-    return {
-      isFetching: false,
-      isLoading:
-        createFieldsFromPdfMutation.isLoading ||
-        createFieldsFromPromptMutation.isLoading,
-      currentStep,
-      direction,
-      formMethods,
-      handleDetailsSubmit,
-      handleBack,
-      modalHeader: 'Build your form with AI or PDF',
+    if (currentStep === MagicFormBuilderFlowStates.PdfDetails) {
+      createFieldsFromPdfMutation.mutate(inputs.pdfFileText, {
+        onSuccess: () => {
+          queryClient.invalidateQueries(adminFormKeys.id(formId))
+          onClose()
+          toast({
+            description: 'Successfully created form',
+          })
+        },
+        onError: () => {
+          toast({
+            description: 'Error creating form. Please try again.',
+            status: 'warning',
+          })
+        },
+      })
     }
+
+    if (currentStep === MagicFormBuilderFlowStates.PromptDetails) {
+      createFieldsFromPromptMutation.mutate(inputs.prompt, {
+        onSuccess: () => {
+          console.log(queryClient)
+          queryClient.invalidateQueries(adminFormKeys.id(formId))
+          console.log('onclose 3: ', onClose)
+          onClose()
+          toast({
+            description: 'Successfully created form',
+          })
+          console.log('onSuccess')
+        },
+        onError: () => {
+          toast({
+            description: 'Error creating form.',
+            status: 'warning',
+          })
+        },
+      })
+    }
+  })
+
+  const handleBack = () => {
+    if (
+      currentStep === MagicFormBuilderFlowStates.PdfDetails ||
+      currentStep === MagicFormBuilderFlowStates.PromptDetails
+    ) {
+      setCurrentStep([MagicFormBuilderFlowStates.Landing, -1])
+    }
+  }
+
+  return {
+    isFetching: false,
+    isLoading:
+      createFieldsFromPdfMutation.isLoading ||
+      createFieldsFromPromptMutation.isLoading,
+    currentStep,
+    direction,
+    formMethods,
+    handleDetailsSubmit,
+    handleBack,
+    modalHeader: 'Build your form with AI or PDF',
   }
+}
 
 export const MagicFormBuilderWizardProvider = ({
   children,
+  onClose,
 }: {
   children: React.ReactNode
+  onClose: () => void
 }): JSX.Element => {
-  const values = useMagicFormBuilderWizardContext()
+  console.log('onclose: ', onClose)
+  const values = useMagicFormBuilderWizardContext(onClose)
   return (
     <MagicFormBuilderWizardContext.Provider value={values}>
       {children}