From e07f1d8db6608e3511b737d4c2ef9dba2789f9ab Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Wed, 21 Apr 2021 23:18:44 -0400
Subject: [PATCH] Add inventory component

---
 src/events/index.ts                           |  1 +
 src/events/inventory/InventoryEvent.ts        |  7 +++
 src/events/inventory/index.ts                 |  1 +
 src/views/Styles.scss                         |  1 +
 .../inventory/InventoryMessageHandler.tsx     | 10 ++++
 .../InventoryMessageHandler.types.ts          |  4 ++
 src/views/inventory/InventoryView.scss        |  3 ++
 src/views/inventory/InventoryView.tsx         | 52 +++++++++++++++++++
 src/views/inventory/InventoryView.types.ts    |  4 ++
 src/views/main/MainView.tsx                   |  2 +
 src/views/toolbar/ToolbarView.tsx             |  7 ++-
 src/views/toolbar/ToolbarView.types.ts        |  1 +
 12 files changed, 91 insertions(+), 2 deletions(-)
 create mode 100644 src/events/inventory/InventoryEvent.ts
 create mode 100644 src/events/inventory/index.ts
 create mode 100644 src/views/inventory/InventoryMessageHandler.tsx
 create mode 100644 src/views/inventory/InventoryMessageHandler.types.ts
 create mode 100644 src/views/inventory/InventoryView.scss
 create mode 100644 src/views/inventory/InventoryView.tsx
 create mode 100644 src/views/inventory/InventoryView.types.ts

diff --git a/src/events/index.ts b/src/events/index.ts
index 8716d601..e2bba4fc 100644
--- a/src/events/index.ts
+++ b/src/events/index.ts
@@ -1 +1,2 @@
+export * from './inventory';
 export * from './navigator';
diff --git a/src/events/inventory/InventoryEvent.ts b/src/events/inventory/InventoryEvent.ts
new file mode 100644
index 00000000..453987b4
--- /dev/null
+++ b/src/events/inventory/InventoryEvent.ts
@@ -0,0 +1,7 @@
+import { NitroEvent } from 'nitro-renderer';
+
+export class InventoryEvent extends NitroEvent
+{
+    public static SHOW_INVENTORY: string = 'IE_SHOW_INVENTORY';
+    public static TOGGLE_INVENTORY: string = 'IE_TOGGLE_INVENTORY';
+}
diff --git a/src/events/inventory/index.ts b/src/events/inventory/index.ts
new file mode 100644
index 00000000..6b5cf8e6
--- /dev/null
+++ b/src/events/inventory/index.ts
@@ -0,0 +1 @@
+export * from './InventoryEvent';
diff --git a/src/views/Styles.scss b/src/views/Styles.scss
index a10098a7..54a69808 100644
--- a/src/views/Styles.scss
+++ b/src/views/Styles.scss
@@ -1,5 +1,6 @@
 @import './avatar-image/AvatarImage';
 @import './hotel-view/HotelView';
+@import './inventory/InventoryView';
 @import './loading/LoadingView';
 @import './main/MainView';
 @import './navigator/NavigatorView';
