Fix mapping state managment

beda-software · Aug 15, 2023 · 3c0ed56 · 3c0ed56
1 parent 9301bf9
commit 3c0ed56
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 42 deletions.
diff --git a/vite.config.ts b/vite.config.ts
@@ -21,6 +21,9 @@ export const getBaseConfig = ({ plugins = [], build = {}, test = {} }) =>
             }),
             ...plugins,
         ],
+        define: {
+            global: {},
+        },
         build: {
             commonjsOptions: {
                 defaultIsModuleExports(id) {

diff --git a/web/src/components/ResourceCodeEditor/index.tsx b/web/src/components/ResourceCodeEditor/index.tsx
@@ -34,7 +34,8 @@ export function ResourceCodeEditor<R extends Resource>({
                 onChange={(r) => onChange(r)}
                 openExpressionModal={openExpressionModal}
                 reload={reload}
-                options={{ readOnly: false }}
+                // options={{ readOnly: false }}
+                options={{ readOnly: true }}
             />
             {expressionModalInfo &&
                 (expressionModalInfo.type === 'SourceQueries' ? (

diff --git a/web/src/containers/Main/MappingEditor/index.tsx b/web/src/containers/Main/MappingEditor/index.tsx
@@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import { Questionnaire, QuestionnaireResponse, Parameters } from 'fhir/r4b';
 import { useEffect, useState } from 'react';
 import { SingleValue } from 'react-select';
@@ -9,6 +8,7 @@ import { Select } from 'web/src/components/Select';
 
 import { RenderRemoteData } from 'fhir-react/lib/components/RenderRemoteData';
 import { RemoteData, isFailure, isLoading, isSuccess } from 'fhir-react/lib/libs/remoteData';
+import { WithId } from 'fhir-react/lib/services/fhir';
 
 import { Mapping } from 'shared/src/contrib/aidbox';
 
@@ -17,8 +17,8 @@ import { useMappingEditor } from './useMappingEditor';
 
 interface Props {
     questionnaireRD: RemoteData<Questionnaire>;
-    onSave: (resource: Mapping) => void;
-    onChange: (resource: Mapping) => void;
+    onSave: (resource: WithId<Mapping>) => void;
+    onChange: (resource: WithId<Mapping>) => void;
     mappingRD: RemoteData<Mapping>;
     launchContext: Parameters;
     questionnaireResponseRD: RemoteData<QuestionnaireResponse>;
@@ -104,7 +104,7 @@ export function MappingEditor(props: Props) {
                     >
                         remove
                     </Button>
-                    <Button
+                    {/* <Button
                         className={classNames(s.action, {
                             _active: !!updatedResource,
                         })}
@@ -117,7 +117,7 @@ export function MappingEditor(props: Props) {
                         }}
                     >
                         save
-                    </Button>
+                    </Button> */}
                 </div>
             </>
         );

diff --git a/web/src/containers/Main/QuestionnaireEditor/index.tsx b/web/src/containers/Main/QuestionnaireEditor/index.tsx
@@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import { Questionnaire, Parameters, QuestionnaireResponse } from 'fhir/r4b';
 import { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
@@ -88,7 +87,7 @@ export function QuestionnaireEditor(props: Props) {
                                 >
                                     remove
                                 </Button>
-                                <Button
+                                {/* <Button
                                     className={classNames(s.action, {
                                         _active: !!updatedResource,
                                     })}
@@ -101,7 +100,7 @@ export function QuestionnaireEditor(props: Props) {
                                     }}
                                 >
                                     save
-                                </Button>
+                                </Button> */}
                             </div>
                         </>
                     )}

diff --git a/web/src/containers/Main/useMain.ts b/web/src/containers/Main/useMain.ts
@@ -15,8 +15,8 @@ import {
 } from 'aidbox-react/lib/services/fhir';
 
 import { useService } from 'fhir-react/lib/hooks/service';
-import { failure, isSuccess } from 'fhir-react/lib/libs/remoteData';
-import { saveFHIRResource } from 'fhir-react/lib/services/fhir';
+import { RemoteData, failure, isSuccess, notAsked, success } from 'fhir-react/lib/libs/remoteData';
+import { WithId, saveFHIRResource } from 'fhir-react/lib/services/fhir';
 import { service } from 'fhir-react/lib/services/service';
 
 import { Mapping } from 'shared/src/contrib/aidbox';
@@ -52,6 +52,29 @@ export function useLaunchContext() {
 export function useMain(questionnaireId: string) {
     const { launchContext, setLaunchContext, removeLaunchContext } = useLaunchContext();
 
+    const [mappingRD, setMappingRD] = useState<RemoteData<WithId<Mapping>>>(notAsked);
+    const loadMapping = useCallback(async (q: Questionnaire) => {
+        const mappings =
+            getMappings(q)?.map((ext) => ext.valueReference!.reference!.split('/')[1]!) || [];
+
+        const response = await getAidboxFHIRResource<Mapping>({
+            resourceType: 'Mapping',
+            id: mappings[0]!,
+        });
+
+        setMappingRD(response);
+    }, []);
+    const reloadMapping = useCallback(async () => {
+        if (isSuccess(mappingRD)) {
+            const response = await getAidboxFHIRResource<Mapping>({
+                resourceType: 'Mapping',
+                id: mappingRD.data.id,
+            });
+
+            setMappingRD(response);
+        }
+    }, [mappingRD]);
+
     const [originalQuestionnaireRD, originalQuestionnaireRDManager] = useService(async () => {
         const response = await service<Questionnaire>({
             method: 'GET',
@@ -60,6 +83,7 @@ export function useMain(questionnaireId: string) {
 
         if (isSuccess(response)) {
             setLaunchContext({ name: 'questionnaire', resource: response.data });
+            loadMapping(response.data);
         }
 
         return response;
@@ -103,33 +127,6 @@ export function useMain(questionnaireId: string) {
         return response;
     }, [launchContext]);
 
-    const [mappingRD, mappingRDManager] = useService<Mapping>(async () => {
-        if (isSuccess(originalQuestionnaireRD)) {
-            const mappings =
-                getMappings(originalQuestionnaireRD.data)?.map(
-                    (ext) => ext.valueReference!.reference!.split('/')[1]!,
-                ) || [];
-
-            return await getAidboxFHIRResource<Mapping>({
-                resourceType: 'Mapping',
-                id: mappings[0]!,
-            });
-        } else {
-            return await Promise.resolve(
-                failure({
-                    resourceType: 'OperationOutcome',
-                    issue: [
-                        {
-                            severity: 'error',
-                            code: 'provide-questionnaire',
-                            diagnostics: 'Provide Questionnaire to see Mapping',
-                        },
-                    ],
-                }),
-            );
-        }
-    }, [originalQuestionnaireRD]);
-
     const addMapping = useCallback(
         async (mapping: Mapping) => {
             const mappingResponse = await createAidboxFHIRResource(mapping);
@@ -147,11 +144,11 @@ export function useMain(questionnaireId: string) {
 
                 if (isSuccess(qResponse)) {
                     originalQuestionnaireRDManager.set(qResponse.data);
-                    mappingRDManager.set(mapping);
+                    setMappingRD(success(mappingResponse.data));
                 }
             }
         },
-        [originalQuestionnaireRD, mappingRDManager, originalQuestionnaireRDManager],
+        [originalQuestionnaireRD, originalQuestionnaireRDManager],
     );
 
     const [extractRD] = useService<Bundle<FhirResource>>(async () => {
@@ -196,9 +193,9 @@ export function useMain(questionnaireId: string) {
             setQuestionnaireResponse: questionnaireResponseRDManager.set,
             setLaunchContext,
             removeLaunchContext,
-            reloadMapping: mappingRDManager.reload,
+            reloadMapping,
             addMapping,
-            setMapping: mappingRDManager.set,
+            setMapping: (m: WithId<Mapping>) => setMappingRD(success(m)),
         },
     };
 }