refactor: make customLayoutfluid an array (@fehmer) (#6494)

merge after #6487

Author: fehmer

frontend/__tests__/root/config.spec.ts

@@ -517,6 +517,13 @@ describe("Config", () => {
 
     expect(Config.setQuoteLength([-4 as any, 5 as any])).toBe(false);
   });
+  it("setCustomLayoutfluid", () => {
+    expect(Config.setCustomLayoutfluid(["qwerty"])).toBe(true);
+
+    expect(Config.setCustomLayoutfluid([])).toBe(false);
+    expect(Config.setCustomLayoutfluid("qwerty#qwertz" as any)).toBe(false);
+    expect(Config.setCustomLayoutfluid("invalid" as any)).toBe(false);
+  });
 });
 
 function customThemeColors(n: number): CustomThemeColors {

frontend/src/ts/commandline/lists.ts

@@ -104,6 +104,7 @@ import * as FPSCounter from "../elements/fps-counter";
 import { migrateConfig } from "../utils/config";
 import {
   CustomBackgroundSchema,
+  CustomLayoutFluid,
   PartialConfigSchema,
 } from "@monkeytype/contracts/schemas/configs";
 import { Command, CommandsSubgroup } from "./types";
@@ -219,13 +220,15 @@ export const commands: CommandsSubgroup = {
       id: "changeCustomLayoutfluid",
       display: "Custom layoutfluid...",
       defaultValue: (): string => {
-        return Config.customLayoutfluid.replace(/#/g, " ");
+        return Config.customLayoutfluid.join(" ");
       },
       input: true,
       icon: "fa-tint",
       exec: ({ input }): void => {
         if (input === undefined) return;
-        UpdateConfig.setCustomLayoutfluid(input.replace(/ /g, "#"));
+        UpdateConfig.setCustomLayoutfluid(
+          input.split(" ") as CustomLayoutFluid
+        );
       },
     },
     {

frontend/src/ts/config.ts

@@ -4,7 +4,6 @@ import * as Notifications from "./elements/notifications";
 import {
   isConfigValueValidBoolean,
   isConfigValueValid,
-  invalid as notifyInvalid,
 } from "./config-validation";
 import * as ConfigEvent from "./observables/config-event";
 import { isAuthenticated } from "./firebase";
@@ -30,8 +29,6 @@ import { LocalStorageWithSchema } from "./utils/local-storage-with-schema";
 import { migrateConfig } from "./utils/config";
 import { roundTo1 } from "@monkeytype/util/numbers";
 import { getDefaultConfig } from "./constants/default-config";
-import { LayoutsList } from "./constants/layouts";
-import { LayoutName } from "@monkeytype/contracts/schemas/layouts";
 
 const configLS = new LocalStorageWithSchema({
   key: "config",
@@ -1871,26 +1868,17 @@ export function setCustomLayoutfluid(
   value: ConfigSchemas.CustomLayoutFluid,
   nosave?: boolean
 ): boolean {
-  const trimmed = value.trim();
-
-  const invalidLayouts = trimmed
-    .split(/[# ]+/) //can be space or hash
-    .filter((it) => !LayoutsList.includes(it as LayoutName));
-
-  if (invalidLayouts.length !== 0) {
-    notifyInvalid(
+  if (
+    !isConfigValueValid(
       "layoutfluid",
-      trimmed,
-      `The following inputted layouts do not exist: ${invalidLayouts.join(
-        ", "
-      )}`
-    );
-
+      value,
+      ConfigSchemas.CustomLayoutFluidSchema
+    )
+  ) {
     return false;
   }
 
-  const customLayoutfluid = trimmed.replace(/ /g, "#");
-  config.customLayoutfluid = customLayoutfluid;
+  config.customLayoutfluid = value;
   saveToLocalStorage("customLayoutfluid", nosave);
   ConfigEvent.dispatch("customLayoutfluid", config.customLayoutfluid);
 

frontend/src/ts/constants/default-config.ts

@@ -92,7 +92,7 @@ const obj = {
   customBackground: "",
   customBackgroundSize: "cover",
   customBackgroundFilter: [0, 1, 1, 1],
-  customLayoutfluid: "qwerty#dvorak#colemak",
+  customLayoutfluid: ["qwerty", "dvorak", "colemak"],
   customPolyglot: ["english", "spanish", "french", "german"],
   monkeyPowerLevel: "off",
   minBurst: "off",

frontend/src/ts/pages/settings.ts

@@ -23,15 +23,16 @@ import * as CustomBackgroundFilter from "../elements/custom-background-filter";
 import {
   ConfigValue,
   CustomBackgroundSchema,
+  CustomLayoutFluid,
   FunboxName,
 } from "@monkeytype/contracts/schemas/configs";
 import { getAllFunboxes, checkCompatibility } from "@monkeytype/funbox";
 import { getActiveFunboxNames } from "../test/funbox/list";
 import { SnapshotPreset } from "../constants/default-snapshot";
 import { LayoutsList } from "../constants/layouts";
 import { DataArrayPartial, Optgroup } from "slim-select/store";
-import { areUnsortedArraysEqual } from "../utils/arrays";
 import { tryCatch } from "@monkeytype/util/trycatch";
+import { areSortedArraysEqual, areUnsortedArraysEqual } from "../utils/arrays";
 
 type SettingsGroups<T extends ConfigValue> = Record<string, SettingsGroup<T>>;
 
@@ -690,8 +691,13 @@ async function fillSettingsPage(): Promise<void> {
     settings: { keepOrder: true },
     events: {
       afterChange: (newVal): void => {
-        const customLayoutfluid = newVal.map((it) => it.value).join("#");
-        if (customLayoutfluid !== Config.customLayoutfluid) {
+        const customLayoutfluid = newVal.map(
+          (it) => it.value
+        ) as CustomLayoutFluid;
+        //checking equal with order, because customLayoutfluid is ordered
+        if (
+          !areSortedArraysEqual(customLayoutfluid, Config.customLayoutfluid)
+        ) {
           void UpdateConfig.setCustomLayoutfluid(customLayoutfluid);
         }
       },
@@ -706,6 +712,7 @@ async function fillSettingsPage(): Promise<void> {
     events: {
       afterChange: (newVal): void => {
         const customPolyglot = newVal.map((it) => it.value);
+        //checking equal without order, because customPolyglot is not ordered
         if (!areUnsortedArraysEqual(customPolyglot, Config.customPolyglot)) {
           void UpdateConfig.setCustomPolyglot(customPolyglot);
         }
@@ -914,14 +921,23 @@ export async function update(groupUpdate = true): Promise<void> {
 
   if (
     customLayoutFluidSelect !== undefined &&
-    customLayoutFluidSelect.getSelected().join("#") !== Config.customLayoutfluid
+    //checking equal with order, because customLayoutFluid is ordered
+    !areSortedArraysEqual(
+      customLayoutFluidSelect.getSelected(),
+      Config.customLayoutfluid
+    )
   ) {
+    //replace the data because the data is ordered. do not use setSelected
     customLayoutFluidSelect.setData(getLayoutfluidDropdownData());
   }
 
   if (
     customPolyglotSelect !== undefined &&
-    customPolyglotSelect.getSelected() !== Config.customPolyglot
+    //checking equal without order, because customPolyglot is not ordered
+    !areUnsortedArraysEqual(
+      customPolyglotSelect.getSelected(),
+      Config.customPolyglot
+    )
   ) {
     customPolyglotSelect.setSelected(Config.customPolyglot);
   }
@@ -1391,7 +1407,7 @@ function getLanguageDropdownData(
 }
 
 function getLayoutfluidDropdownData(): DataArrayPartial {
-  const customLayoutfluidActive = Config.customLayoutfluid.split("#");
+  const customLayoutfluidActive = Config.customLayoutfluid;
   return [
     ...customLayoutfluidActive,
     ...LayoutsList.filter((it) => !customLayoutfluidActive.includes(it)),

frontend/src/ts/test/funbox/funbox-functions.ts

@@ -347,7 +347,7 @@ const list: Partial<Record<FunboxName, FunboxFunctions>> = {
   },
   layoutfluid: {
     applyConfig(): void {
-      const layout = Config.customLayoutfluid.split("#")[0] ?? "qwerty";
+      const layout = Config.customLayoutfluid[0] ?? "qwerty";
 
       UpdateConfig.setLayout(layout as Layout, true);
       UpdateConfig.setKeymapLayout(layout as KeymapLayout, true);
@@ -359,11 +359,7 @@ const list: Partial<Record<FunboxName, FunboxFunctions>> = {
     },
     handleSpace(): void {
       if (Config.mode !== "time") {
-        // here I need to check if Config.customLayoutFluid exists because of my
-        // scuffed solution of returning whenever value is undefined in the setCustomLayoutfluid function
-        const layouts: Layout[] = Config.customLayoutfluid
-          ? (Config.customLayoutfluid.split("#") as Layout[])
-          : ["qwerty", "dvorak", "colemak"];
+        const layouts = Config.customLayoutfluid;
         const outOf: number = TestWords.words.length;
         const wordsPerLayout = Math.floor(outOf / layouts.length);
         const index = Math.floor(
@@ -403,7 +399,7 @@ const list: Partial<Record<FunboxName, FunboxFunctions>> = {
       }
     },
     getResultContent(): string {
-      return Config.customLayoutfluid.replace(/#/g, " ");
+      return Config.customLayoutfluid.join(" ");
     },
     restart(): void {
       if (this.applyConfig) this.applyConfig();

frontend/src/ts/test/test-timer.ts

@@ -92,9 +92,7 @@ function calculateAcc(): number {
 function layoutfluid(): void {
   if (timerDebug) console.time("layoutfluid");
   if (Config.funbox.includes("layoutfluid") && Config.mode === "time") {
-    const layouts = Config.customLayoutfluid
-      ? Config.customLayoutfluid.split("#")
-      : ["qwerty", "dvorak", "colemak"];
+    const layouts = Config.customLayoutfluid;
     const switchTime = Config.time / layouts.length;
     const time = Time.get();
     const index = Math.floor(time / switchTime);

frontend/src/ts/utils/config.ts

@@ -123,5 +123,11 @@ export function replaceLegacyValues(
     }
   }
 
+  if (typeof configObj.customLayoutfluid === "string") {
+    configObj.customLayoutfluid = (configObj.customLayoutfluid as string).split(
+      "#"
+    ) as ConfigSchemas.CustomLayoutFluid;
+  }
+
   return configObj;
 }

packages/contracts/src/schemas/configs.ts

@@ -196,7 +196,10 @@ export type CustomBackgroundFilter = z.infer<
   typeof CustomBackgroundFilterSchema
 >;
 
-export const CustomLayoutFluidSchema = z.string().regex(/^[0-9a-zA-Z_#]+$/); //TODO better regex
+export const CustomLayoutFluidSchema = z
+  .array(Layouts.LayoutNameSchema)
+  .min(1)
+  .max(15);
 export type CustomLayoutFluid = z.infer<typeof CustomLayoutFluidSchema>;
 
 export const CustomPolyglotSchema = z.array(LanguageSchema).min(1);