♻️ [open-formulieren/open-forms#4929] Move cosign start and done page…

…s to routes object

State/props are moved into a context provider that wraps around the
outlet, taking care of the data loading. Once we're no longer the
<Routes> approach, we can investigate what we can do with loaders
to pass information/state around.

src/components/App.jsx

@@ -1,6 +1,6 @@
 import {Navigate, Outlet, useMatch} from 'react-router-dom';
 
-import {Cosign} from 'components/CoSign';
+import {Cosign, cosignRoutes} from 'components/CoSign';
 import ErrorBoundary from 'components/Errors/ErrorBoundary';
 import Form from 'components/Form';
 import SessionExpired from 'components/Sessions/SessionExpired';
@@ -26,6 +26,7 @@ export const routes = [
   {
     path: 'cosign/*',
     element: <Cosign />,
+    children: cosignRoutes,
   },
   {
     path: 'sessie-verlopen',

src/components/CoSign/Context.js

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+import React, {useContext} from 'react';
+
+const CosignContext = React.createContext({
+  reportDownloadUrl: '',
+});
+
+CosignContext.displayName = 'CosignContext';
+
+const CosignProvider = ({reportDownloadUrl = '', children}) => (
+  <CosignContext.Provider
+    value={{
+      reportDownloadUrl,
+    }}
+  >
+    {children}
+  </CosignContext.Provider>
+);
+
+CosignProvider.propTypes = {
+  reportDownloadUrl: PropTypes.string,
+};
+
+const useCosignContext = () => useContext(CosignContext);
+
+export {CosignProvider, useCosignContext};

src/components/CoSign/Cosign.jsx

@@ -1,5 +1,5 @@
 import {useContext} from 'react';
-import {Route, Routes, useNavigate} from 'react-router-dom';
+import {Outlet, Route, Routes, useNavigate} from 'react-router-dom';
 import {useImmerReducer} from 'use-immer';
 
 import {ConfigContext} from 'Context';
@@ -8,8 +8,7 @@ import ErrorBoundary from 'components/Errors/ErrorBoundary';
 import {CosignSummary} from 'components/Summary';
 import useFormContext from 'hooks/useFormContext';
 
-import CosignDone from './CosignDone';
-import CosignStart from './CosignStart';
+import {CosignProvider} from './Context';
 
 const initialState = {
   submission: null,
@@ -60,31 +59,32 @@ const Cosign = () => {
 
   return (
     <ErrorBoundary useCard>
-      <Routes>
-        {/*<Route path="start" element={<CosignStart />} />*/}
-        <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}
-            />
-          }
-        />
-        <Route path="done" element={<CosignDone reportDownloadUrl={state.reportUrl} />} />
-      </Routes>
+      <CosignProvider reportDownloadUrl={state.reportUrl}>
+        <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/CosignDone.jsx

@@ -1,5 +1,4 @@
 import {Paragraph} from '@utrecht/component-library-react';
-import PropTypes from 'prop-types';
 import {FormattedMessage} from 'react-intl';
 
 import Anchor from 'components/Anchor';
@@ -8,7 +7,10 @@ import Card from 'components/Card';
 import FAIcon from 'components/FAIcon';
 import useFormContext from 'hooks/useFormContext';
 
-const CosignDone = ({reportDownloadUrl}) => {
+import {useCosignContext} from './Context';
+
+const CosignDone = () => {
+  const {reportDownloadUrl} = useCosignContext();
   const {name, sendConfirmationEmail} = useFormContext();
 
   return (
@@ -54,8 +56,6 @@ const CosignDone = ({reportDownloadUrl}) => {
   );
 };
 
-CosignDone.propTypes = {
-  reportDownloadUrl: PropTypes.string.isRequired,
-};
+CosignDone.propTypes = {};
 
 export default CosignDone;

src/components/CoSign/index.jsx

@@ -1,6 +1,7 @@
 import CoSignOld from './CoSignOld';
 import Cosign from './Cosign';
 import CosignDone from './CosignDone';
+import cosignRoutes from './routes';
 
 export default CoSignOld;
-export {Cosign, CosignDone};
+export {Cosign, CosignDone, cosignRoutes};

src/components/CoSign/routes.jsx

@@ -0,0 +1,15 @@
+import CosignDone from './CosignDone';
+import CosignStart from './CosignStart';
+
+const routes = [
+  {
+    path: 'start',
+    element: <CosignStart />,
+  },
+  {
+    path: 'done',
+    element: <CosignDone />,
+  },
+];
+
+export default routes;