From 4e4a3fb14fda1655c57c92cb962e90d2c8699f26 Mon Sep 17 00:00:00 2001
From: Batman <montevechiol@gmail.com>
Date: Thu, 22 Apr 2021 03:54:49 -0300
Subject: [PATCH] WIP: Friend List

---
 src/events/friend-list/FriendListEvent.ts     |  7 +++
 src/events/friend-list/index.ts               |  1 +
 src/events/index.ts                           |  1 +
 src/views/Styles.scss                         |  1 +
 .../friend-list/FriendListMessageHandler.tsx  | 18 ++++++
 .../FriendListMessageHandler.types.ts         |  2 +
 src/views/friend-list/FriendListView.scss     |  3 +
 src/views/friend-list/FriendListView.tsx      | 63 +++++++++++++++++++
 src/views/friend-list/FriendListView.types.ts | 15 +++++
 .../FriendListTabsContentView.tsx             | 18 ++++++
 .../FriendListTabsContentView.types.ts        |  2 +
 .../friends/FriendListTabFriendsView.tsx      | 35 +++++++++++
 .../friends/FriendListTabFriendsView.types.ts |  2 +
 .../FriendListTabsSelectorView.tsx            | 18 ++++++
 .../FriendListTabsSelectorView.types.ts       |  4 ++
 .../tabs-selector/tab/FriendListTabView.tsx   | 18 ++++++
 .../tab/FriendListTabView.types.ts            |  4 ++
 .../tab/InventoryTabView.types.ts             |  2 +-
 src/views/main/MainView.tsx                   |  2 +
 src/views/toolbar/ToolbarView.tsx             |  7 ++-
 src/views/toolbar/ToolbarView.types.ts        |  7 ++-
 21 files changed, 224 insertions(+), 6 deletions(-)
 create mode 100644 src/events/friend-list/FriendListEvent.ts
 create mode 100644 src/events/friend-list/index.ts
 create mode 100644 src/views/friend-list/FriendListMessageHandler.tsx
 create mode 100644 src/views/friend-list/FriendListMessageHandler.types.ts
 create mode 100644 src/views/friend-list/FriendListView.scss
 create mode 100644 src/views/friend-list/FriendListView.tsx
 create mode 100644 src/views/friend-list/FriendListView.types.ts
 create mode 100644 src/views/friend-list/tabs-content/FriendListTabsContentView.tsx
 create mode 100644 src/views/friend-list/tabs-content/FriendListTabsContentView.types.ts
 create mode 100644 src/views/friend-list/tabs-content/friends/FriendListTabFriendsView.tsx
 create mode 100644 src/views/friend-list/tabs-content/friends/FriendListTabFriendsView.types.ts
 create mode 100644 src/views/friend-list/tabs-selector/FriendListTabsSelectorView.tsx
 create mode 100644 src/views/friend-list/tabs-selector/FriendListTabsSelectorView.types.ts
 create mode 100644 src/views/friend-list/tabs-selector/tab/FriendListTabView.tsx
 create mode 100644 src/views/friend-list/tabs-selector/tab/FriendListTabView.types.ts

diff --git a/src/events/friend-list/FriendListEvent.ts b/src/events/friend-list/FriendListEvent.ts
new file mode 100644
index 00000000..a321247c
--- /dev/null
+++ b/src/events/friend-list/FriendListEvent.ts
@@ -0,0 +1,7 @@
+import { NitroEvent } from 'nitro-renderer';
+
+export class FriendListEvent extends NitroEvent
+{
+    public static SHOW_FRIEND_LIST: string = 'IE_SHOW_FRIEND_LIST';
+    public static TOGGLE_FRIEND_LIST: string = 'IE_TOGGLE_FRIEND_LIST';
+}
diff --git a/src/events/friend-list/index.ts b/src/events/friend-list/index.ts
new file mode 100644
index 00000000..413293c4
--- /dev/null
+++ b/src/events/friend-list/index.ts
@@ -0,0 +1 @@
+export * from './FriendListEvent';
diff --git a/src/events/index.ts b/src/events/index.ts
index 86e21e9d..9f56656b 100644
--- a/src/events/index.ts
+++ b/src/events/index.ts
@@ -1,3 +1,4 @@
 export * from './catalog';
+export * from './friend-list';
 export * from './inventory';
 export * from './navigator';
