refactor(page): Move urlParams to beforeShow (@fehmer) (#6687)

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)

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<void> => {
     Skeleton.remove("pageLeaderboards");
     stopTimer();
   },
-  beforeShow: async (): Promise<void> => {
+  beforeShow: async (options): Promise<void> => {
     Skeleton.append("pageLeaderboards", "main");
     // await appendLanguageButtons(); //todo figure out this race condition
+    readGetParameters(options.urlParams);
     startTimer();
     updateTypeButtons();
     updateTitle();

frontend/src/ts/pages/page.ts

@@ -44,7 +44,7 @@ export default class Page<T> {
 
   public beforeHide: () => Promise<void>;
   public afterHide: () => Promise<void>;
-  public beforeShow: (options: Options<T>) => Promise<void>;
+  protected _beforeShow: (options: Options<T>) => Promise<void>;
   public afterShow: () => Promise<void>;
 
   constructor(props: PageProperties<T>) {
@@ -54,36 +54,41 @@ export default class Page<T> {
     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<T>): Promise<void> {
+    await this._beforeShow?.(options);
+  }
 }
 
+type OptionsWithUrlParams<T, U extends UrlParamsSchema> = Options<T> & {
+  urlParams?: z.infer<U>;
+};
+
 type UrlParamsSchema = z.ZodObject<Record<string, z.ZodTypeAny>>;
-type PagePropertiesWithUrlParams<
-  T,
-  U extends UrlParamsSchema
-> = PageProperties<T> & {
-  urlParams: {
-    schema: U;
-    onUrlParamUpdate?: (params: z.infer<U> | null) => void;
-  };
+type PagePropertiesWithUrlParams<T, U extends UrlParamsSchema> = Omit<
+  PageProperties<T>,
+  "beforeShow"
+> & {
+  urlParamsSchema: U;
+  beforeShow?: (options: OptionsWithUrlParams<T, U>) => Promise<void>;
 };
 
 export class PageWithUrlParams<T, U extends UrlParamsSchema> extends Page<T> {
   private urlSchema: U;
-  private onUrlParamUpdate?: (params: z.infer<U> | null) => void;
+  protected override _beforeShow: (
+    options: OptionsWithUrlParams<T, U>
+  ) => Promise<void>;
 
   constructor(props: PagePropertiesWithUrlParams<T, U>) {
     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<U> | undefined {
     const urlParams = new URLSearchParams(window.location.search);
 
     const parsed = parseUrlSearchParams({
@@ -92,12 +97,11 @@ export class PageWithUrlParams<T, U extends UrlParamsSchema> extends Page<T> {
     });
 
     if (!parsed.success) {
-      this.onUrlParamUpdate?.(null);
-      return;
+      return undefined;
     }
-
-    this.onUrlParamUpdate?.(parsed.data);
+    return parsed.data;
   }
+
   public setUrlParams(params: z.infer<U>): void {
     const urlParams = serializeUrlSearchParams({
       schema: this.urlSchema,
@@ -106,4 +110,9 @@ export class PageWithUrlParams<T, U extends UrlParamsSchema> extends Page<T> {
     const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
     window.history.replaceState({}, "", newUrl);
   }
+
+  public override async beforeShow(options: Options<T>): Promise<void> {
+    const urlParams = this.readUrlParams();
+    await this._beforeShow?.({ ...options, urlParams: urlParams });
+  }
 }