From 7cdeb98161995cb3425201a04d698e08ca620bf9 Mon Sep 17 00:00:00 2001
From: johannes-hernehult <jhernehult@gmail.com>
Date: Wed, 17 Jun 2026 11:12:25 +0200
Subject: [PATCH] feat(guides): integrate GuideContext and persist new guides
 to IndexedDB     - Wrap application root with IDBProvider and GuideProvider  
   - Replace mock data in App component with real guides from useGuides hook  
   - Update useNewGuide hook to save compiled guides to IndexedDB and update
 global state

---
 src/App.tsx                              |  8 +---
 src/features/guides/hooks/useNewGuide.ts | 21 ++++++++-
 src/lib/contexts/dbinit.context.tsx      | 55 ++++++++++++++++++++++++
 src/lib/contexts/guide.context.tsx       | 48 +++++++++++++++++++++
 src/lib/db.ts                            | 19 ++++++++
 src/main.tsx                             |  8 +++-
 6 files changed, 150 insertions(+), 9 deletions(-)
 create mode 100644 src/lib/contexts/dbinit.context.tsx
 create mode 100644 src/lib/contexts/guide.context.tsx
 create mode 100644 src/lib/db.ts

diff --git a/src/App.tsx b/src/App.tsx
index aeaa96f..baa3960 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,13 +2,10 @@ import "./styles/reset.css";
 import "./styles/App.css";
 import { Outlet } from "react-router";
 import { Link } from "react-router";
