2021-08-06 05:38:57 +02:00
|
|
|
import { MessengerInitComposer, RoomEngineObjectEvent, RoomObjectCategory, RoomObjectUserType } from '@nitrots/nitro-renderer';
|
2021-08-18 22:50:15 +02:00
|
|
|
import { FC, useCallback, useEffect, 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-08-05 19:32:22 +02:00
|
|
|
import { NitroCardContentView, NitroCardHeaderView, 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 { FriendListViewProps } from './FriendListView.types';
|
|
|
|
import { FriendListReducer, initialFriendList } from './reducers/FriendListReducer';
|
|
|
|
import { FriendBarView } from './views/friend-bar/FriendBarView';
|
|
|
|
import { FriendListFriendsView } from './views/friends/FriendListFriendsView';
|
2021-04-22 08:54:49 +02:00
|
|
|
|
|
|
|
export const FriendListView: FC<FriendListViewProps> = props =>
|
|
|
|
{
|
2021-06-23 05:22:32 +02:00
|
|
|
const [ isVisible, setIsVisible ] = useState(false);
|
|
|
|
const [ isReady, setIsReady ] = useState(false);
|
|
|
|
const [ friendListState, dispatchFriendListState ] = useReducer(FriendListReducer, initialFriendList);
|
|
|
|
const { settings = null } = friendListState;
|
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:
|
|
|
|
console.log('requested');
|
|
|
|
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-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-08-09 18:15:08 +02:00
|
|
|
<NitroCardView uniqueKey="friend-list" className="nitro-friend-list">
|
2021-05-12 06:29:33 +02:00
|
|
|
<NitroCardHeaderView headerText={ LocalizeText('friendlist.friends') } onCloseClick={ event => setIsVisible(false) } />
|
2021-08-05 19:32:22 +02:00
|
|
|
<NitroCardContentView>
|
|
|
|
<div className="text-black fw-bold">{ LocalizeText('friendlist.search.friendscaption') }</div>
|
|
|
|
<FriendListFriendsView online={ true } />
|
|
|
|
<div className="text-black fw-bold">{ LocalizeText('friendlist.search.friendscaption') }</div>
|
|
|
|
<FriendListFriendsView online={ true } />
|
|
|
|
<div className="text-black fw-bold">{ LocalizeText('friendlist.friends.offlinecaption') }</div>
|
|
|
|
<FriendListFriendsView online={ false } />
|
|
|
|
</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
|
|
|
);
|
|
|
|
}
|