From 3221968e5216cefffe58556a6c8c8d2bd824a6ac Mon Sep 17 00:00:00 2001 From: Miodec Date: Thu, 15 Aug 2024 14:57:41 +0200 Subject: [PATCH] refactor(account button): dont access snapshot directly, accept parameters instead --- .../src/ts/controllers/account-controller.ts | 8 +- frontend/src/ts/elements/account-button.ts | 90 +++++++++++-------- frontend/src/ts/modals/simple-modals.ts | 2 +- frontend/src/ts/utils/url-handler.ts | 2 +- 4 files changed, 57 insertions(+), 45 deletions(-) diff --git a/frontend/src/ts/controllers/account-controller.ts b/frontend/src/ts/controllers/account-controller.ts index 499c0f807..39c2db24a 100644 --- a/frontend/src/ts/controllers/account-controller.ts +++ b/frontend/src/ts/controllers/account-controller.ts @@ -124,6 +124,8 @@ async function getDataAndInit(): Promise { LoadingPage.updateText("Applying settings..."); const snapshot = DB.getSnapshot() as MonkeyTypes.Snapshot; SignInOutButton.update(); + AccountButton.update(snapshot); + Alerts.setNotificationBubbleVisible(snapshot.inboxUnreadSize > 0); showFavoriteQuoteLength(); ResultFilters.loadTags(snapshot.tags); @@ -191,10 +193,7 @@ export async function loadUser(user: UserType): Promise { if (!(await getDataAndInit())) { signOut(); } - const { discordId, discordAvatar, xp, inboxUnreadSize } = - DB.getSnapshot() as MonkeyTypes.Snapshot; - void AccountButton.update(xp, discordId, discordAvatar); - Alerts.setNotificationBubbleVisible(inboxUnreadSize > 0); + // var displayName = user.displayName; // var email = user.email; // var emailVerified = user.emailVerified; @@ -464,6 +463,7 @@ export function signOut(): void { }); Settings.hideAccountSection(); SignInOutButton.update(); + AccountButton.update(undefined); navigate("/login"); DB.setSnapshot(undefined); setTimeout(() => { diff --git a/frontend/src/ts/elements/account-button.ts b/frontend/src/ts/elements/account-button.ts index c1a1cb2e8..c45f5e9c4 100644 --- a/frontend/src/ts/elements/account-button.ts +++ b/frontend/src/ts/elements/account-button.ts @@ -1,5 +1,3 @@ -import { getSnapshot } from "../db"; -import { isAuthenticated } from "../firebase"; import * as Misc from "../utils/misc"; import * as Levels from "../utils/levels"; import { getAll } from "./theme-colors"; @@ -8,6 +6,7 @@ import { getHtmlByUserFlags, SupportsFlags, } from "../controllers/user-flag-controller"; +import { isAuthenticated } from "../firebase"; let usingAvatar = false; @@ -104,46 +103,57 @@ export function updateName(name: string): void { $("header nav .account > .text").text(name); } -export function updateFlags(flags: SupportsFlags): void { +function updateFlags(flags: SupportsFlags): void { $("nav .textButton.account > .text").append( getHtmlByUserFlags(flags, { iconsOnly: true }) ); } -export async function update( - xp?: number, - discordId?: string, - discordAvatar?: string -): Promise { - if (isAuthenticated()) { - if (xp !== undefined) { - const xpDetails = Levels.getXpDetails(xp); - const levelCompletionRatio = - xpDetails.levelCurrentXp / xpDetails.levelMaxXp; - $("header nav .level").text(xpDetails.level); - $("header nav .bar").css({ - width: levelCompletionRatio * 100 + "%", - }); - } - if ((discordAvatar ?? "") && (discordId ?? "")) { - void Misc.getDiscordAvatarUrl(discordId, discordAvatar).then( - (discordAvatarUrl) => { - if (discordAvatarUrl !== null) { - $("header nav .account .avatar").css( - "background-image", - `url(${discordAvatarUrl})` - ); - usingAvatar = true; +function updateXp(xp: number): void { + const xpDetails = Levels.getXpDetails(xp); + const levelCompletionRatio = xpDetails.levelCurrentXp / xpDetails.levelMaxXp; + $("header nav .level").text(xpDetails.level); + $("header nav .bar").css({ + width: levelCompletionRatio * 100 + "%", + }); +} - $("header nav .account .user").addClass("hidden"); - $("header nav .account .avatar").removeClass("hidden"); - } +export function updateAvatar( + discordId: string | undefined, + discordAvatar: string | undefined +): void { + if ((discordAvatar ?? "") && (discordId ?? "")) { + void Misc.getDiscordAvatarUrl(discordId, discordAvatar).then( + (discordAvatarUrl) => { + if (discordAvatarUrl !== null) { + $("header nav .account .avatar").css( + "background-image", + `url(${discordAvatarUrl})` + ); + usingAvatar = true; + + $("header nav .account .user").addClass("hidden"); + $("header nav .account .avatar").removeClass("hidden"); } - ); - } else { - $("header nav .account .avatar").addClass("hidden"); - $("header nav .account .user").removeClass("hidden"); - } + } + ); + } else { + $("header nav .account .avatar").addClass("hidden"); + $("header nav .account .user").removeClass("hidden"); + } +} + +export function update(snapshot: MonkeyTypes.Snapshot | undefined): void { + if (isAuthenticated()) { + // this function is called after the snapshot is loaded (awaited), so it should be fine + const { xp, discordId, discordAvatar, name } = + snapshot as MonkeyTypes.Snapshot; + + updateName(name); + updateFlags(snapshot ?? {}); + updateXp(xp); + updateAvatar(discordId ?? "", discordAvatar ?? ""); + $("nav .textButton.account") .removeClass("hidden") .css({ opacity: 0 }) @@ -163,6 +173,11 @@ export async function update( 125, () => { $("nav .textButton.account").addClass("hidden"); + + updateName(""); + updateFlags({}); + updateXp(0); + updateAvatar(undefined, undefined); } ); } @@ -181,9 +196,6 @@ export async function updateXpBar( const endingLevel = endingXp.level + endingXp.levelCurrentXp / endingXp.levelMaxXp; - const snapshot = getSnapshot(); - if (!snapshot) return; - if (!skipBreakdown) { const xpBarPromise = animateXpBar(startingLevel, endingLevel); const xpBreakdownPromise = animateXpBreakdown(addedXp, breakdown); @@ -192,7 +204,7 @@ export async function updateXpBar( await Misc.sleep(2000); } - $("nav .level").text(Levels.getLevelFromTotalXp(snapshot.xp)); + $("nav .level").text(Levels.getLevelFromTotalXp(currentXp + addedXp)); $("nav .xpBar") .stop(true, true) .css("opacity", 1) diff --git a/frontend/src/ts/modals/simple-modals.ts b/frontend/src/ts/modals/simple-modals.ts index 362cf35f8..be9b1964c 100644 --- a/frontend/src/ts/modals/simple-modals.ts +++ b/frontend/src/ts/modals/simple-modals.ts @@ -1451,7 +1451,7 @@ list.unlinkDiscord = new SimpleModal({ snap.discordAvatar = undefined; snap.discordId = undefined; - void AccountButton.update(); + AccountButton.updateAvatar(undefined, undefined); DB.setSnapshot(snap); Settings.updateDiscordSection(); diff --git a/frontend/src/ts/utils/url-handler.ts b/frontend/src/ts/utils/url-handler.ts index ea87ac2bc..d193142f7 100644 --- a/frontend/src/ts/utils/url-handler.ts +++ b/frontend/src/ts/utils/url-handler.ts @@ -53,7 +53,7 @@ export async function linkDiscord(hashOverride: string): Promise { DB.setSnapshot(snapshot); - void AccountButton.update(undefined, discordId, discordAvatar); + AccountButton.updateAvatar(discordId, discordAvatar); Settings.updateDiscordSection(); }