refactor: use zustand for global store instead of contexts

deno.json

@@ -34,7 +34,8 @@
     "react-icons": "npm:[email protected]",
     "react-router-dom": "npm:[email protected]",
     "tailwindcss": "npm:[email protected]",
-    "vite": "npm:[email protected]"
+    "vite": "npm:[email protected]",
+    "zustand": "npm:[email protected]"
   },
   "nodeModulesDir": "auto"
 }

src/App.tsx

@@ -10,9 +10,6 @@ import ExtensionBrowse from "./pages/Browse/ExtensionBrowse.tsx";
 import Extensions from "./pages/Extensions.tsx";
 import More from "./pages/More.tsx";
 import MangaDetails from "./pages/MangaDetails.tsx";
-import { ExtensionsContextProvider } from "./context/extensions.ts";
-import { RepositoryUrlContextProvider } from "./context/repositoryUrl.ts";
-import { ManifestsContextProvider } from "./context/manifests.ts";
 
 const router = createBrowserRouter([
   {
@@ -82,36 +79,10 @@ function Layout() {
   );
 }
 
-class ContextBuilder {
-  private contexts: React.FC<{ children: React.ReactNode }>[] = [];
-
-  add(context: React.FC) {
-    this.contexts.push(context);
-    return this;
-  }
-
-  build(children: React.ReactNode) {
-    return this.contexts.reduceRight(
-      (acc, Context) => <Context>{acc}</Context>,
-      children,
-    );
-  }
-}
-
 export default function App() {
-  const Context = ({ children }: { children: React.ReactNode }) => {
-    return new ContextBuilder()
-      .add(ExtensionsContextProvider)
-      .add(RepositoryUrlContextProvider)
-      .add(ManifestsContextProvider)
-      .build(children);
-  };
-
   return (
-    <Context>
-      <div className="flex flex-col h-screen">
-        <RouterProvider router={router} />
-      </div>
-    </Context>
+    <div className="flex flex-col h-screen">
+      <RouterProvider router={router} />
+    </div>
   );
 }

src/pages/Browse/Browse.tsx

@@ -1,9 +1,9 @@
 import { Link } from "react-router-dom";
 
-import { useExtensions } from "../../context/extensions.ts";
+import { useStore } from "../../services/store.service.ts";
 
 export default function Browse() {
-  const { extensions } = useExtensions();
+  const extensions = useStore((state) => state.extensions);
 
   const Icon = ({ src, alt }: { src: string; alt: string }) => (
     <figure className="w-12 h-12">

src/pages/Browse/ExtensionBrowse.tsx

@@ -5,11 +5,11 @@ import { Extension } from "../../types/extension.ts";
 import { Manga } from "../../types/manga.ts";
 import { getMangaList } from "../../services/extensions.service.ts";
 import MangaImage from "../../components/Manga/MangaImage.tsx";
-import { useExtensions } from "../../context/extensions.ts";
+import { useStore } from "../../services/store.service.ts";
 
 export default function ExtensionBrowse() {
   const { extensionId } = useParams();
-  const { extensions } = useExtensions();
+  const extensions = useStore((state) => state.extensions);
 
   const extension = extensions.find((extension) =>
     extension.id === extensionId

src/pages/Extensions.tsx

@@ -7,15 +7,15 @@ import {
   uninstallExtension,
 } from "../services/tauri.service.ts";
 import { FiDownload, FiTrash2 } from "react-icons/fi";
-
-import { useExtensions } from "../context/extensions.ts";
-import { useRepositoryUrl } from "../context/repositoryUrl.ts";
-import { useManifests } from "../context/manifests.ts";
+import { useStore } from "../services/store.service.ts";
 
 export default function Extensions() {
-  const { extensions, setExtensions } = useExtensions();
-  const { repositoryUrl, setRepositoryUrl } = useRepositoryUrl();
-  const { manifests, setManifests } = useManifests();
+  const extensions = useStore((state) => state.extensions);
+  const setExtensions = useStore((state) => state.setExtensions);
+  const repositoryUrl = useStore((state) => state.repositoryUrl);
+  const setRepositoryUrl = useStore((state) => state.setRepositoryUrl);
+  const manifests = useStore((state) => state.manifests);
+  const setManifests = useStore((state) => state.setManifests);
 
   // Fetch repository extensions when repositoryUrl changes
   useEffect(() => {

src/services/store.service.ts

@@ -1,3 +1,34 @@
 import { Store } from "@tauri-apps/plugin-store";
+import { create } from "zustand";
+import { Extension } from "../types/extension.ts";
+import { Manifest } from "../types/manifest.ts";
 
-export const storeService = await Store.load("app_data.json");
+const appData = await Store.load("app_data.json");
+
+// Load the repository URL from the app data store
+const repositoryUrl = await appData.get<string>("extensionRepositoryUrl") ?? "";
+
+interface StoreState {
+  extensions: Extension[];
+  setExtensions: (extensions: Extension[]) => void;
+
+  repositoryUrl: string;
+  setRepositoryUrl: (repositoryUrl: string) => void;
+
+  manifests: Manifest[];
+  setManifests: (manifests: Manifest[]) => void;
+}
+
+export const useStore = create<StoreState>()((set) => ({
+  extensions: new Array<Extension>(),
+  setExtensions: (extensions: Extension[]) => set({ extensions }),
+
+  repositoryUrl: repositoryUrl,
+  setRepositoryUrl: (repositoryUrl: string) => {
+    set({ repositoryUrl });
+    appData.set("extensionRepositoryUrl", repositoryUrl);
+  },
+
+  manifests: new Array<Manifest>(),
+  setManifests: (manifests: Manifest[]) => set({ manifests }),
+}));