refactor: add auth event to reduce number of dependencies in account controller (@Miodec) (monkeytypegame#6865)

Author: Miodec

frontend/src/ts/controllers/account-controller.ts

@@ -1,24 +1,15 @@
 import Ape from "../ape";
 import * as Notifications from "../elements/notifications";
 import Config, * as UpdateConfig from "../config";
-import * as AccountButton from "../elements/account-button";
 import * as Misc from "../utils/misc";
-import * as Settings from "../pages/settings";
 import * as DB from "../db";
-import * as TestLogic from "../test/test-logic";
 import * as Loader from "../elements/loader";
 import * as PageTransition from "../states/page-transition";
 import * as ActivePage from "../states/active-page";
 import * as LoadingPage from "../pages/loading";
 import * as LoginPage from "../pages/login";
-import * as ResultFilters from "../elements/account/result-filters";
-import * as TagController from "./tag-controller";
 import * as RegisterCaptchaModal from "../modals/register-captcha";
-import * as LastSignedOutResultModal from "../modals/last-signed-out-result";
-import * as URLHandler from "../utils/url-handler";
 import * as Account from "../pages/account";
-import * as Alerts from "../elements/alerts";
-import * as AccountSettings from "../pages/account-settings";
 import {
   GoogleAuthProvider,
   GithubAuthProvider,
@@ -37,17 +28,12 @@ import {
   signInWithPopup,
   resetIgnoreAuthCallback,
 } from "../firebase";
-import {
-  hideFavoriteQuoteLength,
-  showFavoriteQuoteLength,
-} from "../test/test-config";
 import * as ConnectionState from "../states/connection";
 import { navigate } from "./route-controller";
-import * as PSA from "../elements/psa";
 import { getActiveFunboxesWithFunction } from "../test/funbox/list";
-import { Snapshot } from "../constants/default-snapshot";
 import * as Sentry from "../sentry";
 import { tryCatch } from "@monkeytype/util/trycatch";
+import * as AuthEvent from "../observables/auth-event";
 
 export const gmailProvider = new GoogleAuthProvider();
 export const githubProvider = new GithubAuthProvider();
@@ -87,12 +73,58 @@ async function getDataAndInit(): Promise<boolean> {
     LoadingPage.updateText("Downloading user data...");
     await LoadingPage.showBar();
     const snapshot = await DB.initSnapshot();
-    if (snapshot !== false) {
-      Sentry.setUser(snapshot.uid, snapshot.name);
+
+    if (snapshot === false) {
+      throw new Error(
+        "Snapshot didn't initialize due to lacking authentication even though user is authenticated"
+      );
+    }
+
+    Sentry.setUser(snapshot.uid, snapshot.name);
+    if (snapshot.needsToChangeName) {
+      Notifications.addPSA(
+        "You need to update your account name. <a class='openNameChange'>Click here</a> to change it and learn more about why.",
+        -1,
+        undefined,
+        true,
+        undefined,
+        true
+      );
+    }
+    if (ActivePage.get() === "loading") {
+      LoadingPage.updateBar(100);
+    } else {
+      LoadingPage.updateBar(45);
+    }
+    LoadingPage.updateText("Applying settings...");
+
+    const areConfigsEqual =
+      JSON.stringify(Config) === JSON.stringify(snapshot.config);
+
+    if (Config === undefined || !areConfigsEqual) {
+      console.log(
+        "no local config or local and db configs are different - applying db"
+      );
+      await UpdateConfig.apply(snapshot.config);
+      UpdateConfig.saveFullConfigToLocalStorage(true);
+
+      //funboxes might be different and they wont activate on the account page
+      for (const fb of getActiveFunboxesWithFunction("applyGlobalCSS")) {
+        fb.functions.applyGlobalCSS();
+      }
+    }
+    if (window.location.pathname === "/account") {
+      LoadingPage.updateBar(90);
+      await Account.downloadResults();
+    }
+    if (window.location.pathname === "/login") {
+      navigate("/account");
+    } else {
+      navigate();
     }
+    return true;
   } catch (error) {
     console.error(error);
-    AccountButton.loading(false);
     LoginPage.enableInputs();
     $("header nav .view-account").css("opacity", 1);
     if (error instanceof DB.SnapshotInitError) {
@@ -120,70 +152,17 @@ async function getDataAndInit(): Promise<boolean> {
     }
     return false;
   }
-  if (ActivePage.get() === "loading") {
-    LoadingPage.updateBar(100);
-  } else {
-    LoadingPage.updateBar(45);
-  }
-  LoadingPage.updateText("Applying settings...");
-  const snapshot = DB.getSnapshot() as Snapshot;
-  AccountButton.update(snapshot);
-  Alerts.setNotificationBubbleVisible(snapshot.inboxUnreadSize > 0);
-  showFavoriteQuoteLength();
-
-  ResultFilters.loadTags(snapshot.tags);
-
-  // filters = defaultResultFilters;
-  void ResultFilters.load();
-
-  if (snapshot.needsToChangeName) {
-    Notifications.addPSA(
-      "You need to update your account name. <a class='openNameChange'>Click here</a> to change it and learn more about why.",
-      -1,
-      undefined,
-      true,
-      undefined,
-      true
-    );
-  }
-
-  const areConfigsEqual =
-    JSON.stringify(Config) === JSON.stringify(snapshot.config);
-
-  if (Config === undefined || !areConfigsEqual) {
-    console.log(
-      "no local config or local and db configs are different - applying db"
-    );
-    await UpdateConfig.apply(snapshot.config);
-    UpdateConfig.saveFullConfigToLocalStorage(true);
-
-    //funboxes might be different and they wont activate on the account page
-    for (const fb of getActiveFunboxesWithFunction("applyGlobalCSS")) {
-      fb.functions.applyGlobalCSS();
-    }
-  }
-  AccountButton.loading(false);
-  TagController.loadActiveFromLocalStorage();
-  if (window.location.pathname === "/account") {
-    LoadingPage.updateBar(90);
-    await Account.downloadResults();
-  }
-  if (window.location.pathname === "/login") {
-    navigate("/account");
-  } else {
-    navigate();
-  }
-  return true;
 }
 
 export async function loadUser(_user: UserType): Promise<void> {
   // User is signed in.
   PageTransition.set(false);
-  AccountButton.loading(true);
   if (!(await getDataAndInit())) {
     signOut();
   }
 
+  AuthEvent.dispatch({ type: "snapshotUpdated", data: { isInitial: true } });
+
   // var displayName = user.displayName;
   // var email = user.email;
   // var emailVerified = user.emailVerified;
@@ -194,21 +173,14 @@ export async function loadUser(_user: UserType): Promise<void> {
   LoginPage.hidePreloader();
 
   // showFavouriteThemesAtTheTop();
-
-  if (TestLogic.notSignedInLastResult !== null) {
-    LastSignedOutResultModal.show();
-  }
 }
 
 export async function onAuthStateChanged(
   authInitialisedAndConnected: boolean,
   user: UserType | null
 ): Promise<void> {
-  const search = window.location.search;
-  const hash = window.location.hash;
   console.debug(`account controller ready`);
   if (authInitialisedAndConnected) {
-    void PSA.show();
     console.debug(`auth state changed, user ${user ? "true" : "false"}`);
     console.debug(user);
     if (user) {
@@ -218,13 +190,8 @@ export async function onAuthStateChanged(
         window.history.replaceState("", "", "/login");
       }
 
-      Settings.hideAccountSection();
-      AccountButton.update(undefined);
       DB.setSnapshot(undefined);
       Sentry.clearUser();
-      setTimeout(() => {
-        hideFavoriteQuoteLength();
-      }, 125);
       PageTransition.set(false);
       navigate();
     }
@@ -238,12 +205,10 @@ export async function onAuthStateChanged(
     navigate();
   }
 
-  URLHandler.loadCustomThemeFromUrl(search);
-  URLHandler.loadTestSettingsFromUrl(search);
-  URLHandler.loadChallengeFromUrl(search);
-  void URLHandler.linkDiscord(hash);
-
-  AccountSettings.updateUI();
+  AuthEvent.dispatch({
+    type: "authStateChanged",
+    data: { isUserSignedIn: user !== null },
+  });
 }
 
 export async function signIn(email: string, password: string): Promise<void> {
@@ -360,7 +325,7 @@ async function addAuthProvider(
     await linkWithPopup(user, provider);
     Loader.hide();
     Notifications.add(`${providerName} authentication added`, 1);
-    AccountSettings.updateUI();
+    AuthEvent.dispatch({ type: "authConfigUpdated" });
   } catch (error) {
     Loader.hide();
     const message = Misc.createErrorMessage(

frontend/src/ts/controllers/route-controller.ts

@@ -146,7 +146,9 @@ const routes: Route[] = [
 ];
 
 export function navigate(
-  url = window.location.pathname + window.location.search,
+  url = window.location.pathname +
+    window.location.search +
+    window.location.hash,
   options = {} as NavigateOptions
 ): void {
   if (

frontend/src/ts/controllers/tag-controller.ts

@@ -3,6 +3,7 @@ import * as DB from "../db";
 import * as ModesNotice from "../elements/modes-notice";
 import { LocalStorageWithSchema } from "../utils/local-storage-with-schema";
 import { IdSchema } from "@monkeytype/schemas/util";
+import * as AuthEvent from "../observables/auth-event";
 
 const activeTagsLS = new LocalStorageWithSchema({
   key: "activeTags",
@@ -75,3 +76,9 @@ export function loadActiveFromLocalStorage(): void {
   }
   saveActiveToLocalStorage();
 }
+
+AuthEvent.subscribe((event) => {
+  if (event.type === "snapshotUpdated" && event.data.isInitial) {
+    loadActiveFromLocalStorage();
+  }
+});

frontend/src/ts/db.ts

@@ -31,6 +31,7 @@ import { getDefaultConfig } from "./constants/default-config";
 import { FunboxMetadata } from "../../../packages/funbox/src/types";
 import { getFirstDayOfTheWeek } from "./utils/date-and-time";
 import { Language } from "@monkeytype/schemas/languages";
+import * as AuthEvent from "./observables/auth-event";
 
 let dbSnapshot: Snapshot | undefined;
 const firstDayOfTheWeek = getFirstDayOfTheWeek();
@@ -70,6 +71,8 @@ export function setSnapshot(newSnapshot: Snapshot | undefined): void {
     dbSnapshot.verified = originalVerified;
     dbSnapshot.lbOptOut = lbOptOut;
   }
+
+  AuthEvent.dispatch({ type: "snapshotUpdated", data: { isInitial: false } });
 }
 
 export async function initSnapshot(): Promise<Snapshot | false> {

frontend/src/ts/elements/account-button.ts

@@ -5,8 +5,9 @@ import {
 } from "../controllers/user-flag-controller";
 import { isAuthenticated } from "../firebase";
 import * as XpBar from "./xp-bar";
-import { Snapshot } from "../constants/default-snapshot";
 import { getAvatarElement } from "../utils/discord-avatar";
+import * as AuthEvent from "../observables/auth-event";
+import { getSnapshot } from "../db";
 
 export function hide(): void {
   $("nav .accountButtonAndMenu").addClass("hidden");
@@ -38,11 +39,15 @@ export function updateAvatar(avatar?: {
   $("header nav .view-account .avatar").replaceWith(element);
 }
 
-export function update(snapshot: Snapshot | undefined): void {
+export function update(): void {
   if (isAuthenticated()) {
-    // this function is called after the snapshot is loaded (awaited), so it should be fine
-    const { xp, name } = snapshot as Snapshot;
+    const snapshot = getSnapshot();
 
+    if (snapshot === undefined) return;
+
+    const { xp, name } = snapshot;
+
+    loading(false);
     updateName(name);
     updateFlags(snapshot ?? {});
     XpBar.setXp(xp);
@@ -76,3 +81,12 @@ const coarse = window.matchMedia("(pointer:coarse)")?.matches;
 if (coarse) {
   $("nav .accountButtonAndMenu .textButton.view-account").attr("href", "");
 }
+
+AuthEvent.subscribe((event) => {
+  if (
+    (event.type === "authStateChanged" && !event.data.isUserSignedIn) ||
+    event.type === "snapshotUpdated"
+  ) {
+    update();
+  }
+});

frontend/src/ts/elements/account/result-filters.ts

@@ -16,8 +16,9 @@ import {
 import { LocalStorageWithSchema } from "../../utils/local-storage-with-schema";
 import defaultResultFilters from "../../constants/default-result-filters";
 import { getAllFunboxes } from "@monkeytype/funbox";
-import { Snapshot, SnapshotUserTag } from "../../constants/default-snapshot";
+import { Snapshot } from "../../constants/default-snapshot";
 import { LanguageList } from "../../constants/languages";
+import * as AuthEvent from "../../observables/auth-event";
 import { sanitize } from "../../utils/sanitize";
 
 export function mergeWithDefaultFilters(
@@ -272,8 +273,12 @@ function setAllFilters(group: ResultFiltersGroup, value: boolean): void {
   });
 }
 
-export function loadTags(tags: SnapshotUserTag[]): void {
-  tags.forEach((tag) => {
+export function loadTags(): void {
+  const snapshot = DB.getSnapshot();
+
+  if (snapshot === undefined) return;
+
+  snapshot.tags.forEach((tag) => {
     defaultResultFilters.tags[tag._id] = true;
   });
 }
@@ -933,3 +938,10 @@ function verifyResultFiltersStructure(filterIn: ResultFilters): ResultFilters {
 
   return filter;
 }
+
+AuthEvent.subscribe((event) => {
+  if (event.type === "snapshotUpdated" && event.data.isInitial) {
+    loadTags();
+    void load();
+  }
+});

frontend/src/ts/elements/alerts.ts

@@ -11,6 +11,7 @@ import AnimatedModal from "../utils/animated-modal";
 import { updateXp as accountPageUpdateProfile } from "./profile";
 import { MonkeyMail } from "@monkeytype/schemas/users";
 import * as XPBar from "../elements/xp-bar";
+import * as AuthEvent from "../observables/auth-event";
 
 let accountAlerts: MonkeyMail[] = [];
 let maxMail = 0;
@@ -388,6 +389,20 @@ NotificationEvent.subscribe((message, level, customTitle) => {
   }
 });
 
+AuthEvent.subscribe((event) => {
+  if (event.type === "snapshotUpdated" && event.data.isInitial) {
+    const snapshot = DB.getSnapshot();
+    setNotificationBubbleVisible((snapshot?.inboxUnreadSize ?? 0) > 0);
+  }
+  if (event.type === "authStateChanged" && !event.data.isUserSignedIn) {
+    setNotificationBubbleVisible(false);
+    accountAlerts = [];
+    mailToMarkRead = [];
+    mailToDelete = [];
+    $("#alertsPopup .accountAlerts .list").empty();
+  }
+});
+
 const modal = new AnimatedModal({
   dialogId: "alertsPopup",
   customAnimations: {