From 88c9b1b2024c64450660299c8834126d1d0461b6 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Wed, 21 Apr 2021 23:26:30 -0400
Subject: [PATCH] Add catalog component

---
 src/events/catalog/CatalogEvent.ts            |  7 +++
 src/events/catalog/index.ts                   |  1 +
 src/events/index.ts                           |  1 +
 src/views/Styles.scss                         |  1 +
 src/views/catalog/CatalogMessageHandler.tsx   | 10 ++++
 .../catalog/CatalogMessageHandler.types.ts    |  4 ++
 src/views/catalog/CatalogView.scss            |  3 ++
 src/views/catalog/CatalogView.tsx             | 52 +++++++++++++++++++
 src/views/catalog/CatalogView.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/catalog/CatalogEvent.ts
 create mode 100644 src/events/catalog/index.ts
 create mode 100644 src/views/catalog/CatalogMessageHandler.tsx
 create mode 100644 src/views/catalog/CatalogMessageHandler.types.ts
 create mode 100644 src/views/catalog/CatalogView.scss
 create mode 100644 src/views/catalog/CatalogView.tsx
 create mode 100644 src/views/catalog/CatalogView.types.ts

diff --git a/src/events/catalog/CatalogEvent.ts b/src/events/catalog/CatalogEvent.ts
new file mode 100644
index 00000000..bbf1cf29
--- /dev/null
+++ b/src/events/catalog/CatalogEvent.ts
@@ -0,0 +1,7 @@
+import { NitroEvent } from 'nitro-renderer';
+
+export class CatalogEvent extends NitroEvent
+{
+    public static SHOW_CATALOG: string = 'IE_SHOW_CATALOG';
+    public static TOGGLE_CATALOG: string = 'IE_TOGGLE_CATALOG';
+}
diff --git a/src/events/catalog/index.ts b/src/events/catalog/index.ts
new file mode 100644
index 00000000..6f06fa3f
--- /dev/null
+++ b/src/events/catalog/index.ts
@@ -0,0 +1 @@
+export * from './CatalogEvent';
diff --git a/src/events/index.ts b/src/events/index.ts
index e2bba4fc..86e21e9d 100644
--- a/src/events/index.ts
+++ b/src/events/index.ts
@@ -1,2 +1,3 @@
+export * from './catalog';
 export * from './inventory';
 export * from './navigator';
diff --git a/src/views/Styles.scss b/src/views/Styles.scss
index 54a69808..b530d2e2 100644
--- a/src/views/Styles.scss
+++ b/src/views/Styles.scss
@@ -1,4 +1,5 @@
 @import './avatar-image/AvatarImage';
+@import './catalog/CatalogView';
 @import './hotel-view/HotelView';
 @import './inventory/InventoryView';
 @import './loading/LoadingView';
