refactor: solid account page (@fehmer)

backend/src/utils/result.ts

@@ -122,5 +122,14 @@ export function replaceLegacyValues(result: DBResult): DBResult {
     };
   }
 
+  if (typeof result.mode2 === "number") {
+    result.mode2 = (result.mode2 as number).toString();
+  }
+
+  //legacy value for english_1k
+  if ((result.language as string) === "english_expanded") {
+    result.language = "english_1k";
+  }
+
   return result;
 }

frontend/__tests__/components/common/AnimatedModal.spec.tsx

@@ -28,9 +28,12 @@ describe("AnimatedModal", () => {
     modalDiv: HTMLDivElement;
   } {
     const { container } = render(() => (
-      <AnimatedModal id="Support" {...props}>
-        <div data-testid="modal-content">Test Content</div>
-      </AnimatedModal>
+      <>
+        <div id="solidmodals"></div>
+        <AnimatedModal id="Support" {...props}>
+          <div data-testid="modal-content">Test Content</div>
+        </AnimatedModal>
+      </>
     ));
 
     return {

frontend/__tests__/components/common/AsyncContent.spec.tsx

@@ -147,6 +147,7 @@ describe("AsyncContent", () => {
         }));
 
         return (
+          //@ts-expect-error generic children, fine for tests
           <AsyncContent
             query={myQuery}
             errorMessage={options?.errorMessage}
@@ -335,6 +336,7 @@ describe("AsyncContent", () => {
         }));
 
         return (
+          //@ts-expect-error generic children, fine for tests
           <AsyncContent
             queries={{ first: firstQuery, second: secondQuery }}
             errorMessage={options?.errorMessage}

frontend/__tests__/elements/account/result-filters.spec.ts

@@ -1,6 +1,7 @@
 import { describe, it, expect } from "vitest";
 import defaultResultFilters from "../../../src/ts/constants/default-result-filters";
-import { mergeWithDefaultFilters } from "../../../src/ts/elements/account/result-filters";
+import { __testing } from "../../../src/ts/elements/account/result-filters";
+const mergeWithDefaultFilters = __testing.mergeWithDefaultFilters;
 
 describe("result-filters.ts", () => {
   describe("mergeWithDefaultFilters", () => {

frontend/package.json

@@ -30,6 +30,8 @@
     "@sentry/browser": "9.14.0",
     "@sentry/vite-plugin": "3.3.1",
     "@solidjs/meta": "0.29.4",
+    "@tanstack/query-db-collection": "1.0.23",
+    "@tanstack/solid-db": "0.2.6",
     "@tanstack/solid-query": "5.90.23",
     "@tanstack/solid-query-devtools": "5.91.3",
     "@tanstack/solid-table": "8.21.3",
@@ -40,7 +42,7 @@
     "chart.js": "3.7.1",
     "chartjs-adapter-date-fns": "3.0.0",
     "chartjs-plugin-annotation": "2.2.1",
-    "chartjs-plugin-trendline": "1.0.2",
+    "chartjs-plugin-trendline": "3.2.0",
     "clsx": "2.1.1",
     "color-blend": "4.0.0",
     "damerau-levenshtein": "1.0.8",

frontend/src/index.html

@@ -38,7 +38,8 @@
           <div id="ad-vertical-right"></div>
         </div>
         <load src="html/pages/loading.html" />
-        <div class="page pageAbout full-width hidden" id="pageAbout">
+        <!-- TODO: revert full-width -->
+        <div class="page pageAbout hidden" id="pageAbout">
           <mount data-component="aboutpage"></mount>
         </div>
         <load src="html/pages/settings.html" />

frontend/src/ts/collections/result-filter-presets.ts

@@ -0,0 +1,79 @@
+import { ResultFilters } from "@monkeytype/schemas/users";
+import { queryCollectionOptions } from "@tanstack/query-db-collection";
+import { createCollection } from "@tanstack/solid-db";
+import Ape from "../ape";
+import * as Notifications from "../elements/notifications";
+import { queryClient } from "../queries";
+import { baseKey } from "../queries/utils/keys";
+
+const queryKeys = {
+  root: () => [...baseKey("resultFilterPresets", { isUserSpecific: true })],
+};
+
+export const resultFilterPresetsCollection = createCollection(
+  queryCollectionOptions({
+    staleTime: Infinity,
+    queryKey: queryKeys.root(),
+
+    queryClient,
+    getKey: (it) => it._id,
+    queryFn: async () => {
+      //return emtpy array. We load the user with the snapshot and fill the collection from there
+      return [] as ResultFilters[];
+    },
+    onInsert: async ({ transaction }) => {
+      const newItems = transaction.mutations.map((m) => m.modified);
+
+      const serverItems = await Promise.all(
+        newItems.map(async (it) => {
+          const response = await Ape.users.addResultFilterPreset({ body: it });
+          if (response.status !== 200) {
+            Notifications.add(
+              `Failed to insert result filter presets: ${response.body.message}`,
+              -1,
+            );
+            throw new Error(
+              `Failed to insert result filter presets: ${response.body.message}`,
+            );
+          }
+          return { ...it, _id: response.body.data };
+        }),
+      );
+
+      resultFilterPresetsCollection.utils.writeBatch(() => {
+        serverItems.forEach((it) =>
+          resultFilterPresetsCollection.utils.writeInsert(it),
+        );
+      });
+      return { refetch: false };
+    },
+    onDelete: async ({ transaction }) => {
+      const ids = transaction.mutations.map((it) => it.key as string);
+
+      await Promise.all(
+        ids.map(async (it) => {
+          const response = await Ape.users.removeResultFilterPreset({
+            params: { presetId: it },
+          });
+          if (response.status !== 200) {
+            Notifications.add(
+              `Failed to delete result filter presets: ${response.body.message}`,
+              -1,
+            );
+            throw new Error(
+              `Failed to delete result filter presets: ${response.body.message}`,
+            );
+          }
+        }),
+      );
+
+      resultFilterPresetsCollection.utils.writeBatch(() => {
+        ids.forEach((it) =>
+          resultFilterPresetsCollection.utils.writeDelete(it),
+        );
+      });
+      //don't refetch
+      return { refetch: false };
+    },
+  }),
+);