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

client/src/Context.js

@@ -10,6 +10,7 @@ function ContextProvider({ children }) {
   const [organization, setOrganization] = useState();
   const [hospital, setHospital] = useState();
   const [hospitalUser, setHospitalUser] = useState();
+  const [ringdownSections, setRingdownSections] = useState();
 
   const value = {
     user,
@@ -24,6 +25,8 @@ function ContextProvider({ children }) {
     setHospital,
     hospitalUser,
     setHospitalUser,
+    ringdownSections,
+    setRingdownSections,
   };
   return <Context.Provider value={value}>{children}</Context.Provider>;
 }

client/src/ER/ER.js

@@ -15,9 +15,12 @@ import Ringdowns from './Ringdowns';
 
 import notification from '../assets/notification.mp3';
 import { useTabPositions } from '../hooks/useTabPositions';
+import withUIContext from '../HOC/WithUIContext';
+import UIContext from '../UIContext';
 
-export default function ER() {
+const ER = () => {
   const { hospitalUser } = useContext(Context);
+  const { setRingdownSections } = useContext(UIContext);
   const socketUrl = `${window.location.origin.replace(/^http/, 'ws')}/wss/hospital?id=${hospitalUser?.hospital.id}`;
   const { lastMessage } = useWebSocket(socketUrl, { shouldReconnect: () => true });
   const { selectedTab, handleSelectTab } = useTabPositions('ringdown', {
@@ -95,6 +98,17 @@ export default function ER() {
     }
   }, [hasUnconfirmedRingdowns]);
 
+  useEffect(() => {
+    setRingdownSections({
+      waiting: {
+        expanded: true,
+      },
+      enroute: {
+        expanded: true,
+      },
+    });
+  }, [setRingdownSections]);
+
   return (
     <div className="grid-container minh-100vh">
       <div className="grid-row">
@@ -109,4 +123,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,21 @@
+import React, { createContext, useState } from 'react';
+import PropTypes from 'prop-types';
+
+const UIContext = createContext();
+
+function UIContextProvider({ children }) {
+  const [ringdownSections, setRingdownSections] = useState();
+
+  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;