Display FHIR Communications resources from the FHIR server

Author: plarocque4

src/components/RequestDashboard/Communication.jsx

@@ -0,0 +1,45 @@
+import { Button, Grid } from "@mui/material";
+import DeleteIcon from '@mui/icons-material/Delete';
+import useStyles from './styles';
+
+
+const Communication = props => {
+    const classes = useStyles();
+    const { communication, deleteCommunication } = props;
+
+    const convertTimeStamp = (timeStamp) => {
+        const date = new Date(timeStamp);
+        return date.toLocaleString();
+    };
+
+    return (
+        <div>
+            <Grid container>
+                <Grid className={classes.communicationHeader} item xs={2}>
+                    {`ID: ${communication.id}`}
+                </Grid>
+                <Grid className={classes.communicationHeader} item xs={8.7}>
+                    {`Received: ${convertTimeStamp(communication.received)}`}
+                </Grid>
+                <Grid className={classes.communicationHeaderButton} item xs={1.3}>
+                    <Button
+                        fullWidth
+                        variant="contained"
+                        color="error"
+                        startIcon={<DeleteIcon />}
+                        onClick={() => {
+                            deleteCommunication(communication.id);
+                        }}
+                    >
+                        Clear
+                    </Button>
+                </Grid>
+                <Grid className={classes.communicationDescription} item xs={12}>
+                    {communication.payload[0].contentString}
+                </Grid>
+            </Grid>
+        </div>
+    );
+};
+
+export default Communication;

src/components/RequestDashboard/CommunicationsDialog.jsx

@@ -0,0 +1,139 @@
+import { useEffect, useState } from 'react';
+
+import { Button, Grid } from '@mui/material';
+import NotificationsIcon from '@mui/icons-material/Notifications';
+import Badge from '@mui/material/Badge';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import { Refresh } from '@mui/icons-material'
+
+import { styled } from '@mui/material/styles';
+import Paper from '@mui/material/Paper';
+import Communication from './Communication';
+
+const CommunicationsDialog = props => {
+  const { client, token } = props;
+  const [state, setState] = useState({
+    client: client,
+    token: token,
+    initialLoad: true,
+    communicationCount: 0,
+    communications: [],
+    open: false
+  });
+
+  const debugLog = (message) => {
+    console.log('CommunicationsDialog: ' + message);
+  };
+
+  useEffect(() => {
+    // reload on page load and dialog open
+    if (state.initialLoad) {
+      setState(prevState => ({ ...prevState, initialLoad: false}));
+      getCommunications();
+    }
+
+    const interval = setInterval(() => {
+      // page load...
+      getCommunications();
+
+    }, 1000 * 5) // reload every 5 seconds
+
+    return () => clearInterval(interval);
+
+  });
+
+  const getCommunications = () => {
+    if (state.client) {
+      // try to read communications from FHIR server
+      state.client
+        .request(`Communication?recipient=${props.token?.userId}`, {
+          graph: false,
+          flat: true
+        })
+        .then(bundle => {
+          loadCommunications(bundle);
+        });
+    }
+  }
+
+  const deleteCommunication = (id) => {
+    debugLog('deleteCommunication: ' + id);
+    if (id) {
+      state.client.delete(`Communication/${id}`).then(() => {
+        debugLog(`Deleted communication: ${id}`);
+      });
+    }
+  }
+
+  const loadCommunications = (bundle) => {
+    let count = bundle.length;
+    setState(prevState => ({ ...prevState, communicationCount: count, communications: bundle}));
+  };
+
+  const handleClose = () => {
+    setState(prevState => ({ ...prevState, open: false}));
+  };
+
+  const Item = styled(Paper)(({ theme }) => ({
+    backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#EDF6FF',
+    ...theme.typography.body2,
+    padding: theme.spacing(1),
+    textAlign: 'left',
+    color: theme.palette.text.secondary,
+  }));
+
+  const renderCommunications = () => {
+    return (
+        <Grid container spacing={2} sx={{ mt: 2 }}>
+        {state.communications.map(communication => {
+          return (
+            <Grid item xs={12} sm={12}>
+              <Item><Communication communication={communication} deleteCommunication={deleteCommunication}/></Item>
+            </Grid>
+          );
+        })}
+        </Grid>
+    );
+  }
+
+  return (
+    <span>
+    <span onClick={() => {
+      setState(prevState => ({ ...prevState, open: true, initialLoad: true}));
+    }} >
+    <Badge badgeContent={state.communicationCount} color="primary">
+      <NotificationsIcon sx={{ fontSize: 26, verticalAlign: 'middle' }} />
+    </Badge></span>
+    <Dialog fullWidth maxWidth='md' onClose={handleClose} open={state.open}>
+      <DialogTitle>
+        <Grid container>
+          <Grid item xs={10}>
+            <NotificationsIcon sx={{ fontSize: 26, verticalAlign: 'middle' }} />
+            Communications ({state.communicationCount})
+          </Grid>
+          <Grid item xs={2}>
+            <Button
+              variant="contained"
+              startIcon={<Refresh />}
+              onClick={() => {
+                getCommunications();
+              }}
+            >
+              Refresh
+            </Button>
+          </Grid>
+        </Grid>
+      </DialogTitle>
+
+      <DialogContent>
+        { renderCommunications() }
+      </DialogContent>
+
+    </Dialog>
+    </span>
+  );
+};
+
+export default CommunicationsDialog;

src/components/RequestDashboard/Home.jsx

@@ -6,11 +6,13 @@ import SettingsIcon from '@mui/icons-material/Settings';
 import AccountBoxIcon from '@mui/icons-material/AccountBox';
 import MedicalServicesIcon from '@mui/icons-material/MedicalServices';
 
+import CommunicationsDialog from './CommunicationsDialog';
 import useStyles from './styles';
 import PatientSection from './PatientSection';
 import SettingsSection from './SettingsSection';
 import TasksSection from './TasksSection';
 
+
 import { logout } from '../../util/auth';
 
 const Home = props => {
@@ -82,8 +84,12 @@ const Home = props => {
           {/* spacer */}
           {/** */}
           {section ? (
-            <Grid className={classes.spacer} item xs={4}>
+            <Grid className={classes.spacer} item xs={5}>
               <span className={classes.loginIcon}>
+                <CommunicationsDialog 
+                  client={props.client} token={token}
+                />
+                &nbsp;&nbsp;
                 <AccountBoxIcon sx={{ fontSize: 48, verticalAlign: 'middle' }} /> {token.name}
                 <Button variant="outlined" className={classes.whiteButton} onClick={logout}>
                   Logout

src/components/RequestDashboard/styles.jsx

@@ -158,6 +158,19 @@ export default makeStyles(
       borderColor: 'white !important',
       marginRight: '5px !important',
       marginLeft: '20px !important'
+    },
+    communicationHeader: {
+      fontSize: '12px',
+      color: '#777',
+      borderBottom: '1px solid #e3e3ef'
+    },
+    communicationDescription: {
+      fontSize: '18px',
+      padding: '8px 0px 10px 2px'
+    },
+    communicationHeaderButton: {
+      height: '40px',
+      borderBottom: '1px solid #e3e3ef'
     }
   }),