From 1c3d76d45fe3d18c3c51afd37dc911a08d345cf7 Mon Sep 17 00:00:00 2001
From: janderedev <me@janderedev.xyz>
Date: Thu, 12 Aug 2021 12:32:56 +0200
Subject: [PATCH] Added mutual servers tab on user profile

---
 .../intermediate/popovers/UserProfile.tsx     | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/src/context/intermediate/popovers/UserProfile.tsx b/src/context/intermediate/popovers/UserProfile.tsx
index 814460a3..0ba20bab 100644
--- a/src/context/intermediate/popovers/UserProfile.tsx
+++ b/src/context/intermediate/popovers/UserProfile.tsx
@@ -11,6 +11,7 @@ import { Localizer, Text } from "preact-i18n";
 import { useContext, useEffect, useLayoutEffect, useState } from "preact/hooks";
 
 import ChannelIcon from "../../../components/common/ChannelIcon";
+import ServerIcon from "../../../components/common/ServerIcon";
 import Tooltip from "../../../components/common/Tooltip";
 import UserIcon from "../../../components/common/user/UserIcon";
 import UserStatus from "../../../components/common/user/UserStatus";
@@ -71,6 +72,11 @@ export const UserProfile = observer(
                 channel.recipient_ids!.includes(user_id),
         );
 
+        // Fix this once an API route for fetching mutual servers exists
+        const mutualServers = [...client.servers.values()].filter(
+            (server) => true,
+        );
+
         useLayoutEffect(() => {
             if (!user_id) return;
             if (typeof profile !== "undefined") setProfile(undefined);
@@ -211,6 +217,11 @@ export const UserProfile = observer(
                                     onClick={() => setTab("groups")}>
                                     <Text id="app.special.popovers.user_profile.mutual_groups" />
                                 </div>
+                                <div
+                                    data-active={tab === "servers"}
+                                    onClick={() => setTab("servers")}>
+                                    <Text id="app.special.popovers.user_profile.mutual_servers" />
+                                </div>
                             </>
                         )}
                     </div>
@@ -359,6 +370,32 @@ export const UserProfile = observer(
                             )}
                         </div>
                     )}
+                    {tab === "servers" && (
+                        <div className={styles.entries}>
+                            {mutualServers.length === 0 ? (
+                                <div className={styles.empty}>
+                                    <Text id="app.special.popovers.user_profile.no_servers" />
+                                </div>
+                            ) : (
+                                mutualServers.map(
+                                    (x) =>
+                                        x && (
+                                            <Link to={`/server/${x._id}`}>
+                                                <div
+                                                    className={styles.entry}
+                                                    key={x._id}>
+                                                    <ServerIcon
+                                                        target={x}
+                                                        size={32}
+                                                    />
+                                                    <span>{x.name}</span>
+                                                </div>
+                                            </Link>
+                                        ),
+                                )
+                            )}
+                        </div>
+                    )}
                 </div>
             </Modal>
         );