duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-19 23:16:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(navigator): reactive favourites via fine-grained store (P3)

Browse Source 
Move favourite room ids out of the useBetween navigator store into a
dedicated Zustand store. useNavigatorFavourite(roomId) subscribes only
to s.ids.has(roomId) (a boolean), so a FavouriteChangedEvent for one
room no longer re-renders every favourite-aware view. apply() returns
the same state reference when membership is unchanged.
This commit is contained in:
simoleo89
2026-05-31 01:03:31 +02:00
parent 641593c3ef
commit e610cfeef4
9 changed files with 103 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/navigator/views/NavigatorRoomInfoView.tsx
+6 -21
View File
@@ -1,10 +1,10 @@
import { CreateLinkEvent, GetCustomRoomFilterMessageComposer, GetGuestRoomMessageComposer, GetSessionDataManager, NavigatorSearchComposer, RemoveOwnRoomRightsRoomMessageComposer, RoomControllerLevel, RoomMuteComposer, RoomSettingsComposer, ToggleStaffPickMessageComposer, UpdateHomeRoomMessageComposer } from '@nitrots/nitro-renderer';
import { FC, useEffect, useMemo, useState } from 'react';
import { FC, useEffect, useState } from 'react';
import { FaLink, FaSignOutAlt } from 'react-icons/fa';
import { DispatchUiEvent, GetGroupInformation, LocalizeText, ReportType, SendMessageComposer, ToggleFavoriteRoom } from '../../../api';
import { DispatchUiEvent, GetGroupInformation, LocalizeText, ReportType, SendMessageComposer } from '../../../api';
import { Button, Column, Flex, LayoutBadgeImageView, LayoutRoomThumbnailView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, UserProfileIconView } from '../../../common';
import { RoomWidgetThumbnailEvent } from '../../../events';
import { useHasPermission, useHelp, useNavigatorData, useRoom } from '../../../hooks';
import { useHasPermission, useHelp, useNavigatorData, useNavigatorFavourite, useRoom } from '../../../hooks';
import { classNames } from '../../../layout';
export interface NavigatorRoomInfoViewProps {
@@ -17,12 +17,13 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
const [ isRoomPicked, setIsRoomPicked ] = useState(false);
const [ isRoomMuted, setIsRoomMuted ] = useState(false);
const { report = null } = useHelp();
const { navigatorData, favouriteRoomIds } = useNavigatorData();
const { navigatorData } = useNavigatorData();
const { roomSession = null } = useRoom();
const canManageAnyRoom = useHasPermission('acc_anyroomowner');
const canStaffPick = useHasPermission('acc_staff_pick');
const enteredRoomId = navigatorData?.enteredGuestRoom?.roomId ?? 0;
const { isFavourite: isRoomInFavouritesList, toggle: toggleFavourite } = useNavigatorFavourite(enteredRoomId);
useEffect(() =>
{
@@ -30,22 +31,6 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
SendMessageComposer(new GetGuestRoomMessageComposer(enteredRoomId, false, false));
}, [ enteredRoomId ]);
const isRoomInFavouritesList = useMemo(() =>
{
if(!enteredRoomId) return false;
return favouriteRoomIds.some((id: any) =>
{
if(id && typeof id === 'object')
{
if('roomId' in id) return Number(id.roomId) === enteredRoomId;
if('id' in id) return Number(id.id) === enteredRoomId;
}
return String(id) === String(enteredRoomId);
});
}, [ favouriteRoomIds, enteredRoomId ]);
const hasPermission = (permission: string) =>
{
if(!navigatorData?.enteredGuestRoom) return false;
@@ -115,7 +100,7 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
report(ReportType.ROOM, { roomId, roomName: navigatorData.enteredGuestRoom.roomName });
return;
case 'room_favourite':
ToggleFavoriteRoom(roomId, isRoomInFavouritesList);
toggleFavourite();
SendMessageComposer(new GetGuestRoomMessageComposer(roomId, false, false));
return;
case 'remove_rights':
src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx
+6 -5
View File
@@ -2,9 +2,9 @@ import { RoomDataParser, RoomSettingsComposer, UpdateHomeRoomMessageComposer } f
import * as Popover from '@radix-ui/react-popover';
import React, { FC, useRef, useState } from 'react';
import { FaUser } from 'react-icons/fa';
import { GetGroupInformation, GetSessionDataManager, GetUserProfile, LocalizeText, ReportType, SendMessageComposer, ToggleFavoriteRoom } from '../../../../api';
import { GetGroupInformation, GetSessionDataManager, GetUserProfile, LocalizeText, ReportType, SendMessageComposer } from '../../../../api';
import { Column, Flex, LayoutBadgeImageView, LayoutRoomThumbnailView, NitroCardContentView, Text, UserProfileIconView } from '../../../../common';
import { useHelp, useNavigatorData } from '../../../../hooks';
import { useHelp, useNavigatorData, useNavigatorFavourite } from '../../../../hooks';
import { classNames } from '../../../../layout';
interface NavigatorSearchResultItemInfoViewProps
@@ -20,7 +20,8 @@ export const NavigatorSearchResultItemInfoView: FC<NavigatorSearchResultItemInfo
const { roomData = null, isVisible = undefined, onToggle, setIsPopoverActive } = props;
const elementRef = useRef<HTMLDivElement>(null);
const [ internalVisible, setInternalVisible ] = useState(false);
const { navigatorData, favouriteRoomIds } = useNavigatorData();
const { navigatorData } = useNavigatorData();
const { isFavourite, toggle: toggleFavourite } = useNavigatorFavourite(roomData?.roomId);
const { report = null } = useHelp();
const isControlled = isVisible !== undefined;
@@ -63,7 +64,7 @@ export const NavigatorSearchResultItemInfoView: FC<NavigatorSearchResultItemInfo
report(ReportType.ROOM, { roomId: roomData.roomId, roomName: roomData.roomName });
return;
case 'room_favourite':
ToggleFavoriteRoom(roomData.roomId, favouriteRoomIds.includes(roomData.roomId));
toggleFavourite();
return;
}
};
@@ -163,7 +164,7 @@ export const NavigatorSearchResultItemInfoView: FC<NavigatorSearchResultItemInfo
</Column>
<Column alignItems="start" gap={ 2 } className="w-2/5">
<Flex pointer alignItems="center" gap={ 2 } onClick={ () => processAction('room_favourite') }>
<i className={ classNames('icon icon-navigator-favorite-room', favouriteRoomIds.includes(roomData.roomId) ? 'active' : '') } />
<i className={ classNames('icon icon-navigator-favorite-room', isFavourite ? 'active' : '') } />
<Text className="text-xs">{ LocalizeText('navigator.room.popup.room.info.favorite') }</Text>
</Flex>
<Flex pointer alignItems="center" gap={ 2 } onClick={ () => processAction('set_home_room') }>