2021-08-06 05:38:57 +02:00
|
|
|
import { MessengerInitComposer, RoomEngineObjectEvent, RoomObjectCategory, RoomObjectUserType } from '@nitrots/nitro-renderer';
|
2021-09-08 06:03:48 +02:00
|
|
|
import { FC, useCallback, useEffect, useMemo, useReducer, useState } from 'react';
|
2021-06-23 05:22:32 +02:00
|
|
|
import { createPortal } from 'react-dom';
|
2021-08-17 05:38:07 +02:00
|
|
|
import { GetRoomSession, LocalizeText } from '../../api';
|
2021-07-07 09:56:11 +02:00
|
|
|
import { FriendEnteredRoomEvent, FriendListEvent } from '../../events';
|
2021-08-18 22:50:15 +02:00
|
|
|
import { FriendListContentEvent } from '../../events/friend-list/FriendListContentEvent';
|
2021-07-08 10:25:57 +02:00
|
|
|
import { FriendListSendFriendRequestEvent } from '../../events/friend-list/FriendListSendFriendRequestEvent';
|
2021-07-07 09:56:11 +02:00
|
|
|
import { useRoomEngineEvent } from '../../hooks/events';
|
|
|
|
import { dispatchUiEvent, useUiEvent } from '../../hooks/events/ui/ui-event';
|
2021-04-22 09:11:27 +02:00
|
|
|
import { SendMessageHook } from '../../hooks/messages/message-event';
|
2021-09-08 06:03:48 +02:00
|
|
|
import { NitroCardAccordionItemView, NitroCardAccordionView, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../layout';
|
2021-06-23 05:22:32 +02:00
|
|
|
import { FriendListContextProvider } from './context/FriendListContext';
|
2021-04-22 08:54:49 +02:00
|
|
|
import { FriendListMessageHandler } from './FriendListMessageHandler';
|
2021-06-23 05:22:32 +02:00
|
|
|
import { FriendListReducer, initialFriendList } from './reducers/FriendListReducer';
|
|
|
|
import { FriendBarView } from './views/friend-bar/FriendBarView';
|
2021-09-15 18:26:51 +02:00
|
|
|
import { FriendsListView } from './views/list/FriendsListView';
|
2021-09-08 06:03:48 +02:00
|
|
|
|
|
|
|
const TABS: string[] = ['friendlist.friends', 'generic.search'];
|
2021-04-22 08:54:49 +02:00
|
|
|
|
2021-09-15 18:26:51 +02:00
|
|
|
export const FriendsView: FC<{}> = props =>
|
2021-04-22 08:54:49 +02:00
|
|
|
{
|
2021-09-08 06:03:48 +02:00
|
|
|
const [ friendListState, dispatchFriendListState ] = useReducer(FriendListReducer, initialFriendList);
|
|
|
|
const { friends = null, requests = null, settings = null } = friendListState;
|
|
|
|
|
2021-06-23 05:22:32 +02:00
|
|
|
const [ isVisible, setIsVisible ] = useState(false);
|
|
|
|
const [ isReady, setIsReady ] = useState(false);
|
2021-09-08 06:03:48 +02:00
|
|
|
const [ currentTab, setCurrentTab ] = useState<number>(0);
|
2021-04-22 08:54:49 +02:00
|
|
|
|
|
|
|
const onFriendListEvent = useCallback((event: FriendListEvent) =>
|
|
|
|
{
|
|
|
|
switch(event.type)
|
|
|
|
{
|
|
|
|
case FriendListEvent.SHOW_FRIEND_LIST:
|
|
|
|
setIsVisible(true);
|
|
|
|
return;
|
|
|
|
case FriendListEvent.TOGGLE_FRIEND_LIST:
|
|
|
|
setIsVisible(value => !value);
|
|
|
|
return;
|
2021-07-08 10:25:57 +02:00
|
|
|
case FriendListSendFriendRequestEvent.SEND_FRIEND_REQUEST:
|
|
|
|
const requestEvent = (event as FriendListSendFriendRequestEvent);
|
|
|
|
return;
|
2021-08-18 22:50:15 +02:00
|
|
|
case FriendListEvent.REQUEST_FRIEND_LIST:
|
|
|
|
dispatchUiEvent(new FriendListContentEvent(friendListState.friends));
|
|
|
|
return;
|
2021-04-22 08:54:49 +02:00
|
|
|
}
|
2021-08-18 22:50:15 +02:00
|
|
|
}, [friendListState.friends]);
|
2021-04-22 08:54:49 +02:00
|
|
|
|
|
|
|
useUiEvent(FriendListEvent.SHOW_FRIEND_LIST, onFriendListEvent);
|
|
|
|
useUiEvent(FriendListEvent.TOGGLE_FRIEND_LIST, onFriendListEvent);
|
2021-07-08 10:25:57 +02:00
|
|
|
useUiEvent(FriendListSendFriendRequestEvent.SEND_FRIEND_REQUEST, onFriendListEvent);
|
2021-08-18 22:50:15 +02:00
|
|
|
useUiEvent(FriendListEvent.REQUEST_FRIEND_LIST, onFriendListEvent);
|
2021-04-22 08:54:49 +02:00
|
|
|
|
2021-07-07 09:56:11 +02:00
|
|
|
const onRoomEngineObjectEvent = useCallback((event: RoomEngineObjectEvent) =>
|
|
|
|
{
|
|
|
|
const roomSession = GetRoomSession();
|
|
|
|
|
|
|
|
if(!roomSession) return;
|
|
|
|
|
|
|
|
if(event.category !== RoomObjectCategory.UNIT) return;
|
|
|
|
|
|
|
|
const userData = roomSession.userDataManager.getUserDataByIndex(event.objectId);
|
|
|
|
|
2021-07-08 10:25:57 +02:00
|
|
|
if(!userData || (userData.type !== RoomObjectUserType.getTypeNumber(RoomObjectUserType.USER))) return;
|
2021-07-07 09:56:11 +02:00
|
|
|
|
|
|
|
const friend = friendListState.friends.find(friend =>
|
|
|
|
{
|
|
|
|
return (friend.id === userData.webID);
|
|
|
|
});
|
|
|
|
|
|
|
|
if(!friend) return;
|
|
|
|
|
|
|
|
dispatchUiEvent(new FriendEnteredRoomEvent(userData.roomIndex, RoomObjectCategory.UNIT, userData.webID, userData.name, userData.type));
|
|
|
|
}, [ friendListState.friends ]);
|
|
|
|
|
|
|
|
useRoomEngineEvent(RoomEngineObjectEvent.ADDED, onRoomEngineObjectEvent);
|
|
|
|
|
2021-08-05 19:32:22 +02:00
|
|
|
useEffect(() =>
|
|
|
|
{
|
|
|
|
if(!settings) return;
|
|
|
|
|
|
|
|
setIsReady(true);
|
|
|
|
}, [ settings ]);
|
|
|
|
|
|
|
|
useEffect(() =>
|
|
|
|
{
|
|
|
|
SendMessageHook(new MessengerInitComposer());
|
|
|
|
}, []);
|
|
|
|
|
2021-09-08 06:03:48 +02:00
|
|
|
const onlineFriends = useMemo(() =>
|
|
|
|
{
|
|
|
|
if(!friends) return [];
|
|
|
|
|
|
|
|
return friends.filter(f => f.online);
|
|
|
|
}, [ friends ]);
|
|
|
|
|
|
|
|
const offlineFriends = useMemo(() =>
|
|
|
|
{
|
|
|
|
if(!friends) return [];
|
|
|
|
|
|
|
|
return friends.filter(f => !f.online);
|
|
|
|
}, [ friends ]);
|
|
|
|
|
2021-04-22 08:54:49 +02:00
|
|
|
return (
|
2021-06-23 05:22:32 +02:00
|
|
|
<FriendListContextProvider value={ { friendListState, dispatchFriendListState } }>
|
|
|
|
<FriendListMessageHandler />
|
|
|
|
{ isReady && createPortal(<FriendBarView />, document.getElementById('toolbar-friend-bar-container')) }
|
2021-05-12 06:29:33 +02:00
|
|
|
{ isVisible &&
|
2021-09-08 06:03:48 +02:00
|
|
|
<NitroCardView className="nitro-friend-list">
|
|
|
|
<NitroCardHeaderView headerText={ LocalizeText('friendlist.friends') } onCloseClick={ () => setIsVisible(false) } />
|
|
|
|
<NitroCardContentView className="p-0">
|
|
|
|
<NitroCardTabsView>
|
|
|
|
{ TABS.map((tab, index) =>
|
|
|
|
{
|
|
|
|
return (<NitroCardTabsItemView key={ index } isActive={ currentTab === index } onClick={ () => setCurrentTab(index) }>
|
|
|
|
{ LocalizeText(tab) }
|
|
|
|
</NitroCardTabsItemView>);
|
|
|
|
}) }
|
|
|
|
</NitroCardTabsView>
|
|
|
|
<div className="text-black">
|
|
|
|
{ currentTab === 0 && <NitroCardAccordionView>
|
2021-09-15 18:26:51 +02:00
|
|
|
<NitroCardAccordionItemView headerText={ LocalizeText('friendlist.friends') + ` (${onlineFriends.length})` } defaultState={ true }>
|
|
|
|
<FriendsListView list={ onlineFriends } />
|
2021-09-08 06:03:48 +02:00
|
|
|
</NitroCardAccordionItemView>
|
|
|
|
<NitroCardAccordionItemView headerText={ LocalizeText('friendlist.friends.offlinecaption') + ` (${offlineFriends.length})` }>
|
2021-09-15 18:26:51 +02:00
|
|
|
<FriendsListView list={ offlineFriends } />
|
2021-09-08 06:03:48 +02:00
|
|
|
</NitroCardAccordionItemView>
|
|
|
|
{ requests.length > 0 && <NitroCardAccordionItemView headerText={ LocalizeText('friendlist.tab.friendrequests') + ` (${requests.length})` }>
|
2021-09-15 18:26:51 +02:00
|
|
|
<FriendsListView list={ requests } />
|
2021-09-08 06:03:48 +02:00
|
|
|
</NitroCardAccordionItemView> }
|
|
|
|
</NitroCardAccordionView> }
|
|
|
|
</div>
|
2021-08-05 19:32:22 +02:00
|
|
|
</NitroCardContentView>
|
2021-05-12 06:29:33 +02:00
|
|
|
</NitroCardView> }
|
2021-06-23 05:22:32 +02:00
|
|
|
</FriendListContextProvider>
|
2021-04-22 08:54:49 +02:00
|
|
|
);
|
|
|
|
}
|