hide add friends button

frontend/src/ts/elements/account-button.ts

@@ -76,10 +76,10 @@ export function update(): void {
     );
   }
 
-  updateFriendRequests();
+  updateFriendRequestsIndicator();
 }
 
-export function updateFriendRequests(): void {
+export function updateFriendRequestsIndicator(): void {
   const friends = getSnapshot()?.friends;
 
   if (friends !== undefined) {

frontend/src/ts/elements/account-settings/blocked-user-table.ts

@@ -5,6 +5,7 @@ import { format } from "date-fns/format";
 import { isAuthenticated } from "../../firebase";
 import { getFriendUid } from "../../pages/friends";
 import * as DB from "../../db";
+import { updateFriendRequestsIndicator } from "../account-button";
 
 let blockedUsers: FriendRequest[] = [];
 const element = $("#pageAccountSettings .tab[data-tab='blockedUsers']");
@@ -99,6 +100,7 @@ element.on("click", "table button.delete", async (e) => {
 
       // eslint-disable-next-line @typescript-eslint/no-dynamic-delete, @typescript-eslint/no-unsafe-member-access
       delete snapshot.friends[uid];
+      updateFriendRequestsIndicator();
     }
   }
 });

frontend/src/ts/elements/profile.ts

@@ -19,6 +19,7 @@ import { Snapshot } from "../constants/default-snapshot";
 import { getAvatarElement } from "../utils/discord-avatar";
 import { formatXp } from "../utils/levels";
 import { formatTopPercentage } from "../utils/misc";
+import { get as getServerConfiguration } from "../ape/server-configuration";
 
 type ProfileViewPaths = "profile" | "account";
 type UserProfileOrSnapshot = UserProfile | Snapshot;
@@ -313,21 +314,9 @@ export async function update(
 
   if (profile.uid === getAuthenticatedUser()?.uid) {
     profileElement.find(".userReportButton").addClass("hidden");
-    profileElement.find(".addFriendButton").addClass("hidden");
   } else {
     profileElement.find(".userReportButton").removeClass("hidden");
   }
-  if (
-    profile.uid !== undefined &&
-    (profile.uid === getAuthenticatedUser()?.uid ||
-      DB.getSnapshot()?.friends[profile.uid] !== undefined)
-  ) {
-    profileElement.find(".addFriendButton").addClass("hidden");
-  } else {
-    profileElement.find(".addFriendButton").removeClass("hidden");
-  }
-
-  //structure
 
   const bioAndKey = bio || keyboard;
 
@@ -372,6 +361,8 @@ export async function update(
   } else if (socials && bioAndKey) {
     details.addClass("both");
   }
+
+  updateFriendRequestButton();
 }
 
 export function updateXp(
@@ -440,6 +431,26 @@ export function updateNameFontSize(where: ProfileViewPaths): void {
   nameField.style.fontSize = `${finalFontSize}px`;
 }
 
+export function updateFriendRequestButton(): void {
+  const myUid = getAuthenticatedUser()?.uid;
+  const profileUid = document
+    .querySelector(".profile")
+    ?.getAttribute("uid") as string;
+  const button = document.querySelector(".profile .addFriendButton");
+  if (button === null) {
+    throw new Error("button?");
+  }
+
+  const myProfile = myUid === profileUid;
+  const hasRequest = DB.getSnapshot()?.friends[profileUid] !== undefined;
+  const featureEnabled = getServerConfiguration()?.friends.enabled;
+
+  if (!featureEnabled || myUid === undefined || myProfile || hasRequest) {
+    button?.classList.add("hidden");
+  } else {
+    button?.classList.remove("hidden");
+  }
+}
 const throttledEvent = throttle(1000, () => {
   const activePage = ActivePage.get();
   if (activePage && ["account", "profile"].includes(activePage)) {

frontend/src/ts/pages/friends.ts

@@ -53,6 +53,7 @@ export async function addFriend(friendName: string): Promise<true | string> {
       const friendUid = getFriendUid(result.body.data);
       // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
       snapshot.friends[friendUid] = result.body.data.status;
+      updatePendingRequests();
     }
     return true;
   }
@@ -120,7 +121,7 @@ async function fetchPendingRequests(): Promise<void> {
   }
 }
 
-async function updatePendingRequests(): Promise<void> {
+function updatePendingRequests(): void {
   $(".pageFriends .pendingRequests").addClass("hidden");
 
   if (pendingRequests === undefined || pendingRequests.length === 0) {
@@ -393,6 +394,7 @@ $(".pageFriends .pendingRequests table").on("click", async (e) => {
 
       // eslint-disable-next-line @typescript-eslint/no-dynamic-delete, @typescript-eslint/no-unsafe-member-access
       delete snapshot.friends[friendUid];
+      updatePendingRequests();
     }
     if (count === 1) {
       $(".pageFriends .pendingRequests").addClass("hidden");
@@ -455,7 +457,7 @@ export const page = new Page<undefined>({
   beforeShow: async (): Promise<void> => {
     Skeleton.append("pageFriends", "main");
 
-    void updatePendingRequests();
+    updatePendingRequests();
     void updateFriends();
   },
 });

frontend/src/ts/pages/profile.ts

@@ -13,7 +13,6 @@ import { TestActivityCalendar } from "../elements/test-activity-calendar";
 import { getFirstDayOfTheWeek } from "../utils/date-and-time";
 import { addFriend } from "./friends";
 import * as AuthEvent from "../observables/auth-event";
-import { get as getServerConfiguration } from "../ape/server-configuration";
 
 const firstDayOfTheWeek = getFirstDayOfTheWeek();
 
@@ -84,7 +83,7 @@ function reset(): void {
             <i class="fas fa-flag"></i>
           </button>
           <button
-            class="addFriendButton needsAccount hidden"
+            class="addFriendButton hidden"
             data-balloon-pos="left"
             aria-label="Send friend request"
           >
@@ -236,12 +235,6 @@ async function update(options: UpdateOptions): Promise<void> {
   } else {
     Notifications.add("Missing update parameter!", -1);
   }
-
-  if (getServerConfiguration()?.friends.enabled) {
-    $(".profile .addFriendButton").removeClass("hidden");
-  } else {
-    $(".profile .addFriendButton").addClass("hidden");
-  }
 }
 
 $(".page.pageProfile").on("click", ".profile .userReportButton", () => {
@@ -295,11 +288,7 @@ export const page = new Page<undefined | UserProfile>({
 
 AuthEvent.subscribe((event) => {
   if (event.type === "authStateChanged") {
-    if (event.data.isUserSignedIn) {
-      $(`.pageProfile .needsAccount`).removeClass("hidden");
-    } else {
-      $(`.pageProfile .needsAccount`).addClass("hidden");
-    }
+    Profile.updateFriendRequestButton();
   }
 });