refactor: create context builder to lessen indentation

needed for readability when we will have more contexts

src/App.tsx

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import {
   createBrowserRouter,
   NavLink,
@@ -11,11 +10,9 @@ 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 { ExtensionsContext } from "./context/extensions.ts";
-import { Extension } from "./types/extension.ts";
-import { RepositoryUrlContext } from "./context/repositoryUrl.ts";
-import { ManifestsContext } from "./context/manifests.ts";
-import { Manifest } from "./types/manifest.ts";
+import { ExtensionsContextProvider } from "./context/extensions.ts";
+import { RepositoryUrlContextProvider } from "./context/repositoryUrl.ts";
+import { ManifestsContextProvider } from "./context/manifests.ts";
 
 const router = createBrowserRouter([
   {
@@ -83,35 +80,36 @@ 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 [extensions, setExtensions] = useState<Extension[]>([]);
-  const [repositoryUrl, setRepositoryUrl] = useState<string>("");
-  const [manifests, setManifests] = useState<Manifest[]>([]);
+  const Context = ({ children }: { children: React.ReactNode }) => {
+    return new ContextBuilder()
+      .add(ExtensionsContextProvider)
+      .add(RepositoryUrlContextProvider)
+      .add(ManifestsContextProvider)
+      .build(children);
+  };
 
   return (
-    <ExtensionsContext.Provider
-      value={{
-        extensions,
-        setExtensions,
-      }}
-    >
-      <RepositoryUrlContext.Provider
-        value={{
-          repositoryUrl,
-          setRepositoryUrl,
-        }}
-      >
-        <ManifestsContext.Provider
-          value={{
-            manifests,
-            setManifests,
-          }}
-        >
-          <div className="flex flex-col h-screen">
-            <RouterProvider router={router} />
-          </div>
-        </ManifestsContext.Provider>
-      </RepositoryUrlContext.Provider>
-    </ExtensionsContext.Provider>
+    <Context>
+      <div className="flex flex-col h-screen">
+        <RouterProvider router={router} />
+      </div>
+    </Context>
   );
 }

src/context/extensions.ts

@@ -1,10 +1,27 @@
-import { createContext, useContext, useEffect } from "react";
-
+import {
+  createContext,
+  createElement,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
 import { Extension } from "../types/extension.ts";
 import { getExtensions } from "../services/tauri.service.ts";
 
 export const ExtensionsContext = createContext<Extension[]>([]);
 
+export const ExtensionsContextProvider: React.FC = (
+  props: React.PropsWithChildren,
+) => {
+  const [extensions, setExtensions] = useState<Extension[]>([]);
+
+  return createElement(
+    ExtensionsContext.Provider,
+    { value: { extensions, setExtensions } },
+    props.children,
+  );
+};
+
 export function useExtensions(): {
   extensions: Extension[];
   setExtensions: (extensions: Extension[]) => void;

src/context/manifests.ts

@@ -1,8 +1,20 @@
-import { createContext, useContext } from "react";
+import { createContext, createElement, useContext, useState } from "react";
 import { Manifest } from "../types/manifest.ts";
 
 export const ManifestsContext = createContext<Manifest[]>([]);
 
+export const ManifestsContextProvider: React.FC = (
+  props: React.PropsWithChildren,
+) => {
+  const [manifests, setManifests] = useState<Manifest[]>([]);
+
+  return createElement(
+    ManifestsContext.Provider,
+    { value: { manifests, setManifests } },
+    props.children,
+  );
+};
+
 export function useManifests(): {
   manifests: Manifest[];
   setManifests: (extensions: Manifest[]) => void;

src/context/repositoryUrl.ts

@@ -1,8 +1,26 @@
-import { createContext, useContext, useEffect } from "react";
+import {
+  createContext,
+  createElement,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
 import { storeService } from "../services/store.service.ts";
 
 export const RepositoryUrlContext = createContext<string>([]);
 
+export const RepositoryUrlContextProvider: React.FC = (
+  props: React.PropsWithChildren,
+) => {
+  const [repositoryUrl, setRepositoryUrl] = useState<string>("");
+
+  return createElement(
+    RepositoryUrlContext.Provider,
+    { value: { repositoryUrl, setRepositoryUrl } },
+    props.children,
+  );
+};
+
 export function useRepositoryUrl(): {
   repositoryUrl: string;
   setRepositoryUrl: (repositoryUrl: string) => void;