working idb example

src/app/page.tsx

@@ -1,38 +1,61 @@
 'use client'
 
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
+import { nanoid } from 'nanoid'
 import { Button } from '@/components/ui/button'
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
-import { nanoid } from 'nanoid'
+import { type CalendarEvent } from '@/lib/types'
 
-type Event = {
-  id: string
-  title: string
-  start: string
-  end?: string
-}
+import { addEvent, deleteEvent, getAllEvents, clearEvents } from '@/lib/db'
 
 export default function HomePage() {
-  const [events, setEvents] = useState<Event[]>([])
+  const [events, setEvents] = useState<CalendarEvent[]>([])
   const [open, setOpen] = useState(false)
   const [title, setTitle] = useState('')
   const [start, setStart] = useState('')
 
-  const addEvent = () => {
-    setEvents([...events, { id: nanoid(), title, start }])
+  // Load events only in the browser
+  useEffect(() => {
+    (async () => {
+      const stored = await getAllEvents()
+      setEvents(stored)
+    })()
+  }, [])
+
+  const handleAdd = async () => {
+    const newEvent = { id: nanoid(), title, start }
+    await addEvent(newEvent)
+    setEvents(prev => [...prev, newEvent])
     setTitle('')
     setStart('')
     setOpen(false)
   }
 
+  const handleDelete = async (id: string) => {
+    await deleteEvent(id)
+    setEvents(prev => prev.filter(e => e.id !== id))
+  }
+
+  const handleClearAll = async () => {
+    await clearEvents()
+    setEvents([])
+  }
+
   return (
     <div>
-      <Button onClick={() => setOpen(true)}>Add Event</Button>
+      <div className="flex gap-2">
+        <Button onClick={() => setOpen(true)}>Add Event</Button>
+        {events.length > 0 && <Button variant="destructive" onClick={handleClearAll}>Clear All</Button>}
+      </div>
+
       <ul className="mt-4 space-y-2">
         {events.map(ev => (
-          <li key={ev.id} className="border p-2 rounded bg-white shadow-sm">
-            <strong>{ev.title}</strong> — {ev.start}
+          <li key={ev.id} className="border p-2 rounded bg-white shadow-sm flex justify-between items-center">
+            <div>
+              <strong>{ev.title}</strong> — {ev.start}
+            </div>
+            <Button variant="secondary" size="sm" onClick={() => handleDelete(ev.id)}>Delete</Button>
           </li>
         ))}
       </ul>
@@ -45,7 +68,7 @@ export default function HomePage() {
           <Input placeholder="Title" value={title} onChange={e => setTitle(e.target.value)} />
           <Input type="date" value={start} onChange={e => setStart(e.target.value)} />
           <DialogFooter>
-            <Button onClick={addEvent}>Save</Button>
+            <Button onClick={handleAdd}>Save</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>

src/lib/db.ts

@@ -1,7 +1,55 @@
-import { openDB } from "idb";
+import { openDB, DBSchema, IDBPDatabase } from "idb";
+import { type CalendarEvent } from "./types";
 
-export const dbPromise = openDB("icalPWA", 1, {
-	upgrade(db) {
-		db.createObjectStore("events", { keyPath: "id" });
-	},
-});
+interface ICalDB extends DBSchema {
+	events: {
+		key: string;
+		value: CalendarEvent;
+	};
+}
+
+let dbPromise: Promise<IDBPDatabase<ICalDB>> | null = null;
+
+async function initDB() {
+	return openDB<ICalDB>("icalPWA", 1, {
+		upgrade(db) {
+			if (!db.objectStoreNames.contains("events")) {
+				db.createObjectStore("events", { keyPath: "id" });
+			}
+		},
+	});
+}
+
+// Get the database in a browser-safe way
+export async function getDB() {
+	if (typeof window === "undefined") return null;
+	if (!dbPromise) {
+		dbPromise = initDB();
+	}
+	return dbPromise;
+}
+
+// CRUD operations — all SSR-safe
+export async function getAllEvents() {
+	const db = await getDB();
+	if (!db) return [];
+	return db.getAll("events");
+}
+
+export async function addEvent(event: ICalDB["events"]["value"]) {
+	const db = await getDB();
+	if (!db) return;
+	return db.put("events", event);
+}
+
+export async function deleteEvent(id: string) {
+	const db = await getDB();
+	if (!db) return;
+	return db.delete("events", id);
+}
+
+export async function clearEvents() {
+	const db = await getDB();
+	if (!db) return;
+	return db.clear("events");
+}

src/lib/types.ts

@@ -0,0 +1,7 @@
+export type CalendarEvent = {
+	id: string;
+	title: string;
+	start: string; // ISO date string (YYYY-MM-DD)
+	end?: string;
+	description?: string;
+};