refactor: decouple collections from db/snapshot (@fehmer) (monkeytypegame#7917)

Author: fehmer

frontend/__tests__/controllers/preset-controller.spec.ts

@@ -56,6 +56,7 @@ describe("PresetController", () => {
 
       dbGetSnapshotMock.mockReturnValue({} as any);
       configApplyMock.mockResolvedValue();
+      tagsClearMock.mockResolvedValue();
     });
 
     it("should apply for full preset", async () => {

frontend/src/ts/ape/user.ts

@@ -0,0 +1,54 @@
+import { GetUserResponse } from "@monkeytype/contracts/users";
+import Ape from ".";
+import { createEffectOn } from "../hooks/effects";
+import { isAuthenticated } from "../states/core";
+import { SnapshotInitError } from "../utils/snapshot-init-error";
+
+type CacheType = GetUserResponse["data"];
+
+let fetchPromise: Promise<void> | null = null;
+let cache: CacheType | undefined = undefined;
+
+export async function fetchUserFromApi(): Promise<CacheType | undefined> {
+  await sync();
+  return cache;
+}
+
+async function sync(): Promise<void> {
+  if (!isAuthenticated()) {
+    return;
+  }
+
+  if (cache !== undefined) return;
+
+  fetchPromise ??= (async () => {
+    const response = await Ape.users.get();
+
+    if (response.status !== 200) {
+      throw new SnapshotInitError(
+        `${response.body.message} (user)`,
+        response.status,
+      );
+    }
+
+    cache = response.body.data;
+  })();
+
+  try {
+    await fetchPromise;
+  } finally {
+    fetchPromise = null;
+  }
+}
+
+function reset(): void {
+  cache = undefined;
+  fetchPromise = null;
+}
+
+// clear cache + reset promise on logout
+createEffectOn(isAuthenticated, (isAuthenticated) => {
+  if (!isAuthenticated) {
+    reset();
+  }
+});

frontend/src/ts/auth.tsx

@@ -9,6 +9,7 @@ import {
 } from "firebase/auth";
 
 import Ape from "./ape";
+import { waitForPresetsReady } from "./collections/presets";
 import { updateFromServer as updateConfigFromServer } from "./config/remote";
 import * as DB from "./db";
 import { authEvent } from "./events/auth";
@@ -30,6 +31,7 @@ import {
   showSuccessNotification,
 } from "./states/notifications";
 import { createErrorMessage } from "./utils/error";
+import { SnapshotInitError } from "./utils/snapshot-init-error";
 
 export type AuthResult =
   | {
@@ -64,6 +66,8 @@ async function getDataAndInit(): Promise<boolean> {
   try {
     console.log("getting account data");
     const snapshot = await DB.initSnapshot();
+    //TODO: always load presets for now, remove when __nonReactive is removed from  presets collection
+    await waitForPresetsReady();
 
     if (snapshot === false) {
       throw new Error(
@@ -77,7 +81,7 @@ async function getDataAndInit(): Promise<boolean> {
     return true;
   } catch (error) {
     console.error(error);
-    if (error instanceof DB.SnapshotInitError) {
+    if (error instanceof SnapshotInitError) {
       if (error.responseCode === 429) {
         showNoticeNotification(
           "Doing so will save you bandwidth, make the next test be ready faster and will not sign you out (which could mean your new personal best would not save to your account).",

frontend/src/ts/collections/presets.ts

@@ -10,6 +10,8 @@ import { queryClient } from "../queries";
 import { baseKey } from "../queries/utils/keys";
 import { ConfigGroupName } from "@monkeytype/schemas/configs";
 import { tempId } from "./utils/misc";
+import { isAuthenticated } from "../states/core";
+import { replaceUnderscoresWithSpaces } from "../utils/strings";
 
 export type PresetItem = Preset;
 
@@ -29,13 +31,21 @@ export function usePresetsLiveQuery() {
 const presetsCollection = createCollection(
   queryCollectionOptions({
     staleTime: Infinity,
-    startSync: true,
     queryKey: queryKeys.root(),
-
     queryClient,
     getKey: (it) => it._id,
     queryFn: async () => {
-      return [] as PresetItem[];
+      if (!isAuthenticated()) return [];
+      const response = await Ape.presets.get();
+
+      if (response.status !== 200) {
+        throw new Error("Error fetching presets:" + response.body.message);
+      }
+
+      return response.body.data.map((it) => ({
+        ...it,
+        name: replaceUnderscoresWithSpaces(it.name),
+      }));
     },
   }),
 );
@@ -149,6 +159,9 @@ const actions = {
 };
 
 // --- Public API ---
+export async function waitForPresetsReady(): Promise<void> {
+  await presetsCollection.stateWhenReady();
+}
 
 function getPresets(): PresetItem[] {
   return [...presetsCollection.values()].sort((a, b) =>
@@ -160,21 +173,6 @@ function getPreset(id: string): PresetItem | undefined {
   return presetsCollection.get(id);
 }
 
-export function fillPresetsCollection(presets: Preset[]): void {
-  const presetItems = presets.map((preset) => ({
-    _id: preset._id,
-    name: preset.name.replace(/_/g, " "),
-    config: preset.config,
-    settingGroups: preset.settingGroups,
-  }));
-
-  presetsCollection.utils.writeBatch(() => {
-    presetItems.forEach((item) => {
-      presetsCollection.utils.writeInsert(item);
-    });
-  });
-}
-
 export async function addPreset(
   params: ActionType["addPreset"],
 ): Promise<void> {

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

@@ -13,6 +13,7 @@ import {
   replaceUnderscoresWithSpaces,
 } from "../utils/strings";
 import { tempId } from "./utils/misc";
+import { fetchUserFromApi } from "../ape/user";
 
 const queryKeys = {
   root: () => [...baseKey("resultFilterPresets", { isUserSpecific: true })],
@@ -27,8 +28,13 @@ const resultFilterPresetsCollection = createCollection(
     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[];
+      const userData = await fetchUserFromApi();
+      if (userData === undefined) return [];
+
+      return (userData.resultFilterPresets ?? []).map((it) => ({
+        ...it,
+        name: replaceUnderscoresWithSpaces(it.name),
+      }));
     },
   }),
 );
@@ -118,13 +124,3 @@ export async function deleteResultFilterPreset(
   const transaction = actions.deleteResultFilterPreset(params);
   await transaction.isPersisted.promise;
 }
-
-export function fillResultFilterPresetsCollection(
-  presets: ResultFilters[],
-): void {
-  resultFilterPresetsCollection.utils.writeBatch(() => {
-    presets
-      .map((it) => ({ ...it, name: replaceUnderscoresWithSpaces(it.name) }))
-      .forEach((it) => resultFilterPresetsCollection.utils.writeInsert(it));
-  });
-}

frontend/src/ts/collections/tags.ts

@@ -21,6 +21,7 @@ import {
 import { Difficulty } from "@monkeytype/schemas/configs";
 import { Language } from "@monkeytype/schemas/languages";
 import { tempId } from "./utils/misc";
+import { fetchUserFromApi } from "../ape/user";
 
 export type TagItem = UserTag & { active: boolean };
 
@@ -31,13 +32,19 @@ const queryKeys = {
 const tagsCollection = createCollection(
   queryCollectionOptions({
     staleTime: Infinity,
-    startSync: true,
     queryKey: queryKeys.root(),
-
     queryClient,
     getKey: (it) => it._id,
     queryFn: async () => {
-      return [] as TagItem[];
+      const activeIds = activeTagsLS.get();
+      const userData = await fetchUserFromApi();
+      if (userData === undefined) return [];
+
+      return (userData.tags ?? []).map((tag) => ({
+        ...tag,
+        name: tag.name.replace(/_/g, " "),
+        active: activeIds.includes(tag._id),
+      }));
     },
   }),
 );
@@ -205,22 +212,6 @@ function getActiveTags(): TagItem[] {
   return getTags().filter((tag) => tag.active);
 }
 
-export function fillTagsCollection(userTags: UserTag[]): void {
-  const activeIds = activeTagsLS.get();
-
-  const tagItems = userTags.map((tag) => ({
-    ...tag,
-    name: tag.name.replace(/_/g, " "),
-    active: activeIds.includes(tag._id),
-  }));
-
-  tagsCollection.utils.writeBatch(() => {
-    tagItems.forEach((item) => {
-      tagsCollection.utils.writeInsert(item);
-    });
-  });
-}
-
 // --- Active state ---
 
 const activeTagsLS = new LocalStorageWithSchema({

frontend/src/ts/config/remote.ts

@@ -4,7 +4,7 @@ import { migrateConfig } from "./utils";
 import { applyConfig } from "./lifecycle";
 import { saveFullConfigToLocalStorage } from "./persistence";
 import Ape from "../ape";
-import { SnapshotInitError } from "../db";
+import { SnapshotInitError } from "../utils/snapshot-init-error";
 import { getDefaultConfig } from "../constants/default-config";
 import { Config } from "./store";
 

frontend/src/ts/db.ts

@@ -33,30 +33,21 @@ import {
 } from "./ape/server-configuration";
 import { Connection } from "@monkeytype/schemas/connections";
 import { insertLocalResult } from "./collections/results";
-import { fillResultFilterPresetsCollection } from "./collections/result-filter-presets";
 import {
   setLastResult,
   setSnapshot as setSolidSnapshot,
 } from "./states/snapshot";
 import { XpBreakdown } from "@monkeytype/schemas/results";
 import { setXpBarData } from "./states/header";
 import { FunboxMetadata } from "@monkeytype/funbox";
-import { fillTagsCollection, __nonReactive } from "./collections/tags";
+import { __nonReactive } from "./collections/tags";
 import { updateTagsInFilterStorage } from "./states/result-filters";
-import { fillPresetsCollection } from "./collections/presets";
+import { fetchUserFromApi } from "./ape/user";
+import { SnapshotInitError } from "./utils/snapshot-init-error";
 
 let dbSnapshot: Snapshot | undefined;
 const firstDayOfTheWeek = getFirstDayOfTheWeek();
 
-export class SnapshotInitError extends Error {
-  public responseCode: number;
-  constructor(message: string, responseCode: number) {
-    super(message);
-    this.name = "SnapshotInitError";
-    this.responseCode = responseCode;
-  }
-}
-
 export function getSnapshot(): Snapshot | undefined {
   return dbSnapshot;
 }
@@ -105,39 +96,24 @@ export async function initSnapshot(): Promise<Snapshot | false> {
       ? Ape.connections.get()
       : { status: 200, body: { message: "", data: [] } };
 
-    const [userResponse, presetsResponse, connectionsResponse] =
-      await Promise.all([
-        Ape.users.get(),
-        Ape.presets.get(),
-        connectionsRequest,
-      ]);
+    const [userData, connectionsResponse] = await Promise.all([
+      fetchUserFromApi(),
+
+      connectionsRequest,
+    ]);
 
-    if (userResponse.status !== 200) {
-      throw new SnapshotInitError(
-        `${userResponse.body.message} (user)`,
-        userResponse.status,
-      );
-    }
-    if (presetsResponse.status !== 200) {
-      throw new SnapshotInitError(
-        `${presetsResponse.body.message} (presets)`,
-        presetsResponse.status,
-      );
-    }
     if (connectionsResponse.status !== 200) {
       throw new SnapshotInitError(
         `${connectionsResponse.body.message} (connections)`,
         connectionsResponse.status,
       );
     }
 
-    const userData = userResponse.body.data;
-    const presetsData = presetsResponse.body.data;
     const connectionsData = connectionsResponse.body.data;
 
-    if (userData === null) {
+    if (userData === null || userData === undefined) {
       throw new SnapshotInitError(
-        `Request was successful but user data is null`,
+        `Request was successful but user data is null/undefined`,
         200,
       );
     }
@@ -197,14 +173,9 @@ export async function initSnapshot(): Promise<Snapshot | false> {
 
     snap.customThemes = userData.customThemes ?? [];
 
-    fillTagsCollection(userData.tags ?? []);
-    fillPresetsCollection(presetsData ?? []);
-
-    fillResultFilterPresetsCollection(userData.resultFilterPresets ?? []);
     updateTagsInFilterStorage(userData.tags?.map((it) => it._id) ?? []);
 
     snap.connections = convertConnections(connectionsData);
-
     dbSnapshot = snap;
 
     return dbSnapshot;

frontend/src/ts/queries/index.ts

@@ -4,9 +4,9 @@ import { isAuthenticated } from "../states/core";
 
 export const queryClient = new QueryClient();
 
-createEffectOn(isAuthenticated, (state) => {
-  if (!state) {
-    console.debug("QueryClient clear all user related queries.");
-    void queryClient.resetQueries({ queryKey: ["user"] });
-  }
+createEffectOn(isAuthenticated, () => {
+  //reset user related queries and collections whenever the state changes.
+  //for legacy access we initialize some user-bound collections without a user being present (e.g. tags, presets).
+  //to avoid empty collections after login, reset the queries on every state change not just logout
+  void queryClient.resetQueries({ queryKey: ["user"] });
 });

frontend/src/ts/utils/snapshot-init-error.ts

@@ -0,0 +1,8 @@
+export class SnapshotInitError extends Error {
+  public responseCode: number;
+  constructor(message: string, responseCode: number) {
+    super(message);
+    this.name = "SnapshotInitError";
+    this.responseCode = responseCode;
+  }
+}