♻️ [open-formulieren/open-forms#4929] Refactor cosign <Routes> to not…

… require any props

Split the state up in the components used to render each route/path,
which allows localizing the state. For the synchronization between
routes, React context is used.

src/components/CoSign/Context.js

@@ -3,14 +3,16 @@ import React, {useContext} from 'react';
 
 const CosignContext = React.createContext({
   reportDownloadUrl: '',
+  onCosignComplete: () => {},
 });
 
 CosignContext.displayName = 'CosignContext';
 
-const CosignProvider = ({reportDownloadUrl = '', children}) => (
+const CosignProvider = ({reportDownloadUrl = '', onCosignComplete, children}) => (
   <CosignContext.Provider
     value={{
       reportDownloadUrl,
+      onCosignComplete,
     }}
   >
     {children}

src/components/CoSign/Cosign.jsx

@@ -1,89 +1,23 @@
-import {useContext} from 'react';
-import {Outlet, Route, Routes, useNavigate} from 'react-router-dom';
-import {useImmerReducer} from 'use-immer';
+import {useState} from 'react';
+import {Outlet, useNavigate} from 'react-router-dom';
 
-import {ConfigContext} from 'Context';
-import {destroy} from 'api';
 import ErrorBoundary from 'components/Errors/ErrorBoundary';
-import {CosignSummary} from 'components/Summary';
-import useFormContext from 'hooks/useFormContext';
 
 import {CosignProvider} from './Context';
 
-const initialState = {
-  submission: null,
-  summaryData: [],
-  reportUrl: '',
-  cosignedSubmission: null,
-};
-
-const reducer = (draft, action) => {
-  switch (action.type) {
-    case 'SUBMISSION_LOADED': {
-      draft.submission = action.payload;
-      break;
-    }
-    case 'LOADED_SUMMARY_DATA': {
-      draft.summaryData = action.payload;
-      break;
-    }
-    case 'COSIGN_COMPLETE': {
-      return {...initialState, reportUrl: action.payload};
-    }
-    case 'RESET': {
-      return initialState;
-    }
-    default: {
-      throw new Error(`Unknown action ${action.type}`);
-    }
-  }
-};
-
 const Cosign = () => {
-  const form = useFormContext();
-  const [state, dispatch] = useImmerReducer(reducer, initialState);
   const navigate = useNavigate();
-  const config = useContext(ConfigContext);
+  const [reportDownloadUrl, setReportDownloadUrl] = useState('');
 
   const onCosignComplete = reportUrl => {
-    dispatch({type: 'COSIGN_COMPLETE', payload: reportUrl});
+    setReportDownloadUrl(reportUrl);
     navigate('/cosign/done');
   };
 
-  const onDestroySession = async () => {
-    await destroy(`${config.baseUrl}authentication/${state.submission.id}/session`);
-
-    dispatch({type: 'RESET'});
-    navigate('/');
-  };
-
   return (
     <ErrorBoundary useCard>
-      <CosignProvider reportDownloadUrl={state.reportUrl}>
+      <CosignProvider reportDownloadUrl={reportDownloadUrl} onCosignComplete={onCosignComplete}>
         <Outlet />
-        <Routes>
-          <Route
-            path="check"
-            element={
-              <CosignSummary
-                form={form}
-                submission={state.submission}
-                summaryData={state.summaryData}
-                onSubmissionLoaded={submission =>
-                  dispatch({
-                    type: 'SUBMISSION_LOADED',
-                    payload: submission,
-                  })
-                }
-                onDataLoaded={({summaryData}) =>
-                  dispatch({type: 'LOADED_SUMMARY_DATA', payload: summaryData})
-                }
-                onCosignComplete={onCosignComplete}
-                onDestroySession={onDestroySession}
-              />
-            }
-          />
-        </Routes>
       </CosignProvider>
     </ErrorBoundary>
   );

src/components/CoSign/CosignCheck.jsx

@@ -0,0 +1,46 @@
+import {useContext, useState} from 'react';
+import {useNavigate} from 'react-router-dom';
+
+import {ConfigContext} from 'Context';
+import {destroy} from 'api';
+import {CosignSummary} from 'components/Summary';
+import useFormContext from 'hooks/useFormContext';
+
+import {useCosignContext} from './Context';
+
+/**
+ * Fetch the submission summary data and display it, together with the controls to
+ * confirm the submission and buttons to log out.
+ */
+const CosignCheck = () => {
+  const navigate = useNavigate();
+  const config = useContext(ConfigContext);
+  const form = useFormContext();
+  const {onCosignComplete} = useCosignContext();
+
+  const [submission, setSubmission] = useState(null);
+  const [summaryData, setSummaryData] = useState([]);
+
+  const onDestroySession = async () => {
+    await destroy(`${config.baseUrl}authentication/${submission.id}/session`);
+    setSubmission(null);
+    setSummaryData([]);
+    navigate('/');
+  };
+
+  return (
+    <CosignSummary
+      form={form}
+      submission={submission}
+      summaryData={summaryData}
+      onSubmissionLoaded={submission => setSubmission(submission)}
+      onDataLoaded={({summaryData}) => setSummaryData(summaryData)}
+      onCosignComplete={onCosignComplete}
+      onDestroySession={onDestroySession}
+    />
+  );
+};
+
+CosignCheck.propTypes = {};
+
+export default CosignCheck;

src/components/CoSign/routes.jsx

@@ -1,3 +1,4 @@
+import CosignCheck from './CosignCheck';
 import CosignDone from './CosignDone';
 import CosignStart from './CosignStart';
 
@@ -6,6 +7,10 @@ const routes = [
     path: 'start',
     element: <CosignStart />,
   },
+  {
+    path: 'check',
+    element: <CosignCheck />,
+  },
   {
     path: 'done',
     element: <CosignDone />,