Setup friend-bar

src/views/friend-list/FriendListMessageHandler.tsx

@@ -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();
 
-            setMessengerSettings(new MessengerSettings(
+        dispatchFriendListState({
+            type: FriendListActions.UPDATE_SETTINGS,
+            payload: {
+                settings: new MessengerSettings(
                     parser.userFriendLimit,
                     parser.normalFriendLimit,
                     parser.extendedFriendLimit,
-                parser.categories));
+                    parser.categories)
+            }
+        });
 
         SendMessageHook(new GetFriendRequestsComposer());
-        }, [ setMessengerSettings ]);
+    }, [ dispatchFriendListState ]);
 
     CreateMessageHook(MessengerInitEvent, onMessengerInitEvent);
 

src/views/friend-list/FriendListMessageHandler.types.ts

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

src/views/friend-list/FriendListView.tsx

@@ -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 { FriendListViewProps } from './FriendListView.types';
-import { FriendListFriendsView } from './friends/FriendListFriendsView';
+import { FriendListReducer, initialFriendList } from './reducers/FriendListReducer';
-import { MessengerSettings } from './utils/MessengerSettings';
+import { FriendBarView } from './views/friend-bar/FriendBarView';
-
+import { FriendListFriendsView } from './views/friends/FriendListFriendsView';
-export const FriendListContext = React.createContext<IFriendListContext>(null);
 
 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 [ isReady, setIsReady ] = useState(false);
-    const [ messengerSettings, setMessengerSettings ]   = useState<MessengerSettings>(null);
+    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]);
+        if(!settings) return;
-    }, [ tabs ]);
 
-    useEffect(() =>
+        setIsReady(true);
-    {
+    }, [ settings ]);
-        if(!messengerSettings) return;
-    }, [ messengerSettings ]);
 
     useEffect(() =>
     {
@@ -54,8 +51,9 @@ export const FriendListView: FC<FriendListViewProps> = props =>
     }, []);
 
     return (
-        <FriendListContext.Provider value={{ currentTab: currentTab, onSetCurrentTab: setCurrentTab }}>
+        <FriendListContextProvider value={ { friendListState, dispatchFriendListState } }>
-            <FriendListMessageHandler setMessengerSettings={ setMessengerSettings }  />
+            <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>
     );
 }

src/views/friend-list/FriendListView.types.ts

@@ -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';

src/views/friend-list/context/FriendListContext.tsx

@@ -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);

src/views/friend-list/context/FriendListContext.type.ts

@@ -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>
+{
+
+}

src/views/friend-list/reducers/FriendListReducer.tsx

@@ -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;
+    }
+}

src/views/friend-list/views/friend-bar/FriendBarView.tsx

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

src/views/friend-list/views/friend-bar/FriendBarView.types.ts

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

src/views/friend-list/views/friends/FriendListFriendsView.tsx

@@ -1,12 +1,12 @@
-import { FC, useContext, useState } from 'react';
+import { FC, useState } from 'react';
-import { NitroCardAccordionItemView } from '../../../layout/card/accordion/item/NitroCardAccordionItemView';
+import { NitroCardAccordionItemView } from '../../../../layout/card/accordion/item/NitroCardAccordionItemView';
-import { NitroCardAccordionView } from '../../../layout/card/accordion/NitroCardAccordionView';
+import { NitroCardAccordionView } from '../../../../layout/card/accordion/NitroCardAccordionView';
-import { FriendListContext } from '../FriendListView';
+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);

src/views/main/MainView.tsx

@@ -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 /> }
-            <RoomHostView />
-            <TransitionAnimation className="nitro-toolbar-container" type={ TransitionAnimationTypes.FADE_UP } inProp={ isReady } timeout={ 300 }>
             <ToolbarView isInRoom={ !landingViewVisible } />
-            </TransitionAnimation>
+            <RoomHostView />
             <AvatarEditorView />
             <NavigatorView />
             <InventoryView />

src/views/toolbar/ToolbarView.tsx

@@ -57,11 +57,12 @@ 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="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) }>
@@ -103,6 +104,10 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
                     </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>
+        </div>
     );
 }