chore: Bb 330 update back button to match new next button behaviour (#…

…331)

* Update Back button behaviour

* Cleanup, changed Name to LocalStorageName

* Lint

frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrients.tsx

@@ -450,7 +450,7 @@ const CalculateNutrientsComponent: FC<InputModuleProps> = ({
 const CalculateNutrients: InputModuleInterface = {
   InputModuleComponent: CalculateNutrientsComponent,
   id: CALCULATE_NUTRIENTS,
-  name: { long: 'Calculation', short: 'Calculation' },
+  name: { long: 'Calculate Nutrients', short: 'Calculation' },
   faIcon: faCalculator,
   status: 'inactive',
   enable: false,

frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsButtonGroup.tsx

@@ -8,9 +8,10 @@ import {
   StyledButtonContainer,
   StyledAddCancelButtonContainer,
 } from '@Commons/Button/FieldButtonGroup.styles';
+import { CALCULATE_NUTRIENTS } from '@Constants/ModuleIDs';
 
 type ButtonComponentProps = {
-  handleFormState(cmd: string, toggle?: boolean, status?: string): void;
+  handleFormState(cmd: string, toggle?: boolean, status?: string, moveBackModuleID?: string): void;
 };
 
 const CalculationButtonGroup: FC<ButtonComponentProps> = ({ handleFormState }) => (
@@ -23,7 +24,9 @@ const CalculationButtonGroup: FC<ButtonComponentProps> = ({ handleFormState }) =
           disabled={false}
           actions="secondary"
           text={ComponentText.BACK}
-          handleClick={() => handleFormState(CmdOptions.BACKWARDS)}
+          handleClick={() =>
+            handleFormState(CmdOptions.BACKWARDS, undefined, undefined, CALCULATE_NUTRIENTS)
+          }
         />
       </StyledButtonContainer>
       <StyledButtonContainer>

frontend/src/Commons/Forms/InputModules/Crops/CropsButtonGroup.tsx

@@ -6,10 +6,11 @@ import {
   StyledButtonContainer,
   StyledAddCancelButtonContainer,
 } from '@Commons/Button/FieldButtonGroup.styles';
+import { CROPS_INFORMATION } from '@Constants/ModuleIDs';
 
 type CropsButtonGroupProps = {
   submitFarmInfo: () => void;
-  handleFormState: (cmd: string, toggle?: boolean, status?: string) => void;
+  handleFormState(cmd: string, toggle?: boolean, status?: string, moveBackModuleID?: string): void;
   buttonText: {
     back: string;
     next: string;
@@ -32,7 +33,9 @@ const CropsButtonGroup: React.FC<CropsButtonGroupProps> = ({
           disabled={!disabled}
           actions="secondary"
           text={buttonText.back}
-          handleClick={() => handleFormState(CmdOptions.BACKWARDS)}
+          handleClick={() =>
+            handleFormState(CmdOptions.BACKWARDS, undefined, undefined, CROPS_INFORMATION)
+          }
         />
       </StyledButtonContainer>
       <StyledButtonContainer>

frontend/src/Commons/Forms/InputModules/Fertilizers/Fertilizers.tsx

@@ -1,7 +1,7 @@
 import { FC, useState } from 'react';
 import { faCow } from '@fortawesome/free-solid-svg-icons';
 import InputModuleInterface from '@Interface/InputModuleinterface';
-import { FERTILIZERS_INFORMATION } from '@Constants/ModuleIDs';
+import { FERTILIZERS } from '@Constants/ModuleIDs';
 import InputModuleProps from '@Interface/InputModuleProps';
 import initialFarmDetails from '@Constants/InitialFarmDetails';
 import * as Yup from 'yup';
@@ -216,7 +216,7 @@ const FertilizersInfo: FC<InputModuleProps> = ({
 
 const FertilizersInfoForm: InputModuleInterface = {
   InputModuleComponent: FertilizersInfo,
-  id: FERTILIZERS_INFORMATION,
+  id: FERTILIZERS,
   name: { long: 'Fertilizer', short: 'Fertilizer' },
   faIcon: faCow,
   status: 'inactive',

frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersButtonComponent.tsx

@@ -12,10 +12,11 @@ import {
   StyledNewFieldButtonContainer,
   StyledNewFieldButtonController,
 } from '@Commons/Button/FieldButtonGroup.styles';
+import { FERTILIZERS } from '@Constants/ModuleIDs';
 
 type ButtonComponentProps = {
   addNewFertilizer: () => void;
-  handleFormState(cmd: string, toggle?: boolean, status?: string): void;
+  handleFormState(cmd: string, toggle?: boolean, status?: string, moveBackModuleID?: string): void;
 };
 
 const FertilizersButtonComponent: FC<ButtonComponentProps> = ({
@@ -46,7 +47,9 @@ const FertilizersButtonComponent: FC<ButtonComponentProps> = ({
           disabled={false}
           actions="secondary"
           text={ComponentText.BACK}
-          handleClick={() => handleFormState(CmdOptions.BACKWARDS)}
+          handleClick={() =>
+            handleFormState(CmdOptions.BACKWARDS, undefined, undefined, FERTILIZERS)
+          }
         />
       </StyledButtonContainer>
       <StyledButtonContainer>

frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsButtonComponent.tsx

@@ -12,11 +12,12 @@ import {
   StyledNewFieldButtonContainer,
   StyledNewFieldButtonController,
 } from '@Commons/Button/FieldButtonGroup.styles';
+import { FIELDS_AND_SOIL } from '@Constants/ModuleIDs';
 
 type ButtonComponentProps = {
   addNewField: () => void;
   updateFarmDetails: (newFarmDetails: FarmDetailsInterface) => void;
-  handleFormState(cmd: string, toggle?: boolean, status?: string): void;
+  handleFormState(cmd: string, toggle?: boolean, status?: string, moveBackModuleID?: string): void;
   farmDetails: FarmDetailsInterface;
 };
 
@@ -50,7 +51,9 @@ const FieldsButtonComponent: FC<ButtonComponentProps> = ({
           disabled={false}
           actions="secondary"
           text={ComponentText.BACK}
-          handleClick={() => handleFormState(CmdOptions.BACKWARDS)}
+          handleClick={() =>
+            handleFormState(CmdOptions.BACKWARDS, undefined, undefined, FIELDS_AND_SOIL)
+          }
         />
       </StyledButtonContainer>
       <StyledButtonContainer>

frontend/src/Constants/Names.ts → frontend/src/Constants/LocalStorageNames.ts

@@ -1,8 +1,8 @@
-const Names = {
+const LocalStorageNames = {
   FARM_DETAILS: 'farmDetails',
   FERTILIZER_DETAILS: 'fertilizersDetails',
   FORM_STATES: 'formStates',
   CURRENT_FORM: 'currForm',
 };
 
-export default Names;
+export default LocalStorageNames;

frontend/src/Constants/ModuleIDs.ts

@@ -1,5 +1,5 @@
 export const FARM_INFORMATION = 'FarmInformation';
 export const FIELDS_AND_SOIL = 'FieldsAndSoil';
 export const CROPS_INFORMATION = 'Crops';
-export const FERTILIZERS_INFORMATION = 'Fertilizers';
+export const FERTILIZERS = 'Fertilizers';
 export const CALCULATE_NUTRIENTS = 'CalculateNutrients';

frontend/src/Utils/getLocalDetails.ts

@@ -1,9 +1,9 @@
-import Names from '@Constants/Names';
+import LoacalStorageNames from '@Constants/LocalStorageNames';
 import FarmDetailsInterface from '@Interface/FarmDetailsInterface';
 import FieldDetailInterface from '@Interface/FieldDetailsInterface';
 
 const getLocalDetails = () => {
-  const nmpString = localStorage.getItem(Names.FARM_DETAILS);
+  const nmpString = localStorage.getItem(LoacalStorageNames.FARM_DETAILS);
   try {
     if (nmpString) return JSON.parse(nmpString);
   } catch (err) {

frontend/src/Utils/getLocalFertilizers.ts

@@ -1,8 +1,8 @@
-import Names from '@Constants/Names';
+import LoacalStorageNames from '@Constants/LocalStorageNames';
 import FertilizerInterface from '@Interface/FertilizerInterface';
 
 const getLocalFertilizers = () => {
-  const fertString = localStorage.getItem(Names.FERTILIZER_DETAILS);
+  const fertString = localStorage.getItem(LoacalStorageNames.FERTILIZER_DETAILS);
   try {
     if (fertString) {
       const parsedFertString = JSON.parse(fertString);

frontend/src/Utils/getLocalFormStates.ts

@@ -1,8 +1,8 @@
-import Names from '@Constants/Names';
+import LoacalStorageNames from '@Constants/LocalStorageNames';
 import InputModuleInterface from '@Interface/InputModuleinterface';
 
 const getLocalFormStates = () => {
-  const stateStr = localStorage.getItem(Names.FORM_STATES);
+  const stateStr = localStorage.getItem(LoacalStorageNames.FORM_STATES);
   try {
     if (stateStr) return JSON.parse(stateStr);
   } catch (err) {

frontend/src/Views/Export/ExportPage.tsx

@@ -8,12 +8,12 @@ import MainPageHeader from '@Commons/MainPageHeader/MainPageHeader.tsx';
 import MainPageFooter from '@Commons/MainPageFooter/MainPageFooter.tsx';
 import { FC } from 'react';
 import CustomLink from '@Commons/CustomLink/CustomLink.tsx';
-import Names from '@Constants/Names.ts';
+import LoacalStorageNames from '@Constants/LocalStorageNames.ts';
 import { StyledContent, StyledLandingContainer } from './ExportPage.styles.ts';
 
 const ExportPage: FC = () => {
   const downloadFile = () => {
-    const nmpString = localStorage.getItem(Names.FARM_DETAILS);
+    const nmpString = localStorage.getItem(LoacalStorageNames.FARM_DETAILS);
     const nmpJSON = nmpString && JSON.parse(nmpString);
     const nmpBlob = nmpString && new Blob([nmpString], { type: 'application/json' });
     const nmpUrl = nmpBlob && URL.createObjectURL(nmpBlob);

frontend/src/Views/LandingPage/LandingPage.tsx

@@ -1,6 +1,7 @@
 import Button from '@Commons/Button/Button.tsx';
 import { templateNMP } from '@Constants/templateNMP.ts';
-import Names from '@Constants/Names.ts';
+
+import LoacalStorageNames from '@Constants/LocalStorageNames.ts';
 import {
   StyledContent,
   StyledButtonGroup,
@@ -31,15 +32,15 @@ const LandingPage = () => {
     fr.onload = () => {
       const data = fr.result;
       // data is not a JSON yet at this point. It's still .nmp
-      if (data) localStorage.setItem(Names.FARM_DETAILS, data.toString());
+      if (data) localStorage.setItem(LoacalStorageNames.FARM_DETAILS, data.toString());
     };
     window.location.href = '/main';
   };
 
   const newCalcHandler = () => {
     localStorage.clear();
     // Our template is a JSON .nmp compatible object
-    localStorage.setItem(Names.FARM_DETAILS, JSON.stringify(templateNMP));
+    localStorage.setItem(LoacalStorageNames.FARM_DETAILS, JSON.stringify(templateNMP));
     window.location.href = '/main';
   };
 

frontend/src/Views/MainPage/MainPage.tsx

@@ -11,7 +11,6 @@ import NmpInterface from '@Interface/NmpInterface';
 import initialFarmDetails from '@Constants/InitialFarmDetails';
 import { ACTIVE, COMPLETED, WARNING } from '@Constants/ModuleStatus';
 import CmdOptions from '@Constants/CmdOptions';
-import Names from '@Constants/Names';
 import convertToNMP from '@Utils/convertToNMP';
 import FertilizerInterface from '@Interface/FertilizerInterface';
 import { getLocalDetails, loadFarmDetails } from '@Utils/getLocalDetails';
@@ -20,6 +19,7 @@ import InputModuleInterface from '@Interface/InputModuleinterface';
 import FormModule from '@Commons/Forms/FormModule/FormModule';
 import { loadFertDetails } from '@Utils/getLocalFertilizers';
 import * as InputModules from '@Commons/Forms/InputModules/index';
+import LocalStorageNames from '@Constants/LocalStorageNames';
 import { StyledMain, StyledMainContainer } from './MainPage.styles';
 
 const initialFertilizersDetails: FertilizerInterface[] = loadFertDetails();
@@ -44,7 +44,7 @@ const MainPage: FC = () => {
     loadLocalFormStates(mockBerriesWorkflow),
   );
   const [currForm, setCurrForm] = useState(
-    parseInt(localStorage.getItem(Names.CURRENT_FORM) ?? '0', 10),
+    parseInt(localStorage.getItem(LocalStorageNames.CURRENT_FORM) ?? '0', 10),
   );
   const [toggleEnabled, setToggleEnabled] = useState<boolean>(true);
   const [isHeaderVisible, setIsHeaderVisible] = useState<boolean>(true);
@@ -68,10 +68,13 @@ const MainPage: FC = () => {
 
   useEffect(() => {
     try {
-      if (localDetails) localStorage.setItem(Names.FARM_DETAILS, JSON.stringify(localDetails));
-      if (fertDetails) localStorage.setItem(Names.FERTILIZER_DETAILS, JSON.stringify(fertDetails));
-      if (formStates) localStorage.setItem(Names.FORM_STATES, JSON.stringify(formStates));
-      if (currForm) localStorage.setItem(Names.CURRENT_FORM, JSON.stringify(currForm));
+      if (localDetails)
+        localStorage.setItem(LocalStorageNames.FARM_DETAILS, JSON.stringify(localDetails));
+      if (fertDetails)
+        localStorage.setItem(LocalStorageNames.FERTILIZER_DETAILS, JSON.stringify(fertDetails));
+      if (formStates)
+        localStorage.setItem(LocalStorageNames.FORM_STATES, JSON.stringify(formStates));
+      if (currForm) localStorage.setItem(LocalStorageNames.CURRENT_FORM, JSON.stringify(currForm));
     } catch (err) {
       console.error(err);
     }
@@ -87,7 +90,12 @@ const MainPage: FC = () => {
    * @param     status: string => Passed if a module status should be updated.
    *            ('active', warning', 'completed')
    */
-  const handleFormState = (cmd: string, toggle?: boolean, status?: string) => {
+  const handleFormState = (
+    cmd: string,
+    toggle?: boolean,
+    status?: string,
+    moveBackModuleID?: string,
+  ) => {
     // currModuleID can be any InputModule that's passed to this handler
     let currModuleID = formStates[currForm].id;
     // nextModuleID is the last activated InputModule, they are activated through the Next button
@@ -98,11 +106,11 @@ const MainPage: FC = () => {
 
     switch (cmd) {
       case CmdOptions.BACKWARDS:
-        if (currForm >= 0) {
+        if (currForm > 0 && formStates[currForm].id === moveBackModuleID) {
           nextModuleID = formStates[currForm - 1].id;
           setCurrForm((prevForm) => prevForm - 1);
-          tgl = true;
-        }
+        } else if (moveBackModuleID) currModuleID = moveBackModuleID;
+        tgl = true;
         break;
       case CmdOptions.FORWARDS:
         if (formStates[currForm + 1]) {
@@ -136,7 +144,7 @@ const MainPage: FC = () => {
       // For cmds that go forwards or backward
       if (newState.id === nextModuleID) {
         newState.enable = true;
-        newState.status = ACTIVE;
+        if (moveBackModuleID === undefined) newState.status = ACTIVE;
       }
       return newState;
     });