This file contains a custom hook for interacting with IndexedDB, a low-level API for client-side storage of significant amounts of structured data.

useIndexedDB.js

/**
 * File: useIndexedDB.js
 * 
 * This file contains a custom hook for interacting with IndexedDB, a low-level API for client-side storage of significant amounts of structured data.
 * 
 * The hook takes three parameters:
 * 1. `databaseName`: The name of the IndexedDB database you want to interact with.
 * 2. `storeName`: The name of the object store in the database.
 * 3. `key`: The key of the value you want to read or write in the object store.
 * 
 * The hook returns an array with two elements:
 * 1. `value`: The current value from IndexedDB for the provided key.
 * 2. `setValue`: A function that allows you to set a new value for the provided key in IndexedDB.
 * 
 * Example usage: 
 * 
 * ```javascript
 * const [count, setCount] = useIndexedDB("myDatabase", "myObjectStore", "count");
 * ```
 * 
 * In this example, `count` is the current value for the key "count" in the object store "myObjectStore" in the database "myDatabase". 
 * `setCount` is a function that can be used to update the value of "count" in IndexedDB.
 * 
 * Credit: https://blog.bitsrc.io/different-ways-to-store-data-in-browser-706a2afb4e58
 */
import { useState, useEffect } from "react";

function useIndexedDB(databaseName, storeName, key) {
  const [value, setValue] = useState(null);

  useEffect(() => {
    const request = window.indexedDB.open(databaseName);

    request.onerror = function(event) {
      console.error("Error opening IndexedDB database");
    };

    request.onupgradeneeded = function(event) {
      const db = event.target.result;
      db.createObjectStore(storeName);
    };

    request.onsuccess = function(event) {
      const db = event.target.result;
      const transaction = db.transaction(storeName, "readonly");
      const objectStore = transaction.objectStore(storeName);
      const request = objectStore.get(key);
      request.onerror = function(event) {
        console.error("Error getting value from IndexedDB");
      };
      request.onsuccess = function(event) {
        setValue(event.target.result);
      };
    };
  }, [databaseName, storeName, key]);

  function setValueToIndexedDB(newValue) {
    const request = window.indexedDB.open(databaseName);
    request.onerror = function(event) {
      console.error("Error opening IndexedDB database");
    };

    request.onsuccess = function(event) {
      const db = event.target.result;
      const transaction = db.transaction(storeName, "readwrite");
      const objectStore = transaction.objectStore(storeName);
      const request = objectStore.put(newValue, key);
      request.onerror = function(event) {
        console.error("Error saving value to IndexedDB");
      };
      request.onsuccess = function(event) {
        setValue(newValue);
      };
    };
  }

  return [value, setValueToIndexedDB];
}

export default useIndexedDB;