nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-30 08:50:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

Messenger updates

Browse Source
This commit is contained in:
Bill 2021-08-05 13:32:22 -04:00
parent 4e56447adc
commit 6721efcec5
5 changed files with 65 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/views/friend-list/FriendListView.tsx
View File

@ -7,7 +7,7 @@ import { FriendListSendFriendRequestEvent } from '../../events/friend-list/Frien
import { useRoomEngineEvent } from '../../hooks/events';
import { dispatchUiEvent, useUiEvent } from '../../hooks/events/ui/ui-event';
import { SendMessageHook } from '../../hooks/messages/message-event';
import { NitroCardAccordionItemView, NitroCardAccordionView, NitroCardHeaderView, NitroCardView } from '../../layout';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
import { LocalizeText } from '../../utils/LocalizeText';
import { FriendListContextProvider } from './context/FriendListContext';
import { FriendListMessageHandler } from './FriendListMessageHandler';
@ -43,18 +43,6 @@ export const FriendListView: FC<FriendListViewProps> = props =>
useUiEvent(FriendListEvent.TOGGLE_FRIEND_LIST, onFriendListEvent);
useUiEvent(FriendListSendFriendRequestEvent.SEND_FRIEND_REQUEST, onFriendListEvent);
useEffect(() =>
{
if(!settings) return;
setIsReady(true);
}, [ settings ]);
useEffect(() =>
{
SendMessageHook(new MessengerInitComposer());
}, []);
const onRoomEngineObjectEvent = useCallback((event: RoomEngineObjectEvent) =>
{
const roomSession = GetRoomSession();
@ -79,6 +67,18 @@ export const FriendListView: FC<FriendListViewProps> = props =>
useRoomEngineEvent(RoomEngineObjectEvent.ADDED, onRoomEngineObjectEvent);
useEffect(() =>
{
if(!settings) return;
setIsReady(true);
}, [ settings ]);
useEffect(() =>
{
SendMessageHook(new MessengerInitComposer());
}, []);
return (
<FriendListContextProvider value={ { friendListState, dispatchFriendListState } }>
<FriendListMessageHandler />
@ -86,17 +86,14 @@ export const FriendListView: FC<FriendListViewProps> = props =>
{ isVisible &&
<NitroCardView className="nitro-friend-list">
<NitroCardHeaderView headerText={ LocalizeText('friendlist.friends') } onCloseClick={ event => setIsVisible(false) } />
<NitroCardAccordionView>
<NitroCardAccordionItemView headerText="Friends" contentClassName="ps-3">
<FriendListFriendsView />
</NitroCardAccordionItemView>
<NitroCardAccordionItemView headerText="Friend Requests" contentClassName="ps-3">
abc
</NitroCardAccordionItemView>
<NitroCardAccordionItemView headerText="Search" contentClassName="ps-3">
abc
</NitroCardAccordionItemView>
</NitroCardAccordionView>
<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>
</NitroCardView> }
</FriendListContextProvider>
);

13
src/views/friend-list/views/friends-item/FriendListFriendsItemView.tsx Normal file
View File

@ -0,0 +1,13 @@
import { FC } from 'react';
import { FriendListFriendsItemViewProps } from './FriendListFriendsItemView.types';
export const FriendListFriendsItemView: FC<FriendListFriendsItemViewProps> = props =>
{
const { friend = null } = props;
return (
<div className="d-flex">
<div className="text-black">{ friend.name }</div>
</div>
);
}

6
src/views/friend-list/views/friends-item/FriendListFriendsItemView.types.ts Normal file
View File

@ -0,0 +1,6 @@
import { MessengerFriend } from '../../common/MessengerFriend';
export interface FriendListFriendsItemViewProps
{
friend: MessengerFriend;
}

43
src/views/friend-list/views/friends/FriendListFriendsView.tsx
View File

@ -1,36 +1,35 @@
import { FC, useState } from 'react';
import { NitroCardAccordionItemView } from '../../../../layout/card/accordion/item/NitroCardAccordionItemView';
import { NitroCardAccordionView } from '../../../../layout/card/accordion/NitroCardAccordionView';
import { FC, useMemo } from 'react';
import { useFriendListContext } from '../../context/FriendListContext';
import { FriendListFriendsItemView } from '../friends-item/FriendListFriendsItemView';
import { FriendListFriendsViewProps } from './FriendListFriendsView.types';
export const FriendListFriendsView: FC<FriendListFriendsViewProps> = props =>
{
const { online = true } = props;
const { friendListState = null } = useFriendListContext();
const { friends = null } = friendListState;
const [ isOnlineFriendsExtended, setIsOnlineFriendsExtended ] = useState(false);
const [ isOfflineFriendsExtended, setIsOfflineFriendsExtended ] = useState(false);
function toggleOnlineFriends(): void
const getFriendElements = useMemo(() =>
{
setIsOnlineFriendsExtended(value => !value);
if(!friends || !friends.length) return null;
const elements: JSX.Element[] = [];
for(const friend of friends)
{
if(!friend || (friend.online !== online)) continue;
elements.push(<FriendListFriendsItemView key={ friend.id } friend={ friend } />)
}
function toggleOfflineFriends(): void
{
setIsOfflineFriendsExtended(value => !value);
}
console.log(elements);
return elements;
}, [ friends, online ]);
return (
<>
<NitroCardAccordionView>
<NitroCardAccordionItemView headerText="Friends (0)">
abc
</NitroCardAccordionItemView>
<NitroCardAccordionItemView headerText="Offline Friends (0)">
abc
</NitroCardAccordionItemView>
</NitroCardAccordionView>
</>
<div className="d-flex flex-column">
{ getFriendElements }
</div>
);
}

4
src/views/friend-list/views/friends/FriendListFriendsView.types.ts
View File

@ -1,2 +1,4 @@
export interface FriendListFriendsViewProps
{}
{
online?: boolean;
}