Merge pull request #50 from mcode/add-refresh-button

Add refresh button to SMART on FHIR app to resend the order-select

.gitignore

@@ -22,4 +22,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-/logs
+logs/

src/views/Patient/MedReqDropDown/MedReqDropDown.tsx

@@ -9,8 +9,10 @@ import {
   Select,
   SelectChangeEvent,
   Typography,
-  Modal
+  Modal,
+  IconButton
 } from '@mui/material';
+import RefreshIcon from '@mui/icons-material/Refresh';
 import Box from '@mui/material/Box';
 import axios from 'axios';
 import { BundleEntry, Patient, MedicationRequest, Practitioner } from 'fhir/r4';
@@ -103,7 +105,7 @@ function MedReqDropDown(props: MedReqDropDownProps) {
   }, []);
 
   //CDS-Hook Request to REMS-Admin for cards
-  const SubmitToREMS = () => {
+  const submitToREMS = () => {
     axios({
       method: 'post',
       url:
@@ -123,7 +125,7 @@ function MedReqDropDown(props: MedReqDropDownProps) {
 
   useEffect(() => {
     if (cdsHook) {
-      SubmitToREMS();
+      submitToREMS();
     }
   }, [cdsHook]);
 
@@ -150,7 +152,7 @@ function MedReqDropDown(props: MedReqDropDownProps) {
     }
   };
 
-  // MedicationRequest Prefectching Bundle
+  // MedicationRequest Prefetching Bundle
   const [medication, setMedication] = useState<MedicationBundle | null>(null);
 
   const getMedicationRequest = () => {
@@ -165,15 +167,16 @@ function MedReqDropDown(props: MedReqDropDownProps) {
       });
   };
 
-  const [selectedMedicationCardBundle, setselectedMedicationCardBundle] =
+  const [selectedMedicationCardBundle, setSelectedMedicationCardBundle] =
     useState<BundleEntry<MedicationRequest>>();
 
-  const [selectedMedicationCard, setselectedMedicationCard] = useState<MedicationRequest>();
+  const [selectedMedicationCard, setSelectedMedicationCard] = useState<MedicationRequest>();
   const [medicationName, setMedicationName] = useState<string>('');
   const [tabIndex, setTabIndex] = useState<number>(1);
+
   useEffect(() => {
     if (selectedOption != '') {
-      setselectedMedicationCard(
+      setSelectedMedicationCard(
         medication?.data.find(medication => medication.id === selectedOption)
       );
     }
@@ -186,7 +189,7 @@ function MedReqDropDown(props: MedReqDropDownProps) {
       if (medName) {
         setMedicationName(medName);
       }
-      setselectedMedicationCardBundle({ resource: selectedMedicationCard });
+      setSelectedMedicationCardBundle({ resource: selectedMedicationCard });
     }
   }, [selectedMedicationCard]);
 
@@ -275,27 +278,42 @@ function MedReqDropDown(props: MedReqDropDownProps) {
 
               {selectedMedicationCard && (
                 <>
-                  <Grid item>
-                    <Typography bgcolor="text.secondary" color="white" textAlign="center">
-                      Code: {selectedMedicationCard?.medicationCodeableConcept?.coding?.[0].code}
-                    </Typography>
-                    <Typography
-                      bgcolor="text.disabled"
-                      variant="h5"
-                      textAlign="center"
-                      color="white"
-                    >
-                      {medicationName}
-                    </Typography>
-                    <Typography
-                      variant="h6"
-                      bgcolor="text.disabled"
-                      color="white"
-                      textAlign="center"
+                  <Grid item container>
+                    <Grid item xs={10} sm={11}>
+                      <Typography bgcolor="text.secondary" color="white" textAlign="center">
+                        Code: {selectedMedicationCard?.medicationCodeableConcept?.coding?.[0].code}
+                      </Typography>
+                      <Typography
+                        bgcolor="text.disabled"
+                        variant="h5"
+                        textAlign="center"
+                        color="white"
+                      >
+                        {medicationName}
+                      </Typography>
+                      <Typography
+                        variant="h6"
+                        bgcolor="text.disabled"
+                        color="white"
+                        textAlign="center"
+                      >
+                        {selectedMedicationCard?.medicationCodeableConcept?.coding?.[0].display}
+                      </Typography>
+                    </Grid>
+                    <Grid
+                      item
+                      container
+                      xs={2}
+                      sm={1}
+                      alignContent="center"
+                      justifyContent="center"
                     >
-                      {selectedMedicationCard?.medicationCodeableConcept?.coding?.[0].display}
-                    </Typography>
+                      <IconButton color="primary" onClick={submitToREMS} size="large">
+                        <RefreshIcon fontSize="large" />
+                      </IconButton>
+                    </Grid>
                   </Grid>
+
                   <Grid item container justifyContent="center" spacing={2}>
                     {etasu_status_enabled && (
                       <Grid item>

src/views/Patient/MedReqDropDown/cdsHooksCards/cdsHooksCard.tsx

@@ -159,7 +159,7 @@ const CdsHooksCard = (props: CdsHooksCardProps) => {
   const cardSource = { fontSize: '.85rem', fontStyle: 'italic', margin: '0 0 5px' };
   const sourceLink = { marginRight: '8px', color: '#4183c4', textDecoration: 'none' };
   return (
-    <Grid item>
+    <Grid item xs={12}>
       <Card variant="outlined" style={decisionCard}>
         <CardContent>
           <Typography variant="h5" component="div">