feat(Resolve Errors): Split URL paths between syntax and logic errors (…

…#844) closes #845 - feat(Resolve Errors): Split URL paths between syntax and logic errors 1. Upload a logic errors csv, continue to next step - verify ~~`/errors-2`~~ `/errors-logic` 2. Upload a syntax errors csv, continue to next step- verify ~~`/errors-1`~~ `/errors-syntax` 3. Upload no errors with warnings csv, continue to next step - verify ~~`/errors`~~ `/` 4. Upload no errors with no warnings csv, continue to next step - verify ~~`/errors`~~ `/` - no syntax errors but has logic errors (and vice versa) -- should redirect properly. - Try to manually navigate (e.g. type in `http://localhost:8899/filing/2024/123456789TESTBANK456/errors/errors-logic`) and check if the redirect is correct - Try using the browser's Back and Forward arrows - Use the Go Back and Continue buttons --------- Co-authored-by: Bill Himmelsbach <[email protected]>
cfpb · Aug 23, 2024 · a09f309 · a09f309
1 parent 871c9ad
commit a09f309
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 26 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -51,7 +51,7 @@
       }
     ],
     "no-void": "off",
-
+    "@typescript-eslint/no-unnecessary-condition": "off",
     "@typescript-eslint/padding-line-between-statements": "off",
     "@typescript-eslint/prefer-enum-initializers": "off",
     "@typescript-eslint/no-useless-template-literals": "off",

diff --git a/src/App.tsx b/src/App.tsx
@@ -277,19 +277,26 @@ export default function App(): ReactElement {
                   </ProtectedRoute>
                 }
               />
-              <Route
-                path='/filing/:year/:lei/errors'
-                element={
-                  // @ts-expect-error Part of code cleanup for post-mvp see: https://github.com/cfpb/sbl-frontend/issues/717
-                  <ProtectedRoute {...ProtectedRouteAuthorizations}>
-                    <InstitutionProtectedRoute>
-                      <FilingProtectedRoute>
-                        <FilingErrors />
-                      </FilingProtectedRoute>
-                    </InstitutionProtectedRoute>
-                  </ProtectedRoute>
-                }
-              />
+              {[
+                '/filing/:year/:lei/errors',
+                '/filing/:year/:lei/errors/errors-syntax',
+                '/filing/:year/:lei/errors/errors-logic',
+              ].map((path, index) => (
+                <Route
+                  path={path}
+                  element={
+                    // @ts-expect-error Part of code cleanup for post-mvp see: https://github.com/cfpb/sbl-frontend/issues/717
+                    <ProtectedRoute {...ProtectedRouteAuthorizations}>
+                      <InstitutionProtectedRoute>
+                        <FilingProtectedRoute>
+                          <FilingErrors />
+                        </FilingProtectedRoute>
+                      </InstitutionProtectedRoute>
+                    </ProtectedRoute>
+                  }
+                  key={index}
+                />
+              ))}
               <Route
                 path='/filing/:year/:lei/warnings'
                 element={

diff --git a/src/pages/Filing/FilingApp/FilingErrors/index.tsx b/src/pages/Filing/FilingApp/FilingErrors/index.tsx
@@ -11,8 +11,8 @@ import FilingErrorsAlerts from 'pages/Filing/FilingApp/FilingErrors/FilingErrors
 import { FilingSteps } from 'pages/Filing/FilingApp/FilingSteps';
 import InstitutionHeading from 'pages/Filing/FilingApp/InstitutionHeading';
 import { scrollToElement } from 'pages/ProfileForm/ProfileFormUtils';
-import { useMemo, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useEffect, useMemo, useState } from 'react';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useUpdatePageTitle } from 'utils';
 import useGetSubmissionLatest from 'utils/useGetSubmissionLatest';
 import useInstitutionDetails from 'utils/useInstitutionDetails';
