duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-20 15:36:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(navigator): migrate all 13 consumers off useNavigator god-hook

Browse Source 
Mechanical swap to the new filter hooks landed in the previous commits:
- NavigatorDoorStateView -> useDoorState (snapshot/setSnapshot/reset)
- NavigatorView -> useNavigatorData + useNavigatorUiState +
  useNavigatorActions + direct useNavigatorUiStore.getState() in handlers
  (linkTracker collapsed to a dispatch table; 9 useState gone)
- NavigatorSearchView -> useNavigatorData + useNavigatorActions
  (sendSearch prop drilling removed)
- NavigatorSearchResultItemView -> useDoorState (setSnapshot aliased as
  setDoorData; call sites unchanged - DoorStateSnapshot is compatible)
- 9 bulk consumers (one-line import swap) -> useNavigatorData

Zero behavioural change intended. yarn typecheck + yarn test --run +
yarn lint:hooks all clean on this commit.
This commit is contained in:
simoleo89
2026-05-27 18:58:03 +02:00
parent 3c10ccdaee
commit 1d580e6d24
13 changed files with 109 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/catalog/views/page/layout/CatalogLayoutRoomAdsView.tsx
+2 -2
View File
@@ -3,7 +3,7 @@ import { FC, useEffect, useState } from 'react';
import { LocalizeText, SendMessageComposer } from '../../../../../api'; import { LocalizeText, SendMessageComposer } from '../../../../../api';
import { useNitroQuery } from '../../../../../api/nitro-query'; import { useNitroQuery } from '../../../../../api/nitro-query';
import { Button, Column, Text } from '../../../../../common'; import { Button, Column, Text } from '../../../../../common';
import { useCatalogUiState, useNavigator, useRoomPromote } from '../../../../../hooks'; import { useCatalogUiState, useNavigatorData, useRoomPromote } from '../../../../../hooks';
import { NitroInput } from '../../../../../layout'; import { NitroInput } from '../../../../../layout';
import { CatalogLayoutProps } from './CatalogLayout.types'; import { CatalogLayoutProps } from './CatalogLayout.types';
@@ -17,7 +17,7 @@ export const CatalogLayoutRoomAdsView: FC<CatalogLayoutProps> = props =>
const [ roomId, setRoomId ] = useState<number>(-1); const [ roomId, setRoomId ] = useState<number>(-1);
const [ extended, setExtended ] = useState<boolean>(false); const [ extended, setExtended ] = useState<boolean>(false);
const [ categoryId, setCategoryId ] = useState<number>(1); const [ categoryId, setCategoryId ] = useState<number>(1);
const { categories = null } = useNavigator(); const { categories } = useNavigatorData();
const { setIsVisible = null } = useCatalogUiState(); const { setIsVisible = null } = useCatalogUiState();
const { promoteInformation, isExtended, setIsExtended } = useRoomPromote(); const { promoteInformation, isExtended, setIsExtended } = useRoomPromote();
src/components/navigator/NavigatorView.tsx
+58 -152
View File
@@ -1,6 +1,6 @@
import { NitroCard } from '@layout/NitroCard'; import { NitroCard } from '@layout/NitroCard';
import { AddLinkEventTracker, ConvertGlobalRoomIdMessageComposer, FindNewFriendsMessageComposer, HabboWebTools, ILinkEventTracker, LegacyExternalInterface, NavigatorInitComposer, NavigatorSearchComposer, RemoveLinkEventTracker, RoomSessionEvent } from '@nitrots/nitro-renderer'; import { AddLinkEventTracker, ConvertGlobalRoomIdMessageComposer, FindNewFriendsMessageComposer, HabboWebTools, ILinkEventTracker, LegacyExternalInterface, NavigatorInitComposer, RemoveLinkEventTracker, RoomSessionEvent } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useRef, useState } from 'react'; import { FC, useEffect, useRef } from 'react';
import { FaPlus } from 'react-icons/fa'; import { FaPlus } from 'react-icons/fa';
import savesSearchIcon from '../../assets/images/navigator/saves-search/search_save.png'; import savesSearchIcon from '../../assets/images/navigator/saves-search/search_save.png';
import createRoomImg from '../../assets/images/navigator/create_room.png'; import createRoomImg from '../../assets/images/navigator/create_room.png';
@@ -8,7 +8,7 @@ import randomRoomImg from '../../assets/images/navigator/random_room.png';
import promoteRoomImg from '../../assets/images/navigator/promote_room.png'; import promoteRoomImg from '../../assets/images/navigator/promote_room.png';
import { CreateLinkEvent, LocalizeText, SendMessageComposer, TryVisitRoom } from '../../api'; import { CreateLinkEvent, LocalizeText, SendMessageComposer, TryVisitRoom } from '../../api';
import { Flex, Text } from '../../common'; import { Flex, Text } from '../../common';
import { useNavigator, useNitroEvent } from '../../hooks'; import { useNavigatorActions, useNavigatorData, useNavigatorUiState, useNavigatorUiStore, useNitroEvent } from '../../hooks';
import { NavigatorDoorStateView } from './views/NavigatorDoorStateView'; import { NavigatorDoorStateView } from './views/NavigatorDoorStateView';
import { NavigatorRoomCreatorView } from './views/NavigatorRoomCreatorView'; import { NavigatorRoomCreatorView } from './views/NavigatorRoomCreatorView';
import { NavigatorRoomInfoView } from './views/NavigatorRoomInfoView'; import { NavigatorRoomInfoView } from './views/NavigatorRoomInfoView';
@@ -20,184 +20,106 @@ import { NavigatorSearchView } from './views/search/NavigatorSearchView';
export const NavigatorView: FC<{}> = props => export const NavigatorView: FC<{}> = props =>
{ {
const [ isVisible, setIsVisible ] = useState(false); const { searchResult, topLevelContext, topLevelContexts, navigatorData, navigatorSearches } = useNavigatorData();
const [ isReady, setIsReady ] = useState(false); const { isVisible, isReady, isCreatorOpen, isRoomInfoOpen, isRoomLinkOpen, isOpenSavesSearches, isLoading, needsInit, needsSearch } = useNavigatorUiState();
const [ isCreatorOpen, setCreatorOpen ] = useState(false); const { sendSearch, reloadCurrentSearch } = useNavigatorActions();
const [ isRoomInfoOpen, setRoomInfoOpen ] = useState(false);
const [ isRoomLinkOpen, setRoomLinkOpen ] = useState(false);
const [ isOpenSavesSearches, setIsOpenSavesSearches ] = useState(false);
const [ isLoading, setIsLoading ] = useState(false);
const [ needsInit, setNeedsInit ] = useState(true);
const [ needsSearch, setNeedsSearch ] = useState(false);
const { searchResult = null, topLevelContext = null, topLevelContexts = null, navigatorData = null, navigatorSearches = null } = useNavigator();
const pendingSearch = useRef<{ value: string, code: string }>(null); const pendingSearch = useRef<{ value: string, code: string }>(null);
const elementRef = useRef<HTMLDivElement>(null); const elementRef = useRef<HTMLDivElement>(null);
useNitroEvent<RoomSessionEvent>(RoomSessionEvent.CREATED, event => useNitroEvent<RoomSessionEvent>(RoomSessionEvent.CREATED, event =>
{ {
setIsVisible(false); useNavigatorUiStore.getState().hide();
setCreatorOpen(false); useNavigatorUiStore.getState().closeCreator();
}); });
const sendSearch = useCallback((searchValue: string, contextCode: string) =>
{
setCreatorOpen(false);
SendMessageComposer(new NavigatorSearchComposer(contextCode, searchValue));
setIsLoading(true);
}, []);
const reloadCurrentSearch = useCallback(() =>
{
if(!isReady)
{
setNeedsSearch(true);
return;
}
if(pendingSearch.current)
{
sendSearch(pendingSearch.current.value, pendingSearch.current.code);
pendingSearch.current = null;
return;
}
if(searchResult)
{
sendSearch(searchResult.data, searchResult.code);
return;
}
if(!topLevelContext) return;
sendSearch('', topLevelContext.code);
}, [ isReady, searchResult, topLevelContext, sendSearch ]);
useEffect(() => useEffect(() =>
{ {
const linkTracker: ILinkEventTracker = { const linkTracker: ILinkEventTracker = {
linkReceived: (url: string) => linkReceived: (url: string) =>
{ {
const parts = url.split('/'); const parts = url.split('/');
if(parts.length < 2) return; if(parts.length < 2) return;
const store = useNavigatorUiStore.getState();
switch(parts[1]) switch(parts[1])
{ {
case 'show': { case 'show':
setIsVisible(true); store.show();
setNeedsSearch(true);
return; return;
}
case 'hide': case 'hide':
setIsVisible(false); store.hide();
return; return;
case 'toggle': { case 'toggle':
if(isVisible) store.toggle();
{
setIsVisible(false);
return; return;
}
setIsVisible(true);
setNeedsSearch(true);
return;
}
case 'toggle-room-info': case 'toggle-room-info':
setRoomInfoOpen(value => !value); store.toggleRoomInfo();
return; return;
case 'toggle-room-link': case 'toggle-room-link':
setRoomLinkOpen(value => !value); store.toggleRoomLink();
return; return;
case 'goto': case 'goto':
if(parts.length <= 2) return; if(parts.length <= 2) return;
if(parts[2] === 'home')
switch(parts[2])
{ {
case 'home':
if(navigatorData.homeRoomId <= 0) return; if(navigatorData.homeRoomId <= 0) return;
TryVisitRoom(navigatorData.homeRoomId); TryVisitRoom(navigatorData.homeRoomId);
break; return;
default: {
const roomId = parseInt(parts[2]);
TryVisitRoom(roomId);
}
} }
TryVisitRoom(parseInt(parts[2]));
return; return;
case 'create': case 'create':
setIsVisible(true); store.openCreator();
setCreatorOpen(true);
return; return;
case 'search': case 'search':
if(parts.length > 2) if(parts.length <= 2) return;
{ pendingSearch.current = { value: parts.length > 3 ? parts[3] : '', code: parts[2] };
const topLevelContextCode = parts[2]; store.show();
let searchValue = '';
if(parts.length > 3) searchValue = parts[3];
pendingSearch.current = { value: searchValue, code: topLevelContextCode };
setIsVisible(true);
setNeedsSearch(true);
}
return; return;
} }
}, },
eventUrlPrefix: 'navigator/' eventUrlPrefix: 'navigator/'
}; };
AddLinkEventTracker(linkTracker); AddLinkEventTracker(linkTracker);
return () => RemoveLinkEventTracker(linkTracker); return () => RemoveLinkEventTracker(linkTracker);
}, [ isVisible, navigatorData ]); }, [ navigatorData ]);
useEffect(() => useEffect(() =>
{ {
if(!searchResult) return; if(!searchResult) return;
if(elementRef.current) elementRef.current.scrollTop = 0;
setIsLoading(false);
if(elementRef && elementRef.current) elementRef.current.scrollTop = 0;
}, [ searchResult ]); }, [ searchResult ]);
useEffect(() => useEffect(() =>
{ {
if(!isVisible || !isReady || !needsSearch) return; if(!isVisible || !isReady || !needsSearch) return;
if(pendingSearch.current)
{
sendSearch(pendingSearch.current.value, pendingSearch.current.code);
pendingSearch.current = null;
}
else
{
reloadCurrentSearch(); reloadCurrentSearch();
}
setNeedsSearch(false); useNavigatorUiStore.getState().consumeSearchRequest();
}, [ isVisible, isReady, needsSearch, reloadCurrentSearch ]); }, [ isVisible, isReady, needsSearch, sendSearch, reloadCurrentSearch ]);
useEffect(() => useEffect(() =>
{ {
if(isReady || !topLevelContext) return; if(isReady || !topLevelContext) return;
useNavigatorUiStore.getState().markReady();
setIsReady(true);
}, [ isReady, topLevelContext ]); }, [ isReady, topLevelContext ]);
useEffect(() => useEffect(() =>
{ {
if(!isVisible || !needsInit) return; if(!isVisible || !needsInit) return;
SendMessageComposer(new NavigatorInitComposer()); SendMessageComposer(new NavigatorInitComposer());
useNavigatorUiStore.getState().markInitDone();
setNeedsInit(false);
}, [ isVisible, needsInit ]); }, [ isVisible, needsInit ]);
useEffect(() => useEffect(() =>
{ {
LegacyExternalInterface.addCallback(HabboWebTools.OPENROOM, (k: string, _arg_2: boolean = false, _arg_3: string = null) => SendMessageComposer(new ConvertGlobalRoomIdMessageComposer(k))); LegacyExternalInterface.addCallback(HabboWebTools.OPENROOM, (k: string) => SendMessageComposer(new ConvertGlobalRoomIdMessageComposer(k)));
}, []); }, []);
return ( return (
@@ -208,28 +130,24 @@ export const NavigatorView: FC<{}> = props =>
uniqueKey="navigator"> uniqueKey="navigator">
<NitroCard.Header <NitroCard.Header
headerText={ LocalizeText(isCreatorOpen ? 'navigator.createroom.title' : 'navigator.title') } headerText={ LocalizeText(isCreatorOpen ? 'navigator.createroom.title' : 'navigator.title') }
onCloseClick={ event => setIsVisible(false) } /> onCloseClick={ () => useNavigatorUiStore.getState().hide() } />
<NitroCard.Tabs> <NitroCard.Tabs>
<NitroCard.TabItem <NitroCard.TabItem
isActive={ isOpenSavesSearches } isActive={ isOpenSavesSearches }
title={ LocalizeText('navigator.tooltip.left.show.hide') } title={ LocalizeText('navigator.tooltip.left.show.hide') }
onClick={ () => setIsOpenSavesSearches(prev => !prev) }> onClick={ () => useNavigatorUiStore.getState().toggleSavesSearches() }>
<img src={ savesSearchIcon } alt="" style={{ width: 18, height: 18 }} /> <img src={ savesSearchIcon } alt="" style={{ width: 18, height: 18 }} />
</NitroCard.TabItem> </NitroCard.TabItem>
{ topLevelContexts && (topLevelContexts.length > 0) && topLevelContexts.map((context, index) => { topLevelContexts && topLevelContexts.length > 0 && topLevelContexts.map((context, index) =>
{
return (
<NitroCard.TabItem <NitroCard.TabItem
key={ index } key={ index }
isActive={ ((topLevelContext === context) && !isCreatorOpen) } isActive={ topLevelContext === context && !isCreatorOpen }
onClick={ event => sendSearch('', context.code) }> onClick={ () => sendSearch('', context.code) }>
{ LocalizeText(('navigator.toplevelview.' + context.code)) } { LocalizeText('navigator.toplevelview.' + context.code) }
</NitroCard.TabItem> </NitroCard.TabItem>) }
);
}) }
<NitroCard.TabItem <NitroCard.TabItem
isActive={ isCreatorOpen } isActive={ isCreatorOpen }
onClick={ event => setCreatorOpen(true) }> onClick={ () => useNavigatorUiStore.getState().openCreator() }>
<FaPlus className="fa-icon" /> <FaPlus className="fa-icon" />
</NitroCard.TabItem> </NitroCard.TabItem>
</NitroCard.Tabs> </NitroCard.Tabs>
@@ -241,49 +159,37 @@ export const NavigatorView: FC<{}> = props =>
<NavigatorSearchSavesResultView searches={ navigatorSearches || [] } /> <NavigatorSearchSavesResultView searches={ navigatorSearches || [] } />
</div> } </div> }
<div className="flex flex-col w-full overflow-hidden gap-2"> <div className="flex flex-col w-full overflow-hidden gap-2">
<NavigatorSearchView sendSearch={ sendSearch } /> <NavigatorSearchView />
<div ref={ elementRef } className="flex flex-col flex-1 min-h-0 overflow-auto gap-2"> <div ref={ elementRef } className="flex flex-col flex-1 min-h-0 overflow-auto gap-2">
{ (searchResult && searchResult.results.map((result, index) => <NavigatorSearchResultView key={ index } searchResult={ result } />)) } { searchResult && searchResult.results.map((result, index) => <NavigatorSearchResultView key={ index } searchResult={ result } />) }
{ (searchResult && (!searchResult.results || (searchResult.results.length === 0))) && { searchResult && (!searchResult.results || searchResult.results.length === 0) &&
<div className="nitro-card-panel px-3 py-2 text-sm text-muted"> <div className="nitro-card-panel px-3 py-2 text-sm text-muted">
{ LocalizeText(searchResult.code === 'myworld_view' ? 'navigator.roomsettings.moderation.none' : 'navigator.search.returned.no.results') } { LocalizeText(searchResult.code === 'myworld_view' ? 'navigator.roomsettings.moderation.none' : 'navigator.search.returned.no.results') }
</div> } </div> }
</div> </div>
<Flex className="nitro-card-divider pt-2 border-t gap-2"> <Flex className="nitro-card-divider pt-2 border-t gap-2">
<Flex <Flex pointer alignItems="center" justifyContent="center"
pointer
alignItems="center"
justifyContent="center"
className="flex-1 h-[60px] cursor-pointer bg-no-repeat pl-16" className="flex-1 h-[60px] cursor-pointer bg-no-repeat pl-16"
style={ { backgroundImage: `url(${ createRoomImg })`, backgroundSize: '100% 100%' } } style={ { backgroundImage: `url(${ createRoomImg })`, backgroundSize: '100% 100%' } }
onClick={ () => setCreatorOpen(true) } onClick={ () => useNavigatorUiStore.getState().openCreator() }>
>
<Text variant="white" bold className="text-xs drop-shadow"> <Text variant="white" bold className="text-xs drop-shadow">
{ LocalizeText('navigator.createroom.create') } { LocalizeText('navigator.createroom.create') }
</Text> </Text>
</Flex> </Flex>
{ (searchResult?.code !== 'myworld_view' && searchResult?.code !== 'roomads_view') && { searchResult?.code !== 'myworld_view' && searchResult?.code !== 'roomads_view' &&
<Flex <Flex pointer alignItems="center" justifyContent="center"
pointer
alignItems="center"
justifyContent="center"
className="flex-1 h-[60px] cursor-pointer bg-no-repeat pl-16" className="flex-1 h-[60px] cursor-pointer bg-no-repeat pl-16"
style={ { backgroundImage: `url(${ randomRoomImg })`, backgroundSize: '100% 100%' } } style={ { backgroundImage: `url(${ randomRoomImg })`, backgroundSize: '100% 100%' } }
onClick={ () => SendMessageComposer(new FindNewFriendsMessageComposer()) } onClick={ () => SendMessageComposer(new FindNewFriendsMessageComposer()) }>
>
<Text variant="white" bold className="text-xs drop-shadow"> <Text variant="white" bold className="text-xs drop-shadow">
{ LocalizeText('navigator.random.room') } { LocalizeText('navigator.random.room') }
</Text> </Text>
</Flex> } </Flex> }
{ (searchResult?.code === 'myworld_view' || searchResult?.code === 'roomads_view') && { (searchResult?.code === 'myworld_view' || searchResult?.code === 'roomads_view') &&
<Flex <Flex pointer alignItems="center" justifyContent="center"
pointer
alignItems="center"
justifyContent="center"
className="flex-1 h-[60px] cursor-pointer bg-no-repeat pl-16" className="flex-1 h-[60px] cursor-pointer bg-no-repeat pl-16"
style={ { backgroundImage: `url(${ promoteRoomImg })`, backgroundSize: '100% 100%' } } style={ { backgroundImage: `url(${ promoteRoomImg })`, backgroundSize: '100% 100%' } }
onClick={ () => CreateLinkEvent('catalog/open/room_event') } onClick={ () => CreateLinkEvent('catalog/open/room_event') }>
>
<Text variant="white" bold className="text-xs drop-shadow"> <Text variant="white" bold className="text-xs drop-shadow">
{ LocalizeText('navigator.promote.room') } { LocalizeText('navigator.promote.room') }
</Text> </Text>
@@ -295,8 +201,8 @@ export const NavigatorView: FC<{}> = props =>
</NitroCard.Content> </NitroCard.Content>
</NitroCard> } </NitroCard> }
<NavigatorDoorStateView /> <NavigatorDoorStateView />
{ isRoomInfoOpen && <NavigatorRoomInfoView onCloseClick={ () => setRoomInfoOpen(false) } /> } { isRoomInfoOpen && <NavigatorRoomInfoView onCloseClick={ () => useNavigatorUiStore.getState().setRoomInfoOpen(false) } /> }
{ isRoomLinkOpen && <NavigatorRoomLinkView onCloseClick={ () => setRoomLinkOpen(false) } /> } { isRoomLinkOpen && <NavigatorRoomLinkView onCloseClick={ () => useNavigatorUiStore.getState().setRoomLinkOpen(false) } /> }
<NavigatorRoomSettingsView /> <NavigatorRoomSettingsView />
</> </>
); );
src/components/navigator/views/NavigatorDoorStateView.tsx
+22 -42
View File
@@ -1,88 +1,68 @@
import { FC, useEffect, useState } from 'react'; import { FC, useEffect, useState } from 'react';
import { CreateRoomSession, DoorStateType, GoToDesktop, LocalizeText } from '../../../api'; import { CreateRoomSession, DoorStateType, GoToDesktop, LocalizeText } from '../../../api';
import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common'; import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
import { useNavigator } from '../../../hooks'; import { useDoorState } from '../../../hooks';
import { NitroInput } from '../../../layout'; import { NitroInput } from '../../../layout';
const VISIBLE_STATES = [ DoorStateType.START_DOORBELL, DoorStateType.STATE_WAITING, DoorStateType.STATE_NO_ANSWER, DoorStateType.START_PASSWORD, DoorStateType.STATE_WRONG_PASSWORD ]; const VISIBLE_STATES = [ DoorStateType.START_DOORBELL, DoorStateType.STATE_WAITING, DoorStateType.STATE_NO_ANSWER, DoorStateType.START_PASSWORD, DoorStateType.STATE_WRONG_PASSWORD ];
const DOORBELL_STATES = [ DoorStateType.START_DOORBELL, DoorStateType.STATE_WAITING, DoorStateType.STATE_NO_ANSWER ]; const DOORBELL_STATES = [ DoorStateType.START_DOORBELL, DoorStateType.STATE_WAITING, DoorStateType.STATE_NO_ANSWER ];
const PASSWORD_STATES = [ DoorStateType.START_PASSWORD, DoorStateType.STATE_WRONG_PASSWORD ];
export const NavigatorDoorStateView: FC<{}> = props => export const NavigatorDoorStateView: FC<{}> = props =>
{ {
const [ password, setPassword ] = useState(''); const [ password, setPassword ] = useState('');
const { doorData = null, setDoorData = null } = useNavigator(); const { snapshot, setSnapshot, reset } = useDoorState();
const onClose = () => const onClose = () =>
{ {
if(doorData && (doorData.state === DoorStateType.STATE_WAITING)) GoToDesktop(); if(snapshot.state === DoorStateType.STATE_WAITING) GoToDesktop();
reset();
setDoorData(null);
}; };
const ring = () => const ring = () =>
{ {
if(!doorData || !doorData.roomInfo) return; if(!snapshot.roomInfo) return;
CreateRoomSession(snapshot.roomInfo.roomId);
CreateRoomSession(doorData.roomInfo.roomId); setSnapshot(prev => ({ ...prev, state: DoorStateType.STATE_PENDING_SERVER }));
setDoorData(prevValue =>
{
const newValue = { ...prevValue };
newValue.state = DoorStateType.STATE_PENDING_SERVER;
return newValue;
});
}; };
const tryEntering = () => const tryEntering = () =>
{ {
if(!doorData || !doorData.roomInfo) return; if(!snapshot.roomInfo) return;
CreateRoomSession(snapshot.roomInfo.roomId, password);
CreateRoomSession(doorData.roomInfo.roomId, password); setSnapshot(prev => ({ ...prev, state: DoorStateType.STATE_PENDING_SERVER }));
setDoorData(prevValue =>
{
const newValue = { ...prevValue };
newValue.state = DoorStateType.STATE_PENDING_SERVER;
return newValue;
});
}; };
useEffect(() => useEffect(() =>
{ {
if(!doorData || (doorData.state !== DoorStateType.STATE_NO_ANSWER)) return; if(snapshot.state !== DoorStateType.STATE_NO_ANSWER) return;
GoToDesktop(); GoToDesktop();
}, [ doorData ]); }, [ snapshot.state ]);
if(!doorData || (doorData.state === DoorStateType.NONE) || (VISIBLE_STATES.indexOf(doorData.state) === -1)) return null; if(snapshot.state === DoorStateType.NONE) return null;
if(VISIBLE_STATES.indexOf(snapshot.state) === -1) return null;
const isDoorbell = (DOORBELL_STATES.indexOf(doorData.state) >= 0); const isDoorbell = DOORBELL_STATES.indexOf(snapshot.state) >= 0;
return ( return (
<NitroCardView className="nitro-navigator-doorbell" theme="primary-slim"> <NitroCardView className="nitro-navigator-doorbell" theme="primary-slim">
<NitroCardHeaderView headerText={ LocalizeText(isDoorbell ? 'navigator.doorbell.title' : 'navigator.password.title') } onCloseClick={ onClose } /> <NitroCardHeaderView headerText={ LocalizeText(isDoorbell ? 'navigator.doorbell.title' : 'navigator.password.title') } onCloseClick={ onClose } />
<NitroCardContentView> <NitroCardContentView>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<Text bold>{ doorData && doorData.roomInfo && doorData.roomInfo.roomName }</Text> <Text bold>{ snapshot.roomInfo && snapshot.roomInfo.roomName }</Text>
{ (doorData.state === DoorStateType.START_DOORBELL) && { snapshot.state === DoorStateType.START_DOORBELL &&
<Text>{ LocalizeText('navigator.doorbell.info') }</Text> } <Text>{ LocalizeText('navigator.doorbell.info') }</Text> }
{ (doorData.state === DoorStateType.STATE_WAITING) && { snapshot.state === DoorStateType.STATE_WAITING &&
<Text>{ LocalizeText('navigator.doorbell.waiting') }</Text> } <Text>{ LocalizeText('navigator.doorbell.waiting') }</Text> }
{ (doorData.state === DoorStateType.STATE_NO_ANSWER) && { snapshot.state === DoorStateType.STATE_NO_ANSWER &&
<Text>{ LocalizeText('navigator.doorbell.no.answer') }</Text> } <Text>{ LocalizeText('navigator.doorbell.no.answer') }</Text> }
{ (doorData.state === DoorStateType.START_PASSWORD) && { snapshot.state === DoorStateType.START_PASSWORD &&
<Text>{ LocalizeText('navigator.password.info') }</Text> } <Text>{ LocalizeText('navigator.password.info') }</Text> }
{ (doorData.state === DoorStateType.STATE_WRONG_PASSWORD) && { snapshot.state === DoorStateType.STATE_WRONG_PASSWORD &&
<Text>{ LocalizeText('navigator.password.retryinfo') }</Text> } <Text>{ LocalizeText('navigator.password.retryinfo') }</Text> }
</div> </div>
{ isDoorbell && { isDoorbell &&
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
{ (doorData.state === DoorStateType.START_DOORBELL) && { snapshot.state === DoorStateType.START_DOORBELL &&
<Button variant="success" onClick={ ring }> <Button variant="success" onClick={ ring }>
{ LocalizeText('navigator.doorbell.button.ring') } { LocalizeText('navigator.doorbell.button.ring') }
</Button> } </Button> }
src/components/navigator/views/NavigatorRoomCreatorView.tsx
+2 -2
View File
@@ -3,7 +3,7 @@ import { CreateFlatMessageComposer, HabboClubLevelEnum } from '@nitrots/nitro-re
import { FC, useEffect, useState } from 'react'; import { FC, useEffect, useState } from 'react';
import { GetClubMemberLevel, GetConfigurationValue, IRoomModel, LocalizeText, SendMessageComposer } from '../../../api'; import { GetClubMemberLevel, GetConfigurationValue, IRoomModel, LocalizeText, SendMessageComposer } from '../../../api';
import { Button, Flex, Grid, LayoutCurrencyIcon, LayoutGridItem, Text } from '../../../common'; import { Button, Flex, Grid, LayoutCurrencyIcon, LayoutGridItem, Text } from '../../../common';
import { useNavigator } from '../../../hooks'; import { useNavigatorData } from '../../../hooks';
import { NitroInput } from '../../../layout'; import { NitroInput } from '../../../layout';
import { useRoomCreatorStore } from './navigatorRoomCreatorStore'; import { useRoomCreatorStore } from './navigatorRoomCreatorStore';
@@ -25,7 +25,7 @@ export const NavigatorRoomCreatorView: FC = () =>
}); });
const isCreating = useRoomCreatorStore(s => s.isCreating); const isCreating = useRoomCreatorStore(s => s.isCreating);
const beginCreate = useRoomCreatorStore(s => s.beginCreate); const beginCreate = useRoomCreatorStore(s => s.beginCreate);
const { categories = null } = useNavigator(); const { categories } = useNavigatorData();
const hcDisabled = GetConfigurationValue<boolean>('hc.disabled', false); const hcDisabled = GetConfigurationValue<boolean>('hc.disabled', false);
src/components/navigator/views/NavigatorRoomInfoView.tsx
+2 -2
View File
@@ -4,7 +4,7 @@ import { FaLink, FaSignOutAlt } from 'react-icons/fa';
import { DispatchUiEvent, GetGroupInformation, LocalizeText, ReportType, SendMessageComposer, ToggleFavoriteRoom } from '../../../api'; import { DispatchUiEvent, GetGroupInformation, LocalizeText, ReportType, SendMessageComposer, ToggleFavoriteRoom } from '../../../api';
import { Button, Column, Flex, LayoutBadgeImageView, LayoutRoomThumbnailView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, UserProfileIconView } from '../../../common'; import { Button, Column, Flex, LayoutBadgeImageView, LayoutRoomThumbnailView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, UserProfileIconView } from '../../../common';
import { RoomWidgetThumbnailEvent } from '../../../events'; import { RoomWidgetThumbnailEvent } from '../../../events';
import { useHasPermission, useHelp, useNavigator, useRoom } from '../../../hooks'; import { useHasPermission, useHelp, useNavigatorData, useRoom } from '../../../hooks';
import { classNames } from '../../../layout'; import { classNames } from '../../../layout';
export interface NavigatorRoomInfoViewProps { export interface NavigatorRoomInfoViewProps {
@@ -17,7 +17,7 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
const [ isRoomPicked, setIsRoomPicked ] = useState(false); const [ isRoomPicked, setIsRoomPicked ] = useState(false);
const [ isRoomMuted, setIsRoomMuted ] = useState(false); const [ isRoomMuted, setIsRoomMuted ] = useState(false);
const { report = null } = useHelp(); const { report = null } = useHelp();
const { navigatorData = null, favouriteRoomIds = [] } = useNavigator(); const { navigatorData, favouriteRoomIds } = useNavigatorData();
const { roomSession = null } = useRoom(); const { roomSession = null } = useRoom();
const canManageAnyRoom = useHasPermission('acc_anyroomowner'); const canManageAnyRoom = useHasPermission('acc_anyroomowner');
const canStaffPick = useHasPermission('acc_staff_pick'); const canStaffPick = useHasPermission('acc_staff_pick');
src/components/navigator/views/NavigatorRoomLinkView.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import { FC } from 'react'; import { FC } from 'react';
import { GetConfigurationValue, LocalizeText } from '../../../api'; import { GetConfigurationValue, LocalizeText } from '../../../api';
import { LayoutRoomThumbnailView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common'; import { LayoutRoomThumbnailView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
import { useNavigator } from '../../../hooks'; import { useNavigatorData } from '../../../hooks';
export class NavigatorRoomLinkViewProps export class NavigatorRoomLinkViewProps
{ {
@@ -11,7 +11,7 @@ export class NavigatorRoomLinkViewProps
export const NavigatorRoomLinkView: FC<NavigatorRoomLinkViewProps> = props => export const NavigatorRoomLinkView: FC<NavigatorRoomLinkViewProps> = props =>
{ {
const { onCloseClick = null } = props; const { onCloseClick = null } = props;
const { navigatorData = null } = useNavigator(); const { navigatorData } = useNavigatorData();
if(!navigatorData.enteredGuestRoom) return null; if(!navigatorData.enteredGuestRoom) return null;
src/components/navigator/views/room-settings/NavigatorRoomSettingsBasicTabView.tsx
+2 -2
View File
@@ -3,7 +3,7 @@ import { FC, useEffect, useState } from 'react';
import { FaTimes } from 'react-icons/fa'; import { FaTimes } from 'react-icons/fa';
import { CreateLinkEvent, GetMaxVisitorsList, IRoomData, LocalizeText, SendMessageComposer } from '../../../../api'; import { CreateLinkEvent, GetMaxVisitorsList, IRoomData, LocalizeText, SendMessageComposer } from '../../../../api';
import { Base, Column, Flex, Text } from '../../../../common'; import { Base, Column, Flex, Text } from '../../../../common';
import { useMessageEvent, useNavigator, useNotification } from '../../../../hooks'; import { useMessageEvent, useNavigatorData, useNotification } from '../../../../hooks';
const ROOM_NAME_MIN_LENGTH = 3; const ROOM_NAME_MIN_LENGTH = 3;
const ROOM_NAME_MAX_LENGTH = 60; const ROOM_NAME_MAX_LENGTH = 60;
@@ -27,7 +27,7 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
const [ tagIndex, setTagIndex ] = useState(0); const [ tagIndex, setTagIndex ] = useState(0);
const [ typeError, setTypeError ] = useState<string>(''); const [ typeError, setTypeError ] = useState<string>('');
const { showConfirm = null } = useNotification(); const { showConfirm = null } = useNotification();
const { categories = null } = useNavigator(); const { categories } = useNavigatorData();
useMessageEvent<RoomSettingsSaveErrorEvent>(RoomSettingsSaveErrorEvent, event => useMessageEvent<RoomSettingsSaveErrorEvent>(RoomSettingsSaveErrorEvent, event =>
{ {
src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx
+2 -2
View File
@@ -4,7 +4,7 @@ import React, { FC, useRef, useState } from 'react';
import { FaUser } from 'react-icons/fa'; import { FaUser } from 'react-icons/fa';
import { GetGroupInformation, GetSessionDataManager, GetUserProfile, LocalizeText, ReportType, SendMessageComposer, ToggleFavoriteRoom } from '../../../../api'; import { GetGroupInformation, GetSessionDataManager, GetUserProfile, LocalizeText, ReportType, SendMessageComposer, ToggleFavoriteRoom } from '../../../../api';
import { Column, Flex, LayoutBadgeImageView, LayoutRoomThumbnailView, NitroCardContentView, Text, UserProfileIconView } from '../../../../common'; import { Column, Flex, LayoutBadgeImageView, LayoutRoomThumbnailView, NitroCardContentView, Text, UserProfileIconView } from '../../../../common';
import { useHelp, useNavigator } from '../../../../hooks'; import { useHelp, useNavigatorData } from '../../../../hooks';
import { classNames } from '../../../../layout'; import { classNames } from '../../../../layout';
interface NavigatorSearchResultItemInfoViewProps interface NavigatorSearchResultItemInfoViewProps
@@ -20,7 +20,7 @@ export const NavigatorSearchResultItemInfoView: FC<NavigatorSearchResultItemInfo
const { roomData = null, isVisible = undefined, onToggle, setIsPopoverActive } = props; const { roomData = null, isVisible = undefined, onToggle, setIsPopoverActive } = props;
const elementRef = useRef<HTMLDivElement>(null); const elementRef = useRef<HTMLDivElement>(null);
const [ internalVisible, setInternalVisible ] = useState(false); const [ internalVisible, setInternalVisible ] = useState(false);
const { navigatorData = null, favouriteRoomIds = [] } = useNavigator(); const { navigatorData, favouriteRoomIds } = useNavigatorData();
const { report = null } = useHelp(); const { report = null } = useHelp();
const isControlled = isVisible !== undefined; const isControlled = isVisible !== undefined;
src/components/navigator/views/search/NavigatorSearchResultItemView.tsx
+2 -2
View File
@@ -3,7 +3,7 @@ import React, { FC, MouseEvent, useEffect } from 'react';
import { FaUser } from 'react-icons/fa'; import { FaUser } from 'react-icons/fa';
import { CreateRoomSession, DoorStateType, TryVisitRoom } from '../../../../api'; import { CreateRoomSession, DoorStateType, TryVisitRoom } from '../../../../api';
import { Column, Flex, LayoutBadgeImageView, LayoutGridItemProps, LayoutRoomThumbnailView, Text } from '../../../../common'; import { Column, Flex, LayoutBadgeImageView, LayoutGridItemProps, LayoutRoomThumbnailView, Text } from '../../../../common';
import { useNavigator } from '../../../../hooks'; import { useDoorState } from '../../../../hooks';
import { NavigatorSearchResultItemInfoView } from './NavigatorSearchResultItemInfoView'; import { NavigatorSearchResultItemInfoView } from './NavigatorSearchResultItemInfoView';
export interface NavigatorSearchResultItemViewProps extends LayoutGridItemProps export interface NavigatorSearchResultItemViewProps extends LayoutGridItemProps
@@ -19,7 +19,7 @@ export interface NavigatorSearchResultItemViewProps extends LayoutGridItemProps
export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProps> = props => export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProps> = props =>
{ {
const { roomData = null, children = null, thumbnail = false, selectedRoomId, setSelectedRoomId, isPopoverActive, setIsPopoverActive, ...rest } = props; const { roomData = null, children = null, thumbnail = false, selectedRoomId, setSelectedRoomId, isPopoverActive, setIsPopoverActive, ...rest } = props;
const { setDoorData = null } = useNavigator(); const { setSnapshot: setDoorData } = useDoorState();
const handleMouseEnter = () => const handleMouseEnter = () =>
{ {
src/components/navigator/views/search/NavigatorSearchResultView.tsx
+2 -2
View File
@@ -3,7 +3,7 @@ import { FC, useEffect, useState } from 'react';
import { FaBars, FaMinus, FaPlus, FaTh, FaWindowMaximize, FaWindowRestore } from 'react-icons/fa'; import { FaBars, FaMinus, FaPlus, FaTh, FaWindowMaximize, FaWindowRestore } from 'react-icons/fa';
import { LocalizeText, NavigatorSearchResultViewDisplayMode, SendMessageComposer } from '../../../../api'; import { LocalizeText, NavigatorSearchResultViewDisplayMode, SendMessageComposer } from '../../../../api';
import { AutoGrid, AutoGridProps, Column, Flex, Grid, LayoutSearchSavesView, Text } from '../../../../common'; import { AutoGrid, AutoGridProps, Column, Flex, Grid, LayoutSearchSavesView, Text } from '../../../../common';
import { useNavigator } from '../../../../hooks'; import { useNavigatorData } from '../../../../hooks';
import { NavigatorSearchResultItemView } from './NavigatorSearchResultItemView'; import { NavigatorSearchResultItemView } from './NavigatorSearchResultItemView';
export interface NavigatorSearchResultViewProps extends AutoGridProps export interface NavigatorSearchResultViewProps extends AutoGridProps
@@ -19,7 +19,7 @@ export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = pro
const [ selectedRoomId, setSelectedRoomId ] = useState<number | null>(null); const [ selectedRoomId, setSelectedRoomId ] = useState<number | null>(null);
const [ isPopoverActive, setIsPopoverActive ] = useState<boolean>(false); const [ isPopoverActive, setIsPopoverActive ] = useState<boolean>(false);
const { topLevelContext = null } = useNavigator(); const { topLevelContext } = useNavigatorData();
const getResultTitle = () => const getResultTitle = () =>
{ {
src/components/navigator/views/search/NavigatorSearchView.tsx
+4 -6
View File
@@ -2,16 +2,14 @@ import { FC, KeyboardEvent, useEffect, useState } from 'react';
import { FaSearch } from 'react-icons/fa'; import { FaSearch } from 'react-icons/fa';
import { INavigatorSearchFilter, LocalizeText, SearchFilterOptions } from '../../../../api'; import { INavigatorSearchFilter, LocalizeText, SearchFilterOptions } from '../../../../api';
import { Button } from '../../../../common'; import { Button } from '../../../../common';
import { useNavigator } from '../../../../hooks'; import { useNavigatorActions, useNavigatorData } from '../../../../hooks';
export const NavigatorSearchView: FC<{ export const NavigatorSearchView: FC<{}> = props =>
sendSearch: (searchValue: string, contextCode: string) => void;
}> = props =>
{ {
const { sendSearch = null } = props;
const [ searchFilterIndex, setSearchFilterIndex ] = useState(0); const [ searchFilterIndex, setSearchFilterIndex ] = useState(0);
const [ searchValue, setSearchValue ] = useState(''); const [ searchValue, setSearchValue ] = useState('');
const { topLevelContext = null, searchResult = null } = useNavigator(); const { topLevelContext, searchResult } = useNavigatorData();
const { sendSearch } = useNavigatorActions();
const processSearch = () => const processSearch = () =>
{ {
src/components/room/widgets/room-filter-words/RoomFilterWordsWidgetView.tsx
+2 -2
View File
@@ -2,7 +2,7 @@ import { UpdateRoomFilterMessageComposer } from '@nitrots/nitro-renderer';
import { FC, useState } from 'react'; import { FC, useState } from 'react';
import { LocalizeText, SendMessageComposer } from '../../../../api'; import { LocalizeText, SendMessageComposer } from '../../../../api';
import { Button, Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common'; import { Button, Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
import { useFilterWordsWidget, useNavigator } from '../../../../hooks'; import { useFilterWordsWidget, useNavigatorData } from '../../../../hooks';
import { NitroInput, classNames } from '../../../../layout'; import { NitroInput, classNames } from '../../../../layout';
export const RoomFilterWordsWidgetView: FC<{}> = props => export const RoomFilterWordsWidgetView: FC<{}> = props =>
@@ -11,7 +11,7 @@ export const RoomFilterWordsWidgetView: FC<{}> = props =>
const [ selectedWord, setSelectedWord ] = useState<string>(''); const [ selectedWord, setSelectedWord ] = useState<string>('');
const [ isSelectingWord, setIsSelectingWord ] = useState<boolean>(false); const [ isSelectingWord, setIsSelectingWord ] = useState<boolean>(false);
const { wordsFilter = [], isVisible = null, setWordsFilter, onClose = null } = useFilterWordsWidget(); const { wordsFilter = [], isVisible = null, setWordsFilter, onClose = null } = useFilterWordsWidget();
const { navigatorData = null } = useNavigator(); const { navigatorData } = useNavigatorData();
const processAction = (isAddingWord: boolean) => const processAction = (isAddingWord: boolean) =>
{ {
src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx
+2 -2
View File
@@ -4,7 +4,7 @@ import { classNames } from '../../../../layout';
import { FC, useEffect, useState } from 'react'; import { FC, useEffect, useState } from 'react';
import { GetConfigurationValue, LocalizeText, SendMessageComposer, SetLocalStorage, TryVisitRoom } from '../../../../api'; import { GetConfigurationValue, LocalizeText, SendMessageComposer, SetLocalStorage, TryVisitRoom } from '../../../../api';
import { Text } from '../../../../common'; import { Text } from '../../../../common';
import { useMessageEvent, useNavigator, useRoom } from '../../../../hooks'; import { useMessageEvent, useNavigatorData, useRoom } from '../../../../hooks';
import { getRegisteredPlugins, INitroPlugin, subscribePlugins } from '../../../plugins/NitroPluginApi'; import { getRegisteredPlugins, INitroPlugin, subscribePlugins } from '../../../plugins/NitroPluginApi';
export const RoomToolsWidgetView: FC<{}> = props => export const RoomToolsWidgetView: FC<{}> = props =>
@@ -18,7 +18,7 @@ export const RoomToolsWidgetView: FC<{}> = props =>
const [isOpenHistory, setIsOpenHistory] = useState<boolean>(false); const [isOpenHistory, setIsOpenHistory] = useState<boolean>(false);
const [roomHistory, setRoomHistory] = useState<{ roomId: number, roomName: string }[]>([]); const [roomHistory, setRoomHistory] = useState<{ roomId: number, roomName: string }[]>([]);
const [plugins, setPlugins] = useState<INitroPlugin[]>([]); const [plugins, setPlugins] = useState<INitroPlugin[]>([]);
const { navigatorData = null } = useNavigator(); const { navigatorData } = useNavigatorData();
const { roomSession = null } = useRoom(); const { roomSession = null } = useRoom();
// Subscribe to external plugin changes // Subscribe to external plugin changes