Add indexedDB to sttore encode images

src/components/SegmentAM.js

@@ -14,6 +14,8 @@ import {
   features2olFeatures,
 } from "../utils/featureCollection";
 import { downloadGeojsonFile, getMaxIdPerClass } from "../utils/utils";
+import { openDB, addData, getAllData } from "./../store/indexedDB";
+
 export const SegmentAM = ({ setLoading }) => {
   const {
     pointsSelector,
@@ -33,21 +35,48 @@ export const SegmentAM = ({ setLoading }) => {
     setSamApiStatus(null);
   };
 
+  useEffect(() => {
+    console.log("read db");
+    const fetchData = async () => {
+      try {
+        const db = await openDB();
+        const listEncodeItems = await getAllData(db);
+        dispatchEncodeItems({
+          type: "CACHING_ENCODED",
+          payload: listEncodeItems,
+        });
+      } catch (error) {
+        console.log(error);
+      }
+    };
+    fetchData();
+  }, []);
+
+  const handleSaveData = async (data) => {
+    try {
+      const db = await openDB();
+      await addData(db, data);
+    } catch (error) {
+      console.error("Failed to save data:", error);
+    }
+  };
+
   const requestSAM = async (requestProps, isEncode) => {
     setLoading(true);
     //=================== Need encode ===================
     if (isEncode) {
       try {
         const canvas = await getCanvasForLayer(map, "main_layer");
         const base64 = canvas.split(";base64,")[1];
-        requestProps.base64 = base64;
         const encodeRespJson = await getEncode(base64);
         requestProps.image_embeddings = encodeRespJson.image_embedding;
         const encodeItem = Object.assign({}, requestProps, { canvas });
         dispatchEncodeItems({
           type: "CACHING_ENCODED",
           payload: [...encodeItems, encodeItem],
         });
+        // Save in indexedDB
+        handleSaveData({ ...encodeItem, id: encodeItems.length });
       } catch (error) {
         console.log(error);
         reset();

src/store/indexedDB.js

@@ -0,0 +1,52 @@
+export const openDB = () => {
+  return new Promise((resolve, reject) => {
+    const request = window.indexedDB.open("dsAnnotateDB", 1);
+    request.onerror = (event) => {
+      reject(event.target.error);
+    };
+    request.onsuccess = (event) => {
+      const db = event.target.result;
+      resolve(db);
+    };
+    request.onupgradeneeded = (event) => {
+      const db = event.target.result;
+      if (!db.objectStoreNames.contains("encodeiItems")) {
+        const objectStore = db.createObjectStore("encodeiItems", {
+          keyPath: "id",
+        });
+        objectStore.createIndex("idIndex", "id", { unique: false });
+      }
+    };
+  });
+};
+
+export const addData = (db, data) => {
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction(["encodeiItems"], "readwrite");
+    const objectStore = transaction.objectStore("encodeiItems");
+    const addRequest = objectStore.add(data);
+    addRequest.onsuccess = (event) => {
+      resolve();
+    };
+    addRequest.onerror = (event) => {
+      reject(event.target.error);
+    };
+  });
+};
+
+export const getAllData = (db) => {
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction(["encodeiItems"]);
+    const objectStore = transaction.objectStore("encodeiItems");
+    const getAllRequest = objectStore.getAll();
+    getAllRequest.onsuccess = (event) => {
+      console.log(event);
+      const result = event.target.result;
+      resolve(result);
+    };
+    getAllRequest.onerror = (event) => {
+      console.log(event);
+      reject(event.target.error);
+    };
+  });
+};