Added mutual servers tab on user profile

This commit is contained in:
janderedev 2021-08-12 12:32:56 +02:00
parent 72ccbce765
commit 1c3d76d45f
No known key found for this signature in database
GPG key ID: 5D5E18ACB990F57A

View file

@ -11,6 +11,7 @@ import { Localizer, Text } from "preact-i18n";
import { useContext, useEffect, useLayoutEffect, useState } from "preact/hooks"; import { useContext, useEffect, useLayoutEffect, useState } from "preact/hooks";
import ChannelIcon from "../../../components/common/ChannelIcon"; import ChannelIcon from "../../../components/common/ChannelIcon";
import ServerIcon from "../../../components/common/ServerIcon";
import Tooltip from "../../../components/common/Tooltip"; import Tooltip from "../../../components/common/Tooltip";
import UserIcon from "../../../components/common/user/UserIcon"; import UserIcon from "../../../components/common/user/UserIcon";
import UserStatus from "../../../components/common/user/UserStatus"; import UserStatus from "../../../components/common/user/UserStatus";
@ -71,6 +72,11 @@ export const UserProfile = observer(
channel.recipient_ids!.includes(user_id), 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(() => { useLayoutEffect(() => {
if (!user_id) return; if (!user_id) return;
if (typeof profile !== "undefined") setProfile(undefined); if (typeof profile !== "undefined") setProfile(undefined);
@ -211,6 +217,11 @@ export const UserProfile = observer(
onClick={() => setTab("groups")}> onClick={() => setTab("groups")}>
<Text id="app.special.popovers.user_profile.mutual_groups" /> <Text id="app.special.popovers.user_profile.mutual_groups" />
</div> </div>
<div
data-active={tab === "servers"}
onClick={() => setTab("servers")}>
<Text id="app.special.popovers.user_profile.mutual_servers" />
</div>
</> </>
)} )}
</div> </div>
@ -359,6 +370,32 @@ export const UserProfile = observer(
)} )}
</div> </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> </div>
</Modal> </Modal>
); );