🚚 [open-formulieren/open-forms#4929] Move SubmissionProvider into its…

… own component

The component was moved from Form.jsx into its own
file and imports are updated.

src/components/Form.jsx

@@ -1,5 +1,4 @@
-import PropTypes from 'prop-types';
-import React, {useContext, useEffect, useState} from 'react';
+import {useContext, useEffect, useState} from 'react';
 import {useIntl} from 'react-intl';
 import {
   Navigate,
@@ -15,6 +14,7 @@ import {ConfigContext} from 'Context';
 import {destroy} from 'api';
 import Loader from 'components/Loader';
 import ProgressIndicator from 'components/ProgressIndicator';
+import SubmissionProvider from 'components/SubmissionProvider';
 import AnalyticsToolsConfigProvider from 'components/analytics/AnalyticsToolConfigProvider';
 import {
   PI_TITLE,
@@ -27,7 +27,6 @@ import useAutomaticRedirect from 'hooks/useAutomaticRedirect';
 import useFormContext from 'hooks/useFormContext';
 import usePageViews from 'hooks/usePageViews';
 import useRecycleSubmission from 'hooks/useRecycleSubmission';
-import Types from 'types';
 
 import FormDisplay from './FormDisplay';
 import {addFixedSteps, getStepsInfo} from './ProgressIndicator/utils';
@@ -221,49 +220,4 @@ const Form = () => {
 
 Form.propTypes = {};
 
-const SubmissionContext = React.createContext({
-  submission: null,
-  onSubmissionObtained: () => {},
-  onDestroySession: () => {},
-  removeSubmissionId: () => {},
-});
-
-const SubmissionProvider = ({
-  submission = null,
-  onSubmissionObtained,
-  onDestroySession,
-  removeSubmissionId,
-  children,
-}) => (
-  <SubmissionContext.Provider
-    value={{submission, onSubmissionObtained, onDestroySession, removeSubmissionId}}
-  >
-    {children}
-  </SubmissionContext.Provider>
-);
-
-SubmissionProvider.propTypes = {
-  /**
-   * The submission currently being filled out / submitted / viewed. It must exist in
-   * the backend session.
-   */
-  submission: Types.Submission,
-  /**
-   * Callback for when a submission was (re-)loaded to store it in the state.
-   */
-  onSubmissionObtained: PropTypes.func.isRequired,
-  /**
-   * Callback for when an abort/logout/stop button is clicked which terminates the
-   * form submission / session.
-   */
-  onDestroySession: PropTypes.func.isRequired,
-  /**
-   * Callback to remove the submission reference (it's ID) from the local storage.
-   */
-  removeSubmissionId: PropTypes.func.isRequired,
-};
-
-const useSubmissionContext = () => useContext(SubmissionContext);
-
 export default Form;
-export {useSubmissionContext, SubmissionProvider};

src/components/FormStart/index.jsx

@@ -7,12 +7,12 @@ import {ConfigContext} from 'Context';
 import Body from 'components/Body';
 import Card from 'components/Card';
 import ExistingSubmissionOptions from 'components/ExistingSubmissionOptions';
-import {useSubmissionContext} from 'components/Form';
 import FormMaximumSubmissions from 'components/FormMaximumSubmissions';
 import {LiteralsProvider} from 'components/Literal';
 import Loader from 'components/Loader';
 import LoginOptions from 'components/LoginOptions';
 import MaintenanceMode from 'components/MaintenanceMode';
+import {useSubmissionContext} from 'components/SubmissionProvider';
 import {
   AuthenticationErrors,
   useDetectAuthErrorMessages,

src/components/FormStart/tests.spec.jsx

@@ -9,7 +9,7 @@ import {ConfigContext, FormContext} from 'Context';
 import {BASE_URL, buildForm, buildSubmission} from 'api-mocks';
 import mswServer from 'api-mocks/msw-server';
 import {mockSubmissionPost} from 'api-mocks/submissions';
-import {SubmissionProvider} from 'components/Form';
+import SubmissionProvider from 'components/SubmissionProvider';
 
 import FormStart from './index';
 

src/components/FormStep/FormStep.stories.jsx

@@ -10,7 +10,7 @@ import {
   mockEmailVerificationPost,
   mockEmailVerificationVerifyCodePost,
 } from 'components/EmailVerification/mocks';
-import {SubmissionProvider} from 'components/Form';
+import SubmissionProvider from 'components/SubmissionProvider';
 import {AnalyticsToolsDecorator, ConfigDecorator} from 'story-utils/decorators';
 import {sleep} from 'utils';
 

src/components/FormStep/index.jsx

@@ -36,11 +36,11 @@ import {get} from 'api';
 import ButtonsToolbar from 'components/ButtonsToolbar';
 import Card, {CardTitle} from 'components/Card';
 import {EmailVerificationModal} from 'components/EmailVerification';
-import {useSubmissionContext} from 'components/Form';
 import FormStepDebug from 'components/FormStepDebug';
 import {LiteralsProvider} from 'components/Literal';
 import Loader from 'components/Loader';
 import PreviousLink from 'components/PreviousLink';
+import {useSubmissionContext} from 'components/SubmissionProvider';
 import {SummaryProgress} from 'components/SummaryProgress';
 import FormStepSaveModal from 'components/modals/FormStepSaveModal';
 import {

src/components/RequireSubmission.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import {Navigate} from 'react-router-dom';
 
-import {useSubmissionContext} from 'components/Form';
 import MaintenanceMode from 'components/MaintenanceMode';
+import {useSubmissionContext} from 'components/SubmissionProvider';
 import {ServiceUnavailable} from 'errors';
 import {IsFormDesigner} from 'headers';
 import useFormContext from 'hooks/useFormContext';

src/components/SubmissionProvider.jsx

@@ -0,0 +1,50 @@
+import PropTypes from 'prop-types';
+import React, {useContext} from 'react';
+
+import Types from 'types';
+
+const SubmissionContext = React.createContext({
+  submission: null,
+  onSubmissionObtained: () => {},
+  onDestroySession: () => {},
+  removeSubmissionId: () => {},
+});
+
+const SubmissionProvider = ({
+  submission = null,
+  onSubmissionObtained,
+  onDestroySession,
+  removeSubmissionId,
+  children,
+}) => (
+  <SubmissionContext.Provider
+    value={{submission, onSubmissionObtained, onDestroySession, removeSubmissionId}}
+  >
+    {children}
+  </SubmissionContext.Provider>
+);
+
+SubmissionProvider.propTypes = {
+  /**
+   * The submission currently being filled out / submitted / viewed. It must exist in
+   * the backend session.
+   */
+  submission: Types.Submission,
+  /**
+   * Callback for when a submission was (re-)loaded to store it in the state.
+   */
+  onSubmissionObtained: PropTypes.func.isRequired,
+  /**
+   * Callback for when an abort/logout/stop button is clicked which terminates the
+   * form submission / session.
+   */
+  onDestroySession: PropTypes.func.isRequired,
+  /**
+   * Callback to remove the submission reference (it's ID) from the local storage.
+   */
+  removeSubmissionId: PropTypes.func.isRequired,
+};
+
+export const useSubmissionContext = () => useContext(SubmissionContext);
+
+export default SubmissionProvider;

src/components/Summary/SubmissionSummary.jsx

@@ -4,8 +4,8 @@ import {useLocation, useNavigate} from 'react-router-dom';
 import {useAsync} from 'react-use';
 
 import {post} from 'api';
-import {useSubmissionContext} from 'components/Form';
 import {LiteralsProvider} from 'components/Literal';
+import {useSubmissionContext} from 'components/SubmissionProvider';
 import {SUBMISSION_ALLOWED} from 'components/constants';
 import {findPreviousApplicableStep} from 'components/utils';
 import useFormContext from 'hooks/useFormContext';

src/components/Summary/SubmissionSummary.spec.jsx

@@ -7,7 +7,7 @@ import {ConfigContext, FormContext} from 'Context';
 import {BASE_URL, buildForm, buildSubmission} from 'api-mocks';
 import mswServer from 'api-mocks/msw-server';
 import {mockSubmissionGet, mockSubmissionSummaryGet} from 'api-mocks/submissions';
-import {SubmissionProvider} from 'components/Form';
+import SubmissionProvider from 'components/SubmissionProvider';
 import {SubmissionSummary} from 'components/Summary';
 import {SUBMISSION_ALLOWED} from 'components/constants';