DBlobs: reactive live hooks

package-lock.json

@@ -31,6 +31,7 @@
         "browser-fs-access": "^0.35.0",
         "cheerio": "^1.0.0-rc.12",
         "dexie": "^4.0.7",
+        "dexie-react-hooks": "^1.1.7",
         "eventsource-parser": "^1.1.2",
         "idb-keyval": "^6.2.1",
         "next": "~14.2.3",
@@ -3278,6 +3279,16 @@
       "resolved": "https://registry.npmjs.org/dexie/-/dexie-4.0.7.tgz",
       "integrity": "sha512-M+Lo6rk4pekIfrc2T0o2tvVJwL6EAAM/B78DNfb8aaxFVoI1f8/rz5KTxuAnApkwqTSuxx7T5t0RKH7qprapGg=="
     },
+    "node_modules/dexie-react-hooks": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/dexie-react-hooks/-/dexie-react-hooks-1.1.7.tgz",
+      "integrity": "sha512-Lwv5W0Hk+uOW3kGnsU9GZoR1er1B7WQ5DSdonoNG+focTNeJbHW6vi6nBoX534VKI3/uwHebYzSw1fwY6a7mTw==",
+      "peerDependencies": {
+        "@types/react": ">=16",
+        "dexie": "^3.2 || ^4.0.1-alpha",
+        "react": ">=16"
+      }
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",

package.json

@@ -40,6 +40,7 @@
     "browser-fs-access": "^0.35.0",
     "cheerio": "^1.0.0-rc.12",
     "dexie": "^4.0.7",
+    "dexie-react-hooks": "^1.1.7",
     "eventsource-parser": "^1.1.2",
     "idb-keyval": "^6.2.1",
     "next": "~14.2.3",

src/modules/dblobs/dblobs.hooks.ts

@@ -0,0 +1,35 @@
+import { useLiveQuery } from 'dexie-react-hooks';
+
+import type { DBlobDBItem, DBlobItem } from './dblobs.types';
+import { addDBlobItem, deleteDBlobItem, getDBlobItemsByType, getItemById, updateDBlobItem } from './dblobs.db';
+
+
+export function useDBlobItems<T extends DBlobItem>(type: T['type']): [T[] | undefined, (item: T, cId: DBlobDBItem['cId'], sId: DBlobDBItem['sId']) => Promise<void>, (id: string) => Promise<void>] {
+  const items = useLiveQuery(() => getDBlobItemsByType<T>(type));
+
+  const addDBlobItemHandler = async (item: T, cId: DBlobDBItem['cId'], sId: DBlobDBItem['sId']) => {
+    await addDBlobItem(item, cId, sId);
+  };
+
+  const deleteDBlobItemHandler = async (id: string) => {
+    await deleteDBlobItem(id);
+  };
+
+  return [items, addDBlobItemHandler, deleteDBlobItemHandler];
+}
+
+
+export function useDBlobItem<T extends DBlobItem>(id: string): [T | undefined, (updates: Partial<T>) => Promise<void>] {
+  const item = useLiveQuery(() => getItemById<T>(id));
+
+  const updateDBlobItemHandler = async (updates: Partial<T>) => {
+    await updateDBlobItem(id, updates);
+  };
+
+  return [item, updateDBlobItemHandler];
+}
+
+// example custom
+// export function useHighResImages(): DBlobImageItem[] | undefined {
+//   return useLiveQuery(() => getHighResImages());
+// }