use a json file for state storage instead of web LocalStorage

Author: AmyrAhmady

src/main.tsx

@@ -1,7 +1,54 @@
 import ReactDOM from "react-dom/client";
-import "./locales";
 import App from "./App";
+import "./locales";
+import { useGenericPersistentState } from "./states/genericStates";
+import { usePersistentServers } from "./states/servers";
+import { useSettings } from "./states/settings";
+import { useTheme } from "./states/theme";
+import nativeStorage from "./utils/nativeStorage";
+
+async function runner() {
+  const favsStr = localStorage.getItem("favorites-and-recentlyjoined-storage");
+  const genericStr = localStorage.getItem("generic-state-storage");
+  const settingsStr = localStorage.getItem("settings-storage");
+  const themeStr = localStorage.getItem("theme-storage");
+
+  if (favsStr) {
+    const favs = JSON.parse(favsStr);
+    const settingsNewStr = await nativeStorage.getItem("settings-storage");
+
+    const hasNativeData =
+      settingsNewStr === null
+        ? false
+        : JSON.parse(settingsNewStr).state.dataMerged;
+
+    if (
+      Array.isArray(favs.state.favorites) &&
+      favs.state.favorites.length &&
+      !hasNativeData
+    ) {
+      usePersistentServers.setState(favs.state);
+
+      if (genericStr) {
+        const generic = JSON.parse(genericStr);
+        useGenericPersistentState.setState(generic.state);
+      }
+
+      if (settingsStr) {
+        const settings = JSON.parse(settingsStr);
+        useSettings.setState({ ...settings.state, dataMerged: true });
+      }
+
+      if (themeStr) {
+        const theme = JSON.parse(themeStr);
+        useTheme.setState(theme.state);
+      }
+    }
+  }
+
+  ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+    <App />
+  );
+}
 
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <App />
-);
+runner();

src/states/genericStates.ts

@@ -1,7 +1,8 @@
 import { create } from "zustand";
 import { createJSONStorage, persist } from "zustand/middleware";
-import { ListType, SearchData } from "../utils/types";
 import { LanguageType } from "../locales";
+import { nativeStateStorage } from "../utils/nativeStorage";
+import { ListType, SearchData } from "../utils/types";
 
 interface GenericTempStates {
   filterMenu: boolean;
@@ -59,7 +60,7 @@ const useGenericPersistentState = create<GenericPersistentStates>()(
     }),
     {
       name: "generic-state-storage",
-      storage: createJSONStorage(() => localStorage),
+      storage: createJSONStorage(() => nativeStateStorage),
     }
   )
 );

src/states/servers.ts

@@ -1,9 +1,10 @@
 import { t } from "i18next";
 import { create } from "zustand";
 import { createJSONStorage, persist } from "zustand/middleware";
+import { nativeStateStorage } from "../utils/nativeStorage";
+import { queryServer } from "../utils/query";
 import { PerServerSettings, SAMPDLLVersions, Server } from "../utils/types";
 import { useNotification } from "./notification";
-import { queryServer } from "../utils/query";
 
 interface ServersState {
   servers: Server[];
@@ -187,7 +188,7 @@ const usePersistentServers = create<ServersPersistentState>()(
     }),
     {
       name: "favorites-and-recentlyjoined-storage",
-      storage: createJSONStorage(() => localStorage),
+      storage: createJSONStorage(() => nativeStateStorage),
     }
   )
 );

src/states/settings.ts

@@ -1,11 +1,13 @@
 import { create } from "zustand";
 import { createJSONStorage, persist } from "zustand/middleware";
+import { nativeStateStorage } from "../utils/nativeStorage";
 import { SAMPDLLVersions } from "../utils/types";
 
 interface SettingsPersistentState {
   nickName: string;
   gtasaPath: string;
   sampVersion: SAMPDLLVersions;
+  dataMerged: boolean;
   setNickName: (name: string) => void;
   setGTASAPath: (path: string) => void;
   setSampVersion: (version: SAMPDLLVersions) => void;
@@ -17,13 +19,14 @@ const useSettings = create<SettingsPersistentState>()(
       nickName: "",
       gtasaPath: "",
       sampVersion: "custom",
+      dataMerged: false,
       setNickName: (name) => set({ nickName: name }),
       setGTASAPath: (path) => set({ gtasaPath: path }),
       setSampVersion: (version) => set({ sampVersion: version }),
     }),
     {
       name: "settings-storage",
-      storage: createJSONStorage(() => localStorage),
+      storage: createJSONStorage(() => nativeStateStorage),
     }
   )
 );

src/states/theme.ts

@@ -5,6 +5,7 @@ import {
   darkThemeColors,
   lightThemeColors,
 } from "../constants/theme";
+import { nativeStateStorage } from "../utils/nativeStorage";
 
 interface ThemePersistentState {
   theme: ThemeColors;
@@ -25,7 +26,7 @@ const useTheme = create<ThemePersistentState>()(
     }),
     {
       name: "theme-storage",
-      storage: createJSONStorage(() => localStorage),
+      storage: createJSONStorage(() => nativeStateStorage),
     }
   )
 );

src/utils/nativeStorage.ts

@@ -39,4 +39,17 @@ class NativeStorage {
 }
 
 const nativeStorage = new NativeStorage();
+
+export const nativeStateStorage: any = {
+  getItem: async (key: string) => {
+    return await nativeStorage.getItem(key);
+  },
+  setItem: async (key: string, value: string) => {
+    await nativeStorage.setItem(key, value);
+  },
+  removeItem: async (key: string) => {
+    await nativeStorage.removeItem(key);
+  },
+};
+
 export default nativeStorage;