From 12f0263fa6cb26fcecb904137ce1c20685411630 Mon Sep 17 00:00:00 2001 From: kcaparas1630 Date: Fri, 21 Jun 2024 18:30:53 -0700 Subject: [PATCH] minor revision done, ready for another review --- frontend/package-lock.json | 1 - frontend/package.json | 1 - frontend/src/Commons/Button/Button.style.ts | 5 +- .../FieldsAndSoil/FieldsAndSoil.tsx | 19 ++--- .../FieldsAndSoil/FieldsButtonComponent.tsx | 11 +-- .../FieldsAndSoil/FieldsListComponent.tsx | 70 ++++++++++--------- frontend/src/Constants/ComponentText.ts | 5 +- frontend/src/Constants/InitialFarmDetails.ts | 2 +- .../src/Interface/FieldDetailsInterface.tsx | 2 +- 9 files changed, 56 insertions(+), 60 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index b819bc9f..9bffd9cc 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -24,7 +24,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/package.json b/frontend/package.json index 0c3a5995..51010ff7 100644 --- 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 index 06365678..5cef2ba5 100644 --- 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` 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` } @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 index 90307fdf..e350c1ec 100644 --- 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 = ({ farmDetails, updat // Only triggered once, it would show list and persists. const [isSubmitted, setSubmitted] = useState(false); // Would trigger when new field button is clicked. - const [fieldAdd, setFieldAdd] = useState(false); - + const [isFieldAdded, setFieldAdd] = useState(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 = ({ 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,7 +84,7 @@ const FieldsAndSoilComponent: React.FC = ({ farmDetails, updat farmDetails={farmDetails} updateFarmDetails={updateFarmDetails} /> - {!fieldAdd && ( + { !isFieldAdded && ( = ({ farmDetails, updat )} )} - {(fieldAdd || !isSubmitted) && ( + {(isFieldAdded || !isSubmitted) && ( void; submitFarmInfo: () => void; } @@ -25,7 +24,7 @@ const FieldsButtonComponent: React.FC = ({ addNewField, su disabled={false} radius="50px" actions="secondary" - text={ComponentText.NEWFIELD} + text={ComponentText.ADD_FIELD} handleClick={addNewField} > @@ -54,9 +53,5 @@ const FieldsButtonComponent: React.FC = ({ addNewField, su ); -// 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 index d9c43f68..735bebb0 100644 --- 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 = ({ farmDetails }) => ( - - {farmDetails.Fields.slice(1).map((fields) => ( -
- - -

Field Name

-

{fields.FieldName}

- - -

Area

-

{fields.Area}

- - - +const FieldsListComponent: React.FC = ({ farmDetails }) => { + const fieldCount = farmDetails.Fields.length; + return ( + + {farmDetails.Fields.slice(1).map((fields: FieldDetailInterface) => ( +
+ + +

Field Name

+

{fields.FieldName}

+ + +

Area

+

{fields.Area}

+ + + +

Field Comments (optional)

+

{fields.Comments}

+ + + + + + + + +

Field Comments (optional)

{fields.Comments}

 - - - - - - - - -

Field Comments (optional)

-

{fields.Comments}

- - - -
- ))} - -); + + {fieldCount > 2 && ( + + )} +
+ ))} + + ); +}; export default FieldsListComponent; diff --git a/frontend/src/Constants/ComponentText.ts b/frontend/src/Constants/ComponentText.ts index 842fcafa..fdb14721 100644 --- 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 index e6a1f64e..ebeaa16e 100644 --- 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 index 2a06e7ce..f4a9db80 100644 --- 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;