feat(use-indexed-db): added indexed db management hook

package.json

@@ -69,6 +69,7 @@
 		"@vitest/coverage-v8": "^3.0.4",
 		"commitlint": "^19.5.0",
 		"eslint": "^9.19.0",
+		"fake-indexeddb": "^6.0.0",
 		"husky": "^9.1.7",
 		"js-cookie": "^3.0.5",
 		"jsdom": "^26.0.0",

src/useIndexedDBValue/index.dom.test.ts

@@ -0,0 +1,212 @@
+import {act, renderHook} from '@testing-library/react-hooks/dom';
+import indexeddb from 'fake-indexeddb';
+import {afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, vi} from 'vitest';
+import {useIndexedDBValue} from '../useIndexedDBValue/index.js';
+
+const mockSuccess = vi.fn(() => {
+	console.log('done');
+});
+
+const mockError = vi.fn(() => {
+	console.log('error');
+});
+
+describe('useIndexedDBValue', () => {
+	const initialIndexedDB = globalThis.indexedDB;
+
+	beforeAll(() => {
+		vi.useFakeTimers();
+
+		vi.stubGlobal('indexedDB', indexeddb);
+	});
+
+	afterEach(() => {
+		vi.clearAllMocks();
+		vi.clearAllTimers();
+
+		indexeddb.deleteDatabase('users');
+	});
+
+	afterAll(() => {
+		vi.useRealTimers();
+
+		globalThis.indexedDB = initialIndexedDB;
+	});
+
+	it('should be defined', () => {
+		expect(useIndexedDBValue).toBeDefined();
+	});
+
+	it('should initialize', () => {
+		const {result} = renderHook(() =>
+			useIndexedDBValue({
+				name: 'test',
+				version: 1,
+				tables: ['users'],
+			}));
+
+		act(() => {
+			vi.advanceTimersByTime(1);
+		});
+
+		expect(result.current.isConnecting).toBe(false);
+		expect(result.current.isReady).toBe(true);
+	});
+
+	it('should return undefined if value does not exist', async () => {
+		const {result} = renderHook(() =>
+			useIndexedDBValue({
+				name: 'test',
+				version: 1,
+				tables: ['users'],
+			}));
+
+		act(() => {
+			vi.advanceTimersByTime(1);
+		});
+
+		let user;
+
+		result.current
+			.get('users', 1)
+			.then((response) => {
+				mockSuccess();
+				user = response;
+			})
+			.catch(mockError);
+
+		await act(async () => {
+			vi.advanceTimersByTime(1);
+		});
+
+		expect(mockError).not.toHaveBeenCalled();
+		expect(mockSuccess).toHaveBeenCalledTimes(1);
+		expect(user).toBe(undefined);
+	});
+
+	it('should put a new value with valid id', async () => {
+		const {result} = renderHook(() =>
+			useIndexedDBValue({
+				name: 'test',
+				version: 1,
+				tables: ['users'],
+			}));
+
+		act(() => {
+			vi.advanceTimersByTime(1);
+		});
+
+		let key;
+
+		result.current
+			.put('users', {name: 'John Doe'})
+			.then((response) => {
+				key = response;
+				mockSuccess();
+			})
+			.catch(mockError);
+
+		await act(async () => {
+			vi.advanceTimersByTime(1);
+		});
+
+		expect(mockError).not.toHaveBeenCalled();
+		expect(mockSuccess).toHaveBeenCalledTimes(1);
+		expect(key).toBeDefined();
+	});
+
+	it('should return valid value of existing entity', async () => {
+		const {result} = renderHook(() =>
+			useIndexedDBValue({
+				name: 'test',
+				version: 1,
+				tables: ['users'],
+			}));
+
+		act(() => {
+			vi.advanceTimersByTime(1);
+		});
+
+		let key;
+
+		result.current
+			.put('users', {name: 'John Doe'})
+			.then((response) => {
+				key = response;
+			})
+			.catch(() => {});
+
+		await act(async () => {
+			vi.advanceTimersByTime(1);
+		});
+
+		expect(key).toBeDefined();
+
+		let user;
+
+		result.current
+			.get('users', key! as number)
+			.then((response) => {
+				user = response;
+				mockSuccess();
+			})
+			.catch(mockError);
+
+		await act(async () => {
+			vi.advanceTimersByTime(1);
+		});
+
+		expect(mockError).not.toHaveBeenCalled();
+		expect(mockSuccess).toHaveBeenCalledTimes(1);
+		expect(user).toBeDefined();
+	});
+
+	it('should remove existing entity', async () => {
+		const {result} = renderHook(() =>
+			useIndexedDBValue({
+				name: 'test',
+				version: 1,
+				tables: ['users'] as const,
+			}));
+
+		act(() => {
+			vi.advanceTimersByTime(1);
+		});
+
+		let key;
+
+		result.current
+			.put('users', {name: 'John Doe'})
+			.then((response) => {
+				key = response;
+			})
+			.catch(() => {});
+
+		await act(async () => {
+			vi.advanceTimersByTime(1);
+		});
+
+		expect(key).toBeDefined();
+
+		let user;
+
+		result.current
+			.get('users', key! as number)
+			.then((response) => {
+				user = response;
+			})
+			.catch(() => {});
+
+		act(() => {
+			vi.advanceTimersByTime(1);
+		});
+
+		const removedKey = result.current.remove('users', key! as number);
+
+		act(() => {
+			vi.advanceTimersByTime(1);
+		});
+
+		expect(removedKey).toEqual(key);
+	});
+});

