forked from abner/for-legacy-web
Run prettier on all files.
This commit is contained in:
Paul
@@ -1,107 +1,136 @@
|
||||
import { Text } from "preact-i18n";
|
||||
import classNames from "classnames";
|
||||
import styles from "./Friend.module.scss";
|
||||
import { useContext } from "preact/hooks";
|
||||
import { Children } from "../../types/Preact";
|
||||
import IconButton from "../../components/ui/IconButton";
|
||||
import { attachContextMenu } from "preact-context-menu";
|
||||
import { X, Plus } from "@styled-icons/boxicons-regular";
|
||||
import { User, Users } from "revolt.js/dist/api/objects";
|
||||
import { stopPropagation } from "../../lib/stopPropagation";
|
||||
import { VoiceOperationsContext } from "../../context/Voice";
|
||||
import UserIcon from "../../components/common/user/UserIcon";
|
||||
import UserStatus from '../../components/common/user/UserStatus';
|
||||
import { PhoneCall, Envelope } from "@styled-icons/boxicons-solid";
|
||||
import { User, Users } from "revolt.js/dist/api/objects";
|
||||
|
||||
import styles from "./Friend.module.scss";
|
||||
import classNames from "classnames";
|
||||
import { attachContextMenu } from "preact-context-menu";
|
||||
import { Text } from "preact-i18n";
|
||||
import { useContext } from "preact/hooks";
|
||||
|
||||
import { stopPropagation } from "../../lib/stopPropagation";
|
||||
|
||||
import { VoiceOperationsContext } from "../../context/Voice";
|
||||
import { useIntermediate } from "../../context/intermediate/Intermediate";
|
||||
import { AppContext, OperationsContext } from "../../context/revoltjs/RevoltClient";
|
||||
import {
|
||||
AppContext,
|
||||
OperationsContext,
|
||||
} from "../../context/revoltjs/RevoltClient";
|
||||
|
||||
import UserIcon from "../../components/common/user/UserIcon";
|
||||
import UserStatus from "../../components/common/user/UserStatus";
|
||||
import IconButton from "../../components/ui/IconButton";
|
||||
|
||||
import { Children } from "../../types/Preact";
|
||||
|
||||
interface Props {
|
||||
user: User;
|
||||
user: User;
|
||||
}
|
||||
|
||||
export function Friend({ user }: Props) {
|
||||
const client = useContext(AppContext);
|
||||
const { openScreen } = useIntermediate();
|
||||
const { openDM } = useContext(OperationsContext);
|
||||
const { connect } = useContext(VoiceOperationsContext);
|
||||
const client = useContext(AppContext);
|
||||
const { openScreen } = useIntermediate();
|
||||
const { openDM } = useContext(OperationsContext);
|
||||
const { connect } = useContext(VoiceOperationsContext);
|
||||
|
||||
const actions: Children[] = [];
|
||||
let subtext: Children = null;
|
||||
const actions: Children[] = [];
|
||||
let subtext: Children = null;
|
||||
|
||||
if (user.relationship === Users.Relationship.Friend) {
|
||||
subtext = <UserStatus user={user} />
|
||||
actions.push(
|
||||
<>
|
||||
<IconButton type="circle"
|
||||
className={classNames(styles.button, styles.call, styles.success)}
|
||||
onClick={ev => stopPropagation(ev, openDM(user._id).then(connect))}>
|
||||
<PhoneCall size={20} />
|
||||
</IconButton>
|
||||
<IconButton type="circle"
|
||||
className={styles.button}
|
||||
onClick={ev => stopPropagation(ev, openDM(user._id))}>
|
||||
<Envelope size={20} />
|
||||
</IconButton>
|
||||
</>
|
||||
);
|
||||
}
|
||||
if (user.relationship === Users.Relationship.Friend) {
|
||||
subtext = <UserStatus user={user} />;
|
||||
actions.push(
|
||||
<>
|
||||
<IconButton
|
||||
type="circle"
|
||||
className={classNames(
|
||||
styles.button,
|
||||
styles.call,
|
||||
styles.success,
|
||||
)}
|
||||
onClick={(ev) =>
|
||||
stopPropagation(ev, openDM(user._id).then(connect))
|
||||
}>
|
||||
<PhoneCall size={20} />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
type="circle"
|
||||
className={styles.button}
|
||||
onClick={(ev) => stopPropagation(ev, openDM(user._id))}>
|
||||
<Envelope size={20} />
|
||||
</IconButton>
|
||||
</>,
|
||||
);
|
||||
}
|
||||
|
||||
if (user.relationship === Users.Relationship.Incoming) {
|
||||
actions.push(
|
||||
<IconButton type="circle"
|
||||
className={styles.button}
|
||||
onClick={ev => stopPropagation(ev, client.users.addFriend(user.username))}>
|
||||
<Plus size={24} />
|
||||
</IconButton>
|
||||
);
|
||||
if (user.relationship === Users.Relationship.Incoming) {
|
||||
actions.push(
|
||||
<IconButton
|
||||
type="circle"
|
||||
className={styles.button}
|
||||
onClick={(ev) =>
|
||||
stopPropagation(ev, client.users.addFriend(user.username))
|
||||
}>
|
||||
<Plus size={24} />
|
||||
</IconButton>,
|
||||
);
|
||||
|
||||
subtext = <Text id="app.special.friends.incoming" />;
|
||||
}
|
||||
subtext = <Text id="app.special.friends.incoming" />;
|
||||
}
|
||||
|
||||
if (user.relationship === Users.Relationship.Outgoing) {
|
||||
subtext = <Text id="app.special.friends.outgoing" />;
|
||||
}
|
||||
if (user.relationship === Users.Relationship.Outgoing) {
|
||||
subtext = <Text id="app.special.friends.outgoing" />;
|
||||
}
|
||||
|
||||
if (
|
||||
user.relationship === Users.Relationship.Friend ||
|
||||
user.relationship === Users.Relationship.Outgoing ||
|
||||
user.relationship === Users.Relationship.Incoming
|
||||
) {
|
||||
actions.push(
|
||||
<IconButton type="circle"
|
||||
className={classNames(styles.button, styles.error)}
|
||||
onClick={ev => stopPropagation(ev,
|
||||
user.relationship === Users.Relationship.Friend ?
|
||||
openScreen({ id: 'special_prompt', type: 'unfriend_user', target: user })
|
||||
: client.users.removeFriend(user._id)
|
||||
)}>
|
||||
<X size={24} />
|
||||
</IconButton>
|
||||
);
|
||||
}
|
||||
if (
|
||||
user.relationship === Users.Relationship.Friend ||
|
||||
user.relationship === Users.Relationship.Outgoing ||
|
||||
user.relationship === Users.Relationship.Incoming
|
||||
) {
|
||||
actions.push(
|
||||
<IconButton
|
||||
type="circle"
|
||||
className={classNames(styles.button, styles.error)}
|
||||
onClick={(ev) =>
|
||||
stopPropagation(
|
||||
ev,
|
||||
user.relationship === Users.Relationship.Friend
|
||||
? openScreen({
|
||||
id: "special_prompt",
|
||||
type: "unfriend_user",
|
||||
target: user,
|
||||
})
|
||||
: client.users.removeFriend(user._id),
|
||||
)
|
||||
}>
|
||||
<X size={24} />
|
||||
</IconButton>,
|
||||
);
|
||||
}
|
||||
|
||||
if (user.relationship === Users.Relationship.Blocked) {
|
||||
actions.push(
|
||||
<IconButton type="circle"
|
||||
className={classNames(styles.button, styles.error)}
|
||||
onClick={ev => stopPropagation(ev, client.users.unblockUser(user._id))}>
|
||||
<X size={24} />
|
||||
</IconButton>
|
||||
);
|
||||
}
|
||||
if (user.relationship === Users.Relationship.Blocked) {
|
||||
actions.push(
|
||||
<IconButton
|
||||
type="circle"
|
||||
className={classNames(styles.button, styles.error)}
|
||||
onClick={(ev) =>
|
||||
stopPropagation(ev, client.users.unblockUser(user._id))
|
||||
}>
|
||||
<X size={24} />
|
||||
</IconButton>,
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.friend}
|
||||
onClick={() => openScreen({ id: 'profile', user_id: user._id })}
|
||||
onContextMenu={attachContextMenu('Menu', { user: user._id })}>
|
||||
<UserIcon target={user} size={36} status />
|
||||
<div className={styles.name}>
|
||||
<span>@{user.username}</span>
|
||||
{subtext && (
|
||||
<span className={styles.subtext}>{subtext}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.actions}>{actions}</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div
|
||||
className={styles.friend}
|
||||
onClick={() => openScreen({ id: "profile", user_id: user._id })}
|
||||
onContextMenu={attachContextMenu("Menu", { user: user._id })}>
|
||||
<UserIcon target={user} size={36} status />
|
||||
<div className={styles.name}>
|
||||
<span>@{user.username}</span>
|
||||
{subtext && <span className={styles.subtext}>{subtext}</span>}
|
||||
</div>
|
||||
<div className={styles.actions}>{actions}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,78 +1,117 @@
|
||||
import { Friend } from "./Friend";
|
||||
import { Text } from "preact-i18n";
|
||||
import styles from "./Friend.module.scss";
|
||||
import Header from "../../components/ui/Header";
|
||||
import Overline from "../../components/ui/Overline";
|
||||
import Tooltip from "../../components/common/Tooltip";
|
||||
import IconButton from "../../components/ui/IconButton";
|
||||
import { useUsers } from "../../context/revoltjs/hooks";
|
||||
import { User, Users } from "revolt.js/dist/api/objects";
|
||||
import UserIcon from "../../components/common/user/UserIcon";
|
||||
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
|
||||
import { useIntermediate } from "../../context/intermediate/Intermediate";
|
||||
import { ChevronDown, ChevronRight, ListPlus } from "@styled-icons/boxicons-regular";
|
||||
import {
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
ListPlus,
|
||||
} from "@styled-icons/boxicons-regular";
|
||||
import { UserDetail, MessageAdd, UserPlus } from "@styled-icons/boxicons-solid";
|
||||
import { User, Users } from "revolt.js/dist/api/objects";
|
||||
|
||||
import styles from "./Friend.module.scss";
|
||||
import { Text } from "preact-i18n";
|
||||
|
||||
import { TextReact } from "../../lib/i18n";
|
||||
import { Children } from "../../types/Preact";
|
||||
import Details from "../../components/ui/Details";
|
||||
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
|
||||
|
||||
import { useIntermediate } from "../../context/intermediate/Intermediate";
|
||||
import { useUsers } from "../../context/revoltjs/hooks";
|
||||
|
||||
import CollapsibleSection from "../../components/common/CollapsibleSection";
|
||||
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";
|
||||
|
||||
export default function Friends() {
|
||||
const { openScreen } = useIntermediate();
|
||||
const { openScreen } = useIntermediate();
|
||||
|
||||
const users = useUsers() as User[];
|
||||
users.sort((a, b) => a.username.localeCompare(b.username));
|
||||
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 friends = users.filter(
|
||||
(x) => x.relationship === Users.Relationship.Friend,
|
||||
);
|
||||
|
||||
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 ][];
|
||||
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][];
|
||||
|
||||
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 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;
|
||||
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">
|
||||
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">
|
||||
<IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_group' })}>
|
||||
<ListPlus size={28} />
|
||||
</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>
|
||||
{/*
|
||||
<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>
|
||||
@@ -80,51 +119,98 @@ export default function Friends() {
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
*/}
|
||||
</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" />
|
||||
</>
|
||||
)}
|
||||
</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" />
|
||||
</>
|
||||
)}
|
||||
|
||||
{ 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> }
|
||||
{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>
|
||||
)}
|
||||
|
||||
{
|
||||
lists.map(([i18n, list, section_id], index) => {
|
||||
if (index === 0) return;
|
||||
if (list.length === 0) return;
|
||||
{lists.map(([i18n, list, section_id], index) => {
|
||||
if (index === 0) return;
|
||||
if (list.length === 0) return;
|
||||
|
||||
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>
|
||||
</>
|
||||
);
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user