minor revision done, ready for another review

bcgov · Jun 22, 2024 · 12f0263 · 12f0263
1 parent 7fd80df
commit 12f0263
Show file tree

Hide file tree

Showing 9 changed files with 56 additions and 60 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -29,7 +29,6 @@
     "bootstrap": "^5.3.3",
     "eslint-config-airbnb-base": "^15.0.0",
     "formik": "^2.4.6",
-    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",
     "react-dom": "^18.2.0",

diff --git a/frontend/src/Commons/Button/Button.style.ts b/frontend/src/Commons/Button/Button.style.ts
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 import * as tokens from '@bcgov/design-tokens/js';
 import screenSizes from '@Constants/ScreenSize';
+import ComponentText from '@Constants/ComponentText';
 import getButtonSize from './ButtonSizeConstant';
 
 type StyledButtonProps = {
@@ -17,7 +18,7 @@ const StyledButton = styled.button<StyledButtonProps>`
   max-height: 42px;
   height: 100%;
   width: 100%;
-  max-width: ${(props) => getButtonSize(props.size, false)};
+  max-width: ${(props) => getButtonSize(props.size, ComponentText.ISMOBILE)};
   background-color: ${(props) => (props.actions === 'primary'
     ? tokens.surfaceColorPrimaryButtonDefault
     : tokens.surfaceColorSecondaryButtonDefault)};
@@ -35,7 +36,7 @@ const StyledButton = styled.button<StyledButtonProps>`
   }
 
   @media (min-width: ${screenSizes.desktop}) {
-    max-width: ${(props) => getButtonSize(props.size, true)};
+    max-width: ${(props) => getButtonSize(props.size, ComponentText.ISDESKTOP)};
   }
 `;
 

diff --git a/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsAndSoil.tsx b/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsAndSoil.tsx
@@ -32,15 +32,14 @@ const FieldsAndSoilComponent: React.FC<InputModuleProps> = ({ farmDetails, updat
   // Only triggered once, it would show list and persists.
   const [isSubmitted, setSubmitted] = useState<boolean>(false);
   // Would trigger when new field button is clicked.
-  const [fieldAdd, setFieldAdd] = useState<boolean>(false);
-
+  const [isFieldAdded, setFieldAdd] = useState<boolean>(false);
   const validationSchema = Yup.object().shape({
     FieldName: Yup.string().max(24).required('Required'),
     Area: Yup.number()
       .min(1, 'Area should be higher than 1')
       .max(100, 'Area should be lower than 100')
       .required('Required'),
-    Comments: Yup.string().max(200, 'Comments should be lower than 200'),
+    Comments: Yup.string().max(200, 'Comments should be lower than 200 chars'),
   });
   /**
    *
@@ -53,18 +52,12 @@ const FieldsAndSoilComponent: React.FC<InputModuleProps> = ({ farmDetails, updat
     setTimeout(() => {
       const farmInfo: FarmDetailsInterface = { ...farmDetails };
       farmInfo.Fields.push({
-        id: fieldIndex,
+        Id: fieldIndex,
         FieldName: values.FieldName,
         Area: values.Area,
         Comments: values.Comments,
       });
-      const newInitialFieldValues = {
-        id: fieldIndex,
-        FieldName: '',
-        Area: 0,
-        Comments: '',
-      };
-      setInitialFieldValues(newInitialFieldValues);
+      setInitialFieldValues(farmInfo.Fields[0]);
       setFieldsInfo(farmInfo);
       setFieldIndex((prevIndex) => prevIndex + 1);
       setSubmitted(true);
@@ -91,15 +84,15 @@ const FieldsAndSoilComponent: React.FC<InputModuleProps> = ({ farmDetails, updat
             farmDetails={farmDetails}
             updateFarmDetails={updateFarmDetails}
           />
-          {!fieldAdd && (
+          { !isFieldAdded && (
             <FieldsButtonComponent
               addNewField={addNewField}
               submitFarmInfo={submitFarmInfo}
             />
           )}
         </>
       )}
-      {(fieldAdd || !isSubmitted) && (
+      {(isFieldAdded || !isSubmitted) && (
         <Formik
           initialValues={initialFieldValues}
           validationSchema={validationSchema}

diff --git a/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsButtonComponent.tsx b/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsButtonComponent.tsx
@@ -3,15 +3,14 @@ import Button from '@Commons/Button/Button';
 import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPlus } from '@fortawesome/free-solid-svg-icons';
-import PropTypes from 'prop-types';
 import {
   StyledButtonGroupContainer,
   StyledButtonContainer,
   StyledAddCancelButtonContainer,
   StyledNewFieldButtonContainer,
 } from './FieldsButtonComponent.styles';
 
-interface ButtonComponentProps {
+type ButtonComponentProps = {
   addNewField: () => void;
   submitFarmInfo: () => void;
 }
@@ -25,7 +24,7 @@ const FieldsButtonComponent: React.FC<ButtonComponentProps> = ({ addNewField, su
           disabled={false}
           radius="50px"
           actions="secondary"
-          text={ComponentText.NEWFIELD}
+          text={ComponentText.ADD_FIELD}
           handleClick={addNewField}
         >
           <FontAwesomeIcon icon={faPlus} />
@@ -54,9 +53,5 @@ const FieldsButtonComponent: React.FC<ButtonComponentProps> = ({ addNewField, su
     </StyledAddCancelButtonContainer>
   </StyledButtonGroupContainer>
 );
-// Props Validation
-FieldsButtonComponent.propTypes = {
-  addNewField: PropTypes.func.isRequired,
-  submitFarmInfo: PropTypes.func.isRequired,
-};
+
 export default FieldsButtonComponent;
diff --git a/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsListComponent.tsx b/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsListComponent.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import InputModuleProps from 'src/Interface/InputModuleProps';
 import { faPencil, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import FieldDetailInterface from 'src/Interface/FieldDetailsInterface';
 import {
   StyledListContainer,
   StyledListItem,
@@ -12,40 +13,45 @@ import {
   StyledDivider,
 } from './FieldsListComponent.styles';
 
-const FieldsListComponent: React.FC<InputModuleProps> = ({ farmDetails }) => (
-  <StyledFieldInfoList>
-    {farmDetails.Fields.slice(1).map((fields) => (
-      <div key={fields.id}>
-        <StyledListContainer>
-          <StyledListItem width="30%">
-            <h2>Field Name</h2>
-            <p key={fields.FieldName}>{fields.FieldName}</p>
-          </StyledListItem>
-          <StyledListItem width="20%">
-            <h2>Area</h2>
-            <p key={fields.Area}>{fields.Area}</p>
-          </StyledListItem>
-          <StyledCommentContainerDesktop>
-            <StyledListItem width="90%">
+const FieldsListComponent: React.FC<InputModuleProps> = ({ farmDetails }) => {
+  const fieldCount = farmDetails.Fields.length;
+  return (
+    <StyledFieldInfoList>
+      {farmDetails.Fields.slice(1).map((fields: FieldDetailInterface) => (
+        <div key={fields.Id}>
+          <StyledListContainer>
+            <StyledListItem width="30%">
+              <h2>Field Name</h2>
+              <p key={fields.FieldName}>{fields.FieldName}</p>
+            </StyledListItem>
+            <StyledListItem width="20%">
+              <h2>Area</h2>
+              <p key={fields.Area}>{fields.Area}</p>
+            </StyledListItem>
+            <StyledCommentContainerDesktop>
+              <StyledListItem width="90%">
+                <h2>Field Comments (optional)</h2>
+                <p key={fields.Comments}>{fields.Comments}</p>
+              </StyledListItem>
+            </StyledCommentContainerDesktop>
+            <StyledFontAwesomeContainer>
+              <FontAwesomeIcon icon={faPencil} />
+              <FontAwesomeIcon icon={faTrash} />
+            </StyledFontAwesomeContainer>
+          </StyledListContainer>
+          <StyledCommentContainerMobile>
+            <StyledListItem width="100%">
               <h2>Field Comments (optional)</h2>
               <p key={fields.Comments}>{fields.Comments}</p>
             </StyledListItem>
-          </StyledCommentContainerDesktop>
-          <StyledFontAwesomeContainer>
-            <FontAwesomeIcon icon={faPencil} />
-            <FontAwesomeIcon icon={faTrash} />
-          </StyledFontAwesomeContainer>
-        </StyledListContainer>
-        <StyledCommentContainerMobile>
-          <StyledListItem width="100%">
-            <h2>Field Comments (optional)</h2>
-            <p key={fields.Comments}>{fields.Comments}</p>
-          </StyledListItem>
-        </StyledCommentContainerMobile>
-        <StyledDivider />
-      </div>
-    ))}
-  </StyledFieldInfoList>
-);
+          </StyledCommentContainerMobile>
+          {fieldCount > 2 && (
+            <StyledDivider />
+          )}
+        </div>
+      ))}
+    </StyledFieldInfoList>
+  );
+};
 
 export default FieldsListComponent;
diff --git a/frontend/src/Constants/ComponentText.ts b/frontend/src/Constants/ComponentText.ts
@@ -2,8 +2,11 @@ const ComponentText = {
   NEXT: 'Next',
   ADD: 'Add',
   CANCEL: 'Cancel',
-  NEWFIELD: 'Add Field',
+  ADD_FIELD: 'Add Field',
   BACK: 'Back',
+  // For buttonSize arguments. Refer to ButtonSizeConstant.ts
+  ISDESKTOP: true,
+  ISMOBILE: false,
 };
 
 export default ComponentText;
diff --git a/frontend/src/Constants/InitialFarmDetails.ts b/frontend/src/Constants/InitialFarmDetails.ts
@@ -6,7 +6,7 @@ const initialFarmDetails: FarmDetailsInterface = {
   FarmName: '',
   FarmRegion: '',
   HasBerries: true,
-  Fields: [{ id: 0, FieldName: '', Area: 0, Comments: '' }],
+  Fields: [{ Id: 0, FieldName: '', Area: 0, Comments: '' }],
 };
 
 export default initialFarmDetails;
diff --git a/frontend/src/Interface/FieldDetailsInterface.tsx b/frontend/src/Interface/FieldDetailsInterface.tsx
@@ -6,7 +6,7 @@
  * @author @GDamaso
  */
 interface FieldDetailInterface {
-  id: number;
+  Id: number;
   FieldName: string;
   Area: number;
   Comments?: string | null;