Fix re-population dialog not working on small-screen view

apps/smart-forms-app/src/features/playground/components/Playground.tsx

@@ -44,7 +44,7 @@ import type { Patient, Practitioner, Questionnaire } from 'fhir/r4';
 import PlaygroundHeader from './PlaygroundHeader.tsx';
 import { HEADERS } from '../../../api/headers.ts';
 import { fetchTargetStructureMap } from '../api/extract.ts';
-import { useExtractOperationStore } from '../stores/smartConfigStore.ts';
+import { useExtractOperationStore } from '../stores/extractOperationStore.ts';
 
 const defaultFhirServerUrl = 'https://hapi.fhir.org/baseR4';
 const defaultExtractEndpoint = 'https://proxy.smartforms.io/fhir';

apps/smart-forms-app/src/features/playground/components/PlaygroundRenderer.tsx

@@ -25,7 +25,7 @@ import { Box, Typography } from '@mui/material';
 import useLaunchContextNames from '../hooks/useLaunchContextNames.ts';
 import { TERMINOLOGY_SERVER_URL } from '../../../globals.ts';
 import ExtractButtonForPlayground from './ExtractButtonForPlayground.tsx';
-import { useExtractOperationStore } from '../stores/smartConfigStore.ts';
+import { useExtractOperationStore } from '../stores/extractOperationStore.ts';
 
 interface PlaygroundRendererProps {
   endpointUrl: string | null;

apps/smart-forms-app/src/features/playground/hooks/useShowExtractedOperationStoreProperty.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { useExtractOperationStore } from '../stores/smartConfigStore.ts';
+import { useExtractOperationStore } from '../stores/extractOperationStore.ts';
 
 function useShowExtractedOperationStoreProperty(selectedProperty: string) {
   const extractedResource = useExtractOperationStore.use.extractedResource();

apps/smart-forms-app/src/features/playground/stores/smartConfigStore.ts → apps/smart-forms-app/src/features/playground/stores/extractOperationStore.ts

@@ -17,7 +17,7 @@
 
 import { createStore } from 'zustand/vanilla';
 import type { StructureMap } from 'fhir/r4';
-import { createSelectors } from './selector';
+import { createSelectors } from '../../../stores/selector.ts';
 
 export interface ExtractOperationStoreType {
   targetStructureMap: StructureMap | null;

apps/smart-forms-app/src/features/renderer/components/RendererActions/RepopulateAction.tsx

@@ -24,13 +24,12 @@ import type { SpeedDialActionProps } from '@mui/material';
 import { SpeedDialAction, Tooltip } from '@mui/material';
 import type { RendererSpinner } from '../../types/rendererSpinner.ts';
 import useSmartClient from '../../../../hooks/useSmartClient.ts';
-import type { ItemToRepopulate } from '@aehrc/smart-forms-renderer';
 import { generateItemsToRepopulate, useQuestionnaireStore } from '@aehrc/smart-forms-renderer';
 import RepopulateDialog from '../../../repopulate/components/RepopulateDialog.tsx';
-import { useState } from 'react';
 import type { Encounter, Patient, Practitioner } from 'fhir/r4';
 import { useMutation } from '@tanstack/react-query';
 import { readCommonLaunchContexts } from '../../../smartAppLaunch/utils/launch.ts';
+import { useRepopulationStore } from '../../../repopulate/stores/RepopulationStore.ts';
 
 interface RepopulateActionProps extends SpeedDialActionProps {
   spinner: RendererSpinner;
@@ -43,7 +42,7 @@ function RepopulateAction(props: RepopulateActionProps) {
 
   const { smartClient, patient, user } = useSmartClient();
 
-  const [itemsToRepopulate, setItemsToRepopulate] = useState<Record<string, ItemToRepopulate>>({});
+  const setItemsToRepopulate = useRepopulationStore.use.setItemsToRepopulate();
 
   const sourceQuestionnaire = useQuestionnaireStore.use.sourceQuestionnaire();
   const fhirPathContext = useQuestionnaireStore.use.fhirPathContext();
@@ -175,7 +174,6 @@ function RepopulateAction(props: RepopulateActionProps) {
 
       <RepopulateDialog
         repopulateFetchingEnded={repopulateFetchEnded}
-        itemsToRepopulate={itemsToRepopulate}
         onCloseDialog={() => onSpinnerChange({ isSpinning: false, status: null, message: '' })}
         onSpinnerChange={onSpinnerChange}
       />

apps/smart-forms-app/src/features/repopulate/components/RepopulateDialog.tsx

@@ -15,20 +15,21 @@
  * limitations under the License.
  */
 
-import type { ItemToRepopulate } from '@aehrc/smart-forms-renderer';
 import RepopulateEmptyDialog from './RepopulateEmptyDialog.tsx';
 import RepopulateSelectDialog from './RepopulateSelectDialog.tsx';
 import type { RendererSpinner } from '../../renderer/types/rendererSpinner.ts';
+import { useRepopulationStore } from '../stores/RepopulationStore.ts';
 
 interface RepopulateDialogProps {
   repopulateFetchingEnded: boolean;
-  itemsToRepopulate: Record<string, ItemToRepopulate>;
   onCloseDialog: () => void;
   onSpinnerChange: (newSpinner: RendererSpinner) => void;
 }
 
 function RepopulateDialog(props: RepopulateDialogProps) {
-  const { repopulateFetchingEnded, itemsToRepopulate, onCloseDialog, onSpinnerChange } = props;
+  const { repopulateFetchingEnded, onCloseDialog, onSpinnerChange } = props;
+
+  const itemsToRepopulate = useRepopulationStore.use.itemsToRepopulate();
 
   if (!repopulateFetchingEnded) {
     return null;

apps/smart-forms-app/src/features/repopulate/stores/RepopulationStore.ts

@@ -0,0 +1,33 @@
+/*
+ * 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 { createStore } from 'zustand/vanilla';
+import { createSelectors } from '../../../stores/selector.ts';
+import type { ItemToRepopulate } from '@aehrc/smart-forms-renderer';
+
+export interface RepopulationStoreType {
+  itemsToRepopulate: Record<string, ItemToRepopulate>;
+  setItemsToRepopulate: (itemsToRepopulate: Record<string, ItemToRepopulate>) => void;
+}
+
+export const RepopulationStore = createStore<RepopulationStoreType>()((set) => ({
+  itemsToRepopulate: {},
+  setItemsToRepopulate: (itemsToRepopulate: Record<string, ItemToRepopulate>) =>
+    set(() => ({ itemsToRepopulate: itemsToRepopulate }))
+}));
+
+export const useRepopulationStore = createSelectors(RepopulationStore);