diff --git a/src/views/Styles.scss b/src/views/Styles.scss
index b530d2e2..a9c8f234 100644
--- a/src/views/Styles.scss
+++ b/src/views/Styles.scss
@@ -2,6 +2,7 @@
 @import './catalog/CatalogView';
 @import './hotel-view/HotelView';
 @import './inventory/InventoryView';
+@import './friend-list/FriendListView';
 @import './loading/LoadingView';
 @import './main/MainView';
 @import './navigator/NavigatorView';
diff --git a/src/views/friend-list/FriendListMessageHandler.tsx b/src/views/friend-list/FriendListMessageHandler.tsx
new file mode 100644
index 00000000..d227be3c
--- /dev/null
+++ b/src/views/friend-list/FriendListMessageHandler.tsx
@@ -0,0 +1,18 @@
+import { FriendListMessageHandlerProps } from './FriendListMessageHandler.types';
+
+export function FriendListMessageHandler(props: FriendListMessageHandlerProps): JSX.Element
+{
+    const { } = props;
+
+    /*const onUserInfoEvent = useCallback((event: UserInfoEvent) =>
+    {
+        //const parser = event.getParser();
+
+        SendMessageHook(new NavigatorCategoriesComposer());
+        SendMessageHook(new NavigatorSettingsComposer());
+    }, []);*/
+
+    //CreateMessageHook(UserInfoEvent, onUserInfoEvent);
+
+    return null;
+}
diff --git a/src/views/friend-list/FriendListMessageHandler.types.ts b/src/views/friend-list/FriendListMessageHandler.types.ts
new file mode 100644
index 00000000..9271dcf8
--- /dev/null
+++ b/src/views/friend-list/FriendListMessageHandler.types.ts
@@ -0,0 +1,2 @@
+export interface FriendListMessageHandlerProps
+{}
diff --git a/src/views/friend-list/FriendListView.scss b/src/views/friend-list/FriendListView.scss
new file mode 100644
index 00000000..1f725548
--- /dev/null
+++ b/src/views/friend-list/FriendListView.scss
@@ -0,0 +1,3 @@
+.nitro-friend-list {
+    width: 250px;
+}
diff --git a/src/views/friend-list/FriendListView.tsx b/src/views/friend-list/FriendListView.tsx
new file mode 100644
index 00000000..3eebad78
--- /dev/null
+++ b/src/views/friend-list/FriendListView.tsx
@@ -0,0 +1,63 @@
+import React, { FC, useCallback, useEffect, useState } from 'react';
+import { FriendListEvent } from '../../events';
+import { DraggableWindow } from '../../hooks/draggable-window/DraggableWindow';
+import { useUiEvent } from '../../hooks/events/ui/ui-event';
+import { LocalizeText } from '../../utils/LocalizeText';
+import { FriendListMessageHandler } from './FriendListMessageHandler';
+import { FriendListTabs, FriendListViewProps, IFriendListContext } from './FriendListView.types';
+import { FriendListTabsContentView } from './tabs-content/FriendListTabsContentView';
+import { FriendListTabsSelectorView } from './tabs-selector/FriendListTabsSelectorView';
+
+export const FriendListContext = React.createContext<IFriendListContext>(null);
+
+export const FriendListView: FC<FriendListViewProps> = props =>
+{
+    const [ isVisible, setIsVisible ] = useState(false);
+    const [ currentTab, setCurrentTab ] = useState<string>(null);
+    const [ tabs, setTabs ]             = useState<string[]>([ 
+        FriendListTabs.FRIENDS, FriendListTabs.REQUESTS, FriendListTabs.SEARCH
+     ]);
+
+    useEffect(() => {
+        setCurrentTab(tabs[0]);
+    }, [ tabs ]);
+
+    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;
+        }
+    }, []);
+
+    useUiEvent(FriendListEvent.SHOW_FRIEND_LIST, onFriendListEvent);
+    useUiEvent(FriendListEvent.TOGGLE_FRIEND_LIST, onFriendListEvent);
+
+    function hideFriendList(): void
+    {
+        setIsVisible(false);
+    }
+
+    return (
+        <FriendListContext.Provider value={{ currentTab: currentTab, onSetCurrentTab: setCurrentTab }}>
+            <FriendListMessageHandler  />
+            { isVisible && <DraggableWindow handle=".drag-handler">
+                <div className="nitro-friend-list d-flex flex-column bg-primary border border-black shadow rounded">
+                    <div className="drag-handler d-flex justify-content-between align-items-center px-3 pt-3">
+                        <div className="h6 m-0">{ LocalizeText('friendlist.friends') }</div>
+                        <button type="button" className="close" onClick={ hideFriendList }>
+                            <i className="fas fa-times"></i>
+                        </button>
+                    </div>
+                    <FriendListTabsSelectorView tabs={ tabs } />
+                    <FriendListTabsContentView />
+                </div>
+            </DraggableWindow> }
+        </FriendListContext.Provider>
+    );
+}
diff --git a/src/views/friend-list/FriendListView.types.ts b/src/views/friend-list/FriendListView.types.ts
new file mode 100644
index 00000000..f3297d3e
--- /dev/null
+++ b/src/views/friend-list/FriendListView.types.ts
@@ -0,0 +1,15 @@
+export interface FriendListViewProps
+{}
+
+export interface IFriendListContext
+{
+    currentTab: string;
+    onSetCurrentTab: (tab: string) => void;
+}
+
+export class FriendListTabs
+{
+    public static readonly FRIENDS: string  = 'friendlist.friends';
+    public static readonly REQUESTS: string = 'friendlist.requests';
+    public static readonly SEARCH: string   = 'generic.search';
+}
diff --git a/src/views/friend-list/tabs-content/FriendListTabsContentView.tsx b/src/views/friend-list/tabs-content/FriendListTabsContentView.tsx
new file mode 100644
index 00000000..b7431f4c
--- /dev/null
+++ b/src/views/friend-list/tabs-content/FriendListTabsContentView.tsx
@@ -0,0 +1,18 @@
+import { FC, useContext } from 'react';
+import { FriendListContext } from '../FriendListView';
+import { FriendListTabs } from '../FriendListView.types';
+import { FriendListTabsContentViewProps } from './FriendListTabsContentView.types';
+import { FriendListTabFriendsView } from './friends/FriendListTabFriendsView';
+
+export const FriendListTabsContentView: FC<FriendListTabsContentViewProps> = props =>
+{
+    const friendListContext = useContext(FriendListContext);
+    
+    return (
+        <div className="px-3 pb-3">
+            { friendListContext && friendListContext.currentTab && friendListContext.currentTab === FriendListTabs.FRIENDS && <FriendListTabFriendsView /> }
+            { friendListContext && friendListContext.currentTab && friendListContext.currentTab === FriendListTabs.REQUESTS }
+            { friendListContext && friendListContext.currentTab && friendListContext.currentTab === FriendListTabs.SEARCH }
+        </div>
+    );
+}
diff --git a/src/views/friend-list/tabs-content/FriendListTabsContentView.types.ts b/src/views/friend-list/tabs-content/FriendListTabsContentView.types.ts
new file mode 100644
index 00000000..ab515eba
--- /dev/null
+++ b/src/views/friend-list/tabs-content/FriendListTabsContentView.types.ts
@@ -0,0 +1,2 @@
+export interface FriendListTabsContentViewProps
+{}
diff --git a/src/views/friend-list/tabs-content/friends/FriendListTabFriendsView.tsx b/src/views/friend-list/tabs-content/friends/FriendListTabFriendsView.tsx
new file mode 100644
index 00000000..e4fbbcdd
--- /dev/null
+++ b/src/views/friend-list/tabs-content/friends/FriendListTabFriendsView.tsx
@@ -0,0 +1,35 @@
+import classNames from 'classnames';
+import { FC, useContext, useState } from 'react';
+import { FriendListContext } from '../../FriendListView';
+import { FriendListTabFriendsViewProps } from './FriendListTabFriendsView.types';
+
+export const FriendListTabFriendsView: FC<FriendListTabFriendsViewProps> = props =>
+{
+    const friendListContext = useContext(FriendListContext);
+
+    const [ isOnlineFriendsExtended, setIsOnlineFriendsExtended ] = useState(false);
+    const [ isOfflineFriendsExtended, setIsOfflineFriendsExtended ] = useState(false);
+
+    function toggleOnlineFriends(): void
+    {
+        setIsOnlineFriendsExtended(value => !value);
+    }
+
+    function toggleOfflineFriends(): void
+    {
+        setIsOfflineFriendsExtended(value => !value);
+    }
+
+    return (
+        <div>
+            <div className="d-flex mb-2 small">
+                <i className={ "fas " + classNames({ 'fa-plus': !isOnlineFriendsExtended, 'fa-minus': isOnlineFriendsExtended })} onClick={ toggleOnlineFriends }></i>
+                <div className="align-self-center w-100 ml-2">Friends (0)</div>
+            </div>
+            <div className="d-flex mb-2 small">
+                <i className={ "fas " + classNames({ 'fa-plus': !isOfflineFriendsExtended, 'fa-minus': isOfflineFriendsExtended })} onClick={ toggleOfflineFriends }></i>
+                <div className="align-self-center w-100 ml-2">Offline Friends (0)</div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/views/friend-list/tabs-content/friends/FriendListTabFriendsView.types.ts b/src/views/friend-list/tabs-content/friends/FriendListTabFriendsView.types.ts
new file mode 100644
index 00000000..fa4e0b56
--- /dev/null
+++ b/src/views/friend-list/tabs-content/friends/FriendListTabFriendsView.types.ts
@@ -0,0 +1,2 @@
+export interface FriendListTabFriendsViewProps
+{}
diff --git a/src/views/friend-list/tabs-selector/FriendListTabsSelectorView.tsx b/src/views/friend-list/tabs-selector/FriendListTabsSelectorView.tsx
new file mode 100644
index 00000000..f427ea36
--- /dev/null
+++ b/src/views/friend-list/tabs-selector/FriendListTabsSelectorView.tsx
@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { FriendListTabsSelectorViewProps } from './FriendListTabsSelectorView.types';
+import { FriendListTabView } from './tab/FriendListTabView';
+
+export const FriendListTabsSelectorView: FC<FriendListTabsSelectorViewProps> = props =>
+{
+    return (
+        <div className="p-3">
+            { props.tabs &&
+                <div className="btn-group w-100">
+                    { props.tabs.map((tab, index) =>
+                        {
+                            return <FriendListTabView key={ index } tab={ tab } />
+                        }) }
+                </div> }
+        </div>
+    );
+}
diff --git a/src/views/friend-list/tabs-selector/FriendListTabsSelectorView.types.ts b/src/views/friend-list/tabs-selector/FriendListTabsSelectorView.types.ts
new file mode 100644
index 00000000..94abe977
--- /dev/null
+++ b/src/views/friend-list/tabs-selector/FriendListTabsSelectorView.types.ts
@@ -0,0 +1,4 @@
+export interface FriendListTabsSelectorViewProps
+{
+    tabs: string[];
+}
diff --git a/src/views/friend-list/tabs-selector/tab/FriendListTabView.tsx b/src/views/friend-list/tabs-selector/tab/FriendListTabView.tsx
new file mode 100644
index 00000000..07ee8d60
--- /dev/null
+++ b/src/views/friend-list/tabs-selector/tab/FriendListTabView.tsx
@@ -0,0 +1,18 @@
+import classNames from 'classnames';
+import { FC, useContext } from 'react';
+import { LocalizeText } from '../../../../utils/LocalizeText';
+import { FriendListContext } from '../../FriendListView';
+import { FriendListTabViewProps } from './FriendListTabView.types';
+
+export const FriendListTabView: FC<FriendListTabViewProps> = props =>
+{
+    const friendListContext = useContext(FriendListContext);
+
+    return (
+        <button type="button" 
+        className={ 'btn btn-secondary btn-sm ' + classNames({ 'active': friendListContext.currentTab === props.tab })}
+        onClick={ () => friendListContext.onSetCurrentTab(props.tab) }>
+            { LocalizeText(props.tab) }
+        </button>
+    );
+}
diff --git a/src/views/friend-list/tabs-selector/tab/FriendListTabView.types.ts b/src/views/friend-list/tabs-selector/tab/FriendListTabView.types.ts
new file mode 100644
index 00000000..3b4a8875
--- /dev/null
+++ b/src/views/friend-list/tabs-selector/tab/FriendListTabView.types.ts
@@ -0,0 +1,4 @@
+export interface FriendListTabViewProps
+{
+    tab: string;
+}
diff --git a/src/views/inventory/tabs-selector/tab/InventoryTabView.types.ts b/src/views/inventory/tabs-selector/tab/InventoryTabView.types.ts
index 8398b0b1..d8cdf704 100644
--- a/src/views/inventory/tabs-selector/tab/InventoryTabView.types.ts
+++ b/src/views/inventory/tabs-selector/tab/InventoryTabView.types.ts
@@ -1,4 +1,4 @@
 export interface InventoryTabViewProps
 {
-    tab?: string;
+    tab: string;
 }
diff --git a/src/views/main/MainView.tsx b/src/views/main/MainView.tsx
index f31f1c75..638e6da5 100644
--- a/src/views/main/MainView.tsx
+++ b/src/views/main/MainView.tsx
@@ -4,6 +4,7 @@ import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/roo
 import { TransitionAnimation } from '../../transitions/TransitionAnimation';
 import { TransitionAnimationTypes } from '../../transitions/TransitionAnimation.types';
 import { CatalogView } from '../catalog/CatalogView';
+import { FriendListView } from '../friend-list/FriendListView';
 import { HotelView } from '../hotel-view/HotelView';
 import { InventoryView } from '../inventory/InventoryView';
 import { NavigatorView } from '../navigator/NavigatorView';
@@ -50,6 +51,7 @@ export function MainView(props: MainViewProps): JSX.Element
             <NavigatorView />
             <InventoryView />
             <CatalogView />
+            <FriendListView />
             <RightSideView />
         </div>
     );
diff --git a/src/views/toolbar/ToolbarView.tsx b/src/views/toolbar/ToolbarView.tsx
index a4c1e3b6..bcdb6f76 100644
--- a/src/views/toolbar/ToolbarView.tsx
+++ b/src/views/toolbar/ToolbarView.tsx
@@ -1,7 +1,7 @@
 import { UserInfoEvent } from 'nitro-renderer/src/nitro/communication/messages/incoming/user/data/UserInfoEvent';
 import { UserInfoDataParser } from 'nitro-renderer/src/nitro/communication/messages/parser/user/data/UserInfoDataParser';
 import { MouseEvent, useCallback, useState } from 'react';
-import { CatalogEvent, InventoryEvent, NavigatorEvent } from '../../events';
+import { CatalogEvent, FriendListEvent, InventoryEvent, NavigatorEvent } from '../../events';
 import { dispatchUiEvent } from '../../hooks/events/ui/ui-event';
 import { CreateMessageHook } from '../../hooks/messages/message-event';
 import { AvatarImageView } from '../avatar-image/AvatarImageView';
@@ -39,6 +39,9 @@ export function ToolbarView(props: ToolbarViewProps): JSX.Element
             case ToolbarViewItems.CATALOG_ITEM:
                 dispatchUiEvent(new CatalogEvent(CatalogEvent.TOGGLE_CATALOG));
                 return;
+            case ToolbarViewItems.FRIEND_LIST_ITEM:
+                dispatchUiEvent(new CatalogEvent(FriendListEvent.TOGGLE_FRIEND_LIST));
+                return;
         }
     }
 
