refactor: Improve start up (#2107)

This change creates a new state variable 'appReady'. This is true when the state has hydrated and both the custom item defintion and bungie definitions have all successfully been downloaded or on app restart loaded. The MainDrawer UI will not be shown till the app is ready making it impossible for the auto refresh or manual refresh to be activated. The splash screen is then only hidden when the app is ready. And exception to this is when the app is not authenticated. In this case the splash is dimissed and then the login screen is shown.
NigelBreslaw · Jul 22, 2024 · b829565 · b829565
1 parent 6dd2304
commit b829565
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 35 deletions.
diff --git a/native/app/App.tsx b/native/app/App.tsx
@@ -1,24 +1,15 @@
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
-import * as SplashScreen from "expo-splash-screen";
 
 import MainDrawer from "@/app/UI/MainDrawer.tsx";
 import Login from "@/app/UI/Login.tsx";
 import DetailsView from "@/app/inventory/pages/details/DetailsView.tsx";
 import type { RootStackParamList } from "@/app/Root.tsx";
-import { useGGStore } from "@/app/store/GGStore.ts";
 
 const RootStack = createNativeStackNavigator<RootStackParamList>();
 
 function App() {
   "use memo";
 
-  const stateHydrated = useGGStore((state) => state.stateHydrated);
-
-  if (!stateHydrated) {
-    return null;
-  }
-  SplashScreen.hideAsync();
-
   return (
     <RootStack.Navigator>
       <RootStack.Group>

diff --git a/native/app/App.web.tsx b/native/app/App.web.tsx
@@ -4,7 +4,6 @@ import MainDrawer from "@/app/UI/MainDrawer.tsx";
 import Login from "@/app/UI/Login.tsx";
 import DetailsView from "@/app/inventory/pages/details/DetailsView.tsx";
 import type { RootStackParamList } from "@/app/Root.tsx";
-import { useGGStore } from "@/app/store/GGStore.ts";
 
 // Native app uses a native stack navigator which has no animations on web.
 // so this is a workaround to get the animations working.
@@ -23,12 +22,6 @@ function App() {
 
   injectWebCss();
 
-  const stateHydrated = useGGStore((state) => state.stateHydrated);
-
-  if (!stateHydrated) {
-    return null;
-  }
-
   return (
     <RootStack.Navigator screenOptions={{ animationEnabled: true }}>
       <RootStack.Group>

diff --git a/native/app/Root.tsx b/native/app/Root.tsx
@@ -145,6 +145,7 @@ function Root() {
   useEffect(() => {
     if (authenticated === "NO-AUTHENTICATION" && stateHydrated) {
       if (navigationRef.current) {
+        SplashScreen.hideAsync();
         navigationRef.current.navigate("Login");
       } else {
         console.error("No navigationRef");

diff --git a/native/app/UI/MainDrawer.tsx b/native/app/UI/MainDrawer.tsx
@@ -2,6 +2,7 @@ import { type DrawerContentComponentProps, createDrawerNavigator, DrawerItem } f
 import { Image } from "expo-image";
 import { Platform, StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import * as Haptics from "expo-haptics";
+import * as SplashScreen from "expo-splash-screen";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { useGGStore } from "@/app/store/GGStore.ts";
@@ -170,6 +171,13 @@ function CustomDrawerContent({ navigation, state }: DrawerContentComponentProps)
 export default function MainDrawer() {
   "use memo";
 
+  const appReady = useGGStore((state) => state.appReady);
+
+  if (!appReady) {
+    return null;
+  }
+  SplashScreen.hideAsync();
+
   return (
     <Drawer.Navigator
       drawerContent={CustomDrawerContent}

diff --git a/native/app/store/Account/AccountSlice.ts b/native/app/store/Account/AccountSlice.ts
@@ -70,6 +70,7 @@ export type AccountSliceGetter = Parameters<StateCreator<IStore, [], [], Account
 
 export interface AccountSlice {
   stateHydrated: boolean;
+  appReady: boolean;
 
   appStartupTime: number;
   refreshing: boolean;
@@ -131,6 +132,7 @@ export interface AccountSlice {
 
 export const createAccountSlice: StateCreator<IStore, [], [], AccountSlice> = (set, get) => ({
   stateHydrated: false,
+  appReady: false,
 
   appStartupTime: 0,
   refreshing: false,
@@ -169,6 +171,9 @@ export const createAccountSlice: StateCreator<IStore, [], [], AccountSlice> = (s
   setInitialAccountDataReady: () => {
     if (!get().initialAccountDataReady) {
       set({ initialAccountDataReady: true });
+      if (get().itemsDefinitionReady && get().bungieDefinitionsReady) {
+        set({ appReady: true });
+      }
     }
   },
   setAppStartupTime: (appStartupTime) => set({ appStartupTime }),

diff --git a/native/app/store/DefinitionsSlice.ts b/native/app/store/DefinitionsSlice.ts
@@ -71,6 +71,8 @@ export interface DefinitionsSlice {
   inventorySectionWidth: number;
   itemDefinitionVersion: string;
   bungieDefinitionVersions: string;
+  setItemsDefinitionReady: () => void;
+  setBungieDefinitionsReady: () => void;
   loadCustomDefinitions: (uniqueKey: string | null) => Promise<void>;
   loadBungieDefinitions: (bungieManifest: BungieManifest | null) => Promise<void>;
   showSnackBar: (message: string) => void;
@@ -86,22 +88,34 @@ export const createDefinitionsSlice: StateCreator<IStore, [], [], DefinitionsSli
   inventorySectionWidth: 0,
   itemDefinitionVersion: "",
   bungieDefinitionVersions: "",
+  setItemsDefinitionReady: () => {
+    set({ itemsDefinitionReady: true });
+    if (get().bungieDefinitionsReady && get().stateHydrated) {
+      set({ appReady: true });
+    }
+  },
+  setBungieDefinitionsReady: () => {
+    set({ bungieDefinitionsReady: true });
+    if (get().itemsDefinitionReady && get().stateHydrated) {
+      set({ appReady: true });
+    }
+  },
   loadCustomDefinitions: async (uniqueKey) => {
     const storedVersion = get().itemDefinitionVersion;
     if (storedVersion === "") {
       // download a version
       console.log("download a version");
-      await downloadAndStoreItemDefinition(set);
+      await downloadAndStoreItemDefinition(get, set);
     } else if (uniqueKey === null) {
       // try to use the already downloaded version
-      await loadLocalItemDefinitionVersion(set);
+      await loadLocalItemDefinitionVersion(get, set);
     } else if (uniqueKey === storedVersion) {
       // use the already downloaded version
-      await loadLocalItemDefinitionVersion(set);
+      await loadLocalItemDefinitionVersion(get, set);
     } else {
       // download a new version
       console.log("download a new version as KEY is different");
-      await downloadAndStoreItemDefinition(set);
+      await downloadAndStoreItemDefinition(get, set);
     }
   },
   loadBungieDefinitions: async (bungieManifest) => {
@@ -117,17 +131,17 @@ export const createDefinitionsSlice: StateCreator<IStore, [], [], DefinitionsSli
     try {
       if (storedVersion === "") {
         // download a version
-        await downloadAndStoreBungieDefinitions(set, bungieManifest);
+        await downloadAndStoreBungieDefinitions(get, set, bungieManifest);
       } else if (versionKey === null) {
         // try to use the already downloaded version
-        await loadLocalBungieDefinitions(set);
+        await loadLocalBungieDefinitions(get, set);
       } else if (versionKey === storedVersion) {
         // use the already downloaded version
-        await loadLocalBungieDefinitions(set);
+        await loadLocalBungieDefinitions(get, set);
       } else {
         // download a new version
         console.log("download a new bungie definitions as KEY is different");
-        await downloadAndStoreBungieDefinitions(set, bungieManifest);
+        await downloadAndStoreBungieDefinitions(get, set, bungieManifest);
       }
       updateBucketSizes();
       updateDestinyText();
@@ -147,25 +161,25 @@ export const createDefinitionsSlice: StateCreator<IStore, [], [], DefinitionsSli
   },
 });
 
-async function loadLocalItemDefinitionVersion(set: DefinitionsSliceSetter): Promise<void> {
+async function loadLocalItemDefinitionVersion(get: DefinitionsSliceGetter, set: DefinitionsSliceSetter): Promise<void> {
   try {
     const loadedDefinition = await getData("ITEM_DEFINITION", "getItemDefinition()");
     const itemDefinition = parse(ItemResponseSchema, loadedDefinition);
-    set(parseAndSet(itemDefinition));
+    parseAndSet(get, itemDefinition);
   } catch (e) {
     console.error("Failed to load itemDefinition version. Downloading new version...", e);
-    await downloadAndStoreItemDefinition(set);
+    await downloadAndStoreItemDefinition(get, set);
   }
 }
 
-async function downloadAndStoreItemDefinition(set: DefinitionsSliceSetter): Promise<void> {
+async function downloadAndStoreItemDefinition(get: DefinitionsSliceGetter, set: DefinitionsSliceSetter): Promise<void> {
   try {
     const downloadedDefinition = await getCustomItemDefinition();
     const itemDefinition = parse(ItemResponseSchema, downloadedDefinition);
     const versionKey = itemDefinition.id;
     set({ itemDefinitionVersion: versionKey });
     await setData(itemDefinition as unknown as JSON, "ITEM_DEFINITION", "setupItemDefinition()");
-    return set(parseAndSet(itemDefinition));
+    parseAndSet(get, itemDefinition);
   } catch (e) {
     // TODO: Show big error message
     console.error("Failed to download and save itemDefinition", e);
@@ -187,6 +201,7 @@ const NonInterpolationTable = [
 let failCount = 0;
 
 async function downloadAndStoreBungieDefinitions(
+  get: DefinitionsSliceGetter,
   set: DefinitionsSliceSetter,
   bungieManifest: BungieManifest | null,
 ): Promise<void> {
@@ -267,13 +282,14 @@ async function downloadAndStoreBungieDefinitions(
     } else {
       throw new Error("No DestinyInventoryBucketDefinition");
     }
-    set({ bungieDefinitionVersions: versionKey, bungieDefinitionsReady: true });
+    set({ bungieDefinitionVersions: versionKey });
+    get().setBungieDefinitionsReady();
   } catch (e) {
     console.error("Failed to download and save bungieDefinition", e);
     if (failCount < 3) {
       failCount++;
       console.error("Failed to download and save bungieDefinition", e);
-      await downloadAndStoreBungieDefinitions(set, bungieManifest);
+      await downloadAndStoreBungieDefinitions(get, set, bungieManifest);
     } else {
       // show error toast
       console.error("Failed to download and save bungieDefinition", e);
@@ -282,7 +298,7 @@ async function downloadAndStoreBungieDefinitions(
   }
 }
 
-async function loadLocalBungieDefinitions(set: DefinitionsSliceSetter): Promise<void> {
+async function loadLocalBungieDefinitions(get: DefinitionsSliceGetter, set: DefinitionsSliceSetter): Promise<void> {
   try {
     const loadSocketTypeDefinition = await getAsyncStorage("DestinySocketCategoryDefinition");
     const socketDefJson = JSON.parse(loadSocketTypeDefinition);
@@ -299,15 +315,15 @@ async function loadLocalBungieDefinitions(set: DefinitionsSliceSetter): Promise<
     const loadInventoryBucketDefinition = await getAsyncStorage("DestinyInventoryBucketDefinition");
     const inventoryBucketDefJson = JSON.parse(loadInventoryBucketDefinition);
     setDestinyInventoryBucketDefinition(inventoryBucketDefJson as InventoryBucketDefinition);
-    set({ bungieDefinitionsReady: true });
+    get().setBungieDefinitionsReady();
   } catch (e) {
     console.error("Failed to load bungieDefinition version", e);
     set({ bungieDefinitionVersions: "", bungieDefinitionsReady: false });
     // TODO: Should error. Show something to the user that lets them restart the app. In the sense of running init again.
   }
 }
 
-function parseAndSet(itemDefinition: ItemResponse) {
+function parseAndSet(get: DefinitionsSliceGetter, itemDefinition: ItemResponse) {
   setItemDefinition(itemDefinition.items as ItemsDefinition);
   setBucketTypeHashArray(itemDefinition.helpers.BucketTypeHash);
   setDamageTypeHashes(itemDefinition.helpers.DamageTypeHashes);
@@ -338,7 +354,7 @@ function parseAndSet(itemDefinition: ItemResponse) {
   setUiPlugLabel(itemDefinition.helpers.UiPlugLabel);
   setIcons(itemDefinition.helpers.Icons);
 
-  return { itemsDefinitionReady: true };
+  get().setItemsDefinitionReady();
 }
 
 function getData(storageKey: StorageKey, errorMessage: string): Promise<JSON> {