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 withUIContext from '../HOC/WithUIContext';
 
-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 });
@@ -109,4 +110,6 @@ export default function ER() {
       </div>
     </div>
   );
-}
+};
+
+export default withUIContext(ER);

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 UIContext from '../UIContext';
 
-function RingdownSection({ title, ringdowns, onStatusChange }) {
-  const [isExpanded, setExpanded] = useState(true);
+function RingdownSection({ title, ringdowns, onStatusChange, id }) {
+  const { ringdownSections, setRingdownSections } = useContext(UIContext);
+  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>
     </>
   );

client/src/HOC/WithUIContext.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { UIContextProvider } from '../UIContext';
+
+const withUIContext = (WrappedComponent) => {
+  const WithUIContext = ({ ...props }) => {
+    return (
+      <UIContextProvider>
+        <WrappedComponent {...props} />;
+      </UIContextProvider>
+    );
+  };
+
+  return WithUIContext;
+};
+
+export default withUIContext;

client/src/UIContext.js

@@ -0,0 +1,28 @@
+import React, { createContext, useState } from 'react';
+import PropTypes from 'prop-types';
+
+const UIContext = createContext();
+
+function UIContextProvider({ children }) {
+  const [ringdownSections, setRingdownSections] = useState({
+    waiting: {
+      expanded: true,
+    },
+    enroute: {
+      expanded: true,
+    },
+  });
+
+  const value = {
+    ringdownSections,
+    setRingdownSections,
+  };
+  return <UIContext.Provider value={value}>{children}</UIContext.Provider>;
+}
+UIContextProvider.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+};
+
+export { UIContextProvider };
+
+export default UIContext;