WIP: Friend List

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

src/events/friend-list/index.ts

@@ -0,0 +1 @@
+export * from './FriendListEvent';

src/events/index.ts

@@ -1,3 +1,4 @@
 export * from './catalog';
+export * from './friend-list';
 export * from './inventory';
 export * from './navigator';

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

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

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

@@ -0,0 +1,2 @@
+export interface FriendListMessageHandlerProps
+{}

src/views/friend-list/FriendListView.scss

@@ -0,0 +1,3 @@
+.nitro-friend-list {
+    width: 250px;
+}

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

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

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

src/views/friend-list/tabs-content/FriendListTabsContentView.types.ts

@@ -0,0 +1,2 @@
+export interface FriendListTabsContentViewProps
+{}

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

src/views/friend-list/tabs-content/friends/FriendListTabFriendsView.types.ts

@@ -0,0 +1,2 @@
+export interface FriendListTabFriendsViewProps
+{}

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

src/views/friend-list/tabs-selector/FriendListTabsSelectorView.types.ts

@@ -0,0 +1,4 @@
+export interface FriendListTabsSelectorViewProps
+{
+    tabs: string[];
+}

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

src/views/friend-list/tabs-selector/tab/FriendListTabView.types.ts

@@ -0,0 +1,4 @@
+export interface FriendListTabViewProps
+{
+    tab: string;
+}

src/views/inventory/tabs-selector/tab/InventoryTabView.types.ts

@@ -1,4 +1,4 @@
 export interface InventoryTabViewProps
 {
-    tab?: string;
+    tab: string;
 }

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

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>) }

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 NAVIGATOR_ITEM: string    = 'TVI_NAVIGATOR_ITEM';
-    public static INVENTORY_ITEM: string = 'TVI_INVENTORY_ITEM';
+    public static INVENTORY_ITEM: string    = 'TVI_INVENTORY_ITEM';
-    public static CATALOG_ITEM: string = 'TVI_CATALOG_ITEM';
+    public static CATALOG_ITEM: string      = 'TVI_CATALOG_ITEM';
+    public static FRIEND_LIST_ITEM: string  = 'TVI_FRIEND_LIST_ITEM';
 }