refactor: Inventory Context replaced by Inventory Store (#949)

NigelBreslaw · Mar 23, 2024 · bd0a8a9 · bd0a8a9
1 parent 11f8194
commit bd0a8a9
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 114 deletions.
diff --git a/native/app/App.tsx b/native/app/App.tsx
@@ -4,7 +4,6 @@ SplashScreen.preventAutoHideAsync();
 import RootScreen from "@/RootScreen.tsx";
 import { NavigationContainer } from "@react-navigation/native";
 import { PaperProvider } from "react-native-paper";
-import InventoryStateProvider from "@/app/state/InventoryState.tsx";
 import { useEffect } from "react";
 import StorageGG from "@/app/storage/StorageGG.ts";
 import AuthService from "@/app/authentication/AuthService.ts";
@@ -20,23 +19,21 @@ function App() {
 
   return (
     <PaperProvider>
-      <InventoryStateProvider>
-        <NavigationContainer
-          theme={{
-            colors: {
-              primary: "#17101F",
-              background: "#17101F",
-              card: "#17101F",
-              text: "#17101F",
-              border: "#17101F",
-              notification: "#17101F",
-            },
-            dark: false,
-          }}
-        >
-          <RootScreen />
-        </NavigationContainer>
-      </InventoryStateProvider>
+      <NavigationContainer
+        theme={{
+          colors: {
+            primary: "#17101F",
+            background: "#17101F",
+            card: "#17101F",
+            text: "#17101F",
+            border: "#17101F",
+            notification: "#17101F",
+          },
+          dark: false,
+        }}
+      >
+        <RootScreen />
+      </NavigationContainer>
     </PaperProvider>
   );
 }

diff --git a/native/app/core/DataService.ts b/native/app/core/DataService.ts
@@ -22,17 +22,16 @@ import {
   type EmptyCell,
   type BlankCell,
 } from "@/app/inventory/Common.ts";
-import type { InventoryAction } from "@/app/state/InventoryState.tsx";
 import StorageGG from "@/app/storage/StorageGG.ts";
 import { useDefinitionsStore } from "@/app/store/DefinitionsStore.ts";
 import { useGlobalStateStore } from "@/app/store/GlobalStateStore.ts";
+import { useInventoryStore } from "@/app/store/InventoryStore.ts";
 import { getCustomItemDefinition } from "@/app/utilities/Helpers.ts";
 import { characterBuckets } from "@/bungie/Hashes.ts";
 import { array, number, parse, safeParse, string } from "valibot";
 
 class DataService {
   private static instance: DataService;
-  private static inventoryDispatch: React.Dispatch<InventoryAction>;
   static charactersAndVault: GuardiansAndVault = {
     vault: {
       characterId: "VAULT",
@@ -110,10 +109,6 @@ class DataService {
     return DataService.instance;
   }
 
-  static setInventoryDispatch(inventoryDispatch: React.Dispatch<InventoryAction>) {
-    DataService.inventoryDispatch = inventoryDispatch;
-  }
-
   static setUpItemDefinition() {
     try {
       const parsedBucketTypeHash = parse(array(number()), DataService.itemDefinition.helpers.BucketTypeHash);
@@ -284,9 +279,7 @@ class DataService {
     const p2 = performance.now();
     console.log("buildInventoryTabData took:", (p2 - p1).toFixed(4), "ms");
 
-    DataService.inventoryDispatch({ type: "setWeaponsPageData", payload: weaponsPageData });
-    DataService.inventoryDispatch({ type: "setArmorPageData", payload: armorPageData });
-    DataService.inventoryDispatch({ type: "setInventoryPageData", payload: inventoryPageData });
+    useInventoryStore.setState({ weaponsPageData, armorPageData, inventoryPageData });
     const p3 = performance.now();
     console.log("setInventoryTabData took:", (p3 - p2).toFixed(4), "ms");
   }

diff --git a/native/app/screens/MainDrawer.tsx b/native/app/screens/MainDrawer.tsx
@@ -1,8 +1,8 @@
 import DataService from "@/app/core/DataService.ts";
 import { LOGO_DARK } from "@/app/inventory/Common.ts";
 import InventoryPage from "@/app/screens/InventoryPage.tsx";
-import { useInventoryStateContext } from "@/app/state/InventoryState.tsx";
 import { useGlobalStateStore } from "@/app/store/GlobalStateStore.ts";
+import { useInventoryStore } from "@/app/store/InventoryStore.ts";
 import AuthService from "@/authentication/AuthService.ts";
 import { type DrawerContentComponentProps, createDrawerNavigator } from "@react-navigation/drawer";
 import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";
@@ -29,7 +29,9 @@ const Tab = createMaterialBottomTabNavigator();
 
 function HomeScreen() {
   const insets = useSafeAreaInsets();
-  const inventoryState = useInventoryStateContext();
+  const weaponsPageData = useInventoryStore((state) => state.weaponsPageData);
+  const armorPageData = useInventoryStore((state) => state.armorPageData);
+  const inventoryPageData = useInventoryStore((state) => state.inventoryPageData);
 
   const styles = StyleSheet.create({
     bar: {
@@ -62,7 +64,7 @@ function HomeScreen() {
           tabBarIcon: "pistol",
         }}
       >
-        {(props) => <InventoryPage {...props} inventoryPageData={inventoryState.weaponsPageData} />}
+        {(props) => <InventoryPage {...props} inventoryPageData={weaponsPageData} />}
       </Tab.Screen>
       <Tab.Screen
         name="tab-armor"
@@ -71,7 +73,7 @@ function HomeScreen() {
           tabBarIcon: "tshirt-crew-outline",
         }}
       >
-        {(props) => <InventoryPage {...props} inventoryPageData={inventoryState.armorPageData} />}
+        {(props) => <InventoryPage {...props} inventoryPageData={armorPageData} />}
       </Tab.Screen>
       <Tab.Screen
         name="tab-inventory"
@@ -80,7 +82,7 @@ function HomeScreen() {
           tabBarIcon: "diamond-stone",
         }}
       >
-        {(props) => <InventoryPage {...props} inventoryPageData={inventoryState.inventoryPageData} />}
+        {(props) => <InventoryPage {...props} inventoryPageData={inventoryPageData} />}
       </Tab.Screen>
     </Tab.Navigator>
   );

diff --git a/native/app/state/InventoryState.tsx b/native/app/state/InventoryState.tsx
diff --git a/native/app/store/InventoryStore.ts b/native/app/store/InventoryStore.ts
@@ -1,11 +1,24 @@
+import type { UiCell } from "@/app/inventory/Common.ts";
 import { create } from "zustand";
 
 type InventoryStore = {
   currentListIndex: number;
   setCurrentListIndex: (payload: number) => void;
+  weaponsPageData: Array<Array<UiCell>>;
+  setWeaponsPageData: (payload: Array<Array<UiCell>>) => void;
+  armorPageData: Array<Array<UiCell>>;
+  setArmorPageData: (payload: Array<Array<UiCell>>) => void;
+  inventoryPageData: Array<Array<UiCell>>;
+  setInventoryPageData: (payload: Array<Array<UiCell>>) => void;
 };
 
 export const useInventoryStore = create<InventoryStore>((set) => ({
   currentListIndex: 0,
   setCurrentListIndex: (currentListIndex: number) => set({ currentListIndex }),
+  weaponsPageData: [],
+  armorPageData: [],
+  inventoryPageData: [],
+  setWeaponsPageData: (weaponsPageData: Array<Array<UiCell>>) => set({ weaponsPageData }),
+  setArmorPageData: (armorPageData: Array<Array<UiCell>>) => set({ armorPageData }),
+  setInventoryPageData: (inventoryPageData: Array<Array<UiCell>>) => set({ inventoryPageData }),
 }));