From 99c8af4e9a54d0a24725ee05196148e49e359075 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Wed, 21 Aug 2024 17:41:38 -0300 Subject: [PATCH] refactor: fix sidepanel ficker --- apps/meteor/client/views/room/RoomOpener.tsx | 76 ++++++++++--------- .../views/room/SidePanel/RoomSidePanel.tsx | 69 ++++++++++++----- .../SidePanelItem/RoomSidePanelItem.tsx | 6 +- 3 files changed, 89 insertions(+), 62 deletions(-) diff --git a/apps/meteor/client/views/room/RoomOpener.tsx b/apps/meteor/client/views/room/RoomOpener.tsx index 741f5fc359ea..07e7328619c4 100644 --- a/apps/meteor/client/views/room/RoomOpener.tsx +++ b/apps/meteor/client/views/room/RoomOpener.tsx @@ -1,6 +1,6 @@ import type { RoomType } from '@rocket.chat/core-typings'; import { Box, States, StatesIcon, StatesSubtitle, StatesTitle } from '@rocket.chat/fuselage'; -import { useFeaturePreview } from '@rocket.chat/ui-client'; +import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client'; import type { ReactElement } from 'react'; import React, { lazy, Suspense } from 'react'; import { useTranslation } from 'react-i18next'; @@ -31,47 +31,49 @@ const RoomOpener = ({ type, reference }: RoomOpenerProps): ReactElement => { const { data, error, isSuccess, isError, isLoading } = useOpenRoom({ type, reference }); const { t } = useTranslation(); - const isSidepanelFeatureEnabled = useFeaturePreview('sidepanelNavigation'); - return ( - }> - {isLoading && } - {isSuccess && ( - - - {!isDirectMessageRoom(type) && isSidepanelFeatureEnabled && } + + + {null} + {!isDirectMessageRoom(type) && } + + + }> + {isLoading && } + {isSuccess && ( + - - - )} - {isError && - (() => { - if (error instanceof OldUrlRoomError) { - return ; - } + + )} + {isError && + (() => { + if (error instanceof OldUrlRoomError) { + return ; + } - if (error instanceof RoomNotFoundError) { - return ; - } + if (error instanceof RoomNotFoundError) { + return ; + } - if (error instanceof NotAuthorizedError) { - return ; - } + if (error instanceof NotAuthorizedError) { + return ; + } - return ( - } - body={ - - - {t('core.Error')} - {getErrorMessage(error)} - - } - /> - ); - })()} - + return ( + } + body={ + + + {t('core.Error')} + {getErrorMessage(error)} + + } + /> + ); + })()} + + ); }; diff --git a/apps/meteor/client/views/room/SidePanel/RoomSidePanel.tsx b/apps/meteor/client/views/room/SidePanel/RoomSidePanel.tsx index 24929c5c8cbe..3ae176c23830 100644 --- a/apps/meteor/client/views/room/SidePanel/RoomSidePanel.tsx +++ b/apps/meteor/client/views/room/SidePanel/RoomSidePanel.tsx @@ -1,11 +1,13 @@ +/* eslint-disable react/no-multi-comp */ import type { IDiscussionMessage, IRoom, ITeam } from '@rocket.chat/core-typings'; import { SidePanel, SidePanelList } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; +import { useTranslation, useUserId } from '@rocket.chat/ui-contexts'; import React, { memo, useMemo } from 'react'; import GenericError from '../../../components/GenericError'; import { useRecordList } from '../../../hooks/lists/useRecordList'; import { useRoomInfoEndpoint } from '../../../hooks/useRoomInfoEndpoint'; +import { useOpenedRoom, useSecondLevelOpenedRoom } from '../../../lib/RoomManager'; import { AsyncStatePhase } from '../../../lib/asyncState'; import { useTeamsChannelList } from '../../teams/contextualBar/channels/hooks/useTeamsChannelList'; import { useDiscussionsList } from '../contextualBar/Discussions/useDiscussionsList'; @@ -18,68 +20,93 @@ type DataResult = { team?: ITeam | undefined; }; -const shouldShowDiscussions = (data: DataResult) => - data?.parent?.sidepanel?.items.includes('discussions') || data?.room?.sidepanel?.items.includes('discussions'); -const shouldShowChannels = (data: DataResult) => - data?.parent?.sidepanel?.items.includes('channels') || data?.room?.sidepanel?.items.includes('channels'); +const RoomSidePanel = () => { + const parentRid = useOpenedRoom(); + const rid = useSecondLevelOpenedRoom() ?? parentRid; -const RoomSidePanel = ({ rid }: { rid: IRoom['_id'] }) => { - const { data, isSuccess, isError } = useRoomInfoEndpoint(rid); + if (!parentRid || !rid) { + return null; + } + return ; +}; + +const shouldShowDiscussions = (data: DataResult) => data?.room?.sidepanel?.items.includes('discussions'); +const shouldShowChannels = (data: DataResult) => data?.room?.sidepanel?.items.includes('channels'); + +const RoomSidePanelWithData = ({ parentRid, openedRoom }: { parentRid: string; openedRoom: string }) => { const t = useTranslation(); + const uid = useUserId(); + const { data, isSuccess, isError } = useRoomInfoEndpoint(parentRid); const dicsussionOptions = useMemo( () => ({ - rid: data?.parent?._id || rid, + rid: parentRid, }), - [data?.parent?._id, rid], + [parentRid], ); const channelOptions = useMemo( () => ({ - teamId: data?.team?._id || '', - ...(!data?.room?.teamMain && { roomId: data?.parent?._id }), + teamId: '', + roomId: parentRid, type: 'all', text: '', } as const), - [data?.parent?._id, data?.room?.teamMain, data?.team?._id], + [parentRid], ); - // IMPROVE: only fetch discussions IF parent room has sidepanel.items with discussions // TODO: get last message from discussion // TODO: get discussion avatar // TODO: get discussion unread messages - const { discussionsList } = useDiscussionsList(dicsussionOptions, data?.room?.u._id || ''); + const { discussionsList } = useDiscussionsList(dicsussionOptions, uid); const { phase, error, items: discussions } = useRecordList(discussionsList); // IMPROVE: only fetch channels IF parent room has sidepanel.items with channels // TODO: get channel avatar // TODO: get channel unread messages - const { teamsChannelList, reload } = useTeamsChannelList(channelOptions); + const { teamsChannelList } = useTeamsChannelList(channelOptions); const { phase: channelsPhase, error: channelsError, items: channels } = useRecordList(teamsChannelList); if (isError || error || channelsError || !isSuccess) { return ( - + ); } - if (isSuccess && !data.room?.sidepanel && !data.parent?.sidepanel) { + if (isSuccess && !data.room?.sidepanel) { return null; } if (phase === AsyncStatePhase.LOADING || channelsPhase === AsyncStatePhase.LOADING) { return ; } + return ( - + {shouldShowDiscussions(data) && - discussions.map((data) => )} + discussions.map((discussion) => ( + + ))} {shouldShowChannels(data) && - channels.map((data) => ( - + channels.map((channel) => ( + ))} diff --git a/apps/meteor/client/views/room/SidePanel/SidePanelItem/RoomSidePanelItem.tsx b/apps/meteor/client/views/room/SidePanel/SidePanelItem/RoomSidePanelItem.tsx index 01f0cfbdf060..ef6c5479d64a 100644 --- a/apps/meteor/client/views/room/SidePanel/SidePanelItem/RoomSidePanelItem.tsx +++ b/apps/meteor/client/views/room/SidePanel/SidePanelItem/RoomSidePanelItem.tsx @@ -2,7 +2,6 @@ import type { IRoom, IDiscussionMessage } from '@rocket.chat/core-typings'; import type { Keys } from '@rocket.chat/icons'; import React, { memo, useCallback } from 'react'; -import { useSecondLevelOpenedRoom } from '../../../../lib/RoomManager'; import { goToRoomById } from '../../../../lib/utils/goToRoomById'; import { useTemplateByViewMode } from '../hooks/useTemplateByViewMode'; @@ -10,6 +9,7 @@ export type RoomSidePanelItemProps = { id: string | undefined; name: string | undefined; icon: Keys; + openedRoom: string | undefined; } & (Partial | Partial); const RoomSidePanelItem = (props: RoomSidePanelItemProps) => { @@ -18,9 +18,7 @@ const RoomSidePanelItem = (props: RoomSidePanelItemProps) => { goToRoomById(id); }, []); - const openedRoom = useSecondLevelOpenedRoom(); - - return ; + return ; }; export default memo(RoomSidePanelItem);