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)}`} + + + + + + {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})); + }} > + + + + + + + + + Communications ({state.communicationCount}) + + + + + + + + + { renderCommunications() } + + + + + ); +}; + +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}