impr: validate username on profile search page (@fehmer)

frontend/src/ts/controllers/route-controller.ts

@@ -6,6 +6,7 @@ import { isFunboxActive } from "../test/funbox/list";
 import * as TestState from "../test/test-state";
 import * as Notifications from "../elements/notifications";
 import { LoadingOptions } from "../pages/page";
+import * as NavigationEvent from "../observables/navigation-event";
 
 //source: https://www.youtube.com/watch?v=OstALBk-jTc
 // https://www.youtube.com/watch?v=OstALBk-jTc
@@ -249,3 +250,7 @@ document.addEventListener("DOMContentLoaded", () => {
     }
   });
 });
+
+NavigationEvent.subscribe((it) => {
+  void navigate(it.url, { data: it.data });
+});

frontend/src/ts/index.ts

@@ -37,7 +37,6 @@ import { egVideoListener } from "./popups/video-ad-popup";
 import "./states/connection";
 import "./test/tts";
 import "./elements/fps-counter";
-import "./controllers/profile-search-controller";
 import { isDevEnvironment, addToGlobal } from "./utils/misc";
 import * as VersionButton from "./elements/version-button";
 import * as Focus from "./test/focus";

frontend/src/ts/observables/navigation-event.ts

@@ -0,0 +1,23 @@
+type NavigationEvent = {
+  url: string;
+  data?: unknown;
+};
+
+type SubscribeFunction = (event: NavigationEvent) => void;
+
+const subscribers: SubscribeFunction[] = [];
+
+export function subscribe(fn: SubscribeFunction): void {
+  subscribers.push(fn);
+}
+
+export function dispatch(event: NavigationEvent): void {
+  subscribers.forEach((fn) => {
+    try {
+      fn(event);
+    } catch (e) {
+      console.error("Navigation event subscriber threw an error");
+      console.error(e);
+    }
+  });
+}

frontend/src/ts/pages/profile-search.ts

@@ -1,5 +1,24 @@
 import Page from "./page";
 import * as Skeleton from "../utils/skeleton";
+import Ape from "../ape";
+import {
+  ValidatedHtmlInputElement,
+  validateWithIndicator,
+} from "../elements/input-validation";
+import { UserNameSchema, UserProfile } from "@monkeytype/schemas/users";
+import { remoteValidation } from "../utils/remote-validation";
+import * as NavigationEvent from "../observables/navigation-event";
+
+let nameInputEl: ValidatedHtmlInputElement | null = null;
+let lastProfile: UserProfile | null = null;
+
+function enableButton(): void {
+  $('.page.pageProfileSearch button[type="submit"]').prop("disabled", false);
+}
+
+function disableButton(): void {
+  $('.page.pageProfileSearch button[type="submit"]').prop("disabled", true);
+}
 
 export const page = new Page({
   id: "profileSearch",
@@ -10,9 +29,54 @@ export const page = new Page({
   },
   beforeShow: async (): Promise<void> => {
     Skeleton.append("pageProfileSearch", "main");
-    $(".page.pageProfileSearch input").val("");
+
+    if (nameInputEl === null) {
+      nameInputEl = validateWithIndicator(
+        document.querySelector(
+          ".page.pageProfileSearch input"
+        ) as HTMLInputElement,
+        {
+          schema: UserNameSchema,
+          isValid: remoteValidation(
+            async (name) =>
+              Ape.users.getProfile({ params: { uidOrName: name } }),
+            {
+              check: (data) => {
+                lastProfile = data;
+                return true;
+              },
+              on4xx: () => "Unknown user",
+            }
+          ),
+          callback: (result) => {
+            if (result.status === "success") {
+              enableButton();
+            } else {
+              disableButton();
+              lastProfile = null;
+            }
+          },
+        }
+      );
+    }
+
+    nameInputEl.setValue(null);
+    disableButton();
   },
   afterShow: async (): Promise<void> => {
     $(".page.pageProfileSearch input").trigger("focus");
   },
 });
+
+$(".page.pageProfileSearch form").on("submit", (e) => {
+  e.preventDefault();
+  if (lastProfile === null) return;
+  NavigationEvent.dispatch({
+    url: `/profile/${lastProfile.name}`,
+    data: lastProfile,
+  });
+});
+
+$(() => {
+  Skeleton.save("pageProfileSearch");
+});