From 55514100b063d4e63bb30e44ac15c556c58cfeb5 Mon Sep 17 00:00:00 2001
From: Sean Fong <sean.fong@csiro.au>
Date: Fri, 21 Jun 2024 14:51:21 +0930
Subject: [PATCH] Update extracted section to include targetStructureMap

---
 .../ExtractedResourceViewer.tsx               | 49 ++++++++++---------
 .../useShowExtractedOperationStoreProperty.ts | 32 ++++++++++++
 2 files changed, 58 insertions(+), 23 deletions(-)
 create mode 100644 apps/smart-forms-app/src/features/playground/hooks/useShowExtractedOperationStoreProperty.ts

diff --git a/apps/smart-forms-app/src/features/playground/components/StoreStateViewers/ExtractedResourceViewer.tsx b/apps/smart-forms-app/src/features/playground/components/StoreStateViewers/ExtractedResourceViewer.tsx
index 50016bba..1d6a10e0 100644
--- a/apps/smart-forms-app/src/features/playground/components/StoreStateViewers/ExtractedResourceViewer.tsx
+++ b/apps/smart-forms-app/src/features/playground/components/StoreStateViewers/ExtractedResourceViewer.tsx
@@ -1,15 +1,15 @@
 import { useState } from 'react';
 import GenericStatePropertyPicker from './GenericStatePropertyPicker.tsx';
 import GenericViewer from './GenericViewer.tsx';
-import { useExtractOperationStore } from '../../stores/smartConfigStore.ts';
 import { Box, Tooltip } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
 import { useSnackbar } from 'notistack';
 import { extractedResourceIsBatchBundle } from '../../api/extract.ts';
 import { HEADERS } from '../../../../api/headers.ts';
 import CloseSnackbar from '../../../../components/Snackbar/CloseSnackbar.tsx';
+import useShowExtractedOperationStoreProperty from '../../hooks/useShowExtractedOperationStoreProperty.ts';
 
-const extractedSectionPropertyNames: string[] = ['extracted'];
+const extractedSectionPropertyNames: string[] = ['extractedResource', 'targetStructureMap'];
 
 interface ExtractedSectionViewerProps {
   fhirServerUrl: string;
@@ -21,8 +21,9 @@ function ExtractedSectionViewer(props: ExtractedSectionViewerProps) {
   const [showJsonTree, setShowJsonTree] = useState(false);
   const [writingBack, setWritingBack] = useState(false);
 
-  const extractedResource = useExtractOperationStore.use.extractedResource();
-  const writeBackEnabled = extractedResourceIsBatchBundle(extractedResource);
+  const propertyObject = useShowExtractedOperationStoreProperty(selectedProperty);
+
+  const writeBackEnabled = extractedResourceIsBatchBundle(propertyObject);
 
   const { enqueueSnackbar } = useSnackbar();
 
@@ -36,7 +37,7 @@ function ExtractedSectionViewer(props: ExtractedSectionViewerProps) {
     const response = await fetch(fhirServerUrl, {
       method: 'POST',
       headers: { ...HEADERS, 'Content-Type': 'application/json;charset=utf-8' },
-      body: JSON.stringify(extractedResource)
+      body: JSON.stringify(propertyObject)
     });
     setWritingBack(false);
 
@@ -64,26 +65,28 @@ function ExtractedSectionViewer(props: ExtractedSectionViewerProps) {
       />
       <GenericViewer
         propertyName={selectedProperty}
-        propertyObject={extractedResource}
+        propertyObject={propertyObject}
         showJsonTree={showJsonTree}
         onToggleShowJsonTree={setShowJsonTree}>
-        <Box display="flex" justifyContent="end">
-          <Tooltip
-            title={
-              writeBackEnabled
-                ? `Write to source FHIR server ${fhirServerUrl} `
-                : 'No extracted resource to write back, or resource is not a batch/tranaction bundle.'
-            }>
-            <span>
-              <LoadingButton
-                loading={writingBack}
-                disabled={!writeBackEnabled}
-                onClick={handleExtract}>
-                Write back
-              </LoadingButton>
-            </span>
-          </Tooltip>
-        </Box>
+        {selectedProperty === 'extractedResource' ? (
+          <Box display="flex" justifyContent="end">
+            <Tooltip
+              title={
+                writeBackEnabled
+                  ? `Write to source FHIR server ${fhirServerUrl} `
+                  : 'No extracted resource to write back, or resource is not a batch/tranaction bundle.'
+              }>
+              <span>
+                <LoadingButton
+                  loading={writingBack}
+                  disabled={!writeBackEnabled}
+                  onClick={handleExtract}>
+                  Write back
+                </LoadingButton>
+              </span>
+            </Tooltip>
+          </Box>
+        ) : null}
       </GenericViewer>
     </>
   );
diff --git a/apps/smart-forms-app/src/features/playground/hooks/useShowExtractedOperationStoreProperty.ts b/apps/smart-forms-app/src/features/playground/hooks/useShowExtractedOperationStoreProperty.ts
new file mode 100644
index 00000000..422137f5
--- /dev/null
+++ b/apps/smart-forms-app/src/features/playground/hooks/useShowExtractedOperationStoreProperty.ts
@@ -0,0 +1,32 @@
+/*
+ * Copyright 2024 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useExtractOperationStore } from '../stores/smartConfigStore.ts';
+
+function useShowExtractedOperationStoreProperty(selectedProperty: string) {
+  const extractedResource = useExtractOperationStore.use.extractedResource();
+  const targetStructureMap = useExtractOperationStore.use.targetStructureMap();
+
+  return (
+    {
+      extractedResource,
+      targetStructureMap
+    }[selectedProperty] || null
+  );
+}
+
+export default useShowExtractedOperationStoreProperty;