nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-10-23 03:13:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

Setup friend-bar

Browse Source
This commit is contained in:
Bill 2021-06-22 23:22:32 -04:00
parent 4919f05821
commit 60465968ea
13 changed files with 166 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/views/friend-list/FriendListMessageHandler.tsx
View File

@ -1,25 +1,32 @@
import { GetFriendRequestsComposer, MessengerInitEvent } from 'nitro-renderer';
import { useCallback } from 'react';
import { FC, useCallback } from 'react';
import { CreateMessageHook, SendMessageHook } from '../../hooks/messages/message-event';
import { useFriendListContext } from './context/FriendListContext';
import { FriendListMessageHandlerProps } from './FriendListMessageHandler.types';
import { FriendListActions } from './reducers/FriendListReducer';
import { MessengerSettings } from './utils/MessengerSettings';
export function FriendListMessageHandler(props: FriendListMessageHandlerProps): JSX.Element
export const FriendListMessageHandler: FC<FriendListMessageHandlerProps> = props =>
{
const { setMessengerSettings = null } = props;
const { friendListState = null, dispatchFriendListState = null } = useFriendListContext();
const onMessengerInitEvent = useCallback((event: MessengerInitEvent) =>
{
const parser = event.getParser();
{
const parser = event.getParser();
setMessengerSettings(new MessengerSettings(
parser.userFriendLimit,
parser.normalFriendLimit,
parser.extendedFriendLimit,
parser.categories));
dispatchFriendListState({
type: FriendListActions.UPDATE_SETTINGS,
payload: {
settings: new MessengerSettings(
parser.userFriendLimit,
parser.normalFriendLimit,
parser.extendedFriendLimit,
parser.categories)
}
});
SendMessageHook(new GetFriendRequestsComposer());
}, [ setMessengerSettings ]);
SendMessageHook(new GetFriendRequestsComposer());
}, [ dispatchFriendListState ]);
CreateMessageHook(MessengerInitEvent, onMessengerInitEvent);

3
src/views/friend-list/FriendListMessageHandler.types.ts
View File

@ -1,6 +1,5 @@
import { MessengerSettings } from './utils/MessengerSettings';
export interface FriendListMessageHandlerProps
{
setMessengerSettings: (messengerSettings: MessengerSettings) => void;
}

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

@ -1,5 +1,6 @@
import { MessengerInitComposer } from 'nitro-renderer';
import React, { FC, useCallback, useEffect, useState } from 'react';
import React, { FC, useCallback, useEffect, useReducer, useState } from 'react';
import { createPortal } from 'react-dom';
import { FriendListEvent } from '../../events';
import { useUiEvent } from '../../hooks/events/ui/ui-event';
import { SendMessageHook } from '../../hooks/messages/message-event';
@ -7,20 +8,19 @@ import { NitroCardHeaderView, NitroCardView } from '../../layout';
import { NitroCardAccordionItemView } from '../../layout/card/accordion/item/NitroCardAccordionItemView';
import { NitroCardAccordionView } from '../../layout/card/accordion/NitroCardAccordionView';
import { LocalizeText } from '../../utils/LocalizeText';
import { FriendListContextProvider } from './context/FriendListContext';
import { FriendListMessageHandler } from './FriendListMessageHandler';
import { FriendListTabs, FriendListViewProps, IFriendListContext } from './FriendListView.types';
import { FriendListFriendsView } from './friends/FriendListFriendsView';
import { MessengerSettings } from './utils/MessengerSettings';
export const FriendListContext = React.createContext<IFriendListContext>(null);
import { FriendListViewProps } from './FriendListView.types';
import { FriendListReducer, initialFriendList } from './reducers/FriendListReducer';
import { FriendBarView } from './views/friend-bar/FriendBarView';
import { FriendListFriendsView } from './views/friends/FriendListFriendsView';
export const FriendListView: FC<FriendListViewProps> = props =>
{
const tabs = [ FriendListTabs.FRIENDS, FriendListTabs.REQUESTS, FriendListTabs.SEARCH ];
const [ isVisible, setIsVisible ] = useState(false);
const [ currentTab, setCurrentTab ] = useState<string>(null);
const [ messengerSettings, setMessengerSettings ] = useState<MessengerSettings>(null);
const [ isVisible, setIsVisible ] = useState(false);
const [ isReady, setIsReady ] = useState(false);
const [ friendListState, dispatchFriendListState ] = useReducer(FriendListReducer, initialFriendList);
const { settings = null } = friendListState;
const onFriendListEvent = useCallback((event: FriendListEvent) =>
{
@ -40,13 +40,10 @@ export const FriendListView: FC<FriendListViewProps> = props =>
useEffect(() =>
{
setCurrentTab(tabs[0]);
}, [ tabs ]);
if(!settings) return;
useEffect(() =>
{
if(!messengerSettings) return;
}, [ messengerSettings ]);
setIsReady(true);
}, [ settings ]);
useEffect(() =>
{
@ -54,8 +51,9 @@ export const FriendListView: FC<FriendListViewProps> = props =>
}, []);
return (
<FriendListContext.Provider value={{ currentTab: currentTab, onSetCurrentTab: setCurrentTab }}>
<FriendListMessageHandler setMessengerSettings={ setMessengerSettings } />
<FriendListContextProvider value={ { friendListState, dispatchFriendListState } }>
<FriendListMessageHandler />
{ isReady && createPortal(<FriendBarView />, document.getElementById('toolbar-friend-bar-container')) }
{ isVisible &&
<NitroCardView className="nitro-friend-list">
<NitroCardHeaderView headerText={ LocalizeText('friendlist.friends') } onCloseClick={ event => setIsVisible(false) } />
@ -71,6 +69,6 @@ export const FriendListView: FC<FriendListViewProps> = props =>
</NitroCardAccordionItemView>
</NitroCardAccordionView>
</NitroCardView> }
</FriendListContext.Provider>
</FriendListContextProvider>
);
}

