diff --git a/src/components/RequestDashboard/Communication.jsx b/src/components/RequestDashboard/Communication.jsx
new file mode 100644
index 0000000..ecf490b
--- /dev/null
+++ b/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 (
+
+
+
+ {`ID: ${communication.id}`}
+
+
+ {`Received: ${convertTimeStamp(communication.received)}`}
+
+
+ }
+ onClick={() => {
+ deleteCommunication(communication.id);
+ }}
+ >
+ Clear
+
+
+
+ {communication.payload[0].contentString}
+
+
+
+ );
+};
+
+export default Communication;
\ No newline at end of file
diff --git a/src/components/RequestDashboard/CommunicationsDialog.jsx b/src/components/RequestDashboard/CommunicationsDialog.jsx
new file mode 100644
index 0000000..ba7d7ef
--- /dev/null
+++ b/src/components/RequestDashboard/CommunicationsDialog.jsx
@@ -0,0 +1,140 @@
+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}`);
+ getCommunications();
+ });
+ }
+ }
+
+ 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 (
+
+ {state.communications.map(communication => {
+ return (
+
+
+
+ );
+ })}
+
+ );
+ }
+
+ return (
+
+ {
+ setState(prevState => ({ ...prevState, open: true, initialLoad: true}));
+ }} >
+
+
+
+
+
+ );
+};
+
+export default CommunicationsDialog;
\ No newline at end of file
diff --git a/src/components/RequestDashboard/Home.jsx b/src/components/RequestDashboard/Home.jsx
index da8a9b0..61b538c 100644
--- a/src/components/RequestDashboard/Home.jsx
+++ b/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 ? (
-
+
+
+
{token.name}