impr: store custom text in indexedDB (@fehmer)

Author: fehmer

frontend/package.json

@@ -99,6 +99,7 @@
     "hangul-js": "0.2.6",
     "howler": "2.2.3",
     "html2canvas": "1.4.1",
+    "idb": "8.0.3",
     "jquery": "3.7.1",
     "jquery-color": "2.2.0",
     "jquery.easing": "1.4.1",

frontend/src/ts/modals/save-custom-text.ts

@@ -32,7 +32,7 @@ function hide(): void {
   void modal.hide();
 }
 
-function save(): boolean {
+async function save(): Promise<boolean> {
   const name = $("#saveCustomTextModal .textName").val() as string;
   const checkbox = $("#saveCustomTextModal .isLongText").prop(
     "checked"
@@ -48,7 +48,11 @@ function save(): boolean {
     return false;
   }
 
-  const saved = CustomText.setCustomText(name, state.textToSave, checkbox);
+  const saved = await CustomText.setCustomText(
+    name,
+    state.textToSave,
+    checkbox
+  );
   if (saved) {
     CustomTextState.setCustomTextName(name, checkbox);
     Notifications.add("Custom text saved", 1);
@@ -98,9 +102,9 @@ async function setup(modalEl: HTMLElement): Promise<void> {
       level: 0,
     },
   });
-  modalEl.addEventListener("submit", (e) => {
+  modalEl.addEventListener("submit", async (e) => {
     e.preventDefault();
-    if (save()) hide();
+    if (await save()) hide();
   });
   modalEl.querySelector(".textName")?.addEventListener("input", (e) => {
     const val = (e.target as HTMLInputElement).value;

frontend/src/ts/modals/saved-texts.ts

@@ -91,19 +91,19 @@ async function fill(): Promise<void> {
     }
   );
 
-  $("#savedTextsModal .list .savedText .button.name").on("click", (e) => {
+  $("#savedTextsModal .list .savedText .button.name").on("click", async (e) => {
     const name = $(e.target).text();
     CustomTextState.setCustomTextName(name, false);
-    const text = getSavedText(name, false);
+    const text = await getSavedText(name, false);
     hide({ modalChainData: { text, long: false } });
   });
 
   $("#savedTextsModal .listLong .savedLongText .button.name").on(
     "click",
-    (e) => {
+    async (e) => {
       const name = $(e.target).text();
       CustomTextState.setCustomTextName(name, true);
-      const text = getSavedText(name, true);
+      const text = await getSavedText(name, true);
       hide({ modalChainData: { text, long: true } });
     }
   );
@@ -124,8 +124,8 @@ function hide(hideOptions?: HideOptions<OutgoingData>): void {
   });
 }
 
-function getSavedText(name: string, long: boolean): string {
-  let text = CustomText.getCustomText(name, long);
+async function getSavedText(name: string, long: boolean): Promise<string> {
+  let text = await CustomText.getCustomText(name, long);
   if (long) {
     text = text.slice(CustomText.getCustomTextLongProgress(name));
   }

frontend/src/ts/modals/simple-modals.ts

@@ -1074,7 +1074,7 @@ list.resetProgressCustomTextLong = new SimpleModal({
   buttonText: "reset",
   execFn: async (_thisPopup): Promise<ExecReturn> => {
     CustomText.setCustomTextLongProgress(_thisPopup.parameters[0] as string, 0);
-    const text = CustomText.getCustomText(
+    const text = await CustomText.getCustomText(
       _thisPopup.parameters[0] as string,
       true
     );

frontend/src/ts/test/custom-text.ts

@@ -6,10 +6,27 @@ import { LocalStorageWithSchema } from "../utils/local-storage-with-schema";
 import { z } from "zod";
 import { CompletedEventCustomTextSchema } from "@monkeytype/contracts/schemas/results";
 import { deepClone } from "../utils/misc";
+import { DBSchema, IDBPDatabase, openDB } from "idb";
 
+type CustomTextDB = DBSchema & {
+  customTexts: {
+    key: string;
+    value: {
+      text: string;
+    };
+  };
+  customLongTexts: {
+    key: string;
+    value: {
+      text: string;
+      progress: number;
+    };
+  };
+};
+
+//Legacy storage
 const CustomTextObjectSchema = z.record(z.string(), z.string());
 type CustomTextObject = z.infer<typeof CustomTextObjectSchema>;
-
 const CustomTextLongObjectSchema = z.record(
   z.string(),
   z.object({ text: z.string(), progress: z.number() })
@@ -21,13 +38,53 @@ const customTextLS = new LocalStorageWithSchema({
   schema: CustomTextObjectSchema,
   fallback: {},
 });
+
 //todo maybe add migrations here?
 const customTextLongLS = new LocalStorageWithSchema({
   key: "customTextLong",
   schema: CustomTextLongObjectSchema,
   fallback: {},
 });
 
+export async function getDB(): Promise<IDBPDatabase<CustomTextDB>> {
+  return await openDB<CustomTextDB>("customTexts", 1, {
+    async upgrade(db, oldVersion, _newVersion, tx, _event) {
+      if (oldVersion === 0) {
+        console.debug("Initialize indexedDB for customTexts from localStorage");
+
+        //create objectStores
+        await db.createObjectStore("customTexts");
+        await db.createObjectStore("customLongTexts");
+
+        const ctStore = tx.objectStore("customTexts");
+        const longCtStore = tx.objectStore("customLongTexts");
+
+        //copy from old localStorage
+        await Promise.all([
+          ...Object.entries(customTextLS.get()).map(async ([key, value]) =>
+            ctStore.add({ text: value }, key)
+          ),
+          ...Object.entries(customTextLongLS.get()).map(async ([key, value]) =>
+            longCtStore.add({ text: value.text, progress: value.progress }, key)
+          ),
+          tx.done,
+        ]);
+
+        console.debug("Remove localStorage after migration");
+        //TODO:
+        //customTextLS.destroy();
+        //customTextLongLS.destroy();
+      }
+    },
+  });
+}
+
+window.globalThis["db"] = {
+  get: getDB,
+  getText: getCustomText,
+  setText: setCustomText,
+};
+
 export const CustomTextSettingsSchema = CompletedEventCustomTextSchema.omit({
   textLen: true,
 }).extend({
@@ -140,56 +197,38 @@ export function getData(): CustomTextSettings {
   return customTextSettings.get();
 }
 
-export function getCustomText(name: string, long = false): string[] {
-  if (long) {
-    const customTextLong = getLocalStorageLong();
-    const customText = customTextLong[name];
-    if (customText === undefined)
-      throw new Error(`Custom text ${name} not found`);
-    return customText.text.split(/ +/);
-  } else {
-    const customText = getLocalStorage()[name];
-    if (customText === undefined)
-      throw new Error(`Custom text ${name} not found`);
-    return customText.split(/ +/);
-  }
+export async function getCustomText(
+  name: string,
+  long = false
+): Promise<string[]> {
+  const db = await getDB();
+  const customText = await db.get(
+    long ? "customLongTexts" : "customTexts",
+    name
+  );
+  if (customText === undefined)
+    throw new Error(`Custom text ${name} not found`);
+
+  return customText.text.split(/ +/);
 }
 
-export function setCustomText(
+export async function setCustomText(
   name: string,
   text: string | string[],
   long = false
-): boolean {
-  if (long) {
-    const customText = getLocalStorageLong();
-
-    customText[name] = {
-      text: "",
-      progress: 0,
-    };
-
-    const textByName = customText[name];
-    if (textByName === undefined) {
-      throw new Error("Custom text not found");
-    }
-
-    if (typeof text === "string") {
-      textByName.text = text;
+): Promise<boolean> {
+  const db = await getDB();
+  const textToStore = typeof text === "string" ? text : text.join(" ");
+  try {
+    if (long) {
+      await db.put("customLongTexts", { text: textToStore, progress: 0 }, name);
     } else {
-      textByName.text = text.join(" ");
+      await db.put("customTexts", { text: textToStore }, name);
     }
-
-    return setLocalStorageLong(customText);
-  } else {
-    const customText = getLocalStorage();
-
-    if (typeof text === "string") {
-      customText[name] = text;
-    } else {
-      customText[name] = text.join(" ");
-    }
-
-    return setLocalStorage(customText);
+    return true;
+  } catch (e) {
+    console.debug("Storing to indexedDb failed: ", e);
+    return false;
   }
 }
 

frontend/src/ts/test/test-logic.ts

@@ -1083,13 +1083,13 @@ export async function finish(difficultyFailed = false): Promise<void> {
         important: true,
       });
 
-      let newText = CustomText.getCustomText(customTextName, true);
+      let newText = await CustomText.getCustomText(customTextName, true);
       newText = newText.slice(newProgress);
       CustomText.setText(newText);
     } else {
       // They finished the test
       CustomText.setCustomTextLongProgress(customTextName, 0);
-      const text = CustomText.getCustomText(customTextName, true);
+      const text = await CustomText.getCustomText(customTextName, true);
       CustomText.setText(text);
       Notifications.add("Long custom text completed", 1, {
         duration: 5,

frontend/src/ts/utils/local-storage-with-schema.ts

@@ -118,4 +118,8 @@ export class LocalStorageWithSchema<T> {
       return false;
     }
   }
+
+  public destroy(): void {
+    window.localStorage.removeItem(this.key);
+  }
 }