From da0b1c60e0a5918458678b757c188aad812d913a Mon Sep 17 00:00:00 2001 From: talksik Date: Fri, 20 May 2022 07:04:29 -0500 Subject: [PATCH] cleaning abstractions and rules --- .../src/providers/TerminalProvider.tsx | 51 ++++++++++++++++++- .../tree/protected/terminal/line/LineRow.tsx | 5 +- .../protected/terminal/panels/SidePanel.tsx | 47 ++++------------- .../src/tree/protected/terminal/rules.ts | 3 ++ 4 files changed, 67 insertions(+), 39 deletions(-) create mode 100644 packages/desktop/src/tree/protected/terminal/rules.ts diff --git a/packages/desktop/src/providers/TerminalProvider.tsx b/packages/desktop/src/providers/TerminalProvider.tsx index 761fe5d..9efe4ea 100644 --- a/packages/desktop/src/providers/TerminalProvider.tsx +++ b/packages/desktop/src/providers/TerminalProvider.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState, useContext, useCallback } from 'react'; +import React, { useEffect, useState, useContext, useCallback, useMemo } from 'react'; import useRooms from './RoomsProvider'; import useSockets from './SocketProvider'; @@ -54,6 +54,7 @@ type BroadcastersMap = { interface ITerminalProvider { roomsMap: LineIdToMasterLine; + allChannels: MasterLineData[]; selectedLineId?: string; handleSelectLine?: (newLineId: string) => void; @@ -62,10 +63,15 @@ interface ITerminalProvider { showNewChannelForm: boolean; handleShowNewChannelForm?: (showOrHide: 'show' | 'hide') => void; + + tunedChannelsCount: number; } const TerminalContext = React.createContext({ roomsMap: {}, + allChannels: [], + + tunedChannelsCount: 0, showNewChannelForm: false, }); @@ -355,10 +361,53 @@ export function TerminalProvider({ children }: { children: React.ReactChild }) { useKeyPressEvent('Escape', clearMind); + // todo: sort based on content blocks and my last activity date + const allChannels = useMemo(() => { + let channels = Object.values(roomMap); + + if (desktopMode === 'overlayOnly') { + channels = channels.filter((currentChannel) => + currentChannel.tunedInMemberIds?.includes(user._id.toString()), + ); + } + + channels.sort((channelA, channelB) => { + if ( + channelA.currentUserMember.state === LineMemberState.TUNED && + channelB.currentUserMember.state === LineMemberState.INBOX + ) + return -1; + + if ( + channelB.currentUserMember.state === LineMemberState.TUNED && + channelA.currentUserMember.state === LineMemberState.INBOX + ) + return 1; + + if (channelA.lineDetails.createdDate > channelB.lineDetails.createdDate) return 1; + + // sort also by activity + + return -1; + }); + + return channels; + }, [roomMap, desktopMode, user]); + + const tunedChannelsCount = useMemo( + () => + allChannels?.filter( + (currChannel) => currChannel.currentUserMember.state === LineMemberState.TUNED, + )?.length, + [allChannels], + ); + return ( { const allMembers: string[] = []; + const allMembersWithoutMe: string[] = []; const tunedMembers: string[] = []; const broadcastMembers: string[] = []; const untunedMembers: string[] = []; @@ -61,6 +62,7 @@ export default React.memo(function LineRow({ line.otherUserObjects?.forEach((otherUser) => { if (otherUser.picture) { allMembers.push(otherUser.picture); + allMembersWithoutMe.push(otherUser.picture); if (line.tunedInMemberIds?.includes(otherUser._id.toString())) { tunedMembers.push(otherUser.picture); @@ -80,6 +82,7 @@ export default React.memo(function LineRow({ allMembers, tunedMembers, broadcastMembers, + allMembersWithoutMe, }; }, [line, user]); @@ -160,7 +163,7 @@ export default React.memo(function LineRow({ sourceImages={ profilePictures.tunedMembers.length > 0 ? profilePictures.tunedMembers - : profilePictures.allMembers + : profilePictures.allMembersWithoutMe } /> diff --git a/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx b/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx index ddf2a42..332f082 100644 --- a/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx +++ b/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx @@ -11,6 +11,7 @@ import useAuth from '../../../../providers/AuthProvider'; import useSockets from '../../../../providers/SocketProvider'; import useElectron from '../../../../providers/ElectronProvider'; import useStreams from '../../../../providers/StreamProvider'; +import { maxToggleTunedChannelCount } from '../rules'; export default function SidePanel() { // using merely for loading state...better to add to realtimeroom context? @@ -18,46 +19,18 @@ export default function SidePanel() { const { user, handleLogout } = useAuth(); - const { roomsMap, handleSelectLine, selectedLineId, handleShowNewChannelForm } = - useTerminalProvider(); + const { + allChannels, + tunedChannelsCount, + handleSelectLine, + selectedLineId, + handleShowNewChannelForm, + } = useTerminalProvider(); const { handleFlowState } = useSockets(); const { handleToggleDesktopMode, desktopMode, isWindowFocused } = useElectron(); - // todo: sort based on content blocks and my last activity date - const allChannels = useMemo(() => { - let channels = Object.values(roomsMap); - - if (desktopMode === 'overlayOnly') { - channels = channels.filter((currentChannel) => - currentChannel.tunedInMemberIds?.includes(user._id.toString()), - ); - } - - channels.sort((channelA, channelB) => { - if ( - channelA.currentUserMember.state === LineMemberState.TUNED && - channelB.currentUserMember.state === LineMemberState.INBOX - ) - return -1; - - if ( - channelB.currentUserMember.state === LineMemberState.TUNED && - channelA.currentUserMember.state === LineMemberState.INBOX - ) - return 1; - - if (channelA.lineDetails.createdDate > channelB.lineDetails.createdDate) return 1; - - // sort also by activity - - return -1; - }); - - return channels; - }, [roomsMap, desktopMode, user]); - const [searchQuery, setSearchQuery] = useState(''); const handleCreateNewChannel = useCallback(() => { @@ -138,8 +111,8 @@ shadow-xl bg-gray-800 p-2 text-white text-xs"

Tuned In

{`${ - allChannels?.length || 0 - }/3`}

+ tunedChannelsCount || 0 + }/${maxToggleTunedChannelCount}`}

diff --git a/packages/desktop/src/tree/protected/terminal/rules.ts b/packages/desktop/src/tree/protected/terminal/rules.ts new file mode 100644 index 0000000..eafdf37 --- /dev/null +++ b/packages/desktop/src/tree/protected/terminal/rules.ts @@ -0,0 +1,3 @@ +export const maxChannelUserCount = 5; + +export const maxToggleTunedChannelCount = 3;