6
src/views/friend-list/FriendListView.types.ts
View File

@ -1,12 +1,6 @@
export interface FriendListViewProps
{}
export interface IFriendListContext
{
currentTab: string;
onSetCurrentTab: (tab: string) => void;
}
export class FriendListTabs
{
public static readonly FRIENDS: string = 'friendlist.friends';

14
src/views/friend-list/context/FriendListContext.tsx Normal file
View File

@ -0,0 +1,14 @@
import { createContext, FC, useContext } from 'react';
import { FriendListContextProps, IFriendListContext } from './FriendListContext.type';
const FriendListContext = createContext<IFriendListContext>({
friendListState: null,
dispatchFriendListState: null
});
export const FriendListContextProvider: FC<FriendListContextProps> = props =>
{
return <FriendListContext.Provider value={ props.value }>{ props.children }</FriendListContext.Provider>
}
export const useFriendListContext = () => useContext(FriendListContext);

13
src/views/friend-list/context/FriendListContext.type.ts Normal file
View File

@ -0,0 +1,13 @@
import { Dispatch, ProviderProps } from 'react';
import { IFriendListAction, IFriendListState } from '../reducers/FriendListReducer';
export interface IFriendListContext
{
friendListState: IFriendListState;
dispatchFriendListState: Dispatch<IFriendListAction>;
}
export interface FriendListContextProps extends ProviderProps<IFriendListContext>
{
}

39
src/views/friend-list/reducers/FriendListReducer.tsx Normal file
View File

@ -0,0 +1,39 @@
import { Reducer } from 'react';
import { MessengerSettings } from '../utils/MessengerSettings';
export interface IFriendListState
{
settings: MessengerSettings
}
export interface IFriendListAction
{
type: string;
payload: {
settings?: MessengerSettings
}
}
export class FriendListActions
{
public static RESET_STATE: string = 'FLA_RESET_STATE';
public static UPDATE_SETTINGS: string = 'FLA_UPDATE_SETTINGS';
}
export const initialFriendList: IFriendListState = {
settings: null
}
export const FriendListReducer: Reducer<IFriendListState, IFriendListAction> = (state, action) =>
{
switch(action.type)
{
case FriendListActions.UPDATE_SETTINGS: {
const settings = (action.payload.settings || state.settings || null);
return { ...state, settings };
}
default:
return state;
}
}

9
src/views/friend-list/views/friend-bar/FriendBarView.tsx Normal file
View File

@ -0,0 +1,9 @@
import { FC } from 'react';
import { FriendBarViewProps } from './FriendBarView.types';
export const FriendBarView: FC<FriendBarViewProps> = props =>
{
return (
<div>friend bar</div>
);
}

4
src/views/friend-list/views/friend-bar/FriendBarView.types.ts Normal file
View File

@ -0,0 +1,4 @@
export interface FriendBarViewProps
{
}

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

@ -1,12 +1,12 @@
import { FC, useContext, useState } from 'react';
import { NitroCardAccordionItemView } from '../../../layout/card/accordion/item/NitroCardAccordionItemView';
import { NitroCardAccordionView } from '../../../layout/card/accordion/NitroCardAccordionView';
import { FriendListContext } from '../FriendListView';
import { FC, useState } from 'react';
import { NitroCardAccordionItemView } from '../../../../layout/card/accordion/item/NitroCardAccordionItemView';
import { NitroCardAccordionView } from '../../../../layout/card/accordion/NitroCardAccordionView';
import { useFriendListContext } from '../../context/FriendListContext';
import { FriendListFriendsViewProps } from './FriendListFriendsView.types';
export const FriendListFriendsView: FC<FriendListFriendsViewProps> = props =>
{
const friendListContext = useContext(FriendListContext);
const { friendListState = null } = useFriendListContext();
const [ isOnlineFriendsExtended, setIsOnlineFriendsExtended ] = useState(false);
const [ isOfflineFriendsExtended, setIsOfflineFriendsExtended ] = useState(false);

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

6
src/views/main/MainView.tsx
View File

@ -1,8 +1,6 @@
import { Nitro, RoomSessionEvent } from 'nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react';
import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
import { TransitionAnimation } from '../../layout/transitions/TransitionAnimation';
import { TransitionAnimationTypes } from '../../layout/transitions/TransitionAnimation.types';
import { AvatarEditorView } from '../avatar-editor/AvatarEditorView';
import { CatalogView } from '../catalog/CatalogView';
import { FriendListView } from '../friend-list/FriendListView';
@ -46,10 +44,8 @@ export const MainView: FC<MainViewProps> = props =>
return (
<div className="nitro-main">
{ landingViewVisible && <HotelView /> }
<ToolbarView isInRoom={ !landingViewVisible } />
<RoomHostView />
<TransitionAnimation className="nitro-toolbar-container" type={ TransitionAnimationTypes.FADE_UP } inProp={ isReady } timeout={ 300 }>
<ToolbarView isInRoom={ !landingViewVisible } />
</TransitionAnimation>
<AvatarEditorView />
<NavigatorView />
<InventoryView />

81
src/views/toolbar/ToolbarView.tsx
View File

@ -57,52 +57,57 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
CreateMessageHook(UserInfoEvent, onUserInfoEvent);
return (
<>
<div className="nitro-toolbar-container">
<TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ isMeExpanded } timeout={ 300 }>
<ToolbarMeView setMeExpanded={ setMeExpanded } handleToolbarItemClick={ handleToolbarItemClick } />
</TransitionAnimation>
<div className="d-flex nitro-toolbar py-1 px-3">
<div className="navigation-items navigation-avatar pe-1 me-2">
<div className="navigation-item">
<div className={ 'toolbar-avatar ' + (isMeExpanded ? 'active ' : '') } onClick={ event => setMeExpanded(!isMeExpanded) }>
{ userInfo && <AvatarImageView figure={ userInfo.figure } direction={ 2 } /> }
<div className="d-flex justify-content-between nitro-toolbar py-1 px-3">
<div className="d-flex toolbar-left-side">
<div className="navigation-items navigation-avatar pe-1 me-2">
<div className="navigation-item">
<div className={ 'toolbar-avatar ' + (isMeExpanded ? 'active ' : '') } onClick={ event => setMeExpanded(!isMeExpanded) }>
{ userInfo && <AvatarImageView figure={ userInfo.figure } direction={ 2 } /> }
</div>
</div>
{ (unseenAchievementsCount > 0) && (
<div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenAchievementsCount }</div>) }
</div>
{ (unseenAchievementsCount > 0) && (
<div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenAchievementsCount }</div>) }
</div>
<div className="navigation-items">
{/* { isInRoom && (
<div className="navigation-item">
<i className="icon icon-hotelview icon-nitro-light filter-none"></i>
</div>) } */}
{ !isInRoom && (
<div className="navigation-item">
<i className="icon icon-house"></i>
<div className="navigation-items">
{/* { isInRoom && (
<div className="navigation-item">
<i className="icon icon-hotelview icon-nitro-light filter-none"></i>
</div>) } */}
{ !isInRoom && (
<div className="navigation-item">
<i className="icon icon-house"></i>
</div>) }
<div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.NAVIGATOR_ITEM) }>
<i className="icon icon-rooms"></i>
</div>
<div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.CATALOG_ITEM) }>
<i className="icon icon-catalog"></i>
</div>
<div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.INVENTORY_ITEM) }>
<i className="icon icon-inventory"></i>
{ (unseenInventoryCount > 0) && (
<div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenInventoryCount }</div>) }
</div>
<div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.FRIEND_LIST_ITEM) }>
<i className="icon icon-friendall"></i>
{ (unseenFriendListCount > 0) && (
<div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenFriendListCount }</div>) }
</div>
{ isInRoom && (
<div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.CAMERA_ITEM) }>
<i className="icon icon-camera"></i>
</div>) }
<div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.NAVIGATOR_ITEM) }>
<i className="icon icon-rooms"></i>
</div>
<div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.CATALOG_ITEM) }>
<i className="icon icon-catalog"></i>
</div>
<div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.INVENTORY_ITEM) }>
<i className="icon icon-inventory"></i>
{ (unseenInventoryCount > 0) && (
<div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenInventoryCount }</div>) }
</div>
<div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.FRIEND_LIST_ITEM) }>
<i className="icon icon-friendall"></i>
{ (unseenFriendListCount > 0) && (
<div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenFriendListCount }</div>) }
</div>
{ isInRoom && (
<div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.CAMERA_ITEM) }>
<i className="icon icon-camera"></i>
</div>) }
<div id="toolbar-chat-input-container" className="d-flex align-items-center" />
</div>
<div className="d-flex toolbar-right-side">
<div id="toolbar-friend-bar-container" />
</div>
<div id="toolbar-chat-input-container" className="d-flex align-items-center" />
</div>
</>
</div>
);
}