From f7c37b0a1de68004a602a845cc36db5398969ade Mon Sep 17 00:00:00 2001 From: Christian Fehmer Date: Tue, 2 Apr 2024 14:59:43 +0200 Subject: [PATCH] refactor: rewrite page constructor to use an object (fehmer) (#5253) * refactor: rewrite page constructor to use an object * rename pathname to path --------- Co-authored-by: Miodec --- frontend/src/ts/pages/404.ts | 20 +++++-------- frontend/src/ts/pages/about.ts | 20 +++++-------- frontend/src/ts/pages/account.ts | 20 +++++-------- frontend/src/ts/pages/loading.ts | 20 +++++-------- frontend/src/ts/pages/login.ts | 20 +++++-------- frontend/src/ts/pages/page.ts | 38 ++++++++++++++----------- frontend/src/ts/pages/profile-search.ts | 23 +++++++-------- frontend/src/ts/pages/profile.ts | 20 +++++-------- frontend/src/ts/pages/settings.ts | 20 +++++-------- frontend/src/ts/pages/test.ts | 19 ++++++------- 10 files changed, 89 insertions(+), 131 deletions(-) diff --git a/frontend/src/ts/pages/404.ts b/frontend/src/ts/pages/404.ts index 35d4c3dec659..683ab7b3edc0 100644 --- a/frontend/src/ts/pages/404.ts +++ b/frontend/src/ts/pages/404.ts @@ -1,22 +1,16 @@ import Page from "./page"; import * as Skeleton from "../utils/skeleton"; -export const page = new Page( - "404", - $(".page.page404"), - "/404", - async () => { - // - }, - async () => { +export const page = new Page({ + name: "404", + element: $(".page.page404"), + path: "/404", + afterHide: async (): Promise => { Skeleton.remove("page404"); }, - async () => { + beforeShow: async (): Promise => { Skeleton.append("page404", "main"); }, - async () => { - // - } -); +}); Skeleton.save("page404"); diff --git a/frontend/src/ts/pages/about.ts b/frontend/src/ts/pages/about.ts index d2fb552f0daf..a0477939a963 100644 --- a/frontend/src/ts/pages/about.ts +++ b/frontend/src/ts/pages/about.ts @@ -193,25 +193,19 @@ function getHistogramDataBucketed(data: Record): { return { data: histogramChartDataBucketed, labels }; } -export const page = new Page( - "about", - $(".page.pageAbout"), - "/about", - async () => { - // - }, - async () => { +export const page = new Page({ + name: "about", + element: $(".page.pageAbout"), + path: "/about", + afterHide: async (): Promise => { reset(); Skeleton.remove("pageAbout"); }, - async () => { + beforeShow: async (): Promise => { Skeleton.append("pageAbout", "main"); void fill(); }, - async () => { - // - } -); +}); $(() => { Skeleton.save("pageAbout"); diff --git a/frontend/src/ts/pages/account.ts b/frontend/src/ts/pages/account.ts index 2a613b1de9ed..f47e253e75bd 100644 --- a/frontend/src/ts/pages/account.ts +++ b/frontend/src/ts/pages/account.ts @@ -1255,19 +1255,16 @@ ConfigEvent.subscribe((eventKey) => { } }); -export const page = new Page( - "account", - $(".page.pageAccount"), - "/account", - async () => { - // - }, - async () => { +export const page = new Page({ + name: "account", + element: $(".page.pageAccount"), + path: "/account", + afterHide: async (): Promise => { reset(); ResultFilters.removeButtons(); Skeleton.remove("pageAccount"); }, - async () => { + beforeShow: async (): Promise => { Skeleton.append("pageAccount", "main"); if (DB.getSnapshot()?.results === undefined) { $(".pageLoading .fill, .pageAccount .fill").css("width", "0%"); @@ -1290,10 +1287,7 @@ export const page = new Page( ResultBatches.showOrHideIfNeeded(); }); }, - async () => { - // - } -); +}); $(() => { Skeleton.save("pageAccount"); diff --git a/frontend/src/ts/pages/loading.ts b/frontend/src/ts/pages/loading.ts index b5a75bc9b4f9..538866b319f4 100644 --- a/frontend/src/ts/pages/loading.ts +++ b/frontend/src/ts/pages/loading.ts @@ -39,20 +39,14 @@ export async function showBar(): Promise { }); } -export const page = new Page( - "loading", - $(".page.pageLoading"), - "/", - async () => { - // - }, - async () => { +export const page = new Page({ + name: "loading", + element: $(".page.pageLoading"), + path: "/", + afterHide: async (): Promise => { Skeleton.remove("pageLoading"); }, - async () => { + beforeShow: async (): Promise => { Skeleton.append("pageLoading", "main"); }, - async () => { - // - } -); +}); diff --git a/frontend/src/ts/pages/login.ts b/frontend/src/ts/pages/login.ts index d81c19fd9fce..f6c0ad5072da 100644 --- a/frontend/src/ts/pages/login.ts +++ b/frontend/src/ts/pages/login.ts @@ -335,14 +335,11 @@ $(".page.pageLogin .register.side .verifyPasswordInput").on("input", () => { checkPasswordsMatch(); }); -export const page = new Page( - "login", - $(".page.pageLogin"), - "/login", - async () => { - // - }, - async () => { +export const page = new Page({ + name: "login", + element: $(".page.pageLogin"), + path: "/login", + afterHide: async (): Promise => { $(".pageLogin input").val(""); nameIndicator.hide(); emailIndicator.hide(); @@ -351,15 +348,12 @@ export const page = new Page( verifyPasswordIndicator.hide(); Skeleton.remove("pageLogin"); }, - async () => { + beforeShow: async (): Promise => { Skeleton.append("pageLogin", "main"); enableSignUpButton(); enableInputs(); }, - async () => { - // - } -); +}); $(() => { Skeleton.save("pageLogin"); diff --git a/frontend/src/ts/pages/page.ts b/frontend/src/ts/pages/page.ts index 0134422e88c6..f08595d148b8 100644 --- a/frontend/src/ts/pages/page.ts +++ b/frontend/src/ts/pages/page.ts @@ -3,6 +3,19 @@ type Options = { data?: T; }; +type PageProperties = { + name: MonkeyTypes.PageName; + element: JQuery; + path: string; + beforeHide?: () => Promise; + afterHide?: () => Promise; + beforeShow?: (options: Options) => Promise; + afterShow?: () => Promise; +}; + +async function empty(): Promise { + return; +} export default class Page { public name: MonkeyTypes.PageName; public element: JQuery; @@ -11,21 +24,14 @@ export default class Page { public afterHide: () => Promise; public beforeShow: (options: Options) => Promise; public afterShow: () => Promise; - constructor( - name: MonkeyTypes.PageName, - element: JQuery, - pathname: string, - beforeHide: () => Promise, - afterHide: () => Promise, - beforeShow: (options: Options) => Promise, - afterShow: () => Promise - ) { - this.name = name; - this.element = element; - this.pathname = pathname; - this.beforeHide = beforeHide; - this.afterHide = afterHide; - this.beforeShow = beforeShow; - this.afterShow = afterShow; + + constructor(props: PageProperties) { + this.name = props.name; + this.element = props.element; + this.pathname = props.path; + this.beforeHide = props.beforeHide ?? empty; + this.afterHide = props.afterHide ?? empty; + this.beforeShow = props.beforeShow ?? empty; + this.afterShow = props.afterShow ?? empty; } } diff --git a/frontend/src/ts/pages/profile-search.ts b/frontend/src/ts/pages/profile-search.ts index 71a66a9c85bc..64c98a9fa850 100644 --- a/frontend/src/ts/pages/profile-search.ts +++ b/frontend/src/ts/pages/profile-search.ts @@ -1,21 +1,18 @@ import Page from "./page"; import * as Skeleton from "../utils/skeleton"; -export const page = new Page( - "profileSearch", - $(".page.pageProfileSearch"), - "/profile", - async () => { - // - }, - async () => { +export const page = new Page({ + name: "profileSearch", + element: $(".page.pageProfileSearch"), + path: "/profile", + afterHide: async (): Promise => { Skeleton.remove("pageProfileSearch"); }, - async () => { + beforeShow: async (): Promise => { Skeleton.append("pageProfileSearch", "main"); $(".page.pageProfileSearch input").val(""); }, - async () => { - $(".page.pageProfileSearch input").focus(); - } -); + afterShow: async (): Promise => { + $(".page.pageProfileSearch input").trigger("focus"); + }, +}); diff --git a/frontend/src/ts/pages/profile.ts b/frontend/src/ts/pages/profile.ts index 960c0ec0702b..bc0c2ad4a0b0 100644 --- a/frontend/src/ts/pages/profile.ts +++ b/frontend/src/ts/pages/profile.ts @@ -211,18 +211,15 @@ $(".page.pageProfile").on("click", ".profile .userReportButton", () => { void UserReportModal.show({ uid, name, lbOptOut }); }); -export const page = new Page( - "profile", - $(".page.pageProfile"), - "/profile", - async () => { - // - }, - async () => { +export const page = new Page({ + name: "profile", + element: $(".page.pageProfile"), + path: "/profile", + afterHide: async (): Promise => { Skeleton.remove("pageProfile"); reset(); }, - async (options) => { + beforeShow: async (options): Promise => { Skeleton.append("pageProfile", "main"); const uidOrName = options?.params?.["uidOrName"] ?? ""; if (uidOrName) { @@ -240,9 +237,6 @@ export const page = new Page( $(".page.pageProfile .content").addClass("hidden"); } }, - async () => { - // - } -); +}); Skeleton.save("pageProfile"); diff --git a/frontend/src/ts/pages/settings.ts b/frontend/src/ts/pages/settings.ts index 6869dcac1a49..944c5dc7f9e7 100644 --- a/frontend/src/ts/pages/settings.ts +++ b/frontend/src/ts/pages/settings.ts @@ -1261,26 +1261,20 @@ ConfigEvent.subscribe((eventKey) => { } }); -export const page = new Page( - "settings", - $(".page.pageSettings"), - "/settings", - async () => { - // - }, - async () => { +export const page = new Page({ + name: "settings", + element: $(".page.pageSettings"), + path: "/settings", + afterHide: async (): Promise => { reset(); Skeleton.remove("pageSettings"); }, - async () => { + beforeShow: async (): Promise => { Skeleton.append("pageSettings", "main"); await fillSettingsPage(); await update(false); }, - async () => { - // - } -); +}); $(async () => { Skeleton.save("pageSettings"); diff --git a/frontend/src/ts/pages/test.ts b/frontend/src/ts/pages/test.ts index 612350412518..717f6f0d5758 100644 --- a/frontend/src/ts/pages/test.ts +++ b/frontend/src/ts/pages/test.ts @@ -8,21 +8,21 @@ import * as ModesNotice from "../elements/modes-notice"; import * as Keymap from "../elements/keymap"; import * as TestConfig from "../test/test-config"; -export const page = new Page( - "test", - $(".page.pageTest"), - "/", - async () => { +export const page = new Page({ + name: "test", + element: $(".page.pageTest"), + path: "/", + beforeHide: async (): Promise => { ManualRestart.set(); TestLogic.restart(); void Funbox.clear(); void ModesNotice.update(); $("#wordsInput").trigger("focusout"); }, - async () => { + afterHide: async (): Promise => { updateFooterAndVerticalAds(true); }, - async () => { + beforeShow: async (): Promise => { updateFooterAndVerticalAds(false); TestStats.resetIncomplete(); ManualRestart.set(); @@ -33,7 +33,4 @@ export const page = new Page( void Funbox.activate(); void Keymap.refresh(); }, - async () => { - // - } -); +});