From d6f9b10ce2fadb07eaeefcb8a2a2c487e3c55117 Mon Sep 17 00:00:00 2001 From: Jeremy Kahn Date: Wed, 15 Mar 2023 09:48:35 -0500 Subject: [PATCH] feat: don't automatically close sidebars --- src/components/Room/useRoom.ts | 14 +--- src/components/Shell/Drawer.tsx | 22 ++---- src/components/Shell/Shell.tsx | 35 ++-------- src/components/Shell/ShellAppBar.tsx | 101 +++++++++++++-------------- src/contexts/ShellContext.ts | 2 - 5 files changed, 61 insertions(+), 113 deletions(-) diff --git a/src/components/Room/useRoom.ts b/src/components/Room/useRoom.ts index 502fd55..9a12a63 100644 --- a/src/components/Room/useRoom.ts +++ b/src/components/Room/useRoom.ts @@ -54,14 +54,12 @@ export function useRoom( const { numberOfPeers, setNumberOfPeers, - setDoShowPeers, peerList, setPeerList, tabHasFocus, showAlert, setRoomId, setPassword, - setIsPeerListOpen, customUsername, } = useContext(ShellContext) @@ -157,9 +155,9 @@ export function useRoom( useEffect(() => { return () => { peerRoom.leaveRoom() - setIsPeerListOpen(false) + setPeerList([]) } - }, [peerRoom, setIsPeerListOpen]) + }, [peerRoom, setPeerList]) useEffect(() => { setPassword(password) @@ -177,14 +175,6 @@ export function useRoom( } }, [roomId, setRoomId]) - useEffect(() => { - setDoShowPeers(true) - - return () => { - setDoShowPeers(false) - } - }, [setDoShowPeers]) - useEffect(() => { if (isShowingMessages) setUnreadMessages(0) }, [isShowingMessages, setUnreadMessages]) diff --git a/src/components/Shell/Drawer.tsx b/src/components/Shell/Drawer.tsx index e336839..c971e32 100644 --- a/src/components/Shell/Drawer.tsx +++ b/src/components/Shell/Drawer.tsx @@ -32,23 +32,11 @@ export const drawerWidth = 240 export interface DrawerProps extends PropsWithChildren { isDrawerOpen: boolean - onAboutLinkClick: () => void - onDisclaimerClick: () => void onDrawerClose: () => void - onHomeLinkClick: () => void - onSettingsLinkClick: () => void theme: Theme } -export const Drawer = ({ - isDrawerOpen, - onAboutLinkClick, - onDisclaimerClick, - onDrawerClose, - onHomeLinkClick, - onSettingsLinkClick, - theme, -}: DrawerProps) => { +export const Drawer = ({ isDrawerOpen, onDrawerClose, theme }: DrawerProps) => { const settingsContext = useContext(SettingsContext) const colorMode = settingsContext.getUserSettings().colorMode @@ -82,7 +70,7 @@ export const Drawer = ({ - + @@ -92,7 +80,7 @@ export const Drawer = ({ - + @@ -102,7 +90,7 @@ export const Drawer = ({ - + @@ -112,7 +100,7 @@ export const Drawer = ({ - + diff --git a/src/components/Shell/Shell.tsx b/src/components/Shell/Shell.tsx index 1209877..8c7cb74 100644 --- a/src/components/Shell/Shell.tsx +++ b/src/components/Shell/Shell.tsx @@ -55,7 +55,6 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => { const [isDrawerOpen, setIsDrawerOpen] = useState(defaultSidebarsOpen) const [isQRCodeDialogOpen, setIsQRCodeDialogOpen] = useState(false) const [isRoomShareDialogOpen, setIsRoomShareDialogOpen] = useState(false) - const [doShowPeers, setDoShowPeers] = useState(false) const [alertSeverity, setAlertSeverity] = useState('info') const [showAppBar, setShowAppBar] = useState(true) const [showRoomControls, setShowRoomControls] = useState(true) @@ -66,7 +65,7 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => { const [roomId, setRoomId] = useState(undefined) const [password, setPassword] = useState(undefined) const [isPeerListOpen, setIsPeerListOpen] = useState(defaultSidebarsOpen) - const [peerList, setPeerList] = useState([]) // except you + const [peerList, setPeerList] = useState([]) // except self const [tabHasFocus, setTabHasFocus] = useState(true) const [audioState, setAudioState] = useState(AudioState.STOPPED) const [videoState, setVideoState] = useState(VideoState.STOPPED) @@ -91,7 +90,6 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => { () => ({ numberOfPeers, tabHasFocus, - setDoShowPeers, setNumberOfPeers, showRoomControls, setShowRoomControls, @@ -127,7 +125,6 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => { numberOfPeers, peerList, tabHasFocus, - setDoShowPeers, setNumberOfPeers, showRoomControls, setShowRoomControls, @@ -242,6 +239,10 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => { setIsDrawerOpen(true) } + const handleDrawerClose = () => { + setIsDrawerOpen(false) + } + const handlePeerListClick = () => { setIsPeerListOpen(!isPeerListOpen) } @@ -263,26 +264,6 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => { } } - const handleDrawerClose = () => { - setIsDrawerOpen(false) - } - - const handleHomeLinkClick = () => { - setIsDrawerOpen(false) - } - - const handleAboutLinkClick = () => { - setIsDrawerOpen(false) - } - - const handleDisclaimerLinkClick = () => { - setIsDrawerOpen(false) - } - - const handleSettingsLinkClick = () => { - setIsDrawerOpen(false) - } - const handleQRCodeDialogClose = () => { setIsQRCodeDialogOpen(false) } @@ -310,12 +291,10 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => { onAlertClose={handleAlertClose} /> setShowRoomControls(!showRoomControls)} @@ -326,11 +305,7 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => { /> void onLinkButtonClick: () => Promise isDrawerOpen: boolean isPeerListOpen: boolean - numberOfPeers: number title: string onPeerListClick: () => void onRoomControlsClick: () => void @@ -71,13 +73,11 @@ interface ShellAppBarProps { } export const ShellAppBar = ({ - doShowPeers, onDrawerOpen, onLinkButtonClick, isDrawerOpen, isPeerListOpen, setIsQRCodeDialogOpen, - numberOfPeers, title, onPeerListClick, onRoomControlsClick, @@ -85,6 +85,7 @@ export const ShellAppBar = ({ isFullscreen, setIsFullscreen, }: ShellAppBarProps) => { + const { peerList } = useContext(ShellContext) const handleQRCodeClick = () => setIsQRCodeDialogOpen(true) const onClickFullscreen = () => setIsFullscreen(!isFullscreen) return ( @@ -131,54 +132,50 @@ export const ShellAppBar = ({ - {doShowPeers ? ( - <> - - - - - - - - - - - - - {isFullscreen ? : } - - - - - - - - - ) : null} + + + + + + + + + + + + + {isFullscreen ? : } + + + + + + + diff --git a/src/contexts/ShellContext.ts b/src/contexts/ShellContext.ts index f36e27a..5191c6a 100644 --- a/src/contexts/ShellContext.ts +++ b/src/contexts/ShellContext.ts @@ -6,7 +6,6 @@ import { AudioState, ScreenShareState, VideoState, Peer } from 'models/chat' interface ShellContextProps { numberOfPeers: number tabHasFocus: boolean - setDoShowPeers: Dispatch> setNumberOfPeers: Dispatch> showRoomControls: boolean setShowRoomControls: Dispatch> @@ -35,7 +34,6 @@ interface ShellContextProps { export const ShellContext = createContext({ numberOfPeers: 1, tabHasFocus: true, - setDoShowPeers: () => {}, setNumberOfPeers: () => {}, showRoomControls: false, setShowRoomControls: () => {},