Maintain collapsed state of Ringdowns list when switching tabs in ER view

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 (
-    <div className="grid-container minh-100vh">
-      <div className="grid-row">
-        <div className="tablet:grid-col-6 tablet:grid-offset-3">
-          <RoutedHeader selectedTab={selectedTab} onSelect={handleSelectTab} />
-          {showRingdown && (!showTabs || selectedTab === 'ringdown') && <Ringdowns ringdowns={ringdowns} onStatusChange={onStatusChange} />}
-          {showInfo && (!showTabs || selectedTab === 'hospitalInfo') && (
-            <Beds statusUpdate={statusUpdate} onStatusUpdate={onStatusUpdate} incomingRingdownsCount={incomingRingdownsCount} />
-          )}
-          {showRingdown && hasUnconfirmedRingdowns && <UnconfirmedRingdowns onConfirm={onConfirm} ringdowns={unconfirmedRingdowns} />}
+    <ERContextProvider>
+      <div className="grid-container minh-100vh">
+        <div className="grid-row">
+          <div className="tablet:grid-col-6 tablet:grid-offset-3">
+            <RoutedHeader selectedTab={selectedTab} onSelect={handleSelectTab} />
+            {showRingdown && (!showTabs || selectedTab === 'ringdown') && (
+              <Ringdowns ringdowns={ringdowns} onStatusChange={onStatusChange} />
+            )}
+            {showInfo && (!showTabs || selectedTab === 'hospitalInfo') && (
+              <Beds statusUpdate={statusUpdate} onStatusUpdate={onStatusUpdate} incomingRingdownsCount={incomingRingdownsCount} />
+            )}
+            {showRingdown && hasUnconfirmedRingdowns && <UnconfirmedRingdowns onConfirm={onConfirm} ringdowns={unconfirmedRingdowns} />}
+          </div>
         </div>
       </div>
-    </div>
+    </ERContextProvider>
   );
-}
+};
+
+export default ER;

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 <ERContext.Provider value={value}>{children}</ERContext.Provider>;
+}
+ERContextProvider.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+};
+
+export { ERContextProvider };
+
+export default ERContext;

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 (
     <div className="ringdown-section">
       <div
         className="usa-accordion__heading ringdown-section__header"
-        onClick={() => setExpanded(!isExpanded)}
+        onClick={handleExpanded}
         onKeyDown={(event) => {
-          if (event.key === 'Enter') setExpanded(!isExpanded);
+          if (event.key === 'Enter') handleExpanded();
         }}
         role="button"
         tabIndex={0}

client/src/ER/Ringdowns.js

@@ -22,8 +22,8 @@ function Ringdowns({ ringdowns, onStatusChange }) {
   return (
     <>
       <div className="usa-accordion ringdowns">
-        <RingdownSection title="Waiting" ringdowns={waiting} onStatusChange={onStatusChange} />
-        <RingdownSection title="Incoming" ringdowns={enroute} onStatusChange={onStatusChange} />
+        <RingdownSection title="Waiting" id="waiting" ringdowns={waiting} onStatusChange={onStatusChange} />
+        <RingdownSection title="Incoming" id="enroute" ringdowns={enroute} onStatusChange={onStatusChange} />
       </div>
     </>
   );