new appeal progress pattern

components/newappeal/buildsection.js

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import _, { has } from "lodash";
+import _, { has, last } from "lodash";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import { useState, useEffect } from "react";
@@ -12,8 +12,9 @@ import {
     setCurrentSection,
     setDocumentsList,
     setFilesForAppeal,
+    setNewAppealProgress,
 } from "../../store/appealType/action";
-import { getFormCollectionByID } from "../utils";
+import { getFormCollectionByID, getProgressObj } from "../utils";
 import { updateCase, patchCase, uploadFiles } from "../../actions";
 
 import { FieldsTranslations } from "../elements";
@@ -21,9 +22,30 @@ import jsonpath from "jsonpath";
 import BuildProgress from "./buildprogress";
 
 let BuildSection = (props) => {
-    // useEffect(() => {
-    //     window.scrollTo(0, 0);
-    // });
+    const [currentSectionSelected, setCurrentSectionSelected] = useState(1);
+    const [pickupWhereLeftOff, setPickupWhereLeftOff] = useState(true);
+
+    useEffect(() => {
+        progObj = getProgressObj(
+            formXML,
+            titleList,
+            mandatoryFieldsData,
+            props
+        );
+        //     const lastIndex = progObj
+        //         .map((whichIsLast) => whichIsLast.allFieldsComplete == true)
+        //         .lastIndexOf(true);
+
+        //     setCurrentSection(currentSectionSelected + 1);
+
+        //     pickupWhereLeftOff == true && setCurrentSection(lastIndex + 1),
+        //         setPickupWhereLeftOff(false);
+
+        //     // lastIndex != currentSectionSelected
+        //     //     ? (setCurrentSectionSelected(lastIndex),
+        //     //       setPickupWhereLeftOff(true))
+        //     //     : setPickupWhereLeftOff(false);
+    });
 
     let { t } = useTranslation();
 
@@ -68,6 +90,17 @@ let BuildSection = (props) => {
         doc
     );
 
+    const progObj = getProgressObj(
+        formXML,
+        titleList,
+        mandatoryFieldsData,
+        props
+    );
+
+    const lastIndex = progObj
+        .map((whichIsLast) => whichIsLast.allFieldsComplete == true)
+        .lastIndexOf(true);
+
     const handleParam = (setValue) => (e) => setValue(e.target.value);
 
     const uploadAppealFiles = (values) => {
@@ -76,7 +109,7 @@ let BuildSection = (props) => {
             return _.includes(key, "pinswg_fileUpload");
         });
 
-        console.log(fileListObj);
+        //console.log(fileListObj);
 
         var dataObj = values;
 
@@ -85,7 +118,7 @@ let BuildSection = (props) => {
         }
 
         uploadFiles(dataObj, fileListObj).then((data) => {
-            console.log("hello", data);
+            //console.log("hello", data);
 
             return data;
         });
@@ -96,6 +129,9 @@ let BuildSection = (props) => {
         let updateBody = values || {};
 
         uploadAppealFiles(values);
+        props.setNewAppealProgress(
+            getProgressObj(formXML, titleList, mandatoryFieldsData, props)
+        );
 
         let appTypeCollection = getFormCollectionByID(
             props.appealType.appealTypeID
@@ -142,13 +178,12 @@ let BuildSection = (props) => {
     };
 
     const onHandleSubmit = (values) => {
-        if (currentSection == sectionCount) {
-            let valuesObj = values || {};
+        //if (currentSection == sectionCount) {
+        let valuesObj = values || {};
 
-            delete valuesObj["_pinswg_appellant_value"];
-
-            updateCaseProgress(valuesObj);
-        }
+        delete valuesObj["_pinswg_appellant_value"];
+        console.log("has errors:", props.invalid);
+        props.invalid == false && updateCaseProgress(valuesObj);
 
         setCurrentSection(currentSection + 1);
     };
@@ -250,7 +285,22 @@ let BuildSection = (props) => {
                                 type="submit"
                                 className="govuk-button"
                                 data-module="govuk-button"
-                                onClick={() => getErrors()}
+                                onClick={() => {
+                                    getErrors();
+                                    let valuesObj = _.has(
+                                        props1.props.form[props1.form],
+                                        "values"
+                                    )
+                                        ? props.props.form[props.form].values
+                                        : {};
+
+                                    //console.log("valuesobj:", valuesObj);
+
+                                    delete valuesObj["_pinswg_appellant_value"];
+
+                                    //console.log("on save:", valuesObj);
+                                    updateCaseProgress(valuesObj);
+                                }}
                             >
                                 {t("common:continue-button")}
                             </button>
@@ -286,7 +336,11 @@ let BuildSection = (props) => {
             </div>
             <div className="govuk-grid-column-one-third">
                 <div className="at-nav-container">
+                    {/* <span>
+                        Last section is {lastIndex} - {currentSection}
+                    </span> */}
                     <BuildProgress
+                        progObj={progObj}
                         props={props}
                         titleList={titleList}
                         documentListObj={documentListObj}
@@ -294,6 +348,7 @@ let BuildSection = (props) => {
                         mandatoryFieldsData={mandatoryFieldsData}
                         currentSection={currentSection}
                         initialValues={props.initialValues}
+                        setCurrentSection={setCurrentSection}
                     />
 
                     <hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
@@ -349,6 +404,9 @@ const mapDispatchToProps = (dispatch) => {
         setFilesForAppeal: (blobList) => {
             dispatch(setFilesForAppeal(blobList));
         },
+        setNewAppealProgress: (progressObj) => {
+            dispatch(setNewAppealProgress(progressObj));
+        },
     };
 };