From 60465968eaeaceb4cf1cdd0527d5ce0f5a142b06 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Tue, 22 Jun 2021 23:22:32 -0400
Subject: [PATCH] Setup friend-bar

---
 .../friend-list/FriendListMessageHandler.tsx  | 31 ++++---
 .../FriendListMessageHandler.types.ts         |  3 +-
 src/views/friend-list/FriendListView.tsx      | 38 +++++----
 src/views/friend-list/FriendListView.types.ts |  6 --
 .../friend-list/context/FriendListContext.tsx | 14 ++++
 .../context/FriendListContext.type.ts         | 13 +++
 .../reducers/FriendListReducer.tsx            | 39 +++++++++
 .../views/friend-bar/FriendBarView.tsx        |  9 +++
 .../views/friend-bar/FriendBarView.types.ts   |  4 +
 .../friends/FriendListFriendsView.tsx         | 10 +--
 .../friends/FriendListFriendsView.types.ts    |  0
 src/views/main/MainView.tsx                   |  6 +-
 src/views/toolbar/ToolbarView.tsx             | 81 ++++++++++---------
 13 files changed, 166 insertions(+), 88 deletions(-)
 create mode 100644 src/views/friend-list/context/FriendListContext.tsx
 create mode 100644 src/views/friend-list/context/FriendListContext.type.ts
 create mode 100644 src/views/friend-list/reducers/FriendListReducer.tsx
 create mode 100644 src/views/friend-list/views/friend-bar/FriendBarView.tsx
 create mode 100644 src/views/friend-list/views/friend-bar/FriendBarView.types.ts
 rename src/views/friend-list/{ => views}/friends/FriendListFriendsView.tsx (71%)
 rename src/views/friend-list/{ => views}/friends/FriendListFriendsView.types.ts (100%)

diff --git a/src/views/friend-list/FriendListMessageHandler.tsx b/src/views/friend-list/FriendListMessageHandler.tsx
index 96954387..41101fda 100644
--- a/src/views/friend-list/FriendListMessageHandler.tsx
+++ b/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();
+    {
+        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);
 
diff --git a/src/views/friend-list/FriendListMessageHandler.types.ts b/src/views/friend-list/FriendListMessageHandler.types.ts
index ed91d7b9..2a810612 100644
--- a/src/views/friend-list/FriendListMessageHandler.types.ts
+++ b/src/views/friend-list/FriendListMessageHandler.types.ts
@@ -1,6 +1,5 @@
-import { MessengerSettings } from './utils/MessengerSettings';
 
 export interface FriendListMessageHandlerProps
 {
-    setMessengerSettings: (messengerSettings: MessengerSettings) => void;
+    
 }
diff --git a/src/views/friend-list/FriendListView.tsx b/src/views/friend-list/FriendListView.tsx
index d6fbf6d3..e46a350b 100644
--- a/src/views/friend-list/FriendListView.tsx
+++ b/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 { 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>
     );
 }
diff --git a/src/views/friend-list/FriendListView.types.ts b/src/views/friend-list/FriendListView.types.ts
index f3297d3e..9c7675de 100644
--- a/src/views/friend-list/FriendListView.types.ts
+++ b/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';
diff --git a/src/views/friend-list/context/FriendListContext.tsx b/src/views/friend-list/context/FriendListContext.tsx
new file mode 100644
index 00000000..39d23764
--- /dev/null
+++ b/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);
diff --git a/src/views/friend-list/context/FriendListContext.type.ts b/src/views/friend-list/context/FriendListContext.type.ts
new file mode 100644
index 00000000..6e74c4cb
--- /dev/null
+++ b/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>
+{
+
+}
diff --git a/src/views/friend-list/reducers/FriendListReducer.tsx b/src/views/friend-list/reducers/FriendListReducer.tsx
new file mode 100644
index 00000000..803fbd84
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/src/views/friend-list/views/friend-bar/FriendBarView.tsx b/src/views/friend-list/views/friend-bar/FriendBarView.tsx
new file mode 100644
index 00000000..f4aaf0ab
--- /dev/null
+++ b/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>
+    );
+}
diff --git a/src/views/friend-list/views/friend-bar/FriendBarView.types.ts b/src/views/friend-list/views/friend-bar/FriendBarView.types.ts
new file mode 100644
index 00000000..f47af57f
--- /dev/null
+++ b/src/views/friend-list/views/friend-bar/FriendBarView.types.ts
@@ -0,0 +1,4 @@
+export interface FriendBarViewProps
+{
+    
+}
diff --git a/src/views/friend-list/friends/FriendListFriendsView.tsx b/src/views/friend-list/views/friends/FriendListFriendsView.tsx
similarity index 71%
rename from src/views/friend-list/friends/FriendListFriendsView.tsx
rename to src/views/friend-list/views/friends/FriendListFriendsView.tsx
index 8a5b3947..3f8f9dd2 100644
--- a/src/views/friend-list/friends/FriendListFriendsView.tsx
+++ b/src/views/friend-list/views/friends/FriendListFriendsView.tsx
@@ -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);
diff --git a/src/views/friend-list/friends/FriendListFriendsView.types.ts b/src/views/friend-list/views/friends/FriendListFriendsView.types.ts
similarity index 100%
rename from src/views/friend-list/friends/FriendListFriendsView.types.ts
rename to src/views/friend-list/views/friends/FriendListFriendsView.types.ts
diff --git a/src/views/main/MainView.tsx b/src/views/main/MainView.tsx
index b525f12c..3d06d83d 100644
--- a/src/views/main/MainView.tsx
+++ b/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 /> }
+            <ToolbarView isInRoom={ !landingViewVisible } />
             <RoomHostView />
-            <TransitionAnimation className="nitro-toolbar-container" type={ TransitionAnimationTypes.FADE_UP } inProp={ isReady } timeout={ 300 }>
-                <ToolbarView isInRoom={ !landingViewVisible } />
-            </TransitionAnimation>
             <AvatarEditorView />
             <NavigatorView />
             <InventoryView />
diff --git a/src/views/toolbar/ToolbarView.tsx b/src/views/toolbar/ToolbarView.tsx
index da8273fd..4b643ad0 100644
--- a/src/views/toolbar/ToolbarView.tsx
+++ b/src/views/toolbar/ToolbarView.tsx
@@ -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>
     );
 }