Update inventory context

src/views/inventory/InventoryView.tsx

@@ -1,28 +1,22 @@
 import { RoomSessionEvent } from 'nitro-renderer';
-import { createContext, FC, useCallback, useEffect, useState } from 'react';
+import { FC, useCallback, useState } from 'react';
 import { InventoryEvent } from '../../events';
 import { DraggableWindow } from '../../hooks/draggable-window/DraggableWindow';
 import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
 import { useUiEvent } from '../../hooks/events/ui/ui-event';
 import { LocalizeText } from '../../utils/LocalizeText';
+import { InventoryContextProvider } from './context/InventoryContext';
 import { InventoryMessageHandler } from './InventoryMessageHandler';
-import { IInventoryContext, InventoryTabs, InventoryViewProps } from './InventoryView.types';
+import { InventoryTabs, InventoryViewProps } from './InventoryView.types';
 import { InventoryTabsContentView } from './tabs-content/InventoryTabsContentView';
 import { InventoryTabsSelectorView } from './tabs-selector/InventoryTabsSelectorView';
 
-export const InventoryContext = createContext<IInventoryContext>(null);
-
 export const InventoryView: FC<InventoryViewProps> = props =>
 {
-    const [ isVisible, setIsVisible ]   = useState(false);
+    const tabs = [ InventoryTabs.FURNITURE, InventoryTabs.BOTS, InventoryTabs.PETS, InventoryTabs.BADGES ];
-    const [ currentTab, setCurrentTab ] = useState<string>(null);
-    const [ tabs, setTabs ]             = useState<string[]>([ 
-        InventoryTabs.FURNITURE, InventoryTabs.BOTS, InventoryTabs.PETS, InventoryTabs.BADGES
-     ]);
 
-    useEffect(() => {
+    const [ isVisible, setIsVisible ]   = useState(false);
-        setCurrentTab(tabs[0]);
+    const [ currentTab, setCurrentTab ] = useState<string>(tabs[0]);
-    }, [ tabs ]);
 
     const onInventoryEvent = useCallback((event: InventoryEvent) =>
     {
@@ -62,7 +56,7 @@ export const InventoryView: FC<InventoryViewProps> = props =>
     }
 
     return (
-        <InventoryContext.Provider value={{ currentTab: currentTab, onSetCurrentTab: setCurrentTab }}>
+        <InventoryContextProvider value={{ currentTab, setCurrentTab }}>
             <InventoryMessageHandler  />
             { isVisible && <DraggableWindow handle=".drag-handler">
                 <div className="nitro-inventory d-flex flex-column bg-primary border border-black shadow rounded">
@@ -76,6 +70,6 @@ export const InventoryView: FC<InventoryViewProps> = props =>
                     <InventoryTabsContentView />
                 </div>
             </DraggableWindow> }
-        </InventoryContext.Provider>
+        </InventoryContextProvider>
     );
 }

src/views/inventory/InventoryView.types.ts

@@ -1,12 +1,6 @@
 export interface InventoryViewProps
 {}
 
-export interface IInventoryContext
-{
-    currentTab: string;
-    onSetCurrentTab: (tab: string) => void;
-}
-
 export class InventoryTabs
 {
     public static readonly FURNITURE: string    = 'inventory.furni';

src/views/inventory/context/InventoryContext.tsx

@@ -0,0 +1,14 @@
+import { createContext, FC, useContext } from 'react';
+import { IInventoryContext, InventoryContextProps } from './InventoryContext.types';
+
+const InventoryContext = createContext<IInventoryContext>({
+    currentTab: null,
+    setCurrentTab: null
+});
+
+export const InventoryContextProvider: FC<InventoryContextProps> = props =>
+{
+    return <InventoryContext.Provider value={ props.value }>{ props.children }</InventoryContext.Provider>
+}
+
+export const useInventoryContext = () => useContext(InventoryContext);

src/views/inventory/context/InventoryContext.types.ts

@@ -0,0 +1,12 @@
+import { ProviderProps } from 'react';
+
+export interface IInventoryContext
+{
+    currentTab: string;
+    setCurrentTab: (tab: string) => void;
+}
+
+export interface InventoryContextProps extends ProviderProps<IInventoryContext>
+{
+
+}

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

@@ -1,5 +1,5 @@
-import { FC, useContext } from 'react';
+import { FC } from 'react';
-import { InventoryContext } from '../InventoryView';
+import { useInventoryContext } from '../context/InventoryContext';
 import { InventoryTabs } from '../InventoryView.types';
 import { InventoryTabBadgesView } from './badges/InventoryTabBadgesView';
 import { InventoryTabBotsView } from './bots/InventoryTabBotsView';
@@ -9,14 +9,28 @@ import { InventoryTabPetsView } from './pets/InventoryTabPetsView';
 
 export const InventoryTabsContentView: FC<InventoryTabsContentViewProps> = props =>
 {
-    const inventoryContext = useContext(InventoryContext);
+    const inventoryContext = useInventoryContext();
+
+    function renderCurrentTab(): JSX.Element
+    {
+        switch(inventoryContext.currentTab)
+        {
+            case InventoryTabs.FURNITURE:
+                return <InventoryTabFurnitureView />
+            case InventoryTabs.BOTS:
+                return <InventoryTabBotsView />
+            case InventoryTabs.PETS:
+                return <InventoryTabPetsView />
+            case InventoryTabs.BADGES:
+                return <InventoryTabBadgesView />
+        }
+
+        return null;
+    }
     
     return (
         <div className="px-3 pb-3">
-            { inventoryContext && inventoryContext.currentTab && inventoryContext.currentTab === InventoryTabs.FURNITURE && <InventoryTabFurnitureView /> }
+            { inventoryContext && inventoryContext.currentTab && renderCurrentTab() }
-            { 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/badges/InventoryTabBadgesView.tsx

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

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

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

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

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

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

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

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

@@ -4,9 +4,11 @@ import { InventoryTabView } from './tab/InventoryTabView';
 
 export const InventoryTabsSelectorView: FC<InventoryTabsSelectorViewProps> = props =>
 {
+    const { tabs = null } = props;
+
     return (
         <div className="p-3">
-            { props.tabs &&
+            { tabs && tabs.length &&
                 <div className="btn-group w-100">
                     { props.tabs.map((tab, index) =>
                         {

src/views/inventory/tabs-selector/tab/InventoryTabView.tsx

@@ -1,18 +1,21 @@
 import classNames from 'classnames';
-import { FC, useContext } from 'react';
+import { FC, MouseEvent } from 'react';
 import { LocalizeText } from '../../../../utils/LocalizeText';
-import { InventoryContext } from '../../InventoryView';
+import { useInventoryContext } from '../../context/InventoryContext';
 import { InventoryTabViewProps } from './InventoryTabView.types';
 
 export const InventoryTabView: FC<InventoryTabViewProps> = props =>
 {
-    const inventoryContext = useContext(InventoryContext);
+    const { tab = null } = props;
 
-    return (
+    const inventoryContext = useInventoryContext();
-        <button type="button" 
+
-        className={ 'btn btn-secondary btn-sm ' + classNames({ 'active': inventoryContext.currentTab === props.tab })}
+    function selectTab(event: MouseEvent = null): void
-        onClick={ () => inventoryContext.onSetCurrentTab(props.tab) }>
+    {
-            { LocalizeText(props.tab) }
+        inventoryContext.setCurrentTab(tab);
-        </button>
+    }
-    );
+
+    if(!tab) return null;
+
+    return <button type="button" className={ 'btn btn-secondary btn-sm ' + classNames({ 'active': (inventoryContext.currentTab === tab) })} onClick={ selectTab }>{ LocalizeText(tab) }</button>;
 }