refactor: reactively add name change banner

Author: Miodec

frontend/src/ts/auth.tsx

@@ -23,9 +23,7 @@ import {
   signInWithPopup,
   resetIgnoreAuthCallback,
 } from "./firebase";
-import { showPopup } from "./modals/simple-modals-base";
 import * as Sentry from "./sentry";
-import { addBanner } from "./states/banners";
 import { showLoaderBar, hideLoaderBar } from "./states/loader-bar";
 import {
   showNoticeNotification,
@@ -75,28 +73,6 @@ async function getDataAndInit(): Promise<boolean> {
     }
 
     void Sentry.setUser(snapshot.uid, snapshot.name);
-    if (snapshot.needsToChangeName) {
-      addBanner({
-        level: "error",
-        icon: "fas fa-exclamation-triangle",
-        customContent: (
-          <>
-            You need to update your account name.{" "}
-            <button
-              type="button"
-              class="px-2 py-1"
-              onClick={() => {
-                showPopup("updateName");
-              }}
-            >
-              Click here
-            </button>{" "}
-            to change it and learn more about why.
-          </>
-        ),
-        important: true,
-      });
-    }
 
     await updateConfigFromServer();
     return true;

frontend/src/ts/components/layout/overlays/Banners.tsx

@@ -3,12 +3,15 @@ import { debounce } from "throttle-debounce";
 
 import { createEffectOn } from "../../../hooks/effects";
 import { useRefWithUtils } from "../../../hooks/useRefWithUtils";
+import { showPopup } from "../../../modals/simple-modals-base";
 import {
   Banner as BannerType,
+  addBanner,
   getBanners,
   removeBanner,
 } from "../../../states/banners";
 import { setGlobalOffsetTop } from "../../../states/core";
+import { getSnapshot } from "../../../states/snapshot";
 import { cn } from "../../../utils/cn";
 import { Conditional } from "../../common/Conditional";
 import { Fa } from "../../common/Fa";
@@ -78,6 +81,36 @@ function Banner(props: BannerType): JSXElement {
 export function Banners(): JSXElement {
   const [ref, element] = useRefWithUtils();
 
+  let nameChangeAdded = false;
+  createEffectOn(
+    () => getSnapshot()?.needsToChangeName,
+    (needsToChange) => {
+      if (needsToChange && !nameChangeAdded) {
+        nameChangeAdded = true;
+        addBanner({
+          level: "error",
+          icon: "fas fa-exclamation-triangle",
+          customContent: (
+            <>
+              You need to update your account name.{" "}
+              <button
+                type="button"
+                class="px-2 py-1"
+                onClick={() => {
+                  showPopup("updateName");
+                }}
+              >
+                Click here
+              </button>{" "}
+              to change it and learn more about why.
+            </>
+          ),
+          important: true,
+        });
+      }
+    },
+  );
+
   const setGlobalOffsetSignal = (): void => {
     const height = element()?.getOffsetHeight() ?? 0;
     setGlobalOffsetTop(height);