revite/src/pages/friends/Friends.tsx

131 lines
6.1 KiB
TypeScript
Raw Normal View History

2021-06-19 15:00:30 -04:00
import { Friend } from "./Friend";
import { Text } from "preact-i18n";
import styles from "./Friend.module.scss";
2021-06-19 15:00:30 -04:00
import Header from "../../components/ui/Header";
import Overline from "../../components/ui/Overline";
2021-07-02 13:00:17 -04:00
import Tooltip from "../../components/common/Tooltip";
2021-06-19 15:00:30 -04:00
import IconButton from "../../components/ui/IconButton";
import { useUsers } from "../../context/revoltjs/hooks";
import { User, Users } from "revolt.js/dist/api/objects";
2021-07-02 13:00:17 -04:00
import UserIcon from "../../components/common/user/UserIcon";
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";
2021-07-03 04:46:35 -04:00
import { ChevronDown, ChevronRight, ListPlus } from "@styled-icons/boxicons-regular";
import { UserDetail, MessageAdd, UserPlus } from "@styled-icons/boxicons-solid";
import { TextReact } from "../../lib/i18n";
import { Children } from "../../types/Preact";
2021-06-19 15:00:30 -04:00
export default function Friends() {
const { openScreen } = useIntermediate();
const users = useUsers() as User[];
users.sort((a, b) => a.username.localeCompare(b.username));
const friends = users.filter(x => x.relationship === Users.Relationship.Friend);
const lists = [
[ '', users.filter(x =>
2021-07-02 13:00:17 -04:00
x.relationship === Users.Relationship.Incoming
) ],
[ 'app.special.friends.sent', users.filter(x =>
2021-06-19 15:00:30 -04:00
x.relationship === Users.Relationship.Outgoing
) ],
[ 'app.status.online', friends.filter(x =>
x.online && x.status?.presence !== Users.Presence.Invisible
) ],
[ 'app.status.offline', friends.filter(x =>
!x.online || x.status?.presence === Users.Presence.Invisible
) ],
[ 'app.special.friends.blocked', friends.filter(x =>
x.relationship === Users.Relationship.Blocked
) ]
] as [ string, User[] ][];
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, ', ');
const isEmpty = lists.reduce((p: number, n) => p + n.length, 0) === 0;
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>
2021-07-03 04:46:35 -04:00
<div className={styles.actions}>
{/*<Tooltip content={"Create Category"} placement="bottom">
<IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_group' })}>
<ListPlus size={24} />
</IconButton>
</Tooltip>
<div className={styles.divider} />*/}
<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>
{/*
<div className={styles.divider} />
<Tooltip content={"Friend Activity"} placement="bottom">
<IconButton>
<TennisBall size={24} />
</IconButton>
</Tooltip>
*/}
</div>
2021-06-19 15:00:30 -04:00
</Header>
<div className={styles.list} data-empty={isEmpty}>
{isEmpty && (
2021-06-19 15:00:30 -04:00
<>
<img src="https://img.insrt.uk/xexu7/XOPoBUTI47.png/raw" />
<Text id="app.special.friends.nobody" />
</>
)}
2021-07-02 13:00:17 -04:00
{ incoming.length > 0 && <div className={styles.pending}
onClick={() => openScreen({ id: 'pending_requests', users: incoming.map(x => x._id) })}>
2021-07-02 13:00:17 -04:00
<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 } />) }
2021-07-02 13:00:17 -04:00
</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>
2021-07-02 13:00:17 -04:00
</div>
<ChevronRight size={28} />
2021-07-02 13:00:17 -04:00
</div> }
{
2021-07-02 13:00:17 -04:00
lists.map(([i18n, list], index) => {
if (index === 0) return;
if (list.length === 0) return;
return (
<details open>
<summary>
<Overline className={styles.overline} type="subtle">
<ChevronDown size={20} />
<Text id={i18n} /> { list.length }
</Overline>
</summary>
{ list.map(x => <Friend key={x._id} user={x} />) }
</details>
)
})
}
2021-06-19 15:00:30 -04:00
</div>
</>
);
}