From 1704754a13ad1d133597ba6517b88b9257199361 Mon Sep 17 00:00:00 2001 From: bryan kretz Date: Sun, 26 Feb 2023 14:04:44 -0800 Subject: [PATCH 1/6] add useEffect to RingdownSection.js --- client/src/ER/RingdownSection.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/client/src/ER/RingdownSection.js b/client/src/ER/RingdownSection.js index 52ebaae8..672d4dee 100644 --- a/client/src/ER/RingdownSection.js +++ b/client/src/ER/RingdownSection.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import Ringdown from '../Models/Ringdown'; @@ -9,6 +9,15 @@ import './RingdownSection.scss'; function RingdownSection({ title, ringdowns, onStatusChange }) { const [isExpanded, setExpanded] = useState(true); + // useEffect(() => { + // const cachedExpanded = JSON.parse(localStorage.getItem(`${title}-isExpanded`)) + // console.log('isExpanded',title, isExpanded) + // if(cachedExpanded !== null && cachedExpanded !== isExpanded) { + // setExpanded(cachedExpanded) + // } + // localStorage.setItem(`${title}-isExpanded`, isExpanded) + // }, [setExpanded, title, isExpanded]) + return (
Date: Sun, 26 Feb 2023 14:55:01 -0800 Subject: [PATCH 2/6] expanded value for RingdownSection.js set to localstorage --- client/src/ER/RingdownSection.js | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/client/src/ER/RingdownSection.js b/client/src/ER/RingdownSection.js index 672d4dee..eac8b9b2 100644 --- a/client/src/ER/RingdownSection.js +++ b/client/src/ER/RingdownSection.js @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useLayoutEffect, useState } from 'react'; import PropTypes from 'prop-types'; import Ringdown from '../Models/Ringdown'; @@ -9,14 +9,16 @@ import './RingdownSection.scss'; function RingdownSection({ title, ringdowns, onStatusChange }) { const [isExpanded, setExpanded] = useState(true); - // useEffect(() => { - // const cachedExpanded = JSON.parse(localStorage.getItem(`${title}-isExpanded`)) - // console.log('isExpanded',title, isExpanded) - // if(cachedExpanded !== null && cachedExpanded !== isExpanded) { - // setExpanded(cachedExpanded) - // } - // localStorage.setItem(`${title}-isExpanded`, isExpanded) - // }, [setExpanded, title, isExpanded]) + useLayoutEffect(() => { + const cachedExpanded = JSON.parse(localStorage.getItem(`${title}-isExpanded`)); + if (cachedExpanded !== null) { + setExpanded(cachedExpanded); + } + }, [title, setExpanded]); + + useEffect(() => { + return () => localStorage.setItem(`${title}-isExpanded`, isExpanded); + }); return (
From 08eaefee6d66578c45b9826f5141f2df422aa0bd Mon Sep 17 00:00:00 2001 From: bryan kretz Date: Thu, 2 Mar 2023 14:39:18 -0800 Subject: [PATCH 3/6] moved ringdown section ui logic to Context --- client/src/Context.js | 3 +++ client/src/ER/ER.js | 13 +++++++++++- client/src/ER/RingdownSection.js | 36 ++++++++++++++++---------------- client/src/ER/Ringdowns.js | 4 ++-- 4 files changed, 35 insertions(+), 21 deletions(-) diff --git a/client/src/Context.js b/client/src/Context.js index 14adc654..539fe543 100644 --- a/client/src/Context.js +++ b/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 {children}; } diff --git a/client/src/ER/ER.js b/client/src/ER/ER.js index 742c4f10..ed1e2fc7 100644 --- a/client/src/ER/ER.js +++ b/client/src/ER/ER.js @@ -17,7 +17,7 @@ import notification from '../assets/notification.mp3'; import { useTabPositions } from '../hooks/useTabPositions'; export default function ER() { - const { hospitalUser } = useContext(Context); + const { hospitalUser, setRingdownSections } = useContext(Context); 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 +95,17 @@ export default function ER() { } }, [hasUnconfirmedRingdowns]); + useEffect(() => { + setRingdownSections({ + waiting: { + expanded: true, + }, + enroute: { + expanded: true, + }, + }); + }, [setRingdownSections]); + return (
diff --git a/client/src/ER/RingdownSection.js b/client/src/ER/RingdownSection.js index eac8b9b2..24a5ab4d 100644 --- a/client/src/ER/RingdownSection.js +++ b/client/src/ER/RingdownSection.js @@ -1,32 +1,32 @@ -import React, { useEffect, useLayoutEffect, 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'; - -function RingdownSection({ title, ringdowns, onStatusChange }) { - const [isExpanded, setExpanded] = useState(true); - - useLayoutEffect(() => { - const cachedExpanded = JSON.parse(localStorage.getItem(`${title}-isExpanded`)); - if (cachedExpanded !== null) { - setExpanded(cachedExpanded); - } - }, [title, setExpanded]); - - useEffect(() => { - return () => localStorage.setItem(`${title}-isExpanded`, isExpanded); - }); - +import Context from '../Context'; + +function RingdownSection({ title, ringdowns, onStatusChange, id }) { + const { ringdownSections, setRingdownSections } = useContext(Context); + 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 ( <>
- - + +
); From 9e695a0174f11142c1402863f3da11d46e53bd22 Mon Sep 17 00:00:00 2001 From: bryan kretz Date: Sun, 5 Mar 2023 16:00:59 -0800 Subject: [PATCH 4/6] move UIContext to own file, HOC created for UIContextProvider --- client/src/ER/ER.js | 11 ++++++++--- client/src/ER/RingdownSection.js | 4 ++-- client/src/HOC/WithUIContext.js | 16 ++++++++++++++++ client/src/UIContext.js | 21 +++++++++++++++++++++ 4 files changed, 47 insertions(+), 5 deletions(-) create mode 100644 client/src/HOC/WithUIContext.js create mode 100644 client/src/UIContext.js diff --git a/client/src/ER/ER.js b/client/src/ER/ER.js index ed1e2fc7..89a36f24 100644 --- a/client/src/ER/ER.js +++ b/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 { hospitalUser, setRingdownSections } = useContext(Context); +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', { @@ -120,4 +123,6 @@ export default function ER() {
); -} +}; + +export default withUIContext(ER); diff --git a/client/src/ER/RingdownSection.js b/client/src/ER/RingdownSection.js index 24a5ab4d..8507483e 100644 --- a/client/src/ER/RingdownSection.js +++ b/client/src/ER/RingdownSection.js @@ -5,10 +5,10 @@ import Ringdown from '../Models/Ringdown'; import RingdownCard from '../Components/RingdownCard'; import './RingdownSection.scss'; -import Context from '../Context'; +import UIContext from '../UIContext'; function RingdownSection({ title, ringdowns, onStatusChange, id }) { - const { ringdownSections, setRingdownSections } = useContext(Context); + const { ringdownSections, setRingdownSections } = useContext(UIContext); const isExpanded = ringdownSections && ringdownSections[id].expanded; const handleExpanded = () => { diff --git a/client/src/HOC/WithUIContext.js b/client/src/HOC/WithUIContext.js new file mode 100644 index 00000000..b6e32d53 --- /dev/null +++ b/client/src/HOC/WithUIContext.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { UIContextProvider } from '../UIContext'; + +const withUIContext = (WrappedComponent) => { + const WithUIContext = ({ ...props }) => { + return ( + + ; + + ); + }; + + return WithUIContext; +}; + +export default withUIContext; diff --git a/client/src/UIContext.js b/client/src/UIContext.js new file mode 100644 index 00000000..b1b04096 --- /dev/null +++ b/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 {children}; +} +UIContextProvider.propTypes = { + children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired, +}; + +export { UIContextProvider }; + +export default UIContext; From 49c1bd01b98672916f70c254aea1e4c6ec97a25d Mon Sep 17 00:00:00 2001 From: bryan kretz Date: Mon, 6 Mar 2023 14:33:49 -0800 Subject: [PATCH 5/6] unused state removed from Context.js, setting initial state in UIContext.js --- client/src/Context.js | 3 --- client/src/ER/ER.js | 13 ------------- client/src/UIContext.js | 9 ++++++++- 3 files changed, 8 insertions(+), 17 deletions(-) diff --git a/client/src/Context.js b/client/src/Context.js index 539fe543..14adc654 100644 --- a/client/src/Context.js +++ b/client/src/Context.js @@ -10,7 +10,6 @@ function ContextProvider({ children }) { const [organization, setOrganization] = useState(); const [hospital, setHospital] = useState(); const [hospitalUser, setHospitalUser] = useState(); - const [ringdownSections, setRingdownSections] = useState(); const value = { user, @@ -25,8 +24,6 @@ function ContextProvider({ children }) { setHospital, hospitalUser, setHospitalUser, - ringdownSections, - setRingdownSections, }; return {children}; } diff --git a/client/src/ER/ER.js b/client/src/ER/ER.js index 89a36f24..58b8275c 100644 --- a/client/src/ER/ER.js +++ b/client/src/ER/ER.js @@ -16,11 +16,9 @@ import Ringdowns from './Ringdowns'; import notification from '../assets/notification.mp3'; import { useTabPositions } from '../hooks/useTabPositions'; import withUIContext from '../HOC/WithUIContext'; -import UIContext from '../UIContext'; 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', { @@ -98,17 +96,6 @@ const ER = () => { } }, [hasUnconfirmedRingdowns]); - useEffect(() => { - setRingdownSections({ - waiting: { - expanded: true, - }, - enroute: { - expanded: true, - }, - }); - }, [setRingdownSections]); - return (
diff --git a/client/src/UIContext.js b/client/src/UIContext.js index b1b04096..548fb8a8 100644 --- a/client/src/UIContext.js +++ b/client/src/UIContext.js @@ -4,7 +4,14 @@ import PropTypes from 'prop-types'; const UIContext = createContext(); function UIContextProvider({ children }) { - const [ringdownSections, setRingdownSections] = useState(); + const [ringdownSections, setRingdownSections] = useState({ + waiting: { + expanded: true, + }, + enroute: { + expanded: true, + }, + }); const value = { ringdownSections, From cdbbe19695a689f497daa6c136e1020b7ecbfeba Mon Sep 17 00:00:00 2001 From: bryan kretz Date: Mon, 6 Mar 2023 14:54:40 -0800 Subject: [PATCH 6/6] rename UIContext/provider to ERContext/Provider, move ERContext to ER directory, remove HOC --- client/src/ER/ER.js | 28 +++++++++++--------- client/src/{UIContext.js => ER/ERContext.js} | 12 ++++----- client/src/ER/RingdownSection.js | 4 +-- client/src/HOC/WithUIContext.js | 16 ----------- 4 files changed, 24 insertions(+), 36 deletions(-) rename client/src/{UIContext.js => ER/ERContext.js} (65%) delete mode 100644 client/src/HOC/WithUIContext.js diff --git a/client/src/ER/ER.js b/client/src/ER/ER.js index 58b8275c..39c78a3f 100644 --- a/client/src/ER/ER.js +++ b/client/src/ER/ER.js @@ -15,7 +15,7 @@ import Ringdowns from './Ringdowns'; import notification from '../assets/notification.mp3'; import { useTabPositions } from '../hooks/useTabPositions'; -import withUIContext from '../HOC/WithUIContext'; +import { ERContextProvider } from './ERContext'; const ER = () => { const { hospitalUser } = useContext(Context); @@ -97,19 +97,23 @@ const 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 withUIContext(ER); +export default ER; diff --git a/client/src/UIContext.js b/client/src/ER/ERContext.js similarity index 65% rename from client/src/UIContext.js rename to client/src/ER/ERContext.js index 548fb8a8..bad35302 100644 --- a/client/src/UIContext.js +++ b/client/src/ER/ERContext.js @@ -1,9 +1,9 @@ import React, { createContext, useState } from 'react'; import PropTypes from 'prop-types'; -const UIContext = createContext(); +const ERContext = createContext(); -function UIContextProvider({ children }) { +function ERContextProvider({ children }) { const [ringdownSections, setRingdownSections] = useState({ waiting: { expanded: true, @@ -17,12 +17,12 @@ function UIContextProvider({ children }) { ringdownSections, setRingdownSections, }; - return {children}; + return {children}; } -UIContextProvider.propTypes = { +ERContextProvider.propTypes = { children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired, }; -export { UIContextProvider }; +export { ERContextProvider }; -export default UIContext; +export default ERContext; diff --git a/client/src/ER/RingdownSection.js b/client/src/ER/RingdownSection.js index 8507483e..a4c49bd7 100644 --- a/client/src/ER/RingdownSection.js +++ b/client/src/ER/RingdownSection.js @@ -5,10 +5,10 @@ import Ringdown from '../Models/Ringdown'; import RingdownCard from '../Components/RingdownCard'; import './RingdownSection.scss'; -import UIContext from '../UIContext'; +import ERContext from './ERContext'; function RingdownSection({ title, ringdowns, onStatusChange, id }) { - const { ringdownSections, setRingdownSections } = useContext(UIContext); + const { ringdownSections, setRingdownSections } = useContext(ERContext); const isExpanded = ringdownSections && ringdownSections[id].expanded; const handleExpanded = () => { diff --git a/client/src/HOC/WithUIContext.js b/client/src/HOC/WithUIContext.js deleted file mode 100644 index b6e32d53..00000000 --- a/client/src/HOC/WithUIContext.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { UIContextProvider } from '../UIContext'; - -const withUIContext = (WrappedComponent) => { - const WithUIContext = ({ ...props }) => { - return ( - - ; - - ); - }; - - return WithUIContext; -}; - -export default withUIContext;