From f4df338f373f18cbd68561823b65a12b290e1b59 Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Sat, 18 Jan 2025 18:34:18 +0100 Subject: [PATCH] :truck: [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 | 50 +------------------ src/components/FormStart/index.jsx | 2 +- src/components/FormStart/tests.spec.jsx | 2 +- src/components/FormStep/FormStep.stories.jsx | 2 +- src/components/FormStep/index.jsx | 2 +- src/components/RequireSubmission.jsx | 2 +- src/components/SubmissionProvider.jsx | 50 +++++++++++++++++++ src/components/Summary/SubmissionSummary.jsx | 2 +- .../Summary/SubmissionSummary.spec.jsx | 2 +- 9 files changed, 59 insertions(+), 55 deletions(-) create mode 100644 src/components/SubmissionProvider.jsx diff --git a/src/components/Form.jsx b/src/components/Form.jsx index cf587468b..18f93dc41 100644 --- a/src/components/Form.jsx +++ b/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, -}) => ( - - {children} - -); - -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}; diff --git a/src/components/FormStart/index.jsx b/src/components/FormStart/index.jsx index 160a62146..e7e70d7b8 100644 --- a/src/components/FormStart/index.jsx +++ b/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, diff --git a/src/components/FormStart/tests.spec.jsx b/src/components/FormStart/tests.spec.jsx index 5fa2853a5..255cfe145 100644 --- a/src/components/FormStart/tests.spec.jsx +++ b/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'; diff --git a/src/components/FormStep/FormStep.stories.jsx b/src/components/FormStep/FormStep.stories.jsx index 7d8bd7361..58a0cb0bb 100644 --- a/src/components/FormStep/FormStep.stories.jsx +++ b/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'; diff --git a/src/components/FormStep/index.jsx b/src/components/FormStep/index.jsx index 87de28f1b..425fb64ba 100644 --- a/src/components/FormStep/index.jsx +++ b/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 { diff --git a/src/components/RequireSubmission.jsx b/src/components/RequireSubmission.jsx index cc6eaa25d..fb3ddc228 100644 --- a/src/components/RequireSubmission.jsx +++ b/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'; diff --git a/src/components/SubmissionProvider.jsx b/src/components/SubmissionProvider.jsx new file mode 100644 index 000000000..281aabc04 --- /dev/null +++ b/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, +}) => ( + + {children} + +); + +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; diff --git a/src/components/Summary/SubmissionSummary.jsx b/src/components/Summary/SubmissionSummary.jsx index 8d77082dd..5eee3a438 100644 --- a/src/components/Summary/SubmissionSummary.jsx +++ b/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'; diff --git a/src/components/Summary/SubmissionSummary.spec.jsx b/src/components/Summary/SubmissionSummary.spec.jsx index 69ccb6f07..f319ec69e 100644 --- a/src/components/Summary/SubmissionSummary.spec.jsx +++ b/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';