diff --git a/relog-web/package-lock.json b/relog-web/package-lock.json index 1128e7a..28c341e 100644 --- a/relog-web/package-lock.json +++ b/relog-web/package-lock.json @@ -12,6 +12,7 @@ "@testing-library/user-event": "^13.5.0", "d3": "^7.3.0", "dagre": "^0.8.5", + "idb": "^6.1.5", "react": "^17.0.2", "react-dom": "^17.0.2", "react-flow-renderer": "^9.7.4", diff --git a/relog-web/package.json b/relog-web/package.json index 529dbc2..2da3698 100644 --- a/relog-web/package.json +++ b/relog-web/package.json @@ -14,6 +14,7 @@ "@testing-library/user-event": "^13.5.0", "d3": "^7.3.0", "dagre": "^0.8.5", + "idb": "^6.1.5", "react": "^17.0.2", "react-dom": "^17.0.2", "react-flow-renderer": "^9.7.4", @@ -44,4 +45,4 @@ "last 1 safari version" ] } -} \ No newline at end of file +} diff --git a/relog-web/src/InputPage.js b/relog-web/src/InputPage.js index 1434206..44dbdcb 100644 --- a/relog-web/src/InputPage.js +++ b/relog-web/src/InputPage.js @@ -1,4 +1,5 @@ -import React, { useState, useRef } from "react"; +import React, { useState, useRef, useEffect } from "react"; +import { openDB, deleteDB, wrap, unwrap } from "idb"; import "./index.css"; import PipelineBlock from "./PipelineBlock"; @@ -56,18 +57,30 @@ const fixLists = (dict, blacklist, stringify) => { } }; +const openRelogDB = async () => { + const dbPromise = await openDB("RELOG", 1, { + upgrade(db) { + db.createObjectStore("casebuilder"); + }, + }); + return dbPromise; +}; + const InputPage = () => { const fileElem = useRef(); + let [data, setData] = useState(defaultData); - let savedData = JSON.parse(localStorage.getItem("data")); - if (!savedData) savedData = defaultData; - - let [data, setData] = useState(savedData); - - const save = (data) => { - localStorage.setItem("data", JSON.stringify(data)); + const save = async (data) => { + const db = await openRelogDB(); + await db.put("casebuilder", data, "data"); }; + useEffect(async () => { + const db = await openRelogDB(); + const data = await db.get("casebuilder", "data"); + if (data) setData(data); + }, []); + const promptName = (prevData) => { const name = prompt("Name"); if (!name || name.length === 0) return;