diff --git a/frontend/src/ts/controllers/page-controller.ts b/frontend/src/ts/controllers/page-controller.ts index e22ca05e6..ece0dd2e9 100644 --- a/frontend/src/ts/controllers/page-controller.ts +++ b/frontend/src/ts/controllers/page-controller.ts @@ -15,7 +15,7 @@ import * as PageAccountSettings from "../pages/account-settings"; import * as PageTransition from "../states/page-transition"; import * as AdController from "../controllers/ad-controller"; import * as Focus from "../test/focus"; -import { PageName, PageWithUrlParams } from "../pages/page"; +import { PageName } from "../pages/page"; type ChangeOptions = { force?: boolean; @@ -111,9 +111,6 @@ export async function change( await previousPage?.afterHide(); - if (nextPage instanceof PageWithUrlParams) { - nextPage.readUrlParams(); - } await nextPage?.beforeShow({ params: options.params, // @ts-expect-error for the future (i think) diff --git a/frontend/src/ts/pages/leaderboards.ts b/frontend/src/ts/pages/leaderboards.ts index ffe8408b2..f3eed90e2 100644 --- a/frontend/src/ts/pages/leaderboards.ts +++ b/frontend/src/ts/pages/leaderboards.ts @@ -1136,8 +1136,8 @@ function updateGetParameters(): void { selectorLS.set(state); } -function readGetParameters(params: UrlParameter | null): void { - if (params === null) { +function readGetParameters(params?: UrlParameter): void { + if (params === undefined) { Object.assign(state, selectorLS.get()); return; } @@ -1271,17 +1271,16 @@ export const page = new PageWithUrlParams({ id: "leaderboards", element: $(".page.pageLeaderboards"), path: "/leaderboards", - urlParams: { - schema: UrlParameterSchema, - onUrlParamUpdate: readGetParameters, - }, + urlParamsSchema: UrlParameterSchema, + afterHide: async (): Promise => { Skeleton.remove("pageLeaderboards"); stopTimer(); }, - beforeShow: async (): Promise => { + beforeShow: async (options): Promise => { Skeleton.append("pageLeaderboards", "main"); // await appendLanguageButtons(); //todo figure out this race condition + readGetParameters(options.urlParams); startTimer(); updateTypeButtons(); updateTitle(); diff --git a/frontend/src/ts/pages/page.ts b/frontend/src/ts/pages/page.ts index b2c6a28c5..0bbda5615 100644 --- a/frontend/src/ts/pages/page.ts +++ b/frontend/src/ts/pages/page.ts @@ -44,7 +44,7 @@ export default class Page { public beforeHide: () => Promise; public afterHide: () => Promise; - public beforeShow: (options: Options) => Promise; + protected _beforeShow: (options: Options) => Promise; public afterShow: () => Promise; constructor(props: PageProperties) { @@ -54,36 +54,41 @@ export default class Page { this.pathname = props.path; this.beforeHide = props.beforeHide ?? empty; this.afterHide = props.afterHide ?? empty; - this.beforeShow = props.beforeShow ?? empty; + this._beforeShow = props.beforeShow ?? empty; this.afterShow = props.afterShow ?? empty; } + + public async beforeShow(options: Options): Promise { + await this._beforeShow?.(options); + } } +type OptionsWithUrlParams = Options & { + urlParams?: z.infer; +}; + type UrlParamsSchema = z.ZodObject>; -type PagePropertiesWithUrlParams< - T, - U extends UrlParamsSchema -> = PageProperties & { - urlParams: { - schema: U; - onUrlParamUpdate?: (params: z.infer | null) => void; - }; +type PagePropertiesWithUrlParams = Omit< + PageProperties, + "beforeShow" +> & { + urlParamsSchema: U; + beforeShow?: (options: OptionsWithUrlParams) => Promise; }; export class PageWithUrlParams extends Page { private urlSchema: U; - private onUrlParamUpdate?: (params: z.infer | null) => void; + protected override _beforeShow: ( + options: OptionsWithUrlParams + ) => Promise; constructor(props: PagePropertiesWithUrlParams) { super(props); - this.urlSchema = props.urlParams.schema; - this.onUrlParamUpdate = props.urlParams.onUrlParamUpdate; + this.urlSchema = props.urlParamsSchema; + this._beforeShow = props.beforeShow ?? empty; } - public readUrlParams(): void { - if (this.onUrlParamUpdate === undefined) { - return; - } + private readUrlParams(): z.infer | undefined { const urlParams = new URLSearchParams(window.location.search); const parsed = parseUrlSearchParams({ @@ -92,12 +97,11 @@ export class PageWithUrlParams extends Page { }); if (!parsed.success) { - this.onUrlParamUpdate?.(null); - return; + return undefined; } - - this.onUrlParamUpdate?.(parsed.data); + return parsed.data; } + public setUrlParams(params: z.infer): void { const urlParams = serializeUrlSearchParams({ schema: this.urlSchema, @@ -106,4 +110,9 @@ export class PageWithUrlParams extends Page { const newUrl = `${window.location.pathname}?${urlParams.toString()}`; window.history.replaceState({}, "", newUrl); } + + public override async beforeShow(options: Options): Promise { + const urlParams = this.readUrlParams(); + await this._beforeShow?.({ ...options, urlParams: urlParams }); + } }