diff --git a/src/views/catalog/CatalogMessageHandler.tsx b/src/views/catalog/CatalogMessageHandler.tsx
new file mode 100644
index 00000000..14f353e6
--- /dev/null
+++ b/src/views/catalog/CatalogMessageHandler.tsx
@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { CatalogMessageHandlerProps } from './CatalogMessageHandler.types';
+
+export const CatalogMessageHandler: FC<CatalogMessageHandlerProps> = props =>
+{
+    return (
+        <>
+        </>
+    );
+}
diff --git a/src/views/catalog/CatalogMessageHandler.types.ts b/src/views/catalog/CatalogMessageHandler.types.ts
new file mode 100644
index 00000000..ea5607f8
--- /dev/null
+++ b/src/views/catalog/CatalogMessageHandler.types.ts
@@ -0,0 +1,4 @@
+export interface CatalogMessageHandlerProps
+{
+    
+}
diff --git a/src/views/catalog/CatalogView.scss b/src/views/catalog/CatalogView.scss
new file mode 100644
index 00000000..b843d4c1
--- /dev/null
+++ b/src/views/catalog/CatalogView.scss
@@ -0,0 +1,3 @@
+.nitro-catalog {
+    width: 450px;
+}
diff --git a/src/views/catalog/CatalogView.tsx b/src/views/catalog/CatalogView.tsx
new file mode 100644
index 00000000..4a2a92c1
--- /dev/null
+++ b/src/views/catalog/CatalogView.tsx
@@ -0,0 +1,52 @@
+import { FC, useCallback, useState } from 'react';
+import { CatalogEvent } from '../../events';
+import { DraggableWindow } from '../../hooks/draggable-window/DraggableWindow';
+import { useUiEvent } from '../../hooks/events/ui/ui-event';
+import { LocalizeText } from '../../utils/LocalizeText';
+import { CatalogMessageHandler } from './CatalogMessageHandler';
+import { CatalogViewProps } from './CatalogView.types';
+
+export const CatalogView: FC<CatalogViewProps> = props =>
+{
+    const [ isVisible, setIsVisible ] = useState(false);
+
+    const onCatalogEvent = useCallback((event: CatalogEvent) =>
+    {
+        switch(event.type)
+        {
+            case CatalogEvent.SHOW_CATALOG:
+                setIsVisible(true);
+                return;
+            case CatalogEvent.TOGGLE_CATALOG:
+                setIsVisible(value => !value);
+                return;
+        }
+    }, []);
+
+    useUiEvent(CatalogEvent.SHOW_CATALOG, onCatalogEvent);
+    useUiEvent(CatalogEvent.TOGGLE_CATALOG, onCatalogEvent);
+
+    function hideCatalog(): void
+    {
+        setIsVisible(false);
+    }
+
+    return (
+        <>
+            <CatalogMessageHandler  />
+            { isVisible && <DraggableWindow handle=".drag-handler">
+                <div className="nitro-catalog 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('catalog.title') }</div>
+                        <button type="button" className="close" onClick={ hideCatalog }>
+                            <i className="fas fa-times"></i>
+                        </button>
+                    </div>
+                    <div className="d-flex p-3">
+                        content
+                    </div>
+                </div>
+            </DraggableWindow> }
+        </>
+    );
+}
diff --git a/src/views/catalog/CatalogView.types.ts b/src/views/catalog/CatalogView.types.ts
new file mode 100644
index 00000000..71927859
--- /dev/null
+++ b/src/views/catalog/CatalogView.types.ts
@@ -0,0 +1,4 @@
+export interface CatalogViewProps
+{
+    
+}
diff --git a/src/views/main/MainView.tsx b/src/views/main/MainView.tsx
index e97c604c..65a96288 100644
--- a/src/views/main/MainView.tsx
+++ b/src/views/main/MainView.tsx
@@ -2,6 +2,7 @@ import { Nitro, RoomSessionEvent } from 'nitro-renderer';
 import { useCallback, useEffect, useState } from 'react';
 import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
 import { TransitionAnimation } from '../../transitions/TransitionAnimation';
+import { CatalogView } from '../catalog/CatalogView';
 import { HotelView } from '../hotel-view/HotelView';
 import { InventoryView } from '../inventory/InventoryView';
 import { NavigatorView } from '../navigator/NavigatorView';
@@ -47,6 +48,7 @@ export function MainView(props: MainViewProps): JSX.Element
             </TransitionAnimation>
             <NavigatorView />
             <InventoryView />
+            <CatalogView />
             <RightSideView />
         </div>
     );
diff --git a/src/views/toolbar/ToolbarView.tsx b/src/views/toolbar/ToolbarView.tsx
index d5dfcd4e..9d758c4c 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 { InventoryEvent, NavigatorEvent } from '../../events';
+import { CatalogEvent, 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';
@@ -36,6 +36,9 @@ export function ToolbarView(props: ToolbarViewProps): JSX.Element
             case ToolbarViewItems.INVENTORY_ITEM:
                 dispatchUiEvent(new InventoryEvent(InventoryEvent.TOGGLE_INVENTORY));
                 return;
+            case ToolbarViewItems.CATALOG_ITEM:
+                dispatchUiEvent(new CatalogEvent(CatalogEvent.TOGGLE_CATALOG));
+                return;
         }
     }
 
@@ -56,7 +59,7 @@ export function ToolbarView(props: ToolbarViewProps): JSX.Element
                     <li className="list-group-item" onClick={ event => handleToolbarItemClick(event, ToolbarViewItems.NAVIGATOR_ITEM) }>
                         <i className="icon icon-rooms"></i>
                     </li>
-                    <li className="list-group-item">
+                    <li className="list-group-item" onClick={ event => handleToolbarItemClick(event, ToolbarViewItems.CATALOG_ITEM) }>
                         <i className="icon icon-catalog"></i>
                     </li>
                     <li className="list-group-item" onClick={ event => handleToolbarItemClick(event, ToolbarViewItems.INVENTORY_ITEM) }>
diff --git a/src/views/toolbar/ToolbarView.types.ts b/src/views/toolbar/ToolbarView.types.ts
index eb3005e0..69b84355 100644
--- a/src/views/toolbar/ToolbarView.types.ts
+++ b/src/views/toolbar/ToolbarView.types.ts
@@ -7,4 +7,5 @@ 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';
 }