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 <jack@monkeytype.com>

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<void> => {
     Skeleton.remove("page404");
   },
-  async () => {
+  beforeShow: async (): Promise<void> => {
     Skeleton.append("page404", "main");
   },
-  async () => {
-    //
-  }
-);
+});
 
 Skeleton.save("page404");

frontend/src/ts/pages/about.ts

@@ -193,25 +193,19 @@ function getHistogramDataBucketed(data: Record<string, number>): {
   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<void> => {
     reset();
     Skeleton.remove("pageAbout");
   },
-  async () => {
+  beforeShow: async (): Promise<void> => {
     Skeleton.append("pageAbout", "main");
     void fill();
   },
-  async () => {
-    //
-  }
-);
+});
 
 $(() => {
   Skeleton.save("pageAbout");

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<void> => {
     reset();
     ResultFilters.removeButtons();
     Skeleton.remove("pageAccount");
   },
-  async () => {
+  beforeShow: async (): Promise<void> => {
     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");

frontend/src/ts/pages/loading.ts

@@ -39,20 +39,14 @@ export async function showBar(): Promise<void> {
   });
 }
 
-export const page = new Page(
-  "loading",
-  $(".page.pageLoading"),
-  "/",
-  async () => {
-    //
-  },
-  async () => {
+export const page = new Page({
+  name: "loading",
+  element: $(".page.pageLoading"),
+  path: "/",
+  afterHide: async (): Promise<void> => {
     Skeleton.remove("pageLoading");
   },
-  async () => {
+  beforeShow: async (): Promise<void> => {
     Skeleton.append("pageLoading", "main");
   },
-  async () => {
-    //
-  }
-);
+});

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<void> => {
     $(".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<void> => {
     Skeleton.append("pageLogin", "main");
     enableSignUpButton();
     enableInputs();
   },
-  async () => {
-    //
-  }
-);
+});
 
 $(() => {
   Skeleton.save("pageLogin");

frontend/src/ts/pages/page.ts

@@ -3,6 +3,19 @@ type Options<T> = {
   data?: T;
 };
 
+type PageProperties<T> = {
+  name: MonkeyTypes.PageName;
+  element: JQuery;
+  path: string;
+  beforeHide?: () => Promise<void>;
+  afterHide?: () => Promise<void>;
+  beforeShow?: (options: Options<T>) => Promise<void>;
+  afterShow?: () => Promise<void>;
+};
+
+async function empty(): Promise<void> {
+  return;
+}
 export default class Page<T> {
   public name: MonkeyTypes.PageName;
   public element: JQuery;
@@ -11,21 +24,14 @@ export default class Page<T> {
   public afterHide: () => Promise<void>;
   public beforeShow: (options: Options<T>) => Promise<void>;
   public afterShow: () => Promise<void>;
-  constructor(
-    name: MonkeyTypes.PageName,
-    element: JQuery,
-    pathname: string,
-    beforeHide: () => Promise<void>,
-    afterHide: () => Promise<void>,
-    beforeShow: (options: Options<T>) => Promise<void>,
-    afterShow: () => Promise<void>
-  ) {
-    this.name = name;
-    this.element = element;
-    this.pathname = pathname;
-    this.beforeHide = beforeHide;
-    this.afterHide = afterHide;
-    this.beforeShow = beforeShow;
-    this.afterShow = afterShow;
+
+  constructor(props: PageProperties<T>) {
+    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;
   }
 }

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<void> => {
     Skeleton.remove("pageProfileSearch");
   },
-  async () => {
+  beforeShow: async (): Promise<void> => {
     Skeleton.append("pageProfileSearch", "main");
     $(".page.pageProfileSearch input").val("");
   },
-  async () => {
-    $(".page.pageProfileSearch input").focus();
-  }
-);
+  afterShow: async (): Promise<void> => {
+    $(".page.pageProfileSearch input").trigger("focus");
+  },
+});

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<undefined | SharedTypes.UserProfile>(
-  "profile",
-  $(".page.pageProfile"),
-  "/profile",
-  async () => {
-    //
-  },
-  async () => {
+export const page = new Page<undefined | SharedTypes.UserProfile>({
+  name: "profile",
+  element: $(".page.pageProfile"),
+  path: "/profile",
+  afterHide: async (): Promise<void> => {
     Skeleton.remove("pageProfile");
     reset();
   },
-  async (options) => {
+  beforeShow: async (options): Promise<void> => {
     Skeleton.append("pageProfile", "main");
     const uidOrName = options?.params?.["uidOrName"] ?? "";
     if (uidOrName) {
@@ -240,9 +237,6 @@ export const page = new Page<undefined | SharedTypes.UserProfile>(
       $(".page.pageProfile .content").addClass("hidden");
     }
   },
-  async () => {
-    //
-  }
-);
+});
 
 Skeleton.save("pageProfile");

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<void> => {
     reset();
     Skeleton.remove("pageSettings");
   },
-  async () => {
+  beforeShow: async (): Promise<void> => {
     Skeleton.append("pageSettings", "main");
     await fillSettingsPage();
     await update(false);
   },
-  async () => {
-    //
-  }
-);
+});
 
 $(async () => {
   Skeleton.save("pageSettings");

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<void> => {
     ManualRestart.set();
     TestLogic.restart();
     void Funbox.clear();
     void ModesNotice.update();
     $("#wordsInput").trigger("focusout");
   },
-  async () => {
+  afterHide: async (): Promise<void> => {
     updateFooterAndVerticalAds(true);
   },
-  async () => {
+  beforeShow: async (): Promise<void> => {
     updateFooterAndVerticalAds(false);
     TestStats.resetIncomplete();
     ManualRestart.set();
@@ -33,7 +33,4 @@ export const page = new Page(
     void Funbox.activate();
     void Keymap.refresh();
   },
-  async () => {
-    //
-  }
-);
+});