diff --git a/frontend/src/features/admin-form/assistance/mutations.ts b/frontend/src/features/admin-form/assistance/mutations.ts index 3981c9f429..b9423fa91e 100644 --- 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/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FormBuilder.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FormBuilder.tsx index 8cefc35e7d..edb47afa16 100644 --- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FormBuilder.tsx +++ b/frontend/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({ onClose: () => undefined }) + export const FormBuilder = ({ placeholderProps, ...props @@ -106,10 +112,14 @@ export const FormBuilder = ({ return ( <> - + + +