revite/src/pages/friends/Friends.tsx

217 lines
8.6 KiB
TypeScript
Raw Normal View History

2021-07-05 06:23:23 -04:00
import {
2021-07-05 06:25:20 -04:00
ChevronDown,
ChevronRight,
ListPlus,
2021-07-05 06:23:23 -04:00
} from "@styled-icons/boxicons-regular";
import { UserDetail, MessageAdd, UserPlus } from "@styled-icons/boxicons-solid";
2021-06-19 15:00:30 -04:00
import { User, Users } from "revolt.js/dist/api/objects";
2021-07-05 06:23:23 -04:00
import styles from "./Friend.module.scss";
import { Text } from "preact-i18n";
import { TextReact } from "../../lib/i18n";
2021-07-02 05:39:07 -04:00
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
2021-07-05 06:23:23 -04:00
2021-06-19 15:00:30 -04:00
import { useIntermediate } from "../../context/intermediate/Intermediate";
2021-07-05 06:23:23 -04:00
import { useUsers } from "../../context/revoltjs/hooks";
import CollapsibleSection from "../../components/common/CollapsibleSection";
2021-07-05 06:23:23 -04:00
import Tooltip from "../../components/common/Tooltip";
import UserIcon from "../../components/common/user/UserIcon";
import Details from "../../components/ui/Details";
import Header from "../../components/ui/Header";
import IconButton from "../../components/ui/IconButton";
import Overline from "../../components/ui/Overline";
import { Children } from "../../types/Preact";
import { Friend } from "./Friend";
2021-06-19 15:00:30 -04:00
export default function Friends() {
2021-07-05 06:25:20 -04:00
const { openScreen } = useIntermediate();
2021-06-19 15:00:30 -04:00
2021-07-05 06:25:20 -04:00
const users = useUsers() as User[];
users.sort((a, b) => a.username.localeCompare(b.username));
2021-06-19 15:00:30 -04:00
2021-07-05 06:25:20 -04:00
const friends = users.filter(
(x) => x.relationship === Users.Relationship.Friend,
);
2021-07-05 06:25:20 -04:00
const lists = [
[
"",
users.filter((x) => x.relationship === Users.Relationship.Incoming),
],
[
"app.special.friends.sent",
users.filter((x) => x.relationship === Users.Relationship.Outgoing),
"outgoing",
],
[
"app.status.online",
friends.filter(
(x) =>
x.online && x.status?.presence !== Users.Presence.Invisible,
),
"online",
],
[
"app.status.offline",
friends.filter(
(x) =>
!x.online ||
x.status?.presence === Users.Presence.Invisible,
),
"offline",
],
[
"app.special.friends.blocked",
users.filter((x) => x.relationship === Users.Relationship.Blocked),
"blocked",
],
] as [string, User[], string][];
2021-07-05 06:25:20 -04:00
const incoming = lists[0][1];
const userlist: Children[] = incoming.map((x) => <b>{x.username}</b>);
for (let i = incoming.length - 1; i > 0; i--) userlist.splice(i, 0, ", ");
2021-07-05 06:25:20 -04:00
const isEmpty = lists.reduce((p: number, n) => p + n.length, 0) === 0;
return (
<>
<Header placement="primary">
{!isTouchscreenDevice && <UserDetail size={24} />}
<div className={styles.title}>
<Text id="app.navigation.tabs.friends" />
</div>
<div className={styles.actions}>
{/*<Tooltip content={"Create Category"} placement="bottom">
2021-07-03 04:46:35 -04:00
<IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_group' })}>
<ListPlus size={28} />
2021-07-03 04:46:35 -04:00
</IconButton>
</Tooltip>
<div className={styles.divider} />*/}
2021-07-05 06:25:20 -04:00
<Tooltip content={"Create Group"} placement="bottom">
<IconButton
onClick={() =>
openScreen({
id: "special_input",
type: "create_group",
})
}>
<MessageAdd size={24} />
</IconButton>
</Tooltip>
<Tooltip content={"Add Friend"} placement="bottom">
<IconButton
onClick={() =>
openScreen({
id: "special_input",
type: "add_friend",
})
}>
<UserPlus size={27} />
</IconButton>
</Tooltip>
{/*
2021-07-03 04:46:35 -04:00
<div className={styles.divider} />
<Tooltip content={"Friend Activity"} placement="bottom">
<IconButton>
<TennisBall size={24} />
</IconButton>
</Tooltip>
*/}
2021-07-05 06:25:20 -04:00
</div>
</Header>
<div className={styles.list} data-empty={isEmpty}>
{isEmpty && (
<>
<img src="https://img.insrt.uk/xexu7/XOPoBUTI47.png/raw" />
<Text id="app.special.friends.nobody" />
</>
)}
2021-07-02 13:00:17 -04:00
2021-07-05 06:25:20 -04:00
{incoming.length > 0 && (
<div
className={styles.pending}
onClick={() =>
openScreen({
id: "pending_requests",
users: incoming.map((x) => x._id),
})
}>
<div className={styles.avatars}>
{incoming.map(
(x, i) =>
i < 3 && (
<UserIcon
target={x}
size={64}
mask={
i <
Math.min(incoming.length - 1, 2)
? "url(#overlap)"
: undefined
}
/>
),
)}
</div>
<div className={styles.details}>
<div>
<Text id="app.special.friends.pending" />{" "}
<span>{incoming.length}</span>
</div>
<span>
{incoming.length > 3 ? (
<TextReact
id="app.special.friends.from.several"
fields={{
userlist: userlist.slice(0, 6),
count: incoming.length - 3,
}}
/>
) : incoming.length > 1 ? (
<TextReact
id="app.special.friends.from.multiple"
fields={{
user: userlist.shift()!,
userlist: userlist.slice(1),
}}
/>
) : (
<TextReact
id="app.special.friends.from.single"
fields={{ user: userlist[0] }}
/>
)}
</span>
</div>
<ChevronRight size={28} />
</div>
)}
2021-07-02 13:00:17 -04:00
2021-07-05 06:25:20 -04:00
{lists.map(([i18n, list, section_id], index) => {
if (index === 0) return;
if (list.length === 0) return;
2021-07-05 06:25:20 -04:00
return (
<CollapsibleSection
id={`friends_${section_id}`}
defaultValue={true}
sticky
large
summary={
<div class="title">
<Text id={i18n} /> {list.length}
</div>
}>
{list.map((x) => (
<Friend key={x._id} user={x} />
))}
</CollapsibleSection>
);
})}
</div>
</>
);
2021-06-19 15:00:30 -04:00
}