From ed7d71f5d0ac2103e3dce2a1d1177878d2a6a306 Mon Sep 17 00:00:00 2001 From: talksik Date: Wed, 18 May 2022 06:57:55 -0500 Subject: [PATCH] organizing stuff better with taking out a layer of abstraction as we don't have many pages and just do everything in the provider --- .../desktop/src/providers/StreamProvider.tsx | 6 ++--- ...eRoomProvider.tsx => TerminalProvider.tsx} | 15 ++++++++++- packages/desktop/src/tree/electronApp.tsx | 13 +++++----- .../src/tree/protected/terminal/Terminal.tsx | 26 ------------------- .../protected/terminal/line/LineDetails.tsx | 4 +-- .../tree/protected/terminal/line/LineRow.tsx | 6 ++++- .../protected/terminal/panels/MainPanel.tsx | 4 +-- .../protected/terminal/panels/SidePanel.tsx | 6 ++--- 8 files changed, 35 insertions(+), 45 deletions(-) rename packages/desktop/src/providers/{RealTimeRoomProvider.tsx => TerminalProvider.tsx} (95%) delete mode 100644 packages/desktop/src/tree/protected/terminal/Terminal.tsx diff --git a/packages/desktop/src/providers/StreamProvider.tsx b/packages/desktop/src/providers/StreamProvider.tsx index 25b7bec..144f1b6 100644 --- a/packages/desktop/src/providers/StreamProvider.tsx +++ b/packages/desktop/src/providers/StreamProvider.tsx @@ -21,9 +21,8 @@ import React, { useEffect, useContext, useState, useRef, useMemo, useCallback } from 'react'; import Peer from 'simple-peer'; -import useRealTimeRooms from './RealTimeRoomProvider'; import useAuth from './AuthProvider'; -import { Updater, useImmer } from 'use-immer'; +import { useImmer } from 'use-immer'; import useSockets from './SocketProvider'; import { RtcReceiveSignalResponse, @@ -32,6 +31,7 @@ import { ServerResponseChannels, } from '@nirvana/core/sockets/channels'; import toast from 'react-hot-toast'; +import useTerminalProvider from './TerminalProvider'; type PeerMap = { [userId: string]: Peer; @@ -45,7 +45,7 @@ const StreamProviderContext = React.createContext({ }); export function StreamProvider({ children }: { children: React.ReactChild }) { - const { roomsMap } = useRealTimeRooms(); + const { roomsMap } = useTerminalProvider(); const { user } = useAuth(); const { $ws } = useSockets(); diff --git a/packages/desktop/src/providers/RealTimeRoomProvider.tsx b/packages/desktop/src/providers/TerminalProvider.tsx similarity index 95% rename from packages/desktop/src/providers/RealTimeRoomProvider.tsx rename to packages/desktop/src/providers/TerminalProvider.tsx index 08049e8..88b6ba7 100644 --- a/packages/desktop/src/providers/RealTimeRoomProvider.tsx +++ b/packages/desktop/src/providers/TerminalProvider.tsx @@ -26,6 +26,9 @@ import { updateLineMemberState } from '../api/NirvanaApi'; import UpdateLineMemberState from '@nirvana/core/requests/updateLineMemberState.request'; import useAuth from './AuthProvider'; import { User } from '@nirvana/core/models/user.model'; +import SidePanel from '../tree/protected/terminal/panels/SidePanel'; +import MainPanel from '../tree/protected/terminal/panels/MainPanel'; +import useElectron from './ElectronProvider'; type LineIdToMasterLine = { [lineId: string]: MasterLineData; @@ -113,6 +116,8 @@ export function RealTimeRoomProvider({ children }: { children: React.ReactChild const { $ws } = useSockets(); const [roomMap, updateRoomMap] = useImmer({}); + const { desktopMode } = useElectron(); + const [selectedLineId, setSelectedLineId] = useState(); const [moveLineState, moveLine] = useAsyncFn(updateLineMemberState); @@ -353,11 +358,19 @@ export function RealTimeRoomProvider({ children }: { children: React.ReactChild handleShowNewChannelForm, }} > +
+
+ + + {desktopMode === 'mainApp' && } +
+
+ {children} ); } -export default function useRealTimeRooms() { +export default function useTerminalProvider() { return useContext(RealTimeRoomContext); } diff --git a/packages/desktop/src/tree/electronApp.tsx b/packages/desktop/src/tree/electronApp.tsx index 5e44615..41481c0 100644 --- a/packages/desktop/src/tree/electronApp.tsx +++ b/packages/desktop/src/tree/electronApp.tsx @@ -1,12 +1,11 @@ import React from 'react'; import { Toaster } from 'react-hot-toast'; import { RoomsProvider } from '../providers/RoomsProvider'; -import { RealTimeRoomProvider } from '../providers/RealTimeRoomProvider'; +import { RealTimeRoomProvider } from '../providers/TerminalProvider'; import { AuthProvider } from '../providers/AuthProvider'; import { ElectronProvider } from '../providers/ElectronProvider'; import { SocketProvider } from '../providers/SocketProvider'; import ProtectedRoute from './protected/ProtectedRoute'; -import Terminal from './protected/terminal/Terminal'; import { StreamProvider } from '../providers/StreamProvider'; export default function ElectronApp() { @@ -16,11 +15,11 @@ export default function ElectronApp() { - - - - - + + + <> + + diff --git a/packages/desktop/src/tree/protected/terminal/Terminal.tsx b/packages/desktop/src/tree/protected/terminal/Terminal.tsx deleted file mode 100644 index ffe3ee0..0000000 --- a/packages/desktop/src/tree/protected/terminal/Terminal.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React, { useCallback, useState } from 'react'; -import useRealTimeRooms from '../../../providers/RealTimeRoomProvider'; -import useElectron from '../../../providers/ElectronProvider'; -import useAuth from '../../../providers/AuthProvider'; -import NavBar from './navbar/Navbar'; -import MasterLineData from '@nirvana/core/models/masterLineData.model'; - -import useRooms from '../../../providers/RoomsProvider'; -import toast from 'react-hot-toast'; -import SidePanel from './panels/SidePanel'; -import MainPanel from './panels/MainPanel'; - -export default function Terminal() { - const { roomsMap } = useRealTimeRooms(); - const { desktopMode } = useElectron(); - - return ( -
-
- - - {desktopMode === 'mainApp' && } -
-
- ); -} diff --git a/packages/desktop/src/tree/protected/terminal/line/LineDetails.tsx b/packages/desktop/src/tree/protected/terminal/line/LineDetails.tsx index 1bceafc..c314885 100644 --- a/packages/desktop/src/tree/protected/terminal/line/LineDetails.tsx +++ b/packages/desktop/src/tree/protected/terminal/line/LineDetails.tsx @@ -1,6 +1,5 @@ import React, { useMemo, useEffect, useState, useCallback } from 'react'; import useAuth from '../../../../providers/AuthProvider'; -import useRealTimeRooms from '../../../../providers/RealTimeRoomProvider'; import useStreams from '../../../../providers/StreamProvider'; import { LineMemberState } from '@nirvana/core/models/line.model'; @@ -19,11 +18,12 @@ import { } from 'react-icons/fi'; import { Avatar, Tooltip } from 'antd'; import { useKeyPressEvent } from 'react-use'; +import useTerminalProvider from '../../../../providers/TerminalProvider'; export default function LineDetails() { const { user } = useAuth(); - const { selectedLineId, roomsMap, handleUpdateLineMemberState } = useRealTimeRooms(); + const { selectedLineId, roomsMap, handleUpdateLineMemberState } = useTerminalProvider(); const selectedLine = useMemo(() => roomsMap[selectedLineId], [selectedLineId, roomsMap]); diff --git a/packages/desktop/src/tree/protected/terminal/line/LineRow.tsx b/packages/desktop/src/tree/protected/terminal/line/LineRow.tsx index 36041ca..5935506 100644 --- a/packages/desktop/src/tree/protected/terminal/line/LineRow.tsx +++ b/packages/desktop/src/tree/protected/terminal/line/LineRow.tsx @@ -40,7 +40,11 @@ export default React.memo(function LineRow({ }, [handleSelectLine, line.lineDetails, index]); const hotkeyActivateLine = useCallback(() => { - if (isUserToggleTuned) handleActivateLine(); + // TODO: disable for higher numbers? ehh maybe hidden easter egg to select more? + + // if (isUserToggleTuned) handleActivateLine(); + + handleActivateLine(); }, [isUserToggleTuned, handleActivateLine]); useKeyPressEvent((index + 1).toString(), hotkeyActivateLine); diff --git a/packages/desktop/src/tree/protected/terminal/panels/MainPanel.tsx b/packages/desktop/src/tree/protected/terminal/panels/MainPanel.tsx index 5c1fee9..f7e1ff5 100644 --- a/packages/desktop/src/tree/protected/terminal/panels/MainPanel.tsx +++ b/packages/desktop/src/tree/protected/terminal/panels/MainPanel.tsx @@ -1,6 +1,5 @@ import React, { useMemo, useEffect, useRef, useState } from 'react'; import useAuth from '../../../../providers/AuthProvider'; -import useRealTimeRooms from '../../../../providers/RealTimeRoomProvider'; import { LineMemberState } from '@nirvana/core/models/line.model'; import LineIcon from '../../../../components/lineIcon'; @@ -20,11 +19,12 @@ import useStreams from '../../../../providers/StreamProvider'; import Peer from 'simple-peer'; import NewChannelForm from '../compose/NewChannelForm'; import LineDetails from '../line/LineDetails'; +import useTerminalProvider from '../../../../providers/TerminalProvider'; export default function MainPanel() { const { user } = useAuth(); - const { selectedLineId, showNewChannelForm, handleShowNewChannelForm } = useRealTimeRooms(); + const { selectedLineId, showNewChannelForm, handleShowNewChannelForm } = useTerminalProvider(); // already won't see stuff for overlay only mode as per parent configuration diff --git a/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx b/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx index d543c72..bfc5270 100644 --- a/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx +++ b/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx @@ -2,18 +2,18 @@ import { LineMemberState } from '@nirvana/core/models/line.model'; import { Skeleton, Tooltip } from 'antd'; import React, { useCallback, useMemo, useState } from 'react'; import { FiActivity, FiPlus, FiSearch } from 'react-icons/fi'; -import useRealTimeRooms from '../../../../providers/RealTimeRoomProvider'; import useRooms from '../../../../providers/RoomsProvider'; import NavBar from '../navbar/Navbar'; import NoTextLogo from '@nirvana/components/logo/NoTextLogo'; import LineRow from '../line/LineRow'; +import useTerminalProvider from '../../../../providers/TerminalProvider'; export default function SidePanel() { // using merely for loading state...better to add to realtimeroom context? const { rooms: initialRoomsFetch } = useRooms(); const { roomsMap, handleSelectLine, selectedLineId, handleShowNewChannelForm } = - useRealTimeRooms(); + useTerminalProvider(); // todo: sort const allChannels = useMemo(() => { @@ -75,7 +75,7 @@ export default function SidePanel() { {/* tuned in header + general controls */} -
+