diff --git a/client/src/ER/ER.js b/client/src/ER/ER.js index 742c4f10..39c78a3f 100644 --- a/client/src/ER/ER.js +++ b/client/src/ER/ER.js @@ -15,8 +15,9 @@ import Ringdowns from './Ringdowns'; import notification from '../assets/notification.mp3'; import { useTabPositions } from '../hooks/useTabPositions'; +import { ERContextProvider } from './ERContext'; -export default function ER() { +const ER = () => { const { hospitalUser } = useContext(Context); const socketUrl = `${window.location.origin.replace(/^http/, 'ws')}/wss/hospital?id=${hospitalUser?.hospital.id}`; const { lastMessage } = useWebSocket(socketUrl, { shouldReconnect: () => true }); @@ -96,17 +97,23 @@ export default function ER() { }, [hasUnconfirmedRingdowns]); return ( -
-
-
- - {showRingdown && (!showTabs || selectedTab === 'ringdown') && } - {showInfo && (!showTabs || selectedTab === 'hospitalInfo') && ( - - )} - {showRingdown && hasUnconfirmedRingdowns && } + +
+
+
+ + {showRingdown && (!showTabs || selectedTab === 'ringdown') && ( + + )} + {showInfo && (!showTabs || selectedTab === 'hospitalInfo') && ( + + )} + {showRingdown && hasUnconfirmedRingdowns && } +
-
+ ); -} +}; + +export default ER; diff --git a/client/src/ER/ERContext.js b/client/src/ER/ERContext.js new file mode 100644 index 00000000..bad35302 --- /dev/null +++ b/client/src/ER/ERContext.js @@ -0,0 +1,28 @@ +import React, { createContext, useState } from 'react'; +import PropTypes from 'prop-types'; + +const ERContext = createContext(); + +function ERContextProvider({ children }) { + const [ringdownSections, setRingdownSections] = useState({ + waiting: { + expanded: true, + }, + enroute: { + expanded: true, + }, + }); + + const value = { + ringdownSections, + setRingdownSections, + }; + return {children}; +} +ERContextProvider.propTypes = { + children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired, +}; + +export { ERContextProvider }; + +export default ERContext; diff --git a/client/src/ER/RingdownSection.js b/client/src/ER/RingdownSection.js index 52ebaae8..a4c49bd7 100644 --- a/client/src/ER/RingdownSection.js +++ b/client/src/ER/RingdownSection.js @@ -1,21 +1,32 @@ -import React, { useState } from 'react'; +import React, { useContext } from 'react'; import PropTypes from 'prop-types'; import Ringdown from '../Models/Ringdown'; import RingdownCard from '../Components/RingdownCard'; import './RingdownSection.scss'; +import ERContext from './ERContext'; -function RingdownSection({ title, ringdowns, onStatusChange }) { - const [isExpanded, setExpanded] = useState(true); +function RingdownSection({ title, ringdowns, onStatusChange, id }) { + const { ringdownSections, setRingdownSections } = useContext(ERContext); + const isExpanded = ringdownSections && ringdownSections[id].expanded; + const handleExpanded = () => { + setRingdownSections({ + ...ringdownSections, + [id]: { + ...ringdownSections[id], + expanded: !ringdownSections[id].expanded, + }, + }); + }; return (
setExpanded(!isExpanded)} + onClick={handleExpanded} onKeyDown={(event) => { - if (event.key === 'Enter') setExpanded(!isExpanded); + if (event.key === 'Enter') handleExpanded(); }} role="button" tabIndex={0} diff --git a/client/src/ER/Ringdowns.js b/client/src/ER/Ringdowns.js index b7678a84..146f47ec 100644 --- a/client/src/ER/Ringdowns.js +++ b/client/src/ER/Ringdowns.js @@ -22,8 +22,8 @@ function Ringdowns({ ringdowns, onStatusChange }) { return ( <>
- - + +
);