switched button types for add and next

bcgov · Jun 21, 2024 · 401baa1 · 401baa1
1 parent edd5bd8
commit 401baa1
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 65 deletions.
diff --git a/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsAndSoil.tsx b/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsAndSoil.tsx
@@ -46,26 +46,26 @@ const FieldsAndSoilComponent: React.FC<InputModuleProps> = ({ farmDetails, updat
     Comments: Yup.string().max(200),
   });
   const initialFieldValues = initialFarmDetails.Fields[fieldIndex];
-  const submitData = () => {
-    const farmInfo: FarmDetailsInterface = { ...farmDetails };
-    updateFarmDetails(farmInfo);
-    console.log('data submitted');
-    setFieldIndex((prevIndex) => prevIndex + 1);
-    setSubmitted(true);
-    setFieldAdd(false);
+  const addFieldData = (
+    values: FieldDetailInterface,
+  ): void => {
+    setTimeout(() => {
+      const farmInfo: FarmDetailsInterface = { ...farmDetails };
+      farmInfo.Fields.push({
+        id: fieldIndex,
+        FieldName: values.FieldName,
+        Area: values.Area,
+        Comments: values.Comments,
+      });
+      setFieldsInfo(farmInfo);
+      setFieldIndex((prevIndex) => prevIndex + 1);
+      setSubmitted(true);
+      setFieldAdd(false);
+    }, 400);
   };
-  const addFarmInfo = (values: FieldDetailInterface) => {
+  const submitFarmInfo = () => {
     const farmInfo: FarmDetailsInterface = { ...farmDetails };
-    farmInfo.Fields.push({
-      id: fieldIndex,
-      FieldName: values.FieldName,
-      Area: values.Area,
-      Comments: values.Comments,
-    });
-    setFieldsInfo(farmInfo);
-    setFieldIndex((prevIndex) => prevIndex + 1);
-    setSubmitted(true);
-    setFieldAdd(false);
+    updateFarmDetails(farmInfo);
   };
 
   const addNewField = () => {
@@ -135,11 +135,11 @@ const FieldsAndSoilComponent: React.FC<InputModuleProps> = ({ farmDetails, updat
                 </StyledButtonContainer>
                 <StyledButtonContainer>
                   <Button
-                    type="submit"
+                    type="button"
                     size="sm"
                     disabled={false}
                     text={ComponentText.NEXT}
-                    handleClick={submitData}
+                    handleClick={submitFarmInfo}
                   />
                 </StyledButtonContainer>
               </StyledAddCancelButtonContainer>
@@ -151,54 +151,51 @@ const FieldsAndSoilComponent: React.FC<InputModuleProps> = ({ farmDetails, updat
         <Formik
           initialValues={initialFieldValues}
           validationSchema={validationSchema}
-          onSubmit={submitData}
+          onSubmit={addFieldData}
         >
-          {({ values }) => (
-            <Form>
-              <StyledFarmInfo>
-                <div id="inputContainer">
-                  <CustomField
-                    label="Field name"
-                    id="FieldName"
-                    name="FieldName"
-                    type="text"
-                  />
-                  <CustomField
-                    label="Area"
-                    id="Area"
-                    name="Area"
-                    type="number"
-                    width="20%"
+          <Form>
+            <StyledFarmInfo>
+              <div id="inputContainer">
+                <CustomField
+                  label="Field name"
+                  id="FieldName"
+                  name="FieldName"
+                  type="text"
+                />
+                <CustomField
+                  label="Area"
+                  id="Area"
+                  name="Area"
+                  type="number"
+                  width="20%"
+                />
+              </div>
+              <StyledTextAreaContainer>
+                <CustomTextArea
+                  name="Comments"
+                  id="Comments"
+                  label="Comments (optional)"
+                  placeholder="e.g., poor drainage in southwest corner (no need to specify crop here)"
+                  width="50%"
+                />
+                <StyledButtonGroupContainer>
+                  <Button
+                    type="reset"
+                    size="sm"
+                    disabled={false}
+                    actions="secondary"
+                    text={ComponentText.CANCEL}
                   />
-                </div>
-                <StyledTextAreaContainer>
-                  <CustomTextArea
-                    name="Comments"
-                    id="Comments"
-                    label="Comments (optional)"
-                    placeholder="e.g., poor drainage in southwest corner (no need to specify crop here)"
-                    width="50%"
+                  <Button
+                    type="submit"
+                    size="sm"
+                    disabled={false}
+                    text={ComponentText.ADD}
                   />
-                  <StyledButtonGroupContainer>
-                    <Button
-                      type="reset"
-                      size="sm"
-                      disabled={false}
-                      actions="secondary"
-                      text={ComponentText.CANCEL}
-                    />
-                    <Button
-                      type="button"
-                      size="sm"
-                      disabled={false}
-                      text={ComponentText.ADD}
-                      handleClick={() => addFarmInfo(values)}
-                    />
-                  </StyledButtonGroupContainer>
-                </StyledTextAreaContainer>
-              </StyledFarmInfo>
-            </Form>
-          )}
+                </StyledButtonGroupContainer>
+              </StyledTextAreaContainer>
+            </StyledFarmInfo>
+          </Form>
         </Formik>
       )}
     </>

diff --git a/frontend/src/Commons/MainPageHeader/MainPageHeader.styles.ts b/frontend/src/Commons/MainPageHeader/MainPageHeader.styles.ts
@@ -15,6 +15,7 @@ const StyledHeader = styled.header`
   background-color: ${tokens.themeBlue100};
   position: fixed;
   top: 0;
+  z-index: 1;
   color: ${tokens.typographyColorPrimaryInvert};
   border-bottom: ${tokens.layoutBorderWidthMedium} solid ${tokens.themeGold100};
   @media (min-width: ${screenSizes.tablet}) and (max-width: ${screenSizes.desktop}) {