From 8f0fef3c3fe5896119e903adf57b860c9db11f03 Mon Sep 17 00:00:00 2001
From: Leonabcd123 <156839416+Leonabcd123@users.noreply.github.com>
Date: Sat, 13 Dec 2025 21:34:31 +0200
Subject: [PATCH] Remove jquery from profile page

---
 frontend/src/ts/pages/profile.ts | 64 ++++++++++++++++++++------------
 1 file changed, 41 insertions(+), 23 deletions(-)

diff --git a/frontend/src/ts/pages/profile.ts b/frontend/src/ts/pages/profile.ts
index 098a5a5af..55437c733 100644
--- a/frontend/src/ts/pages/profile.ts
+++ b/frontend/src/ts/pages/profile.ts
@@ -12,14 +12,14 @@ import * as TestActivity from "../elements/test-activity";
 import { TestActivityCalendar } from "../elements/test-activity-calendar";
 import { getFirstDayOfTheWeek } from "../utils/date-and-time";
 import { addFriend } from "./friends";
-import { qsr } from "../utils/dom";
+import { qs, qsr } from "../utils/dom";
 
 const firstDayOfTheWeek = getFirstDayOfTheWeek();
 
 function reset(): void {
-  $(".page.pageProfile .error").addClass("hidden");
-  $(".page.pageProfile .preloader").removeClass("hidden");
-  $(".page.pageProfile .profile").html(`
+  qs(".page.pageProfile .error")?.hide();
+  qs(".page.pageProfile .preloader")?.show();
+  qs(".page.pageProfile .profile")?.setHtml(`
       <div class="details none">
         <div class="avatarAndName">
           <div class="avatar"></div>
@@ -182,7 +182,7 @@ type UpdateOptions = {
 async function update(options: UpdateOptions): Promise<void> {
   const getParamExists = checkIfGetParameterExists("isUid");
   if (options.data) {
-    $(".page.pageProfile .preloader").addClass("hidden");
+    qs(".page.pageProfile .preloader")?.hide();
     await Profile.update("profile", options.data);
     PbTables.update(
       // this cast is fine because pb tables can handle the partial data inside user profiles
@@ -195,15 +195,15 @@ async function update(options: UpdateOptions): Promise<void> {
       query: { isUid: getParamExists },
     });
 
-    $(".page.pageProfile .preloader").addClass("hidden");
+    qs(".page.pageProfile .preloader")?.hide();
 
     if (response.status === 404) {
       const message = getParamExists
         ? "User not found"
         : `User ${options.uidOrName} not found`;
-      $(".page.pageProfile .preloader").addClass("hidden");
-      $(".page.pageProfile .error").removeClass("hidden");
-      $(".page.pageProfile .error .message").text(message);
+      qs(".page.pageProfile .preloader")?.hide();
+      qs(".page.pageProfile .error")?.show();
+      qs(".page.pageProfile .error .message")?.setText(message);
     } else if (response.status === 200) {
       const profile = response.body.data;
       window.history.replaceState(null, "", `/profile/${profile.name}`);
@@ -228,7 +228,7 @@ async function update(options: UpdateOptions): Promise<void> {
         TestActivity.clear(testActivity);
       }
     } else {
-      // $(".page.pageProfile .failedToLoad").removeClass("hidden");
+      // qs(".page.pageProfile .failedToLoad")?.show();
       Notifications.add("Failed to load profile: " + response.body.message, -1);
       return;
     }
@@ -237,23 +237,41 @@ async function update(options: UpdateOptions): Promise<void> {
   }
 }
 
-$(".page.pageProfile").on("click", ".profile .userReportButton", () => {
-  const uid = $(".page.pageProfile .profile").attr("uid") ?? "";
-  const name = $(".page.pageProfile .profile").attr("name") ?? "";
+qs(".page.pageProfile")?.on("click", (event: MouseEvent) => {
+  const target = event.target;
+
+  if (target instanceof HTMLElement) {
+    if (!target.matches(".profile .userReportButton")) return;
+  } else {
+    return;
+  }
+
+  const uid = qs(".page.pageProfile .profile")?.getAttribute("uid") ?? "";
+  const name = qs(".page.pageProfile .profile")?.getAttribute("name") ?? "";
   const lbOptOut =
-    ($(".page.pageProfile .profile").attr("lbOptOut") ?? "false") === "true";
+    (qs(".page.pageProfile .profile")?.getAttribute("lbOptOut") ?? "false") ===
+    "true";
 
   void UserReportModal.show({ uid, name, lbOptOut });
 });
 
-$(".page.pageProfile").on("click", ".profile .addFriendButton", async () => {
-  const friendName = $(".page.pageProfile .profile").attr("name") ?? "";
+qs(".page.pageProfile")?.on("click", async (event: MouseEvent) => {
+  const target = event.target;
+
+  if (target instanceof HTMLElement) {
+    if (!target.matches(".profile .addFriendButton")) return;
+  } else {
+    return;
+  }
+
+  const friendName =
+    qs(".page.pageProfile .profile")?.getAttribute("name") ?? "";
 
   const result = await addFriend(friendName);
 
   if (result === true) {
     Notifications.add(`Request sent to ${friendName}`);
-    $(".profile .details .addFriendButton").addClass("disabled");
+    qs(".profile .details .addFriendButton")?.disable();
   } else {
     Notifications.add(result, -1);
   }
@@ -271,18 +289,18 @@ export const page = new Page<undefined | UserProfile>({
     Skeleton.append("pageProfile", "main");
     const uidOrName = options?.params?.["uidOrName"] ?? "";
     if (uidOrName) {
-      $(".page.pageProfile .preloader").removeClass("hidden");
-      $(".page.pageProfile .search").addClass("hidden");
-      $(".page.pageProfile .content").removeClass("hidden");
+      qs(".page.pageProfile .preloader")?.show();
+      qs(".page.pageProfile .search")?.hide();
+      qs(".page.pageProfile .content")?.show();
       reset();
       void update({
         uidOrName,
         data: options?.data,
       });
     } else {
-      $(".page.pageProfile .preloader").addClass("hidden");
-      $(".page.pageProfile .search").removeClass("hidden");
-      $(".page.pageProfile .content").addClass("hidden");
+      qs(".page.pageProfile .preloader")?.hide();
+      qs(".page.pageProfile .search")?.show();
+      qs(".page.pageProfile .content")?.hide();
     }
   },
 });