revite/src/pages/friends/Friends.tsx

101 lines
4 KiB
TypeScript
Raw Normal View History

2021-06-19 15:00:30 -04:00
import styles from "./Friend.module.scss";
2021-07-02 05:39:07 -04:00
import { UserDetail, Conversation, UserPlus } from "@styled-icons/boxicons-solid";
2021-06-19 15:00:30 -04:00
import { Friend } from "./Friend";
import { Text } from "preact-i18n";
import Header from "../../components/ui/Header";
import Overline from "../../components/ui/Overline";
import IconButton from "../../components/ui/IconButton";
import { useUsers } from "../../context/revoltjs/hooks";
import { User, Users } from "revolt.js/dist/api/objects";
2021-07-02 05:39:07 -04:00
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
2021-06-19 15:00:30 -04:00
import { useIntermediate } from "../../context/intermediate/Intermediate";
export default function Friends() {
const { openScreen } = useIntermediate();
const users = useUsers() as User[];
users.sort((a, b) => a.username.localeCompare(b.username));
const pending = users.filter(
x =>
x.relationship === Users.Relationship.Incoming ||
x.relationship === Users.Relationship.Outgoing
);
const friends = users.filter(
x => x.relationship === Users.Relationship.Friend
);
const blocked = users.filter(
x => x.relationship === Users.Relationship.Blocked
);
const online = friends.filter(x => x.online && x.status?.presence !== Users.Presence.Invisible);
const offline = friends.filter(x => !x.online || x.status?.presence === Users.Presence.Invisible);
2021-06-19 15:00:30 -04:00
return (
<>
<Header placement="primary">
2021-07-02 05:39:07 -04:00
{ !isTouchscreenDevice && <UserDetail size={24} /> }
2021-06-19 15:00:30 -04:00
<div className={styles.title}>
<Text id="app.navigation.tabs.friends" />
</div>
<IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_group' })}>
2021-07-02 05:13:54 -04:00
<Conversation size={24} />
</IconButton>
<IconButton onClick={() => openScreen({ id: 'special_input', type: 'add_friend' })}>
<UserPlus size={24} />
</IconButton>
2021-06-19 15:00:30 -04:00
</Header>
<div
className={styles.list}
data-empty={
pending.length + friends.length + blocked.length === 0
}
>
{pending.length + friends.length + blocked.length === 0 && (
<>
<img src="https://img.insrt.uk/xexu7/XOPoBUTI47.png/raw" />
<Text id="app.special.friends.nobody" />
</>
)}
{pending.length > 0 && (
2021-07-02 05:13:54 -04:00
<Overline className={styles.overline} type="subtle">
<Text id="app.special.friends.pending" /> {" "}
2021-06-19 15:00:30 -04:00
{pending.length}
</Overline>
)}
{pending.map(y => (
<Friend key={y._id} user={y} />
))}
{online.length > 0 && (
<Overline className={styles.overline} type="subtle">
<Text id="app.status.online" /> {" "}
{online.length}
</Overline>
)}
{online.map(y => (
<Friend key={y._id} user={y} />
))}
{offline.length > 0 && (
2021-07-02 05:13:54 -04:00
<Overline className={styles.overline} type="subtle">
<Text id="app.status.offline" /> {" "}
{offline.length}
2021-06-19 15:00:30 -04:00
</Overline>
)}
{offline.map(y => (
2021-06-19 15:00:30 -04:00
<Friend key={y._id} user={y} />
))}
{blocked.length > 0 && (
2021-07-02 05:13:54 -04:00
<Overline className={styles.overline} type="subtle">
<Text id="app.special.friends.blocked" /> {" "}
2021-06-19 15:00:30 -04:00
{blocked.length}
</Overline>
)}
{blocked.map(y => (
<Friend key={y._id} user={y} />
))}
</div>
</>
);
}