+import { useGuides } from "./lib/contexts/guide.context";
 
 function App() {
-  const guides = [
-    { id: 1, title: "Guide 1" },
-    { id: 2, title: "Guide 2" },
-    { id: 3, title: "Guide 3" },
-  ];
+  const { guides } = useGuides();
 
   return (
     <>
@@ -18,7 +15,6 @@ function App() {
         </h1>
         <nav>
           <Link to="/new-guide">Create New Guide</Link>
-
           <ul>
             {guides.map((guide) => (
               <li key={guide.id}>
diff --git a/src/features/guides/hooks/useNewGuide.ts b/src/features/guides/hooks/useNewGuide.ts
index ed8daf2..e2456f2 100644
--- a/src/features/guides/hooks/useNewGuide.ts
+++ b/src/features/guides/hooks/useNewGuide.ts
@@ -4,8 +4,13 @@ import {
   type FrameType,
   type GuideType,
 } from "../../../lib/schemas";
+import { useIDB } from "../../../lib/contexts/dbinit.context";
+import { useGuides } from "../../../lib/contexts/guide.context";
 
 export default function useNewGuide() {
+  const { db } = useIDB();
+  const { setGuides } = useGuides();
+
   const [guide, setGuide] = useState<GuideType>({
     id: crypto.randomUUID(),
     title: "",
@@ -107,7 +112,7 @@ export default function useNewGuide() {
     );
   };
 
-  const handleSaveGuide = (e: React.SubmitEvent<HTMLFormElement>) => {
+  const handleSaveGuide = async (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     const compiledGuide: CompiledGuideType = {
@@ -120,7 +125,19 @@ export default function useNewGuide() {
       frames,
     };
 
-    console.log(compiledGuide);
+    if (!db) return;
+    await db.put("guides", compiledGuide);
+    setGuide({
+      id: crypto.randomUUID(),
+      title: "",
+      description: "",
+      createdAt: new Date(),
+      updatedAt: new Date(),
+      deletedAt: undefined,
+    });
+    setFrames([]);
+
+    setGuides((prev) => [compiledGuide, ...prev]);
   };
 
   return {
diff --git a/src/lib/contexts/dbinit.context.tsx b/src/lib/contexts/dbinit.context.tsx
new file mode 100644
index 0000000..80fa26f
--- /dev/null
+++ b/src/lib/contexts/dbinit.context.tsx
@@ -0,0 +1,55 @@
+// IDBContext.tsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
+} from "react";
+import { initDB, type AppDB } from "../db";
+
+interface IDBContextValue {
+  db: AppDB | null;
+  loading: boolean;
+  error: Error | null;
+}
+
+const IDBContext = createContext<IDBContextValue | undefined>(undefined);
+
+export function IDBProvider({ children }: { children: ReactNode }) {
+  const [db, setDb] = useState<AppDB | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    initDB()
+      .then((instance) => {
+        if (!cancelled) setDb(instance);
+      })
+      .catch((err) => {
+        if (!cancelled)
+          setError(err instanceof Error ? err : new Error(String(err)));
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return (
+    <IDBContext.Provider value={{ db, loading, error }}>
+      {children}
+    </IDBContext.Provider>
+  );
+}
+/* eslint-disable-next-line react-refresh/only-export-components */
+export function useIDB() {
+  const ctx = useContext(IDBContext);
+  if (!ctx) throw new Error("useIDB must be used within IDBProvider");
+  return ctx;
+}
diff --git a/src/lib/contexts/guide.context.tsx b/src/lib/contexts/guide.context.tsx
new file mode 100644
index 0000000..24f5c94
--- /dev/null
+++ b/src/lib/contexts/guide.context.tsx
@@ -0,0 +1,48 @@
+// GuideContext.tsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
+} from "react";
+import type { CompiledGuideType } from "../schemas";
+import { useIDB } from "./dbinit.context";
+
+interface GuideContextValue {
+  guides: CompiledGuideType[];
+  setGuides: React.Dispatch<React.SetStateAction<CompiledGuideType[]>>;
+}
+
+const GuideContext = createContext<GuideContextValue | undefined>(undefined);
+
+export function GuideProvider({ children }: { children: ReactNode }) {
+  const [guides, setGuides] = useState<CompiledGuideType[]>([]);
+  const { db } = useIDB();
+
+  useEffect(() => {
+    if (!db) return;
+    db.getAll("guides").then((fetchedGuides) => {
+      const sortedGuides = [...fetchedGuides].sort((a, b) => {
+        return (
+          new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+        );
+      });
+      setGuides(sortedGuides);
+    });
+  }, [db]);
+
+  return (
+    <GuideContext.Provider value={{ guides, setGuides }}>
+      {children}
+    </GuideContext.Provider>
+  );
+}
+/* eslint-disable-next-line react-refresh/only-export-components */
+export function useGuides() {
+  const ctx = useContext(GuideContext);
+  if (!ctx) {
+    throw new Error("useGuides must be used within a GuideProvider");
+  }
+  return ctx;
+}
diff --git a/src/lib/db.ts b/src/lib/db.ts
new file mode 100644
index 0000000..a61a2b2
--- /dev/null
+++ b/src/lib/db.ts
@@ -0,0 +1,19 @@
+import { openDB, type DBSchema, type IDBPDatabase } from "idb";
+import type { CompiledGuideType } from "./schemas";
+
+export interface MyDB extends DBSchema {
+  guides: {
+    key: string;
+    value: CompiledGuideType;
+  };
+}
+
+export type AppDB = IDBPDatabase<MyDB>;
+
+export function initDB(): Promise<AppDB> {
+  return openDB<MyDB>("my-guides", 1, {
+    upgrade(db) {
+      db.createObjectStore("guides", { keyPath: "id" });
+    },
+  });
+}
diff --git a/src/main.tsx b/src/main.tsx
index bf0b715..ff6fa88 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3,9 +3,15 @@ import { createRoot } from "react-dom/client";
 import { RouterProvider } from "react-router";
 import { router } from "./router.tsx";
 import "./styles/index.css";
+import { IDBProvider } from "./lib/contexts/dbinit.context.tsx";
+import { GuideProvider } from "./lib/contexts/guide.context.tsx"; // Fix import name
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <RouterProvider router={router} />
+    <IDBProvider>
+      <GuideProvider>
+        <RouterProvider router={router} />
+      </GuideProvider>
+    </IDBProvider>
   </StrictMode>,
 );