impr: store custom text in indexedDB (@fehmer)

frontend/__tests__/utils/url-handler.spec.ts

@@ -3,7 +3,7 @@ import { Difficulty, Mode, Mode2 } from "@monkeytype/contracts/schemas/shared";
 import { compressToURI } from "lz-ts";
 import * as UpdateConfig from "../../src/ts/config";
 import * as Notifications from "../../src/ts/elements/notifications";
-import { CustomTextSettings } from "../../src/ts/test/custom-text";
+import * as CustomText from "../../src/ts/test/custom-text";
 import * as TestLogic from "../../src/ts/test/test-logic";
 import * as TestState from "../../src/ts/test/test-state";
 import * as Misc from "../../src/ts/utils/misc";
@@ -33,6 +33,8 @@ describe("url-handler", () => {
     const restartTestMock = vi.spyOn(TestLogic, "restart");
     const addNotificationMock = vi.spyOn(Notifications, "add");
 
+    const setCustomTextMock = vi.spyOn(CustomText, "setText");
+
     beforeEach(() => {
       [
         findGetParameterMock,
@@ -48,6 +50,7 @@ describe("url-handler", () => {
         setFunboxMock,
         restartTestMock,
         addNotificationMock,
+        setCustomTextMock,
       ].forEach((it) => it.mockReset());
 
       findGetParameterMock.mockImplementation((override) => override);
@@ -262,7 +265,7 @@ const urlData = (
   data: Partial<{
     mode: Mode | undefined;
     mode2: Mode2<any> | number;
-    customText: CustomTextSettings;
+    customText: CustomText.CustomTextSettings;
     punctuation: boolean;
     numbers: boolean;
     language: string;

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);
@@ -59,7 +63,7 @@ function save(): boolean {
   }
 }
 
-function updateIndicatorAndButton(): void {
+async function updateIndicatorAndButton(): Promise<void> {
   const val = $("#saveCustomTextModal .textName").val() as string;
   const checkbox = $("#saveCustomTextModal .isLongText").prop(
     "checked"
@@ -69,7 +73,7 @@ function updateIndicatorAndButton(): void {
     indicator?.hide();
     $("#saveCustomTextModal button.save").prop("disabled", true);
   } else {
-    const names = CustomText.getCustomTextNames(checkbox);
+    const names = await CustomText.getCustomTextNames(checkbox);
     if (names.includes(val)) {
       indicator?.show("unavailable");
       $("#saveCustomTextModal button.save").prop("disabled", true);
@@ -98,22 +102,22 @@ 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) => {
+  modalEl.querySelector(".textName")?.addEventListener("input", async (e) => {
     const val = (e.target as HTMLInputElement).value;
     if (val.length > 0) {
       indicator?.show("loading");
-      updateInputAndButtonDebounced();
+      await updateInputAndButtonDebounced();
     }
   });
-  modalEl.querySelector(".isLongText")?.addEventListener("input", (e) => {
+  modalEl.querySelector(".isLongText")?.addEventListener("input", async (e) => {
     const val = (e.target as HTMLInputElement).value;
     if (val.length > 0) {
       indicator?.show("loading");
-      updateInputAndButtonDebounced();
+      await updateInputAndButtonDebounced();
     }
   });
 }

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

@@ -9,7 +9,7 @@ import { showPopup } from "./simple-modals";
 import * as Notifications from "../elements/notifications";
 
 async function fill(): Promise<void> {
-  const names = CustomText.getCustomTextNames();
+  const names = await CustomText.getCustomTextNames();
   const listEl = $(`#savedTextsModal .list`).empty();
   let list = "";
   if (names.length === 0) {
@@ -26,7 +26,7 @@ async function fill(): Promise<void> {
   }
   listEl.html(list);
 
-  const longNames = CustomText.getCustomTextNames(true);
+  const longNames = await CustomText.getCustomTextNames(true);
   const longListEl = $(`#savedTextsModal .listLong`).empty();
   let longList = "";
   if (longNames.length === 0) {
@@ -36,7 +36,9 @@ async function fill(): Promise<void> {
       longList += `<div class="savedLongText" data-name="${escapeHTML(name)}">
       <div class="button name">${escapeHTML(name)}</div>
       <div class="button ${
-        CustomText.getCustomTextLongProgress(name) <= 0 ? "disabled" : ""
+        (await CustomText.getCustomTextLongProgress(name)) <= 0
+          ? "disabled"
+          : ""
       } resetProgress">reset</div>
       <div class="button delete">
       <i class="fas fa-fw fa-trash"></i>
@@ -91,19 +93,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,10 +126,10 @@ 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));
+    text = text.slice(await CustomText.getCustomTextLongProgress(name));
   }
   return text.join(" ");
 }

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

@@ -1035,7 +1035,10 @@ list.deleteCustomText = new SimpleModal({
   text: "Are you sure?",
   buttonText: "delete",
   execFn: async (_thisPopup): Promise<ExecReturn> => {
-    CustomText.deleteCustomText(_thisPopup.parameters[0] as string, false);
+    await CustomText.deleteCustomText(
+      _thisPopup.parameters[0] as string,
+      false
+    );
     CustomTextState.setCustomTextName("", undefined);
 
     return {
@@ -1054,7 +1057,7 @@ list.deleteCustomTextLong = new SimpleModal({
   text: "Are you sure?",
   buttonText: "delete",
   execFn: async (_thisPopup): Promise<ExecReturn> => {
-    CustomText.deleteCustomText(_thisPopup.parameters[0] as string, true);
+    await CustomText.deleteCustomText(_thisPopup.parameters[0] as string, true);
     CustomTextState.setCustomTextName("", undefined);
 
     return {
@@ -1073,8 +1076,11 @@ list.resetProgressCustomTextLong = new SimpleModal({
   text: "Are you sure?",
   buttonText: "reset",
   execFn: async (_thisPopup): Promise<ExecReturn> => {
-    CustomText.setCustomTextLongProgress(_thisPopup.parameters[0] as string, 0);
-    const text = CustomText.getCustomText(
+    await CustomText.setCustomTextLongProgress(
+      _thisPopup.parameters[0] as string,
+      0
+    );
+    const text = await CustomText.getCustomText(
       _thisPopup.parameters[0] as string,
       true
     );

frontend/src/ts/ready.ts

@@ -8,6 +8,7 @@ import Konami from "konami";
 import * as ServerConfiguration from "./ape/server-configuration";
 import { getActiveFunboxesWithFunction } from "./test/funbox/list";
 import { loadPromise } from "./config";
+import { initCurrentText } from "./test/custom-text";
 
 $(async (): Promise<void> => {
   await loadPromise;
@@ -67,4 +68,6 @@ $(async (): Promise<void> => {
       });
     }
   }
+
+  await initCurrentText();
 });