Inventory tabs work

src/views/inventory/InventoryView.tsx

@@ -4,8 +4,9 @@ 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 { IInventoryContext, InventoryViewProps } from './InventoryView.types';
-import { InventoryTabsView } from './tabs/InventoryTabsView';
+import { IInventoryContext, InventoryTabs, InventoryViewProps } from './InventoryView.types';
+import { InventoryTabsContentView } from './tabs-content/InventoryTabsContentView';
+import { InventoryTabsSelectorView } from './tabs-selector/InventoryTabsSelectorView';
 
 export const InventoryContext = React.createContext<IInventoryContext>(null);
 
@@ -13,7 +14,9 @@ export const InventoryView: FC<InventoryViewProps> = props =>
 {
     const [ isVisible, setIsVisible ]   = useState(false);
     const [ currentTab, setCurrentTab ] = useState<string>(null);
-    const [ tabs, setTabs ]             = useState<string[]>([ 'inventory.furni', 'inventory.bots', 'inventory.furni.tab.pets', 'inventory.badges' ]);
+    const [ tabs, setTabs ]             = useState<string[]>([ 
+        InventoryTabs.FURNITURE, InventoryTabs.BOTS, InventoryTabs.PETS, InventoryTabs.PETS
+     ]);
 
     useEffect(() => {
         setCurrentTab(tabs[0]);
@@ -51,7 +54,8 @@ export const InventoryView: FC<InventoryViewProps> = props =>
                             <i className="fas fa-times"></i>
                         </button>
                     </div>
-                    <InventoryTabsView tabs={ tabs } />
+                    <InventoryTabsSelectorView tabs={ tabs } />
+                    <InventoryTabsContentView />
                 </div>
             </DraggableWindow> }
         </InventoryContext.Provider>

src/views/inventory/InventoryView.types.ts

@@ -6,3 +6,11 @@ export interface IInventoryContext
     currentTab: string;
     onSetCurrentTab: (tab: string) => void;
 }
+
+export class InventoryTabs
+{
+    public static readonly FURNITURE: string    = 'inventory.furni';
+    public static readonly BOTS: string         = 'inventory.bots';
+    public static readonly PETS: string         = 'inventory.furni.tab.pets';
+    public static readonly BADGES: string       = 'inventory.badges';
+}

src/views/inventory/tabs-content/InventoryTabsContentView.tsx

@@ -0,0 +1,22 @@
+import { FC, useContext } from 'react';
+import { InventoryContext } from '../InventoryView';
+import { InventoryTabs } from '../InventoryView.types';
+import { InventoryTabBadgesView } from './badges/InventoryTabBadgesView';
+import { InventoryTabBotsView } from './bots/InventoryTabBotsView';
+import { InventoryTabFurnitureView } from './furniture/InventoryTabFurnitureView';
+import { InventoryTabsContentViewProps } from './InventoryTabsContentView.types';
+import { InventoryTabPetsView } from './pets/InventoryTabPetsView';
+
+export const InventoryTabsContentView: FC<InventoryTabsContentViewProps> = props =>
+{
+    const inventoryContext = useContext(InventoryContext);
+    
+    return (
+        <div className="p-3">
+            { inventoryContext && inventoryContext.currentTab && inventoryContext.currentTab === InventoryTabs.FURNITURE } <InventoryTabFurnitureView />
+            { inventoryContext && inventoryContext.currentTab && inventoryContext.currentTab === InventoryTabs.BOTS } <InventoryTabBotsView />
+            { inventoryContext && inventoryContext.currentTab && inventoryContext.currentTab === InventoryTabs.PETS } <InventoryTabPetsView />
+            { inventoryContext && inventoryContext.currentTab && inventoryContext.currentTab === InventoryTabs.BADGES } <InventoryTabBadgesView />
+        </div>
+    );
+}

src/views/inventory/tabs-content/InventoryTabsContentView.types.ts

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

src/views/inventory/tabs-content/badges/InventoryTabBadgesView.tsx

@@ -0,0 +1,12 @@
+import { FC, useContext } from 'react';
+import { InventoryContext } from '../../InventoryView';
+import { InventoryTabBadgesViewProps } from './InventoryTabBadgesView.types';
+
+export const InventoryTabBadgesView: FC<InventoryTabBadgesViewProps> = props =>
+{
+    const inventoryContext = useContext(InventoryContext);
+
+    return (
+        <></>
+    );
+}

src/views/inventory/tabs-content/badges/InventoryTabBadgesView.types.ts

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

src/views/inventory/tabs-content/bots/InventoryTabBotsView.tsx

@@ -0,0 +1,12 @@
+import { FC, useContext } from 'react';
+import { InventoryContext } from '../../InventoryView';
+import { InventoryTabBotsViewProps } from './InventoryTabBotsView.types';
+
+export const InventoryTabBotsView: FC<InventoryTabBotsViewProps> = props =>
+{
+    const inventoryContext = useContext(InventoryContext);
+
+    return (
+        <></>
+    );
+}

src/views/inventory/tabs-content/bots/InventoryTabBotsView.types.ts

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

src/views/inventory/tabs-content/furniture/InventoryTabFurnitureView.tsx

@@ -0,0 +1,12 @@
+import { FC, useContext } from 'react';
+import { InventoryContext } from '../../InventoryView';
+import { InventoryTabFurnitureViewProps } from './InventoryTabFurnitureView.types';
+
+export const InventoryTabFurnitureView: FC<InventoryTabFurnitureViewProps> = props =>
+{
+    const inventoryContext = useContext(InventoryContext);
+
+    return (
+        <></>
+    );
+}

src/views/inventory/tabs-content/furniture/InventoryTabFurnitureView.types.ts

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

src/views/inventory/tabs-content/pets/InventoryTabPetsView.tsx

@@ -0,0 +1,12 @@
+import { FC, useContext } from 'react';
+import { InventoryContext } from '../../InventoryView';
+import { InventoryTabPetsViewProps } from './InventoryTabPetsView.types';
+
+export const InventoryTabPetsView: FC<InventoryTabPetsViewProps> = props =>
+{
+    const inventoryContext = useContext(InventoryContext);
+
+    return (
+        <></>
+    );
+}

src/views/inventory/tabs-content/pets/InventoryTabPetsView.types.ts

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

src/views/inventory/tabs-selector/InventoryTabsSelectorView.tsx

@@ -1,8 +1,8 @@
 import { FC } from 'react';
-import { InventoryTabsViewProps } from './InventoryTabsView.types';
+import { InventoryTabsSelectorViewProps } from './InventoryTabsSelectorView.types';
 import { InventoryTabView } from './tab/InventoryTabView';
 
-export const InventoryTabsView: FC<InventoryTabsViewProps> = props =>
+export const InventoryTabsSelectorView: FC<InventoryTabsSelectorViewProps> = props =>
 {
     return (
         <div className="p-3">

src/views/inventory/tabs-selector/InventoryTabsSelectorView.types.ts

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

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

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

src/views/inventory/tabs/InventoryTabsView.types.ts

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