From bc6777f949cf913688beb8e6a1076ea5306e4612 Mon Sep 17 00:00:00 2001 From: Miodec Date: Wed, 2 Apr 2025 14:27:01 +0200 Subject: [PATCH] refactor: rename property, add optional property also fixes missing space in account settings page title --- frontend/src/ts/controllers/page-controller.ts | 12 ++++++------ frontend/src/ts/pages/404.ts | 2 +- frontend/src/ts/pages/about.ts | 2 +- frontend/src/ts/pages/account-settings.ts | 3 ++- frontend/src/ts/pages/account.ts | 2 +- frontend/src/ts/pages/leaderboards.ts | 2 +- frontend/src/ts/pages/loading.ts | 2 +- frontend/src/ts/pages/login.ts | 2 +- frontend/src/ts/pages/page.ts | 9 ++++++--- frontend/src/ts/pages/profile-search.ts | 2 +- frontend/src/ts/pages/profile.ts | 2 +- frontend/src/ts/pages/settings.ts | 2 +- frontend/src/ts/pages/test.ts | 2 +- 13 files changed, 24 insertions(+), 20 deletions(-) diff --git a/frontend/src/ts/controllers/page-controller.ts b/frontend/src/ts/controllers/page-controller.ts index 835bfe776..750b9cc38 100644 --- a/frontend/src/ts/controllers/page-controller.ts +++ b/frontend/src/ts/controllers/page-controller.ts @@ -82,16 +82,16 @@ export async function change( void AdController.reinstate(); }, async () => { - if (nextPage.name === "test") { + if (nextPage.id === "test") { Misc.updateTitle(); } else { - Misc.updateTitle( - Strings.capitalizeFirstLetterOfEachWord(nextPage.name) + - " | Monkeytype" - ); + const titleString = + nextPage.display ?? + Strings.capitalizeFirstLetterOfEachWord(nextPage.id); + Misc.updateTitle(`${titleString} | Monkeytype`); } Focus.set(false); - ActivePage.set(nextPage.name); + ActivePage.set(nextPage.id); await previousPage?.afterHide(); await nextPage?.beforeShow({ params: options.params, diff --git a/frontend/src/ts/pages/404.ts b/frontend/src/ts/pages/404.ts index 683ab7b3e..bb67ce5b7 100644 --- a/frontend/src/ts/pages/404.ts +++ b/frontend/src/ts/pages/404.ts @@ -2,7 +2,7 @@ import Page from "./page"; import * as Skeleton from "../utils/skeleton"; export const page = new Page({ - name: "404", + id: "404", element: $(".page.page404"), path: "/404", afterHide: async (): Promise => { diff --git a/frontend/src/ts/pages/about.ts b/frontend/src/ts/pages/about.ts index ea4d5fb8a..5ad3a8501 100644 --- a/frontend/src/ts/pages/about.ts +++ b/frontend/src/ts/pages/about.ts @@ -202,7 +202,7 @@ function getHistogramDataBucketed(data: Record): { } export const page = new Page({ - name: "about", + id: "about", element: $(".page.pageAbout"), path: "/about", afterHide: async (): Promise => { diff --git a/frontend/src/ts/pages/account-settings.ts b/frontend/src/ts/pages/account-settings.ts index 2e51be5b4..7e6f0d956 100644 --- a/frontend/src/ts/pages/account-settings.ts +++ b/frontend/src/ts/pages/account-settings.ts @@ -208,7 +208,8 @@ $(".page.pageAccountSettings #setStreakHourOffset").on("click", () => { }); export const page = new Page({ - name: "accountSettings", + id: "accountSettings", + display: "Account Settings", element: pageElement, path: "/account-settings", afterHide: async (): Promise => { diff --git a/frontend/src/ts/pages/account.ts b/frontend/src/ts/pages/account.ts index 0b63f5599..101509483 100644 --- a/frontend/src/ts/pages/account.ts +++ b/frontend/src/ts/pages/account.ts @@ -1269,7 +1269,7 @@ ConfigEvent.subscribe((eventKey) => { }); export const page = new Page({ - name: "account", + id: "account", element: $(".page.pageAccount"), path: "/account", afterHide: async (): Promise => { diff --git a/frontend/src/ts/pages/leaderboards.ts b/frontend/src/ts/pages/leaderboards.ts index e115fd33c..534fad4c1 100644 --- a/frontend/src/ts/pages/leaderboards.ts +++ b/frontend/src/ts/pages/leaderboards.ts @@ -1280,7 +1280,7 @@ $(".page.pageLeaderboards .buttonGroup.secondary").on( ); export const page = new Page({ - name: "leaderboards", + id: "leaderboards", element: $(".page.pageLeaderboards"), path: "/leaderboards", afterHide: async (): Promise => { diff --git a/frontend/src/ts/pages/loading.ts b/frontend/src/ts/pages/loading.ts index 538866b31..3f7f819a6 100644 --- a/frontend/src/ts/pages/loading.ts +++ b/frontend/src/ts/pages/loading.ts @@ -40,7 +40,7 @@ export async function showBar(): Promise { } export const page = new Page({ - name: "loading", + id: "loading", element: $(".page.pageLoading"), path: "/", afterHide: async (): Promise => { diff --git a/frontend/src/ts/pages/login.ts b/frontend/src/ts/pages/login.ts index be56ae8ae..78cef8fa7 100644 --- a/frontend/src/ts/pages/login.ts +++ b/frontend/src/ts/pages/login.ts @@ -348,7 +348,7 @@ $(".page.pageLogin .register.side .verifyPasswordInput").on("input", () => { }); export const page = new Page({ - name: "login", + id: "login", element: $(".page.pageLogin"), path: "/login", afterHide: async (): Promise => { diff --git a/frontend/src/ts/pages/page.ts b/frontend/src/ts/pages/page.ts index b7e6b87a2..f16706458 100644 --- a/frontend/src/ts/pages/page.ts +++ b/frontend/src/ts/pages/page.ts @@ -17,7 +17,8 @@ type Options = { }; type PageProperties = { - name: PageName; + id: PageName; + display?: string; element: JQuery; path: string; beforeHide?: () => Promise; @@ -30,7 +31,8 @@ async function empty(): Promise { return; } export default class Page { - public name: PageName; + public id: PageName; + public display: string | undefined; public element: JQuery; public pathname: string; public beforeHide: () => Promise; @@ -39,7 +41,8 @@ export default class Page { public afterShow: () => Promise; constructor(props: PageProperties) { - this.name = props.name; + this.id = props.id; + this.display = props.display; this.element = props.element; this.pathname = props.path; this.beforeHide = props.beforeHide ?? empty; diff --git a/frontend/src/ts/pages/profile-search.ts b/frontend/src/ts/pages/profile-search.ts index 64c98a9fa..dcf52ea05 100644 --- a/frontend/src/ts/pages/profile-search.ts +++ b/frontend/src/ts/pages/profile-search.ts @@ -2,7 +2,7 @@ import Page from "./page"; import * as Skeleton from "../utils/skeleton"; export const page = new Page({ - name: "profileSearch", + id: "profileSearch", element: $(".page.pageProfileSearch"), path: "/profile", afterHide: async (): Promise => { diff --git a/frontend/src/ts/pages/profile.ts b/frontend/src/ts/pages/profile.ts index 55f7dbcc2..c0b96dd4d 100644 --- a/frontend/src/ts/pages/profile.ts +++ b/frontend/src/ts/pages/profile.ts @@ -218,7 +218,7 @@ $(".page.pageProfile").on("click", ".profile .userReportButton", () => { }); export const page = new Page({ - name: "profile", + id: "profile", element: $(".page.pageProfile"), path: "/profile", afterHide: async (): Promise => { diff --git a/frontend/src/ts/pages/settings.ts b/frontend/src/ts/pages/settings.ts index 2295647ba..04ebb0264 100644 --- a/frontend/src/ts/pages/settings.ts +++ b/frontend/src/ts/pages/settings.ts @@ -1376,7 +1376,7 @@ ConfigEvent.subscribe((eventKey, eventValue) => { }); export const page = new Page({ - name: "settings", + id: "settings", element: $(".page.pageSettings"), path: "/settings", afterHide: async (): Promise => { diff --git a/frontend/src/ts/pages/test.ts b/frontend/src/ts/pages/test.ts index f7222244f..a4458c1f0 100644 --- a/frontend/src/ts/pages/test.ts +++ b/frontend/src/ts/pages/test.ts @@ -10,7 +10,7 @@ import * as TestConfig from "../test/test-config"; import * as ScrollToTop from "../elements/scroll-to-top"; export const page = new Page({ - name: "test", + id: "test", element: $(".page.pageTest"), path: "/", beforeHide: async (): Promise => {