Fix medication dispense flicker

src/components/MedicationStatus/MedicationStatus.jsx

@@ -1,30 +1,14 @@
-import axios from 'axios';
 import { MedicationStatusButton } from './MedicationStatusButton.jsx';
 import { MedicationStatusModal } from './MedicationStatusModal.jsx';
 import { useState, useEffect } from 'react';
 import { Card } from '@mui/material';
 
 export const MedicationStatus = props => {
-  const { ehrUrl, request } = props;
-  const [medicationDispense, setMedicationDispense] = useState(null);
+  const { ehrUrl, request, medicationDispense, getMedicationStatus, lastCheckedMedicationTime } =
+    props;
   const [showMedicationStatus, setShowMedicationStatus] = useState(false);
-  const [lastCheckedMedicationTime, setLastCheckedMedicationTime] = useState(null);
 
-  useEffect(() => getMedicationStatus(), [request.id]);
-
-  const getMedicationStatus = () => {
-    setLastCheckedMedicationTime(Date.now());
-
-    axios.get(`${ehrUrl}/MedicationDispense?prescription=${request.id}`).then(
-      response => {
-        const bundle = response.data;
-        setMedicationDispense(bundle.entry?.[0].resource);
-      },
-      error => {
-        console.log('Was not able to get medication status', error);
-      }
-    );
-  };
+  useEffect(() => getMedicationStatus(), [request.id, ehrUrl]);
 
   const handleCloseMedicationStatus = () => {
     setShowMedicationStatus(false);

src/components/RequestDashboard/SettingsSection.jsx

@@ -34,10 +34,11 @@ const SettingsSection = props => {
           console.log('Could not load setting:' + element[0]);
         }
       }
-      // indicate to the rest of the app that the settings have been loaded
-      dispatch({
-        type: actionTypes.flagStartup
-      });
+    });
+
+    // indicate to the rest of the app that the settings have been loaded
+    dispatch({
+      type: actionTypes.flagStartup
     });
   }, []);
   const updateSetting = (key, value) => {

src/containers/RequestBuilder.js

@@ -7,7 +7,7 @@ import DisplayBox from '../components/DisplayBox/DisplayBox';
 import '../index.css';
 import RequestBox from '../components/RequestBox/RequestBox';
 import buildRequest from '../util/buildRequest.js';
-import { types, defaultValues, headerDefinitions } from '../util/data.js';
+import { types, defaultValues as codeValues, headerDefinitions } from '../util/data.js';
 import { createJwt } from '../util/auth';
 
 import env from 'env-var';
@@ -20,6 +20,7 @@ import SettingsIcon from '@mui/icons-material/Settings';
 import PatientSearchBar from '../components/RequestBox/PatientSearchBar/PatientSearchBar';
 import { MedicationStatus } from '../components/MedicationStatus/MedicationStatus.jsx';
 import { actionTypes } from './ContextProvider/reducer.js';
+import axios from 'axios';
 
 export default class RequestBuilder extends Component {
   constructor(props) {
@@ -39,16 +40,35 @@ export default class RequestBuilder extends Component {
       showSettings: false,
       token: null,
       client: this.props.client,
-      codeValues: defaultValues
+      medicationDispense: null,
+      lastCheckedMedicationTime: null
     };
 
     this.updateStateElement = this.updateStateElement.bind(this);
-    this.submit_info = this.submit_info.bind(this);
+    this.submitInfo = this.submitInfo.bind(this);
     this.consoleLog = this.consoleLog.bind(this);
     this.takeSuggestion = this.takeSuggestion.bind(this);
     this.requestBox = React.createRef();
   }
 
+  getMedicationStatus = () => {
+    this.setState({ lastCheckedMedicationTime: Date.now() });
+
+    axios
+      .get(
+        `${this.props.globalState.ehrUrl}/MedicationDispense?prescription=${this.state.request.id}`
+      )
+      .then(
+        response => {
+          const bundle = response.data;
+          this.setState({ medicationDispense: bundle.entry?.[0].resource });
+        },
+        error => {
+          console.log('Was not able to get medication status', error);
+        }
+      );
+  };
+
   componentDidMount() {
     if (!this.state.client) {
       this.reconnectEhr();
@@ -102,7 +122,7 @@ export default class RequestBuilder extends Component {
     return controller;
   };
 
-  submit_info(prefetch, request, patient, hook) {
+  submitInfo(prefetch, request, patient, hook) {
     this.setState({ loading: true });
     this.consoleLog('Initiating form submission', types.info);
     this.setState({ patient });
@@ -270,9 +290,7 @@ export default class RequestBuilder extends Component {
                         callback={this.updateStateElement}
                         callbackList={this.updateStateList}
                         callbackMap={this.updateStateMap}
-                        // updatePrefetchCallback={PrefetchTemplate.generateQueries}
                         clearCallback={this.clearState}
-                        options={this.state.codeValues}
                         responseExpirationDays={this.props.globalState.responseExpirationDays}
                         defaultUser={this.props.globalState.defaultUser}
                       />
@@ -293,7 +311,7 @@ export default class RequestBuilder extends Component {
               <Grid item>
                 <RequestBox
                   ehrUrl={this.props.globalState.ehrUrl}
-                  submitInfo={this.submit_info}
+                  submitInfo={this.submitInfo}
                   access_token={this.state.token}
                   client={this.state.client}
                   fhirServerUrl={this.props.globalState.baseUrl}
@@ -323,6 +341,9 @@ export default class RequestBuilder extends Component {
                 <MedicationStatus
                   ehrUrl={this.props.globalState.ehrUrl}
                   request={this.state.request}
+                  medicationDispense={this.state.medicationDispense}
+                  getMedicationStatus={this.getMedicationStatus}
+                  lastCheckedMedicationTime={this.state.lastCheckedMedicationTime}
                 />
               </Grid>
             )}