monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-11-09 13:44:29 +08:00
Code Issues Projects Releases Packages Wiki Activity

refactor(account button): dont access snapshot directly, accept parameters instead

Browse source
This commit is contained in:
Miodec 2024-08-15 14:57:41 +02:00
parent aaadad0812
commit 3221968e52
4 changed files with 57 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/ts/controllers/account-controller.ts
View file

@ -124,6 +124,8 @@ async function getDataAndInit(): Promise<boolean> {
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<void> {
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(() => {

90
frontend/src/ts/elements/account-button.ts
View file

@ -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<void> {
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)

2
frontend/src/ts/modals/simple-modals.ts
View file

@ -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();

2
frontend/src/ts/utils/url-handler.ts
View file

@ -53,7 +53,7 @@ export async function linkDiscord(hashOverride: string): Promise<void> {
DB.setSnapshot(snapshot);
void AccountButton.update(undefined, discordId, discordAvatar);
AccountButton.updateAvatar(discordId, discordAvatar);
Settings.updateDiscordSection();
}