Introduce FormRenderContext

web/src/components/QRFormWrapper/index.tsx

@@ -8,17 +8,12 @@ import {
     mapResponseToForm,
     toFirstClassExtension,
 } from '@beda.software/fhir-questionnaire/vendor/sdc-qrf';
-import {
-    Questionnaire as FHIRQuestionnaire,
-    QuestionnaireResponse as FHIRQuestionnaireResponse,
-    Parameters,
-} from 'fhir/r4b';
 import _ from 'lodash';
 import { useCallback } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { RenderRemoteData } from 'web/src/components/RenderRemoteData';
+import { QRFormWrapperProps } from 'web/src/containers/Main/types';
 
-import { RemoteData } from 'fhir-react/lib/libs/remoteData';
 import { sequenceMap } from 'fhir-react/lib/services/service';
 import { formatError } from 'fhir-react/lib/utils/error';
 
@@ -41,13 +36,6 @@ import {
 } from './components';
 import s from './QuestionnaireResponseForm.module.scss';
 
-interface QRFormWrapperProps {
-    questionnaireRD: RemoteData<FHIRQuestionnaire>;
-    questionnaireResponseRD: RemoteData<FHIRQuestionnaireResponse>;
-    saveQuestionnaireResponse: (resource: FHIRQuestionnaireResponse) => void;
-    launchContextParameters: Parameters['parameter'];
-}
-
 export function QRFormWrapper({
     questionnaireRD,
     questionnaireResponseRD,

web/src/containers/Main/context.ts

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+import { QRFormWrapper } from 'web/src/components/QRFormWrapper';
+
+import { QRFWrapper } from './types';
+
+export const FormRenderContext = createContext<QRFWrapper>(QRFormWrapper);

web/src/containers/Main/index.tsx

@@ -1,3 +1,4 @@
+import { useContext } from 'react';
 import { useParams } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
 import { Button } from 'web/src/components/Button';
@@ -6,13 +7,13 @@ import { ExpandableRow } from 'web/src/components/ExpandableRow';
 import { LaunchContextEditor } from 'web/src/components/LaunchContextEditor';
 import { Logo } from 'web/src/components/Logo';
 import 'react-toastify/dist/ReactToastify.css';
-import { QRFormWrapper } from 'web/src/components/QRFormWrapper';
 import { ResourceCodeDisplay } from 'web/src/components/ResourceCodeDisplay';
 import { version } from 'web/src/version';
 
 import { RenderRemoteData } from 'fhir-react/lib/components/RenderRemoteData';
 import { isSuccess } from 'fhir-react/lib/libs/remoteData';
 
+import { FormRenderContext } from './context';
 import s from './Main.module.scss';
 import { MappingEditor } from './MappingEditor';
 import { QuestionnaireEditor } from './QuestionnaireEditor';
@@ -30,6 +31,8 @@ export function Main() {
         manager,
     } = useMain(questionnaireId!);
 
+    const QRFormWrapper = useContext(FormRenderContext);
+
     return (
         <>
             <div className={s.editor}>

web/src/containers/Main/types.ts

@@ -1,3 +1,6 @@
+import { Parameters, Questionnaire, QuestionnaireResponse } from 'fhir/r4b';
+import { RemoteData } from 'fhir-react';
+
 export interface MappingErrorManager {
     errorCount: number;
     showError: () => void;
@@ -22,3 +25,12 @@ export type Title =
     | 'QuestionnaireResponse FHIR resource'
     | 'Patient JUTE Mapping'
     | 'Patient batch request';
+
+export interface QRFormWrapperProps {
+    questionnaireRD: RemoteData<Questionnaire>;
+    questionnaireResponseRD: RemoteData<QuestionnaireResponse>;
+    saveQuestionnaireResponse: (resource: QuestionnaireResponse) => void;
+    launchContextParameters: Parameters['parameter'];
+}
+
+export type QRFWrapper = (props: QRFormWrapperProps) => React.JSX.Element;