diff --git a/src/views/inventory/InventoryMessageHandler.tsx b/src/views/inventory/InventoryMessageHandler.tsx
new file mode 100644
index 00000000..c47cb395
--- /dev/null
+++ b/src/views/inventory/InventoryMessageHandler.tsx
@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { InventoryMessageHandlerProps } from './InventoryMessageHandler.types';
+
+export const InventoryMessageHandler: FC<InventoryMessageHandlerProps> = props =>
+{
+    return (
+        <>
+        </>
+    );
+}
diff --git a/src/views/inventory/InventoryMessageHandler.types.ts b/src/views/inventory/InventoryMessageHandler.types.ts
new file mode 100644
index 00000000..098d4e0c
--- /dev/null
+++ b/src/views/inventory/InventoryMessageHandler.types.ts
@@ -0,0 +1,4 @@
+export interface InventoryMessageHandlerProps
+{
+    
+}
diff --git a/src/views/inventory/InventoryView.scss b/src/views/inventory/InventoryView.scss
new file mode 100644
index 00000000..20970d53
--- /dev/null
+++ b/src/views/inventory/InventoryView.scss
@@ -0,0 +1,3 @@
+.nitro-inventory {
+    width: 450px;
+}
diff --git a/src/views/inventory/InventoryView.tsx b/src/views/inventory/InventoryView.tsx
new file mode 100644
index 00000000..4c77f511
--- /dev/null
+++ b/src/views/inventory/InventoryView.tsx
@@ -0,0 +1,52 @@
+import { FC, useCallback, useState } from 'react';
+import { InventoryEvent } from '../../events';
+import { DraggableWindow } from '../../hooks/draggable-window/DraggableWindow';
+import { useUiEvent } from '../../hooks/events/ui/ui-event';
+import { LocalizeText } from '../../utils/LocalizeText';
+import { InventoryMessageHandler } from './InventoryMessageHandler';
+import { InventoryViewProps } from './InventoryView.types';
+
+export const InventoryView: FC<InventoryViewProps> = props =>
+{
+    const [ isVisible, setIsVisible ] = useState(false);
+
+    const onInventoryEvent = useCallback((event: InventoryEvent) =>
+    {
+        switch(event.type)
+        {
+            case InventoryEvent.SHOW_INVENTORY:
+                setIsVisible(true);
+                return;
+            case InventoryEvent.TOGGLE_INVENTORY:
+                setIsVisible(value => !value);
+                return;
+        }
+    }, []);
+
+    useUiEvent(InventoryEvent.SHOW_INVENTORY, onInventoryEvent);
+    useUiEvent(InventoryEvent.TOGGLE_INVENTORY, onInventoryEvent);
+
+    function hideInventory(): void
+    {
+        setIsVisible(false);
+    }
+
+    return (
+        <>
+            <InventoryMessageHandler  />
+            { isVisible && <DraggableWindow handle=".drag-handler">
+                <div className="nitro-inventory 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('inventory.title') }</div>
+                        <button type="button" className="close" onClick={ hideInventory }>
+                            <i className="fas fa-times"></i>
+                        </button>
+                    </div>
+                    <div className="d-flex p-3">
+                        content
+                    </div>
+                </div>
+            </DraggableWindow> }
+        </>
+    );
+}
diff --git a/src/views/inventory/InventoryView.types.ts b/src/views/inventory/InventoryView.types.ts
new file mode 100644
index 00000000..155c92a8
--- /dev/null
+++ b/src/views/inventory/InventoryView.types.ts
@@ -0,0 +1,4 @@
+export interface InventoryViewProps
+{
+    
+}
diff --git a/src/views/main/MainView.tsx b/src/views/main/MainView.tsx
index 9fa3c13f..e97c604c 100644
--- a/src/views/main/MainView.tsx
+++ b/src/views/main/MainView.tsx
@@ -3,6 +3,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
 import { TransitionAnimation } from '../../transitions/TransitionAnimation';
 import { HotelView } from '../hotel-view/HotelView';
+import { InventoryView } from '../inventory/InventoryView';
 import { NavigatorView } from '../navigator/NavigatorView';
 import { RightSideView } from '../right-side/RightSideView';
 import { RoomHostView } from '../room-host/RoomHostView';
@@ -45,6 +46,7 @@ export function MainView(props: MainViewProps): JSX.Element
                 <ToolbarView isInRoom={ !landingViewVisible } />
             </TransitionAnimation>
             <NavigatorView />
+            <InventoryView />
             <RightSideView />
         </div>
     );
diff --git a/src/views/toolbar/ToolbarView.tsx b/src/views/toolbar/ToolbarView.tsx
index e7a2a61e..d5dfcd4e 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 { NavigatorEvent } from '../../events';
+import { 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';
@@ -33,6 +33,9 @@ export function ToolbarView(props: ToolbarViewProps): JSX.Element
             case ToolbarViewItems.NAVIGATOR_ITEM:
                 dispatchUiEvent(new NavigatorEvent(NavigatorEvent.TOGGLE_NAVIGATOR));
                 return;
+            case ToolbarViewItems.INVENTORY_ITEM:
+                dispatchUiEvent(new InventoryEvent(InventoryEvent.TOGGLE_INVENTORY));
+                return;
         }
     }
 
@@ -56,7 +59,7 @@ export function ToolbarView(props: ToolbarViewProps): JSX.Element
                     <li className="list-group-item">
                         <i className="icon icon-catalog"></i>
                     </li>
-                    <li className="list-group-item">
+                    <li className="list-group-item" onClick={ event => handleToolbarItemClick(event, 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>) }
diff --git a/src/views/toolbar/ToolbarView.types.ts b/src/views/toolbar/ToolbarView.types.ts
index 810dfc05..eb3005e0 100644
--- a/src/views/toolbar/ToolbarView.types.ts
+++ b/src/views/toolbar/ToolbarView.types.ts
@@ -6,4 +6,5 @@ export interface ToolbarViewProps
 export class ToolbarViewItems
 {
     public static NAVIGATOR_ITEM: string = 'TVI_NAVIGATOR_ITEM';
+    public static INVENTORY_ITEM: string = 'TVI_INVENTORY_ITEM';
 }