@@ -67,7 +70,7 @@ export function ToolbarView(props: ToolbarViewProps): JSX.Element
                         { (unseenInventoryCount > 0) && (
                             <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenInventoryCount }</div>) }
                     </li>
-                    <li className="list-group-item">
+                    <li className="list-group-item" onClick={ event => handleToolbarItemClick(event, 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>) }
diff --git a/src/views/toolbar/ToolbarView.types.ts b/src/views/toolbar/ToolbarView.types.ts
index 69b84355..4670449e 100644
--- a/src/views/toolbar/ToolbarView.types.ts
+++ b/src/views/toolbar/ToolbarView.types.ts
@@ -5,7 +5,8 @@ export interface ToolbarViewProps
 
 export class ToolbarViewItems
 {
-    public static NAVIGATOR_ITEM: string = 'TVI_NAVIGATOR_ITEM';
-    public static INVENTORY_ITEM: string = 'TVI_INVENTORY_ITEM';
-    public static CATALOG_ITEM: string = 'TVI_CATALOG_ITEM';
+    public static NAVIGATOR_ITEM: string    = 'TVI_NAVIGATOR_ITEM';
+    public static INVENTORY_ITEM: string    = 'TVI_INVENTORY_ITEM';
+    public static CATALOG_ITEM: string      = 'TVI_CATALOG_ITEM';
+    public static FRIEND_LIST_ITEM: string  = 'TVI_FRIEND_LIST_ITEM';
 }