2021-08-06 05:38:57 +02:00
|
|
|
import { ILinkEventTracker, NavigatorInitComposer, NavigatorSearchComposer, RoomSessionEvent } from '@nitrots/nitro-renderer';
|
2021-05-05 00:38:31 +02:00
|
|
|
import { FC, useCallback, useEffect, useReducer, useState } from 'react';
|
2021-07-22 07:10:13 +02:00
|
|
|
import { AddEventLinkTracker, RemoveLinkEventTracker } from '../../api';
|
2021-07-23 07:04:12 +02:00
|
|
|
import { TryVisitRoom } from '../../api/navigator/TryVisitRoom';
|
2021-04-19 18:34:31 +02:00
|
|
|
import { NavigatorEvent } from '../../events';
|
|
|
|
import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
|
|
|
|
import { useUiEvent } from '../../hooks/events/ui/ui-event';
|
2021-04-21 05:36:39 +02:00
|
|
|
import { SendMessageHook } from '../../hooks/messages/message-event';
|
2021-05-05 00:38:31 +02:00
|
|
|
import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../layout';
|
2021-04-19 18:34:31 +02:00
|
|
|
import { LocalizeText } from '../../utils/LocalizeText';
|
2021-05-05 00:38:31 +02:00
|
|
|
import { NavigatorContextProvider } from './context/NavigatorContext';
|
2021-04-21 05:36:39 +02:00
|
|
|
import { NavigatorMessageHandler } from './NavigatorMessageHandler';
|
2021-05-05 00:38:31 +02:00
|
|
|
import { NavigatorViewProps } from './NavigatorView.types';
|
|
|
|
import { initialNavigator, NavigatorActions, NavigatorReducer } from './reducers/NavigatorReducer';
|
2021-06-30 04:15:32 +02:00
|
|
|
import { NavigatorRoomCreatorView } from './views/creator/NavigatorRoomCreatorView';
|
2021-07-02 06:37:31 +02:00
|
|
|
import { NavigatorRoomInfoView } from './views/room-info/NavigatorRoomInfoView';
|
|
|
|
import { NavigatorRoomLinkView } from './views/room-link/NavigatorRoomLinkView';
|
2021-07-05 05:44:15 +02:00
|
|
|
import { NavigatorRoomSettingsView } from './views/room-settings/NavigatorRoomSettingsView';
|
2021-05-05 00:38:31 +02:00
|
|
|
import { NavigatorSearchResultSetView } from './views/search-result-set/NavigatorSearchResultSetView';
|
|
|
|
import { NavigatorSearchView } from './views/search/NavigatorSearchView';
|
2021-04-21 11:04:56 +02:00
|
|
|
|
2021-04-24 03:05:18 +02:00
|
|
|
export const NavigatorView: FC<NavigatorViewProps> = props =>
|
2021-04-18 06:58:57 +02:00
|
|
|
{
|
2021-05-05 00:38:31 +02:00
|
|
|
const [ isVisible, setIsVisible ] = useState(false);
|
2021-06-12 04:53:56 +02:00
|
|
|
const [ isCreatorOpen, setCreatorOpen ] = useState(false);
|
2021-07-02 06:37:31 +02:00
|
|
|
const [ isRoomInfoOpen, setRoomInfoOpen ] = useState(false);
|
|
|
|
const [ isRoomLinkOpen, setRoomLinkOpen ] = useState(false);
|
2021-05-05 00:38:31 +02:00
|
|
|
const [ navigatorState, dispatchNavigatorState ] = useReducer(NavigatorReducer, initialNavigator);
|
|
|
|
const { needsNavigatorUpdate = false, topLevelContext = null, topLevelContexts = null } = navigatorState;
|
2021-04-21 11:04:56 +02:00
|
|
|
|
2021-04-19 18:34:31 +02:00
|
|
|
const onNavigatorEvent = useCallback((event: NavigatorEvent) =>
|
|
|
|
{
|
|
|
|
switch(event.type)
|
|
|
|
{
|
|
|
|
case NavigatorEvent.SHOW_NAVIGATOR:
|
|
|
|
setIsVisible(true);
|
|
|
|
return;
|
2021-05-05 00:38:31 +02:00
|
|
|
case NavigatorEvent.HIDE_NAVIGATOR:
|
|
|
|
setIsVisible(false);
|
|
|
|
return;
|
2021-04-19 18:34:31 +02:00
|
|
|
case NavigatorEvent.TOGGLE_NAVIGATOR:
|
|
|
|
setIsVisible(value => !value);
|
|
|
|
return;
|
2021-07-02 06:37:31 +02:00
|
|
|
case NavigatorEvent.TOGGLE_ROOM_INFO:
|
|
|
|
setRoomInfoOpen(value => !value);
|
|
|
|
return;
|
|
|
|
case NavigatorEvent.TOGGLE_ROOM_LINK:
|
|
|
|
setRoomLinkOpen(value => !value);
|
|
|
|
return;
|
2021-04-19 18:34:31 +02:00
|
|
|
}
|
2021-05-14 05:28:45 +02:00
|
|
|
}, []);
|
2021-05-05 00:38:31 +02:00
|
|
|
|
|
|
|
useUiEvent(NavigatorEvent.SHOW_NAVIGATOR, onNavigatorEvent);
|
|
|
|
useUiEvent(NavigatorEvent.HIDE_NAVIGATOR, onNavigatorEvent);
|
|
|
|
useUiEvent(NavigatorEvent.TOGGLE_NAVIGATOR, onNavigatorEvent);
|
2021-07-02 06:37:31 +02:00
|
|
|
useUiEvent(NavigatorEvent.TOGGLE_ROOM_INFO, onNavigatorEvent);
|
|
|
|
useUiEvent(NavigatorEvent.TOGGLE_ROOM_LINK, onNavigatorEvent);
|
2021-04-18 06:58:57 +02:00
|
|
|
|
2021-04-19 18:34:31 +02:00
|
|
|
const onRoomSessionEvent = useCallback((event: RoomSessionEvent) =>
|
|
|
|
{
|
|
|
|
switch(event.type)
|
|
|
|
{
|
|
|
|
case RoomSessionEvent.CREATED:
|
|
|
|
setIsVisible(false);
|
2021-06-30 04:15:32 +02:00
|
|
|
setCreatorOpen(false);
|
2021-04-19 18:34:31 +02:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
}, []);
|
|
|
|
|
2021-05-05 00:38:31 +02:00
|
|
|
useRoomSessionManagerEvent(RoomSessionEvent.CREATED, onRoomSessionEvent);
|
2021-04-19 18:34:31 +02:00
|
|
|
|
2021-05-14 05:28:45 +02:00
|
|
|
const sendSearch = useCallback((searchValue: string, contextCode: string) =>
|
|
|
|
{
|
2021-06-30 04:15:32 +02:00
|
|
|
setCreatorOpen(false);
|
2021-05-14 05:28:45 +02:00
|
|
|
SendMessageHook(new NavigatorSearchComposer(contextCode, searchValue));
|
|
|
|
}, []);
|
|
|
|
|
2021-07-22 07:10:13 +02:00
|
|
|
const linkReceived = useCallback((url: string) =>
|
|
|
|
{
|
|
|
|
const parts = url.split('/');
|
|
|
|
|
|
|
|
if(parts.length < 2) return;
|
|
|
|
|
|
|
|
switch(parts[1])
|
|
|
|
{
|
|
|
|
case 'goto':
|
|
|
|
if(parts.length > 2)
|
|
|
|
{
|
|
|
|
switch(parts[2])
|
|
|
|
{
|
|
|
|
case 'home':
|
|
|
|
//goToHomeRoom();
|
|
|
|
break;
|
|
|
|
default: {
|
|
|
|
const roomId = parseInt(parts[2]);
|
|
|
|
|
2021-07-23 07:04:12 +02:00
|
|
|
TryVisitRoom(roomId);
|
2021-07-22 07:10:13 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
useEffect(() =>
|
|
|
|
{
|
|
|
|
const linkTracker: ILinkEventTracker = {
|
|
|
|
linkReceived,
|
2021-07-23 07:04:12 +02:00
|
|
|
eventUrlPrefix: 'navigator/'
|
2021-07-22 07:10:13 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
AddEventLinkTracker(linkTracker);
|
|
|
|
|
|
|
|
return () => RemoveLinkEventTracker(linkTracker);
|
|
|
|
}, [ linkReceived]);
|
|
|
|
|
2021-04-19 18:34:31 +02:00
|
|
|
useEffect(() =>
|
|
|
|
{
|
2021-05-05 00:38:31 +02:00
|
|
|
if(!isVisible || !needsNavigatorUpdate) return;
|
2021-04-19 18:34:31 +02:00
|
|
|
|
2021-05-05 00:38:31 +02:00
|
|
|
dispatchNavigatorState({
|
|
|
|
type: NavigatorActions.SET_NEEDS_UPDATE,
|
|
|
|
payload: {
|
|
|
|
flag: false
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
SendMessageHook(new NavigatorInitComposer());
|
|
|
|
}, [ isVisible, needsNavigatorUpdate ]);
|
|
|
|
|
2021-04-21 05:36:39 +02:00
|
|
|
useEffect(() =>
|
|
|
|
{
|
2021-05-05 00:38:31 +02:00
|
|
|
if(!topLevelContexts || !topLevelContexts.length) return;
|
2021-04-21 05:36:39 +02:00
|
|
|
|
2021-05-14 05:28:45 +02:00
|
|
|
sendSearch('', topLevelContexts[0].code);
|
2021-05-05 00:38:31 +02:00
|
|
|
}, [ topLevelContexts, sendSearch ]);
|
2021-04-19 18:34:31 +02:00
|
|
|
|
2021-04-18 06:58:57 +02:00
|
|
|
return (
|
2021-05-05 00:38:31 +02:00
|
|
|
<NavigatorContextProvider value={ { navigatorState, dispatchNavigatorState } }>
|
|
|
|
<NavigatorMessageHandler />
|
|
|
|
{ isVisible &&
|
2021-08-09 18:15:08 +02:00
|
|
|
<NitroCardView uniqueKey="navigator" className="nitro-navigator">
|
2021-06-30 04:15:32 +02:00
|
|
|
<NitroCardHeaderView headerText={ LocalizeText(isCreatorOpen ? 'navigator.createroom.title' : 'navigator.title') } onCloseClick={ event => setIsVisible(false) } />
|
2021-05-05 00:38:31 +02:00
|
|
|
<NitroCardTabsView>
|
|
|
|
{ topLevelContexts.map((context, index) =>
|
|
|
|
{
|
2021-06-12 04:53:56 +02:00
|
|
|
return (
|
|
|
|
<NitroCardTabsItemView key={ index } isActive={ ((topLevelContext === context) && !isCreatorOpen) } onClick={ event => sendSearch('', context.code) }>
|
|
|
|
{ LocalizeText(('navigator.toplevelview.' + context.code)) }
|
|
|
|
</NitroCardTabsItemView>
|
|
|
|
);
|
2021-05-05 00:38:31 +02:00
|
|
|
}) }
|
2021-06-30 04:15:32 +02:00
|
|
|
<NitroCardTabsItemView isActive={ isCreatorOpen } onClick={ () => setCreatorOpen(true) }>
|
|
|
|
<i className="fas fa-plus" />
|
2021-06-12 04:53:56 +02:00
|
|
|
</NitroCardTabsItemView>
|
2021-05-05 00:38:31 +02:00
|
|
|
</NitroCardTabsView>
|
|
|
|
<NitroCardContentView>
|
2021-06-20 05:33:08 +02:00
|
|
|
<div className="d-flex flex-column h-100">
|
2021-06-30 04:15:32 +02:00
|
|
|
{ !isCreatorOpen && <>
|
|
|
|
<NavigatorSearchView sendSearch={ sendSearch } />
|
|
|
|
<NavigatorSearchResultSetView />
|
|
|
|
</> }
|
|
|
|
{ isCreatorOpen && <NavigatorRoomCreatorView /> }
|
2021-06-20 05:33:08 +02:00
|
|
|
</div>
|
2021-05-05 00:38:31 +02:00
|
|
|
</NitroCardContentView>
|
|
|
|
</NitroCardView> }
|
2021-07-02 06:37:31 +02:00
|
|
|
{ isRoomInfoOpen && <NavigatorRoomInfoView onCloseClick={ () => setRoomInfoOpen(false) } /> }
|
|
|
|
{ isRoomLinkOpen && <NavigatorRoomLinkView onCloseClick={ () => setRoomLinkOpen(false) } /> }
|
2021-07-05 05:44:15 +02:00
|
|
|
<NavigatorRoomSettingsView />
|
2021-05-05 00:38:31 +02:00
|
|
|
</NavigatorContextProvider>
|
2021-04-18 06:58:57 +02:00
|
|
|
);
|
|
|
|
}
|