@@ -23,6 +23,7 @@ import { InstitutionFetchFailAlert } from '../FilingWarnings/FilingWarningsAlert
 function FilingErrors(): JSX.Element {
   const { lei, year } = useParams();
   const navigate = useNavigate();
+  const location = useLocation();
 
   const {
     isFetching: isFetchingGetSubmissionLatest,
@@ -40,6 +41,8 @@ function FilingErrors(): JSX.Element {
 
   const [isStep2, setIsStep2] = useState<boolean>(false);
   useUpdatePageTitle({ title: `Resolve errors (${isStep2 ? '2' : '1'} of 2)` });
+  // used in determination of routing -- /error, /error-1 or /error-2
+  const [hasDeterminedStep, setHasDeterminedStep] = useState<boolean>(false);
 
   const formattedData = useMemo(
     () => getErrorsWarningsSummary(actualDataGetSubmissionLatest),
@@ -54,12 +57,14 @@ function FilingErrors(): JSX.Element {
   } = formattedData;
 
   // Determines Alert and if 'Continue to next step' button is disabled
+  const hasSyntaxErrors = syntaxErrorsSingle.length > 0;
+  const hasLogicErrors = [
+    logicErrorsSingle,
+    logicErrorsMulti,
+    registerErrors,
+  ].some(array => array.length > 0);
   const errorState =
-    (!isStep2 && syntaxErrorsSingle.length > 0) ||
-    (isStep2 &&
-      [logicErrorsSingle, logicErrorsMulti, registerErrors].some(
-        array => array.length > 0,
-      ));
+    (!isStep2 && hasSyntaxErrors) || (isStep2 && hasLogicErrors);
 
   const singleFieldErrorsUsed = isStep2
     ? logicErrorsSingle
@@ -69,20 +74,64 @@ function FilingErrors(): JSX.Element {
   const singleFieldCategory = isStep2 ? 'logic_errors' : 'syntax_errors';
   const singleFieldRowErrorsCount =
     actualDataGetSubmissionLatest?.validation_results?.[singleFieldCategory]
-      .single_field_count ?? 0;
+      ?.single_field_count ?? 0;
   const multiFieldRowErrorsCount =
     actualDataGetSubmissionLatest?.validation_results?.[singleFieldCategory]
-      .multi_field_count ?? 0;
+      ?.multi_field_count ?? 0;
   const registerLevelRowErrorsCount =
     actualDataGetSubmissionLatest?.validation_results?.[singleFieldCategory]
-      .register_count ?? 0;
+      ?.register_count ?? 0;
+
+  // ** Routing  - Determination of the URL path **
+  // syntax errors - /errors-syntax
+  // logic errors - /errors-logic
+  useEffect(() => {
+    if (location.pathname === `/filing/${year}/${lei}/errors`) {
+      navigate(`/filing/${year}/${lei}/errors/errors-syntax`, {
+        replace: true,
+      });
+    }
+    if (
+      hasSyntaxErrors &&
+      location.pathname !== `/filing/${year}/${lei}/errors/errors-syntax`
+    ) {
+      setIsStep2(false);
+      navigate(`/filing/${year}/${lei}/errors/errors-syntax`, {
+        replace: true,
+      });
+    }
+    if (
+      !hasSyntaxErrors &&
+      location.pathname === `/filing/${year}/${lei}/errors/errors-logic` &&
+      !isStep2
+    ) {
+      setIsStep2(true);
+    }
+    if (
+      isStep2 &&
+      location.pathname === `/filing/${year}/${lei}/errors/errors-syntax`
+    ) {
+      setIsStep2(false);
+    }
+    setHasDeterminedStep(true);
+  }, [
+    hasSyntaxErrors,
+    hasLogicErrors,
+    lei,
+    navigate,
+    setHasDeterminedStep,
+    year,
+    location.pathname,
+    isStep2,
+  ]);
 
   if (isFetchingGetSubmissionLatest || isLoadingInstitution)
     return <LoadingContent />;
 
   const onPreviousClick = (): void => {
     if (isStep2) {
       setIsStep2(false);
+      navigate(`/filing/${year}/${lei}/errors/errors-syntax`);
     } else {
       navigate(`/filing/${year}/${lei}/upload`);
     }
@@ -95,6 +144,7 @@ function FilingErrors(): JSX.Element {
       navigate(`/filing/${year}/${lei}/warnings`);
     } else {
       setIsStep2(true);
+      navigate(`/filing/${year}/${lei}/errors/errors-logic`);
     }
   };
 
@@ -174,7 +224,7 @@ function FilingErrors(): JSX.Element {
             errorGetSubmissionLatest,
           }}
         />
-        {!errorGetSubmissionLatest && (
+        {!errorGetSubmissionLatest && hasDeterminedStep ? (
           <>
             {/* SINGLE-FIELD ERRORS */}
             {errorState && actualDataGetSubmissionLatest?.id ? (
@@ -243,7 +293,7 @@ function FilingErrors(): JSX.Element {
               />
             ) : null}
           </>
-        )}
+        ) : null}
       </FormWrapper>
     </div>
   );