fix: form builder drag and drop fieldId error

opengovsg · Jun 29, 2022 · 191f7ef · 191f7ef
1 parent 0231fb1
commit 191f7ef
Showing 1 changed file with 32 additions and 26 deletions.
diff --git a/.../admin-form/create/builder-and-design/BuilderAndDesignContent/BuilderAndDesignContent.tsx b/.../admin-form/create/builder-and-design/BuilderAndDesignContent/BuilderAndDesignContent.tsx
@@ -29,35 +29,16 @@ import BuilderAndDesignPlaceholder from './BuilderAndDesignPlaceholder'
 import { BuilderFields } from './BuilderFields'
 import { useBuilderFields } from './useBuilderFields'
 
-interface BuilderAndDesignContentProps {
+interface FormBuilderProps {
   placeholderProps: DndPlaceholderProps
 }
 
-export const BuilderAndDesignContent = ({
-  placeholderProps,
-}: BuilderAndDesignContentProps): JSX.Element => {
+const FormBuilder = ({ placeholderProps }: FormBuilderProps): JSX.Element => {
   const { builderFields } = useBuilderFields()
-  const { data: form } = useAdminForm()
   const { handleBuilderClick } = useCreatePageSidebar()
-  const {
-    stateData,
-    setEditEndPage,
-    setToInactive: setFieldsToInactive,
-  } = useBuilderAndDesignStore(
-    useCallback(
-      (state) => ({
-        stateData: stateDataSelector(state),
-        setToInactive: setToInactiveSelector(state),
-        setEditEndPage: setToEditEndPageSelector(state),
-      }),
-      [],
-    ),
-  )
-  const endPageData = useEndPageBuilderStore(endPageDataSelector)
+  const setEditEndPage = useBuilderAndDesignStore(setToEditEndPageSelector)
 
-  useEffect(() => setFieldsToInactive, [setFieldsToInactive])
-
-  const FormBuilder = (): JSX.Element => (
+  return (
     <Flex
       m={{ base: 0, md: '2rem' }}
       mb={0}
@@ -118,8 +99,13 @@ export const BuilderAndDesignContent = ({
       </Flex>
     </Flex>
   )
+}
 
-  const EndPageView = (): JSX.Element => (
+const EndPageView = (): JSX.Element => {
+  const { data: form } = useAdminForm()
+  const endPageData = useEndPageBuilderStore(endPageDataSelector)
+
+  return (
     <Flex
       m={{ base: 0, md: '2rem' }}
       mb={0}
@@ -131,7 +117,7 @@ export const BuilderAndDesignContent = ({
     >
       <Stack w="100%">
         <Flex justifyContent="center" pt="1rem" pb="0.5rem">
-          <Image src={form?.admin.agency.logo ?? ''} h="4rem" />
+          <Image src={form?.admin?.agency?.logo ?? ''} h="4rem" />
         </Flex>
         <Flex backgroundColor="primary.100" justifyContent="center">
           <ThankYouSvgr h="100%" pt="2.5rem" />
@@ -166,14 +152,34 @@ export const BuilderAndDesignContent = ({
       </Stack>
     </Flex>
   )
+}
+interface BuilderAndDesignContentProps {
+  placeholderProps: DndPlaceholderProps
+}
+
+export const BuilderAndDesignContent = ({
+  placeholderProps,
+}: BuilderAndDesignContentProps): JSX.Element => {
+  const { stateData, setToInactive: setFieldsToInactive } =
+    useBuilderAndDesignStore(
+      useCallback(
+        (state) => ({
+          stateData: stateDataSelector(state),
+          setToInactive: setToInactiveSelector(state),
+        }),
+        [],
+      ),
+    )
+
+  useEffect(() => setFieldsToInactive, [setFieldsToInactive])
 
   return (
     <>
       <Flex flex={1} bg="neutral.200" overflow="auto">
         {stateData.state === BuildFieldState.EditingEndPage ? (
           <EndPageView />
         ) : (
-          <FormBuilder />
+          <FormBuilder placeholderProps={placeholderProps} />
         )}
       </Flex>
     </>