[WORK IN PROGRESS] Options page

Author: miorel

workspaces/leetcode-zen-mode/src/extension/content-script-isolated/main.ts

@@ -1,6 +1,8 @@
 import { getChrome } from "@code-chronicles/util/browser-extensions/chrome/getChrome";
 
-import { SETTINGS_ATTRIBUTE, SETTINGS_STORAGE_KEY } from "../constants.ts";
+import { PUBLIC_SETTINGS_STORAGE_KEY } from "../shared/public-settings/constants.ts";
+import { publicSettingsZodType } from "../shared/public-settings/publicSettingsZodType.ts";
+import { writePublicSettingsToDocumentAttribute } from "../shared/public-settings/writePublicSettingsToDocumentAttribute.ts";
 
 /**
  * Entry point for the extension content script that will run in an isolated
@@ -18,10 +20,15 @@ async function main(): Promise<void> {
     return;
   }
 
-  const settings = await chrome.storage.sync.get(SETTINGS_STORAGE_KEY);
-  document.documentElement.setAttribute(
-    SETTINGS_ATTRIBUTE,
-    JSON.stringify(settings[SETTINGS_STORAGE_KEY]),
+  const unsafePublicSettings: unknown = (
+    await chrome.storage.sync.get(PUBLIC_SETTINGS_STORAGE_KEY)
+  )[PUBLIC_SETTINGS_STORAGE_KEY];
+  if (unsafePublicSettings == null) {
+    return;
+  }
+
+  writePublicSettingsToDocumentAttribute(
+    publicSettingsZodType.parse(unsafePublicSettings),
   );
 }
 

workspaces/leetcode-zen-mode/src/extension/content-script-non-isolated/isArrayOfDataByDifficulty.ts

@@ -1,10 +1,13 @@
 import { isNonArrayObject } from "@code-chronicles/util/isNonArrayObject";
-import { isString } from "@code-chronicles/util/isString";
+
+import { difficultyZodType, type Difficulty } from "../problemDifficulties.ts";
 
 export function isArrayOfDataByDifficulty(
   arr: unknown[],
-): arr is ({ difficulty: string } & Record<string, unknown>)[] {
+): arr is ({ difficulty: Difficulty } & Record<string, unknown>)[] {
   return arr.every(
-    (elem) => isNonArrayObject(elem) && isString(elem.difficulty),
+    (elem) =>
+      isNonArrayObject(elem) &&
+      difficultyZodType.safeParse(elem.difficulty).success,
   );
 }

workspaces/leetcode-zen-mode/src/extension/content-script-non-isolated/patchJsxFactory.ts

@@ -3,6 +3,8 @@ import { isString } from "@code-chronicles/util/isString";
 import { assignFunctionCosmeticProperties } from "@code-chronicles/util/object-properties/assignFunctionCosmeticProperties";
 import { NullReactElement } from "@code-chronicles/util/browser-extensions/NullReactElement";
 
+import { difficultyZodType } from "../problemDifficulties.ts";
+
 type CreateElementFn = (
   this: unknown,
   elementType: unknown,
@@ -23,7 +25,7 @@ export function patchJsxFactory<T extends CreateElementFn>(
           Array.isArray(props.items) &&
           props.items.some(
             (it: Record<string, unknown>) =>
-              isString(it.value) && /^easy$/i.test(it.value),
+              difficultyZodType.safeParse(it.value).success,
           )
         ) {
           return createElementFn.apply(this, [NullReactElement, {}]);

workspaces/leetcode-zen-mode/src/extension/content-script-non-isolated/rewriteLeetCodeAggregateDataForDifficulty.ts

@@ -83,6 +83,7 @@ export function rewriteLeetCodeAggregateDataForDifficulty(
         if (isArrayOfNumbers(values)) {
           const total = sum(values);
 
+          // TODO: weighted average
           if (key === "percentage") {
             return total / (values.length || 1);
           }

workspaces/leetcode-zen-mode/src/extension/content-script-non-isolated/rewriteLeetCodeGraphQLData.ts

@@ -3,25 +3,16 @@ import { isString } from "@code-chronicles/util/isString";
 import { mapObjectValues } from "@code-chronicles/util/mapObjectValues";
 import { stringToCase } from "@code-chronicles/util/stringToCase";
 
-import { SETTINGS_ATTRIBUTE } from "../constants.ts";
 import { rewriteLeetCodeAggregateDataForDifficulty } from "./rewriteLeetCodeAggregateDataForDifficulty.ts";
 import { PREFERRED_STRING_CASE, STRING_CASE_CHECKERS } from "./stringCase.ts";
-import type { Difficulty } from "../usePreferredDifficulty.ts";
-
-let preferredDifficulty: Difficulty | null = null;
-function getPreferredDifficulty(prevJsonParse: typeof JSON.parse): Difficulty {
-  if (preferredDifficulty == null) {
-    try {
-      preferredDifficulty = (prevJsonParse(
-        String(document.documentElement.getAttribute(SETTINGS_ATTRIBUTE)),
-      ) ?? "Easy") as Difficulty;
-    } catch (err) {
-      console.error(err);
-      preferredDifficulty = "Easy";
-    }
-  }
-
-  return preferredDifficulty;
+import { difficultyZodType } from "../problemDifficulties.ts";
+import type { PublicSettings } from "../shared/public-settings/publicSettingsZodType.ts";
+import { readPublicSettingsFromDocumentAttribute } from "../shared/public-settings/readPublicSettingsFromDocumentAttribute.ts";
+
+let publicSettings: PublicSettings | null = null;
+function getPublicSettings(prevJsonParse: typeof JSON.parse): PublicSettings {
+  return (publicSettings ??=
+    readPublicSettingsFromDocumentAttribute(prevJsonParse));
 }
 
 export function rewriteLeetCodeGraphQLData(
@@ -46,11 +37,12 @@ export function rewriteLeetCodeGraphQLData(
   }
 
   // Rewrite difficulty strings!
-  if (isString(value) && /^(?:easy|medium|hard)$/i.test(value)) {
+  if (isString(value) && difficultyZodType.safeParse(value).success) {
     const stringCase =
       STRING_CASE_CHECKERS.find(([, checker]) => checker(value))?.[0] ??
       PREFERRED_STRING_CASE;
-    return stringToCase(getPreferredDifficulty(prevJsonParse), stringCase);
+    const { preferredDifficulty } = getPublicSettings(prevJsonParse);
+    return stringToCase(preferredDifficulty, stringCase);
   }
 
   // Pass everything else through unchanged.

workspaces/leetcode-zen-mode/src/extension/options-ui/components/App.tsx

@@ -1,10 +1,7 @@
 import React from "react";
 
-import {
-  usePreferredDifficulty,
-  DIFFICULTIES,
-  type Difficulty,
-} from "../../usePreferredDifficulty.ts";
+import { usePreferredDifficulty } from "../../usePreferredDifficulty.ts";
+import { DIFFICULTIES, difficultyZodType } from "../../problemDifficulties.ts";
 
 function Options() {
   const [preferredDifficulty, setPreferredDifficulty] =
@@ -17,7 +14,7 @@ function Options() {
         <select
           value={preferredDifficulty}
           onChange={(ev) =>
-            setPreferredDifficulty(ev.target.value as Difficulty)
+            setPreferredDifficulty(difficultyZodType.parse(ev.target.value))
           }
         >
           {DIFFICULTIES.map((difficultyOption) => (

workspaces/leetcode-zen-mode/src/extension/problemDifficulties.ts

@@ -0,0 +1,12 @@
+import nullthrows from "nullthrows";
+import { z } from "zod";
+
+export const DIFFICULTIES = ["Easy", "Medium", "Hard"] as const;
+
+export const difficultyZodType = z
+  .string()
+  .transform((s) =>
+    nullthrows(DIFFICULTIES.find((d) => d.toLowerCase() === s.toLowerCase())),
+  );
+
+export type Difficulty = z.infer<typeof difficultyZodType>;

workspaces/leetcode-zen-mode/src/extension/shared/public-settings/constants.ts

@@ -0,0 +1,4 @@
+export const PUBLIC_SETTINGS_ATTRIBUTE =
+  "data-leetcode-zen-mode-public-settings";
+
+export const PUBLIC_SETTINGS_STORAGE_KEY = "public-settings";

workspaces/leetcode-zen-mode/src/extension/shared/public-settings/getDefaultPublicSettings.ts

@@ -0,0 +1,7 @@
+import type { PublicSettings } from "./publicSettingsZodType.ts";
+
+export function getDefaultPublicSettings(): PublicSettings {
+  return {
+    preferredDifficulty: "Easy",
+  };
+}

workspaces/leetcode-zen-mode/src/extension/shared/public-settings/publicSettingsZodType.ts

@@ -0,0 +1,9 @@
+import { z } from "zod";
+
+import { difficultyZodType } from "../../problemDifficulties.ts";
+
+export const publicSettingsZodType = z.object({
+  preferredDifficulty: difficultyZodType,
+});
+
+export type PublicSettings = z.infer<typeof publicSettingsZodType>;