From adb0ff782d44aefae327f7505ce7d3338e4ed4b0 Mon Sep 17 00:00:00 2001 From: talksik Date: Fri, 13 May 2022 20:14:16 -0500 Subject: [PATCH] preventing renders really complicated --- .../src/providers/LocalStreamProvider.tsx | 1 + .../src/providers/PeerStreamProvider.tsx | 20 +++++++++++++ .../src/providers/RealTimeRoomProvider.tsx | 10 +++---- .../protected/terminal/panels/SidePanel.tsx | 28 +++++++++---------- 4 files changed, 39 insertions(+), 20 deletions(-) create mode 100644 packages/desktop/src/providers/LocalStreamProvider.tsx create mode 100644 packages/desktop/src/providers/PeerStreamProvider.tsx diff --git a/packages/desktop/src/providers/LocalStreamProvider.tsx b/packages/desktop/src/providers/LocalStreamProvider.tsx new file mode 100644 index 0000000..0d3ea6d --- /dev/null +++ b/packages/desktop/src/providers/LocalStreamProvider.tsx @@ -0,0 +1 @@ +// Manage user's stream and diff --git a/packages/desktop/src/providers/PeerStreamProvider.tsx b/packages/desktop/src/providers/PeerStreamProvider.tsx new file mode 100644 index 0000000..83aa28f --- /dev/null +++ b/packages/desktop/src/providers/PeerStreamProvider.tsx @@ -0,0 +1,20 @@ +/** + * take in the rooms + * which ones am I in + * on mounting, call all other folks + * + * on someone untuning from a line and they are not in any other lines + * if they are in the peer connections that we have stored, then destroy them and remove them + * + * on someone tuning into a line, they are seen in the list of ids for me + * if they are not in my local peers storage then I want to initiate connections so that I can communicate with them + * + * + * on me untuning from a line, we need to destroy the right one from the store of peers and destroy the connection + * + * + * on me changing my media devices, I need to replace stream for all peer connections so that they get a whole new set + * + * + * listen for any calls to me, as well as any answers back to me + */ diff --git a/packages/desktop/src/providers/RealTimeRoomProvider.tsx b/packages/desktop/src/providers/RealTimeRoomProvider.tsx index 95f7319..88ceced 100644 --- a/packages/desktop/src/providers/RealTimeRoomProvider.tsx +++ b/packages/desktop/src/providers/RealTimeRoomProvider.tsx @@ -28,7 +28,7 @@ type LineIdToMasterLine = { interface IRealTimeRoomProvider { roomsMap: LineIdToMasterLine; - selectedLine?: MasterLineData; + selectedLineId?: string; handleSelectLine: (newLineId: string) => void; } @@ -46,7 +46,7 @@ export function RealTimeRoomProvider({ children }: { children: React.ReactChild const { $ws } = useSockets(); const [realTimeRoomMap, setRealTimeRoomMap] = useState({}); - const [selectedLine, setSelectedLine] = useState(); + const [selectedLineId, setSelectedLineId] = useState(); useEffect(() => { /** @@ -203,14 +203,14 @@ export function RealTimeRoomProvider({ children }: { children: React.ReactChild const handleSelectLine = useCallback( (newLineIdToSelect: string) => { toast('selecting line!! NOT IMPLEMENTED'); - setSelectedLine(realTimeRoomMap[newLineIdToSelect]); + setSelectedLineId(newLineIdToSelect); }, - [setSelectedLine, realTimeRoomMap], + [setSelectedLineId], ); return ( {children} diff --git a/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx b/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx index 1e679f7..38cab2e 100644 --- a/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx +++ b/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx @@ -14,7 +14,7 @@ export default function SidePanel() { // using merely for loading state...better to add to realtimeroom context? const { rooms: initialRoomsFetch } = useRooms(); - const { roomsMap, handleSelectLine, selectedLine } = useRealTimeRooms(); + const { roomsMap, handleSelectLine, selectedLineId } = useRealTimeRooms(); const [toggleTunedLines, allLines] = useMemo(() => { const masterLines: MasterLineData[] = Object.values(roomsMap); @@ -54,11 +54,8 @@ export default function SidePanel() { handleSelectLine(masterLineData.lineDetails._id.toString())} - isSelected={ - selectedLine?.lineDetails._id.toString() === - masterLineData.lineDetails._id.toString() - } + handleSelectLine={handleSelectLine} + isSelected={masterLineData.lineDetails._id.toString() === selectedLineId} /> ))} @@ -79,11 +76,8 @@ export default function SidePanel() { handleSelectLine(masterLineData.lineDetails._id.toString())} - isSelected={ - selectedLine?.lineDetails._id.toString() === - masterLineData.lineDetails._id.toString() - } + handleSelectLine={handleSelectLine} + isSelected={masterLineData.lineDetails._id.toString() === selectedLineId} /> )) )} @@ -105,15 +99,19 @@ export default function SidePanel() { ); } -function LineRow({ +const LineRow = React.memo(LineRowTest); + +function LineRowTest({ line, - onClick, + handleSelectLine, isSelected, }: { line: MasterLineData; - onClick: () => void; + handleSelectLine: (newLineId: string) => void; isSelected: boolean; }) { + console.warn('re-rendering', line.lineDetails._id.toString()); + const { user } = useAuth(); const isUserTunedIn = useMemo( @@ -198,7 +196,7 @@ function LineRow({ return (
onClick()} + onClick={() => handleSelectLine(line.lineDetails._id.toString())} role={'presentation'} className={`flex flex-row items-center justify-start gap-2 p-2 px-4 h-14 hover:bg-gray-200 cursor-pointer transition-all last:border-b-0 border-b border-b-gray-200 relative z-50 rounded ${