src/useIndexedDBValue/index.ts

@@ -0,0 +1,145 @@
+import {useRef, useState, useCallback, useEffect} from 'react';
+
+export type IndexedDBOptions<TTables extends readonly string[]> = {
+	/**
+	 * Name of database
+	 */
+	name: string;
+	/**
+	 * Version of database
+	 * @default 1
+	 */
+	version: number;
+	/**
+	 * Tables names list to be initialized
+	 * @example ['users'] as const
+	 */
+	tables: TTables;
+};
+
+/**
+ * Uses IndexedDB to create database, put, get and remove items like blobs, files or complex structures
+ * @param options Initial options to follow while creating database
+ * @returns
+ */
+export const useIndexedDBValue = <TTables extends readonly string[]>(
+	options: IndexedDBOptions<TTables>,
+) => {
+	const dbRef = useRef<IDBDatabase | null>(null);
+
+	const [isConnecting, setIsConnecting] = useState(false);
+	const [isReady, setIsReady] = useState(false);
+
+	const init = useCallback(() => {
+		setIsConnecting(true);
+
+		const request = indexedDB.open(options.name, options.version);
+
+		request.addEventListener('upgradeneeded', () => {
+			const db = request.result;
+
+			for (const table of options.tables) {
+				if (!db.objectStoreNames.contains(table)) {
+					db.createObjectStore(table, {keyPath: 'id', autoIncrement: true});
+				}
+			}
+		});
+
+		request.addEventListener('success', () => {
+			dbRef.current = request.result;
+
+			setIsConnecting(false);
+			setIsReady(true);
+		});
+
+		request.addEventListener('error', () => {
+			console.error('Failed to connect to IndexedDB', request.error);
+
+			setIsConnecting(false);
+			setIsReady(false);
+		});
+	}, [options.name, options.version, options.tables]);
+
+	const getTransaction = useCallback(
+		(tableName: TTables[number], mode: IDBTransactionMode) => {
+			if (!dbRef.current) {
+				throw new Error('IndexedDB is not connected or not initialized');
+			}
+
+			return dbRef.current.transaction(tableName, mode).objectStore(tableName);
+		},
+		[],
+	);
+
+	const put = useCallback(
+		<TValue extends Record<string, unknown>>(tableName: TTables[number], value: TValue) =>
+			new Promise<IDBValidKey | null>((resolve, reject) => {
+				try {
+					const store = getTransaction(tableName, 'readwrite');
+					const request = store.put(value);
+
+					request.addEventListener('success', () => {
+						resolve(request.result);
+					});
+
+					request.addEventListener('error', () => {
+						reject(request.error as Error);
+					});
+				} catch (error) {
+					reject(error as Error);
+				}
+			}),
+		[getTransaction],
+	);
+
+	const get = useCallback(
+		<TValue>(tableName: TTables[number], id: number) =>
+			new Promise<TValue>((resolve, reject) => {
+				try {
+					const store = getTransaction(tableName, 'readonly');
+					const request = store.get(id);
+
+					request.addEventListener('success', () => {
+						resolve(request.result as TValue);
+					});
+
+					request.addEventListener('error', () => {
+						reject(request.error as Error);
+					});
+				} catch (error) {
+					reject(error as Error);
+				}
+			}),
+		[getTransaction],
+	);
+
+	const remove = useCallback(
+		(tableName: TTables[number], id: number) => {
+			try {
+				const store = getTransaction(tableName, 'readwrite');
+				store.delete(id);
+
+				return id;
+			} catch (error) {
+				console.error('Failed to delete value from IndexedDB', error);
+
+				return null;
+			}
+		},
+		[getTransaction],
+	);
+
+	useEffect(() => {
+		if (!dbRef.current) {
+			init();
+		}
+	}, [init]);
+
+	return {
+		isConnecting,
+		isReady,
+		put,
+		get,
+		remove,
+	};
+};