diff --git a/packages/desktop/src/providers/RealTimeRoomProvider.tsx b/packages/desktop/src/providers/RealTimeRoomProvider.tsx index d546c47..08049e8 100644 --- a/packages/desktop/src/providers/RealTimeRoomProvider.tsx +++ b/packages/desktop/src/providers/RealTimeRoomProvider.tsx @@ -105,6 +105,8 @@ const RealTimeRoomContext = React.createContext({ * - fetch content blocks for line history - react query */ +// TODO: many of this can be done in a HOC like but it doesn't matter, they both just +// re-render, just make sure to pass in lighter props to children like main panel or lineRow export function RealTimeRoomProvider({ children }: { children: React.ReactChild }) { const { rooms } = useRooms(); const { user } = useAuth(); @@ -332,6 +334,7 @@ export function RealTimeRoomProvider({ children }: { children: React.ReactChild [setShowNewChannelForm, setSelectedLineId], ); + // handle shortcuts const clearMind = useCallback(() => { setSelectedLineId(undefined); setShowNewChannelForm(false); diff --git a/packages/desktop/src/tree/protected/terminal/line/LineRow.tsx b/packages/desktop/src/tree/protected/terminal/line/LineRow.tsx new file mode 100644 index 0000000..13659e3 --- /dev/null +++ b/packages/desktop/src/tree/protected/terminal/line/LineRow.tsx @@ -0,0 +1,129 @@ +import MasterLineData from '@nirvana/core/models/masterLineData.model'; +import React, { useMemo, useState } from 'react'; + +import { Avatar, Skeleton, Tooltip } from 'antd'; +import { FaPlus, FaSearch } from 'react-icons/fa'; +import { FiActivity, FiPlus, FiSearch, FiSun, FiX } from 'react-icons/fi'; +import useRealTimeRooms from '../../../../providers/RealTimeRoomProvider'; +import useRooms from '../../../../providers/RoomsProvider'; +import useAuth from '../../../../providers/AuthProvider'; +import LineIcon from '../../../../components/lineIcon'; +import moment from 'moment'; + +export default React.memo(function LineRow({ + line, + handleSelectLine, + isSelected, +}: { + line: MasterLineData; + handleSelectLine: (newLineId: string) => void; + isSelected: boolean; +}) { + const { user } = useAuth(); + + const isUserTunedIn = useMemo( + () => line.tunedInMemberIds?.includes(user._id.toString()), + [line.tunedInMemberIds, user], + ); + + const renderRightActivity = useMemo(() => { + if (isSelected) { + return ( + + + + + + ); + } + // TODO: get the profile pictures of the broadcasters + if (line.currentBroadcastersUserIds?.length > 0) + return ( + + {line.otherUserObjects?.map((otherUser, index) => ( + + ))} + + ); + + // if there is someone or me broadcasting here + if (line.currentBroadcastersUserIds?.length > 0) + return ; + + if (isUserTunedIn) return ; + + // if there is new activity blocks for me + if (line.currentUserMember.lastVisitDate) + return ; + + // if there is new activity/black dot, then show relative time as little bolder? or too much? + + // TODO: compare last visit date to latest audio block + if (line.currentUserMember) + return ( + + {moment(line.currentUserMember.lastVisitDate).fromNow(true)} + + ); + + return ( + + {moment(line.currentUserMember.lastVisitDate).fromNow(true)} + + ); + }, [line, isSelected]); + + const profilePictures = useMemo(() => { + const pictureSources: string[] = []; + + // ?don't add in my image as that's useless contextually? + // if (userData?.user?.picture) pictureSources.push(userData.user.picture); + + line.otherUserObjects?.forEach((otherUser) => { + if (otherUser.picture) pictureSources.push(otherUser.picture); + }); + + return pictureSources; + }, [line, user]); + + return ( +
handleSelectLine(line.lineDetails._id.toString())} + role={'presentation'} + className={`flex flex-row items-center justify-start gap-2 px-4 py-4 hover:bg-gray-200 + cursor-pointer transition-all relative z-50 rounded ${ + isSelected && 'bg-gray-200 scale-110 shadow-2xl translate-x-3' + }`} + > + {/* status dot */} + {profilePictures && } + +

+ {line.lineDetails.name || line.otherUserObjects[0].givenName} +

+ +
{renderRightActivity}
+
+ ); +}); diff --git a/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx b/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx index 835729e..975fa87 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 LineIcon from '../../../../components/lineIcon'; import moment from 'moment'; import NavBar from '../navbar/Navbar'; import NoTextLogo from '@nirvana/components/logo/NoTextLogo'; +import LineRow from '../line/LineRow'; export default function SidePanel() { // using merely for loading state...better to add to realtimeroom context? @@ -133,123 +134,3 @@ export default function SidePanel() { ); } - -const LineRow = React.memo(LineRowTest); - -function LineRowTest({ - line, - handleSelectLine, - isSelected, -}: { - line: MasterLineData; - handleSelectLine: (newLineId: string) => void; - isSelected: boolean; -}) { - const { user } = useAuth(); - - const isUserTunedIn = useMemo( - () => line.tunedInMemberIds?.includes(user._id.toString()), - [line.tunedInMemberIds, user], - ); - - const renderRightActivity = useMemo(() => { - if (isSelected) { - return ( - - - - - - ); - } - // TODO: get the profile pictures of the broadcasters - if (line.currentBroadcastersUserIds?.length > 0) - return ( - - {line.otherUserObjects?.map((otherUser, index) => ( - - ))} - - ); - - // if there is someone or me broadcasting here - if (line.currentBroadcastersUserIds?.length > 0) - return ; - - if (isUserTunedIn) return ; - - // if there is new activity blocks for me - if (line.currentUserMember.lastVisitDate) - return ; - - // if there is new activity/black dot, then show relative time as little bolder? or too much? - - // TODO: compare last visit date to latest audio block - if (line.currentUserMember) - return ( - - {moment(line.currentUserMember.lastVisitDate).fromNow(true)} - - ); - - return ( - - {moment(line.currentUserMember.lastVisitDate).fromNow(true)} - - ); - }, [line, isSelected]); - - const profilePictures = useMemo(() => { - const pictureSources: string[] = []; - - // ?don't add in my image as that's useless contextually? - // if (userData?.user?.picture) pictureSources.push(userData.user.picture); - - line.otherUserObjects?.forEach((otherUser) => { - if (otherUser.picture) pictureSources.push(otherUser.picture); - }); - - return pictureSources; - }, [line, user]); - - return ( -
handleSelectLine(line.lineDetails._id.toString())} - role={'presentation'} - className={`flex flex-row items-center justify-start gap-2 px-4 py-4 hover:bg-gray-200 - cursor-pointer transition-all relative z-50 rounded ${ - isSelected && 'bg-gray-200 scale-110 shadow-2xl translate-x-3' - }`} - > - {/* status dot */} - {profilePictures && } - -

- {line.lineDetails.name || line.otherUserObjects[0].givenName} -

- -
{renderRightActivity}
-
- ); -}