Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
No results found
Show changes
Hide whitespace changes
Inline Side-by-side
Showing
with 2105 additions and 1006 deletions
src/context/intermediate/popovers/UserPicker.tsx
View file @ 1ac5de17
import { RelationshipStatus } from "revolt-api/types/Users";
import styles from "./UserPicker.module.scss";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { useState } from "preact/hooks"; import { useState } from "preact/hooks";
import styles from "./UserPicker.module.scss";
import { useUsers } from "../../revoltjs/hooks"; import UserCheckbox from "../../../components/common/user/UserCheckbox";
import Modal from "../../../components/ui/Modal"; import Modal from "../../../components/ui/Modal";
import { User, Users } from "revolt.js/dist/api/objects";
import UserCheckbox from "../../../components/common/UserCheckbox"; import { useClient } from "../../revoltjs/RevoltClient";
interface Props { interface Props {
omit?: string[]; omit?: string[];
...@@ -16,7 +19,7 @@ export function UserPicker(props: Props) { ...@@ -16,7 +19,7 @@ export function UserPicker(props: Props) {
const [selected, setSelected] = useState<string[]>([]); const [selected, setSelected] = useState<string[]>([]);
const omit = [...(props.omit || []), "00000000000000000000000000"]; const omit = [...(props.omit || []), "00000000000000000000000000"];
const users = useUsers(); const client = useClient();
return ( return (
<Modal <Modal
...@@ -25,34 +28,29 @@ export function UserPicker(props: Props) { ...@@ -25,34 +28,29 @@ export function UserPicker(props: Props) {
onClose={props.onClose} onClose={props.onClose}
actions={[ actions={[
{ {
text: <Text id="app.special.modals.actions.ok" />, children: <Text id="app.special.modals.actions.ok" />,
onClick: () => props.callback(selected).then(props.onClose) onClick: () => props.callback(selected).then(props.onClose),
} },
]} ]}>
>
<div className={styles.list}> <div className={styles.list}>
{(users.filter( {[...client.users.values()]
x => .filter(
x && (x) =>
x.relationship === Users.Relationship.Friend && x &&
!omit.includes(x._id) x.relationship === RelationshipStatus.Friend &&
) as User[]) !omit.includes(x._id),
.map(x => { )
return { .map((x) => (
...x,
selected: selected.includes(x._id)
};
})
.map(x => (
<UserCheckbox <UserCheckbox
key={x._id}
user={x} user={x}
checked={x.selected} checked={selected.includes(x._id)}
onChange={v => { onChange={(v) => {
if (v) { if (v) {
setSelected([...selected, x._id]); setSelected([...selected, x._id]);
} else { } else {
setSelected( setSelected(
selected.filter(y => y !== x._id) selected.filter((y) => y !== x._id),
); );
} }
}} }}
......
src/context/intermediate/popovers/UserProfile.module.scss
View file @ 1ac5de17
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
.header { .header {
background-size: cover; background-size: cover;
border-radius: 8px 8px 0 0; border-radius: var(--border-radius) var(--border-radius) 0 0;
background-position: center; background-position: center;
background-color: var(--secondary-background); background-color: var(--secondary-background);
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
> * { * {
min-width: 0; min-width: 0;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
...@@ -57,13 +57,13 @@ ...@@ -57,13 +57,13 @@
gap: 8px; gap: 8px;
display: flex; display: flex;
padding: 0 1.5em; padding: 0 1.5em;
font-size: .875rem; font-size: 0.875rem;
> div { > div {
padding: 8px; padding: 8px;
cursor: pointer; cursor: pointer;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
transition: border-bottom .3s; transition: border-bottom 0.3s;
&[data-active="true"] { &[data-active="true"] {
border-bottom: 2px solid var(--foreground); border-bottom: 2px solid var(--foreground);
...@@ -81,7 +81,10 @@ ...@@ -81,7 +81,10 @@
height: 100%; height: 100%;
display: flex; display: flex;
padding: 1em 1.5em; padding: 1em 1.5em;
max-width: 560px; max-width: 560px;
max-height: 240px;
overflow-y: auto; overflow-y: auto;
flex-direction: column; flex-direction: column;
background: var(--primary-background); background: var(--primary-background);
...@@ -140,11 +143,11 @@ ...@@ -140,11 +143,11 @@
padding: 12px; padding: 12px;
display: flex; display: flex;
cursor: pointer; cursor: pointer;
border-radius: 4px;
align-items: center; align-items: center;
transition: background-color 0.1s;
color: var(--secondary-foreground); color: var(--secondary-foreground);
border-radius: var(--border-radius);
background-color: var(--secondary-background); background-color: var(--secondary-background);
transition: background-color .1s;
&:hover { &:hover {
background-color: var(--primary-background); background-color: var(--primary-background);
......
src/context/intermediate/popovers/UserProfile.tsx
View file @ 1ac5de17
import Modal from "../../../components/ui/Modal"; import { Money } from "@styled-icons/boxicons-regular";
import { Localizer, Text } from "preact-i18n"; import { Envelope, Edit, UserPlus, Shield } from "@styled-icons/boxicons-solid";
import styles from "./UserProfile.module.scss"; import { observer } from "mobx-react-lite";
import Preloader from "../../../components/ui/Preloader";
import { Route } from "revolt.js/dist/api/routes";
import { Users } from "revolt.js/dist/api/objects";
import { IntermediateContext, useIntermediate } from "../Intermediate";
import { Globe, Mail, Edit, UserPlus, Shield } from "@styled-icons/feather";
import { Link, useHistory } from "react-router-dom"; import { Link, useHistory } from "react-router-dom";
import { Profile, RelationshipStatus } from "revolt-api/types/Users";
import { UserPermission } from "revolt.js/dist/api/permissions";
import { Route } from "revolt.js/dist/api/routes";
import styles from "./UserProfile.module.scss";
import { Localizer, Text } from "preact-i18n";
import { useContext, useEffect, useLayoutEffect, useState } from "preact/hooks"; import { useContext, useEffect, useLayoutEffect, useState } from "preact/hooks";
import { decodeTime } from "ulid";
import { CashStack } from "@styled-icons/bootstrap"; import ChannelIcon from "../../../components/common/ChannelIcon";
import { AppContext, ClientStatus, StatusContext } from "../../revoltjs/RevoltClient"; import Tooltip from "../../../components/common/Tooltip";
import { useChannels, useForceUpdate, useUser, useUsers } from "../../revoltjs/hooks"; import UserIcon from "../../../components/common/user/UserIcon";
import UserIcon from '../../../components/common/UserIcon'; import UserStatus from "../../../components/common/user/UserStatus";
import UserStatus from '../../../components/common/UserStatus'; import IconButton from "../../../components/ui/IconButton";
import Tooltip from '../../../components/common/Tooltip'; import Modal from "../../../components/ui/Modal";
import ChannelIcon from '../../../components/common/ChannelIcon'; import Preloader from "../../../components/ui/Preloader";
import Markdown from '../../../components/markdown/Markdown';
import Markdown from "../../../components/markdown/Markdown";
import {
ClientStatus,
StatusContext,
useClient,
} from "../../revoltjs/RevoltClient";
import { useIntermediate } from "../Intermediate";
interface Props { interface Props {
user_id: string; user_id: string;
dummy?: boolean; dummy?: boolean;
onClose: () => void; onClose?: () => void;
dummyProfile?: Users.Profile; dummyProfile?: Profile;
} }
enum Badges { enum Badges {
...@@ -30,312 +38,316 @@ enum Badges { ...@@ -30,312 +38,316 @@ enum Badges {
Translator = 2, Translator = 2,
Supporter = 4, Supporter = 4,
ResponsibleDisclosure = 8, ResponsibleDisclosure = 8,
EarlyAdopter = 256 EarlyAdopter = 256,
} }
export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) { export const UserProfile = observer(
const { writeClipboard } = useIntermediate(); ({ user_id, onClose, dummy, dummyProfile }: Props) => {
const { openScreen, writeClipboard } = useIntermediate();
const [profile, setProfile] = useState<undefined | null | Users.Profile>( const [profile, setProfile] = useState<undefined | null | Profile>(
undefined undefined,
); );
const [mutual, setMutual] = useState< const [mutual, setMutual] = useState<
undefined | null | Route<"GET", "/users/id/mutual">["response"] undefined | null | Route<"GET", "/users/id/mutual">["response"]
>(undefined); >(undefined);
const client = useContext(AppContext); const history = useHistory();
const status = useContext(StatusContext); const client = useClient();
const [tab, setTab] = useState("profile"); const status = useContext(StatusContext);
const history = useHistory(); const [tab, setTab] = useState("profile");
const ctx = useForceUpdate(); const user = client.users.get(user_id);
const all_users = useUsers(undefined, ctx); if (!user) {
const channels = useChannels(undefined, ctx); if (onClose) useEffect(onClose, []);
return null;
const user = all_users.find(x => x!._id === user_id); }
const users = mutual?.users ? all_users.filter(x => mutual.users.includes(x!._id)) : undefined;
if (!user) { const users = mutual?.users.map((id) => client.users.get(id));
useEffect(onClose, []);
return null;
}
useLayoutEffect(() => { const mutualGroups = [...client.channels.values()].filter(
if (!user_id) return; (channel) =>
if (typeof profile !== 'undefined') setProfile(undefined); channel?.channel_type === "Group" &&
if (typeof mutual !== 'undefined') setMutual(undefined); channel.recipient_ids!.includes(user_id),
}, [user_id]); );
if (dummy) {
useLayoutEffect(() => { useLayoutEffect(() => {
setProfile(dummyProfile); if (!user_id) return;
}, [dummyProfile]); if (typeof profile !== "undefined") setProfile(undefined);
} if (typeof mutual !== "undefined") setMutual(undefined);
// eslint-disable-next-line
}, [user_id]);
useEffect(() => { useEffect(() => {
if (dummy) return; if (dummy) {
if ( setProfile(dummyProfile);
status === ClientStatus.ONLINE && }
typeof mutual === "undefined" }, [dummy, dummyProfile]);
) {
setMutual(null);
client.users
.fetchMutual(user_id)
.then(data => setMutual(data));
}
}, [mutual, status]);
useEffect(() => { useEffect(() => {
if (dummy) return; if (dummy) return;
if ( if (
status === ClientStatus.ONLINE && status === ClientStatus.ONLINE &&
typeof profile === "undefined" typeof mutual === "undefined"
) { ) {
setProfile(null); setMutual(null);
user.fetchMutual().then(setMutual);
}
}, [mutual, status, dummy, user]);
// ! FIXME: in the future, also check if mutual guilds useEffect(() => {
// ! maybe just allow mutual group to allow profile viewing if (dummy) return;
/*if ( if (
user.relationship === Users.Relationship.Friend || status === ClientStatus.ONLINE &&
user.relationship === Users.Relationship.User typeof profile === "undefined"
) {*/ ) {
client.users setProfile(null);
.fetchProfile(user_id)
.then(data => setProfile(data))
.catch(() => {});
//}
}
}, [profile, status]);
const mutualGroups = channels.filter( if (user.permission & UserPermission.ViewProfile) {
channel => user.fetchProfile().then(setProfile);
channel?.channel_type === "Group" && }
channel.recipients.includes(user_id) }
); }, [profile, status, dummy, user]);
const backgroundURL = profile && client.users.getBackgroundURL(profile, { width: 1000 }, true); const backgroundURL =
const badges = (user.badges ?? 0) | (decodeTime(user._id) < 1623751765790 ? Badges.EarlyAdopter : 0); profile &&
client.generateFileURL(profile.background, { width: 1000 }, true);
const badges = user.badges ?? 0;
return ( return (
<Modal <Modal
visible visible
border={dummy} border={dummy}
onClose={onClose} padding={false}
dontModal={dummy} onClose={onClose}
> dontModal={dummy}>
<div <div
className={styles.header} className={styles.header}
data-force={ data-force={profile?.background ? "light" : undefined}
profile?.background style={{
? "light" backgroundImage:
: undefined backgroundURL &&
} `linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url('${backgroundURL}')`,
style={{ }}>
backgroundImage: backgroundURL && `linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url('${backgroundURL}')` <div className={styles.profile}>
}} <UserIcon size={80} target={user} status animate />
> <div className={styles.details}>
<div className={styles.profile}> <Localizer>
<UserIcon size={80} target={user} status /> <span
<div className={styles.details}> className={styles.username}
<Localizer> onClick={() =>
<span writeClipboard(user.username)
className={styles.username} }>
onClick={() => writeClipboard(user.username)}> @{user.username}
@{user.username} </span>
</span> </Localizer>
</Localizer> {user.status?.text && (
{user.status?.text && ( <span className={styles.status}>
<span className={styles.status}> <UserStatus user={user} tooltip />
<UserStatus user={user} /> </span>
</span> )}
</div>
{user.relationship === RelationshipStatus.Friend && (
<Localizer>
<Tooltip
content={
<Text id="app.context_menu.message_user" />
}>
<IconButton
onClick={() => {
onClose?.();
history.push(`/open/${user_id}`);
}}>
<Envelope size={30} />
</IconButton>
</Tooltip>
</Localizer>
)}
{user.relationship === RelationshipStatus.User && (
<IconButton
onClick={() => {
onClose?.();
if (dummy) return;
history.push(`/settings/profile`);
}}>
<Edit size={28} />
</IconButton>
)}
{(user.relationship === RelationshipStatus.Incoming ||
user.relationship === RelationshipStatus.None) && (
<IconButton onClick={() => user.addFriend()}>
<UserPlus size={28} />
</IconButton>
)} )}
</div> </div>
{user.relationship === Users.Relationship.Friend && ( <div className={styles.tabs}>
<Localizer> <div
<Tooltip data-active={tab === "profile"}
content={ onClick={() => setTab("profile")}>
<Text id="app.context_menu.message_user" /> <Text id="app.special.popovers.user_profile.profile" />
} </div>
> {user.relationship !== RelationshipStatus.User && (
{/*<IconButton <>
onClick={() => { <div
onClose(); data-active={tab === "friends"}
history.push(`/open/${user_id}`); onClick={() => setTab("friends")}>
}} <Text id="app.special.popovers.user_profile.mutual_friends" />
>*/} </div>
<Mail size={30} strokeWidth={1.5} /> <div
{/*</IconButton>*/} data-active={tab === "groups"}
</Tooltip> onClick={() => setTab("groups")}>
</Localizer> <Text id="app.special.popovers.user_profile.mutual_groups" />
)} </div>
{user.relationship === Users.Relationship.User && ( </>
/*<IconButton )}
onClick={() => {
onClose();
if (dummy) return;
history.push(`/settings/profile`);
}}
>*/
<Edit size={28} strokeWidth={1.5} />
/*</IconButton>*/
)}
{(user.relationship === Users.Relationship.Incoming ||
user.relationship === Users.Relationship.None) && (
/*<IconButton
onClick={() => client.users.addFriend(user.username)}
>*/
<UserPlus size={28} strokeWidth={1.5} />
/*</IconButton>*/
)}
</div>
<div className={styles.tabs}>
<div
data-active={tab === "profile"}
onClick={() => setTab("profile")}
>
<Text id="app.special.popovers.user_profile.profile" />
</div> </div>
{ user.relationship !== Users.Relationship.User &&
<>
<div
data-active={tab === "friends"}
onClick={() => setTab("friends")}
>
<Text id="app.special.popovers.user_profile.mutual_friends" />
</div>
<div
data-active={tab === "groups"}
onClick={() => setTab("groups")}
>
<Text id="app.special.popovers.user_profile.mutual_groups" />
</div>
</>
}
</div> </div>
</div> <div className={styles.content}>
<div className={styles.content}> {tab === "profile" && (
{tab === "profile" && <div>
<div> {!(profile?.content || badges > 0) && (
{ !(profile?.content || (badges > 0)) && <div className={styles.empty}>
<div className={styles.empty}><Text id="app.special.popovers.user_profile.empty" /></div> } <Text id="app.special.popovers.user_profile.empty" />
{ (badges > 0) && <div className={styles.category}><Text id="app.special.popovers.user_profile.sub.badges" /></div> } </div>
{ (badges > 0) && ( )}
<div className={styles.badges}> {badges > 0 && (
<Localizer> <div className={styles.category}>
{badges & Badges.Developer ? ( <Text id="app.special.popovers.user_profile.sub.badges" />
<Tooltip </div>
content={ )}
<Text id="app.navigation.tabs.dev" /> {badges > 0 && (
} <div className={styles.badges}>
> <Localizer>
<img src="/assets/badges/developer.svg" /> {badges & Badges.Developer ? (
</Tooltip> <Tooltip
) : ( content={
<></> <Text id="app.navigation.tabs.dev" />
)} }>
{badges & Badges.Translator ? ( <img src="/assets/badges/developer.svg" />
<Tooltip </Tooltip>
content={ ) : (
<Text id="app.special.popovers.user_profile.badges.translator" /> <></>
} )}
> {badges & Badges.Translator ? (
<img src="/assets/badges/translator.svg" /> <Tooltip
</Tooltip> content={
) : ( <Text id="app.special.popovers.user_profile.badges.translator" />
<></> }>
)} <img src="/assets/badges/translator.svg" />
{badges & Badges.EarlyAdopter ? ( </Tooltip>
<Tooltip ) : (
content={ <></>
<Text id="app.special.popovers.user_profile.badges.early_adopter" /> )}
} {badges & Badges.EarlyAdopter ? (
> <Tooltip
<img src="/assets/badges/early_adopter.svg" /> content={
</Tooltip> <Text id="app.special.popovers.user_profile.badges.early_adopter" />
) : ( }>
<></> <img src="/assets/badges/early_adopter.svg" />
)} </Tooltip>
{badges & Badges.Supporter ? ( ) : (
<Tooltip <></>
content={ )}
<Text id="app.special.popovers.user_profile.badges.supporter" /> {badges & Badges.Supporter ? (
} <Tooltip
> content={
<CashStack size={32} color="#efab44" /> <Text id="app.special.popovers.user_profile.badges.supporter" />
</Tooltip> }>
) : ( <Money
<></> size={32}
)} color="#efab44"
{badges & Badges.ResponsibleDisclosure ? ( />
<Tooltip </Tooltip>
content={ ) : (
<Text id="app.special.popovers.user_profile.badges.responsible_disclosure" /> <></>
} )}
> {badges &
<Shield size={32} color="gray" /> Badges.ResponsibleDisclosure ? (
</Tooltip> <Tooltip
) : ( content={
<></> <Text id="app.special.popovers.user_profile.badges.responsible_disclosure" />
)} }>
</Localizer> <Shield
size={32}
color="gray"
/>
</Tooltip>
) : (
<></>
)}
</Localizer>
</div>
)}
{profile?.content && (
<div className={styles.category}>
<Text id="app.special.popovers.user_profile.sub.information" />
</div>
)}
<Markdown content={profile?.content} />
{/*<div className={styles.category}><Text id="app.special.popovers.user_profile.sub.connections" /></div>*/}
</div> </div>
)} )}
{ profile?.content && <div className={styles.category}><Text id="app.special.popovers.user_profile.sub.information" /></div> } {tab === "friends" &&
<Markdown content={profile?.content} /> (users ? (
{/*<div className={styles.category}><Text id="app.special.popovers.user_profile.sub.connections" /></div>*/} <div className={styles.entries}>
</div>} {users.length === 0 ? (
{tab === "friends" && <div className={styles.empty}>
(users ? ( <Text id="app.special.popovers.user_profile.no_users" />
</div>
) : (
users.map(
(x) =>
x && (
<div
onClick={() =>
openScreen({
id: "profile",
user_id: x._id,
})
}
className={styles.entry}
key={x._id}>
<UserIcon
size={32}
target={x}
/>
<span>{x.username}</span>
</div>
),
)
)}
</div>
) : (
<Preloader type="ring" />
))}
{tab === "groups" && (
<div className={styles.entries}> <div className={styles.entries}>
{users.length === 0 ? ( {mutualGroups.length === 0 ? (
<div className={styles.empty}> <div className={styles.empty}>
<Text id="app.special.popovers.user_profile.no_users" /> <Text id="app.special.popovers.user_profile.no_groups" />
</div> </div>
) : ( ) : (
users.map( mutualGroups.map(
x => (x) =>
x && ( x?.channel_type === "Group" && (
//<LinkProfile user_id={x._id}> <Link to={`/channel/${x._id}`}>
<div <div
className={styles.entry} className={styles.entry}
key={x._id} key={x._id}>
> <ChannelIcon
<UserIcon size={32} target={x} /> target={x}
<span>{x.username}</span> size={32}
/>
<span>{x.name}</span>
</div> </div>
//</LinkProfile> </Link>
) ),
) )
)} )}
</div> </div>
) : ( )}
<Preloader /> </div>
))} </Modal>
{tab === "groups" && ( );
<div className={styles.entries}> },
{mutualGroups.length === 0 ? ( );
<div className={styles.empty}>
<Text id="app.special.popovers.user_profile.no_groups" />
</div>
) : (
mutualGroups.map(
x =>
x?.channel_type === "Group" && (
<Link to={`/channel/${x._id}`}>
<div
className={styles.entry}
key={x._id}
>
<ChannelIcon target={x} size={32} />
<span>{x.name}</span>
</div>
</Link>
)
)
)}
</div>
)}
</div>
</Modal>
);
}
src/context/revoltjs/CheckAuth.tsx
View file @ 1ac5de17
import { ReactNode } from "react";
import { useContext } from "preact/hooks";
import { Redirect } from "react-router-dom"; import { Redirect } from "react-router-dom";
import { useContext } from "preact/hooks";
import { Children } from "../../types/Preact";
import { OperationsContext } from "./RevoltClient"; import { OperationsContext } from "./RevoltClient";
interface Props { interface Props {
auth?: boolean; auth?: boolean;
children: ReactNode | ReactNode[]; children: Children;
} }
export const CheckAuth = (props: Props) => { export const CheckAuth = (props: Props) => {
......
src/context/revoltjs/FileUploads.module.scss
View file @ 1ac5de17
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
&.banner { &.banner {
.image { .image {
border-radius: 4px; border-radius: var(--border-radius);
} }
.modify { .modify {
......
src/context/revoltjs/FileUploads.tsx
View file @ 1ac5de17
// ! FIXME: also TEMP CODE import { Plus } from "@styled-icons/boxicons-regular";
// ! RE-WRITE WITH STYLED-COMPONENTS import { Pencil } from "@styled-icons/boxicons-solid";
import Axios, { AxiosRequestConfig } from "axios";
import { Text } from "preact-i18n"; import styles from "./FileUploads.module.scss";
import { takeError } from "./util";
import classNames from "classnames"; import classNames from "classnames";
import styles from './FileUploads.module.scss'; import { Text } from "preact-i18n";
import Axios, { AxiosRequestConfig } from "axios"; import { useContext, useEffect, useState } from "preact/hooks";
import { useContext, useState } from "preact/hooks";
import { Edit, Plus, X } from "@styled-icons/feather";
import Preloader from "../../components/ui/Preloader";
import { determineFileSize } from "../../lib/fileSize"; import { determineFileSize } from "../../lib/fileSize";
import IconButton from '../../components/ui/IconButton';
import IconButton from "../../components/ui/IconButton";
import Preloader from "../../components/ui/Preloader";
import { useIntermediate } from "../intermediate/Intermediate"; import { useIntermediate } from "../intermediate/Intermediate";
import { AppContext } from "./RevoltClient"; import { AppContext } from "./RevoltClient";
import { takeError } from "./util";
type Props = { type Props = {
maxFileSize: number maxFileSize: number;
remove: () => Promise<void> remove: () => Promise<void>;
fileType: 'backgrounds' | 'icons' | 'avatars' | 'attachments' | 'banners' fileType: "backgrounds" | "icons" | "avatars" | "attachments" | "banners";
} & ( } & (
{ behaviour: 'ask', onChange: (file: File) => void } | | { behaviour: "ask"; onChange: (file: File) => void }
{ behaviour: 'upload', onUpload: (id: string) => Promise<void> } | { behaviour: "upload"; onUpload: (id: string) => Promise<void> }
) & ( | {
{ style: 'icon' | 'banner', defaultPreview?: string, previewURL?: string, width?: number, height?: number } | behaviour: "multi";
{ style: 'attachment', attached: boolean, uploading: boolean, cancel: () => void, size?: number } onChange: (files: File[]) => void;
) append?: (files: File[]) => void;
}
export async function uploadFile(autumnURL: string, tag: string, file: File, config?: AxiosRequestConfig) { ) &
(
| {
style: "icon" | "banner";
defaultPreview?: string;
previewURL?: string;
width?: number;
height?: number;
}
| {
style: "attachment";
attached: boolean;
uploading: boolean;
cancel: () => void;
size?: number;
}
);
export async function uploadFile(
autumnURL: string,
tag: string,
file: File,
config?: AxiosRequestConfig,
) {
const formData = new FormData(); const formData = new FormData();
formData.append("file", file); formData.append("file", file);
const res = await Axios.post(autumnURL + "/" + tag, formData, { const res = await Axios.post(`${autumnURL}/${tag}`, formData, {
headers: { headers: {
"Content-Type": "multipart/form-data" "Content-Type": "multipart/form-data",
}, },
...config ...config,
}); });
return res.data.id; return res.data.id;
} }
export function grabFiles(
maxFileSize: number,
cb: (files: File[]) => void,
tooLarge: () => void,
multiple?: boolean,
) {
const input = document.createElement("input");
input.type = "file";
input.multiple = multiple ?? false;
input.onchange = async (e) => {
const files = (e.currentTarget as HTMLInputElement)?.files;
if (!files) return;
for (const file of files) {
if (file.size > maxFileSize) {
return tooLarge();
}
}
cb(Array.from(files));
};
input.click();
}
export function FileUploader(props: Props) { export function FileUploader(props: Props) {
const { fileType, maxFileSize, remove } = props; const { fileType, maxFileSize, remove } = props;
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
const client = useContext(AppContext); const client = useContext(AppContext);
const [ uploading, setUploading ] = useState(false); const [uploading, setUploading] = useState(false);
function onClick() { function onClick() {
if (uploading) return; if (uploading) return;
const input = document.createElement("input"); grabFiles(
input.type = "file"; maxFileSize,
async (files) => {
input.onchange = async e => { setUploading(true);
setUploading(true);
try {
const files = (e.target as any)?.files;
if (files && files[0]) {
let file = files[0];
if (file.size > maxFileSize) { try {
return openScreen({ id: "error", error: "FileTooLarge" }); if (props.behaviour === "multi") {
} props.onChange(files);
} else if (props.behaviour === "ask") {
if (props.behaviour === 'ask') { props.onChange(files[0]);
await props.onChange(file);
} else { } else {
await props.onUpload(await uploadFile(client.configuration!.features.autumn.url, fileType, file)); await props.onUpload(
await uploadFile(
client.configuration!.features.autumn.url,
fileType,
files[0],
),
);
} }
} catch (err) {
return openScreen({ id: "error", error: takeError(err) });
} finally {
setUploading(false);
} }
} catch (err) { },
return openScreen({ id: "error", error: takeError(err) }); () => openScreen({ id: "error", error: "FileTooLarge" }),
} finally { props.behaviour === "multi",
setUploading(false); );
}
};
input.click();
} }
function removeOrUpload() { function removeOrUpload() {
if (uploading) return; if (uploading) return;
if (props.style === 'attachment') { if (props.style === "attachment") {
if (props.attached) { if (props.attached) {
props.remove(); props.remove();
} else { } else {
onClick(); onClick();
} }
} else if (props.previewURL) {
props.remove();
} else { } else {
if (props.previewURL) { onClick();
props.remove();
} else {
onClick();
}
} }
} }
if (props.style === 'icon' || props.style === 'banner') { if (props.behaviour === "multi" && props.append) {
// eslint-disable-next-line
useEffect(() => {
// File pasting.
function paste(e: ClipboardEvent) {
const items = e.clipboardData?.items;
if (typeof items === "undefined") return;
if (props.behaviour !== "multi" || !props.append) return;
const files = [];
for (const item of items) {
if (!item.type.startsWith("text/")) {
const blob = item.getAsFile();
if (blob) {
if (blob.size > props.maxFileSize) {
openScreen({
id: "error",
error: "FileTooLarge",
});
}
files.push(blob);
}
}
}
props.append(files);
}
// Let the browser know we can drop files.
function dragover(e: DragEvent) {
e.stopPropagation();
e.preventDefault();
if (e.dataTransfer) e.dataTransfer.dropEffect = "copy";
}
// File dropping.
function drop(e: DragEvent) {
e.preventDefault();
if (props.behaviour !== "multi" || !props.append) return;
const dropped = e.dataTransfer?.files;
if (dropped) {
const files = [];
for (const item of dropped) {
if (item.size > props.maxFileSize) {
openScreen({ id: "error", error: "FileTooLarge" });
}
files.push(item);
}
props.append(files);
}
}
document.addEventListener("paste", paste);
document.addEventListener("dragover", dragover);
document.addEventListener("drop", drop);
return () => {
document.removeEventListener("paste", paste);
document.removeEventListener("dragover", dragover);
document.removeEventListener("drop", drop);
};
}, [openScreen, props, props.append]);
}
if (props.style === "icon" || props.style === "banner") {
const { style, previewURL, defaultPreview, width, height } = props; const { style, previewURL, defaultPreview, width, height } = props;
return ( return (
<div className={classNames(styles.uploader, <div
{ [styles.icon]: style === 'icon', className={classNames(styles.uploader, {
[styles.banner]: style === 'banner' })} [styles.icon]: style === "icon",
[styles.banner]: style === "banner",
})}
data-uploading={uploading}> data-uploading={uploading}>
<div className={styles.image} <div
style={{ backgroundImage: className={styles.image}
style === 'icon' ? `url('${previewURL ?? defaultPreview}')` : style={{
(previewURL ? `linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('${previewURL}')` : 'black'), backgroundImage:
width, height style === "icon"
? `url('${previewURL ?? defaultPreview}')`
: previewURL
? `linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('${previewURL}')`
: "black",
width,
height,
}} }}
onClick={onClick}> onClick={onClick}>
{ uploading ? {uploading ? (
<div className={styles.uploading}> <div className={styles.uploading}>
<Preloader /> <Preloader type="ring" />
</div> : </div>
) : (
<div className={styles.edit}> <div className={styles.edit}>
<Edit size={30} /> <Pencil size={30} />
</div> } </div>
)}
</div> </div>
<div className={styles.modify}> <div className={styles.modify}>
<span onClick={removeOrUpload}>{ <span onClick={removeOrUpload}>
uploading ? <Text id="app.main.channel.uploading_file" /> : {uploading ? (
props.previewURL ? <Text id="app.settings.actions.remove" /> : <Text id="app.main.channel.uploading_file" />
<Text id="app.settings.actions.upload" /> }</span> ) : props.previewURL ? (
<span className={styles.small}><Text id="app.settings.actions.max_filesize" fields={{ filesize: determineFileSize(maxFileSize) }} /></span> <Text id="app.settings.actions.remove" />
) : (
<Text id="app.settings.actions.upload" />
)}
</span>
<span className={styles.small}>
<Text
id="app.settings.actions.max_filesize"
fields={{
filesize: determineFileSize(maxFileSize),
}}
/>
</span>
</div> </div>
</div> </div>
) );
} else if (props.style === 'attachment') { } else if (props.style === "attachment") {
const { attached, uploading, cancel, size } = props; const { attached, uploading, cancel, size } = props;
return ( return (
<IconButton <IconButton
...@@ -138,10 +275,11 @@ export function FileUploader(props: Props) { ...@@ -138,10 +275,11 @@ export function FileUploader(props: Props) {
if (uploading) return cancel(); if (uploading) return cancel();
if (attached) return remove(); if (attached) return remove();
onClick(); onClick();
}}> }}
{ attached ? <X size={size} /> : <Plus size={size} />} rotate={uploading || attached ? "45deg" : undefined}>
<Plus size={size} />
</IconButton> </IconButton>
) );
} }
return null; return null;
......
src/context/revoltjs/Notifications.tsx 0 → 100644
View file @ 1ac5de17
import { Route, Switch, useHistory, useParams } from "react-router-dom";
import { Presence, RelationshipStatus } from "revolt-api/types/Users";
import { SYSTEM_USER_ID } from "revolt.js";
import { Message } from "revolt.js/dist/maps/Messages";
import { User } from "revolt.js/dist/maps/Users";
import { decodeTime } from "ulid";
import { useCallback, useContext, useEffect } from "preact/hooks";
import { useTranslation } from "../../lib/i18n";
import { connectState } from "../../redux/connector";
import {
getNotificationState,
Notifications,
shouldNotify,
} from "../../redux/reducers/notifications";
import { NotificationOptions } from "../../redux/reducers/settings";
import { SoundContext } from "../Settings";
import { AppContext } from "./RevoltClient";
interface Props {
options?: NotificationOptions;
notifs: Notifications;
}
const notifications: { [key: string]: Notification } = {};
async function createNotification(
title: string,
options: globalThis.NotificationOptions,
) {
try {
return new Notification(title, options);
} catch (err) {
const sw = await navigator.serviceWorker.getRegistration();
sw?.showNotification(title, options);
}
}
function Notifier({ options, notifs }: Props) {
const translate = useTranslation();
const showNotification = options?.desktopEnabled ?? false;
const client = useContext(AppContext);
const { guild: guild_id, channel: channel_id } = useParams<{
guild: string;
channel: string;
}>();
const history = useHistory();
const playSound = useContext(SoundContext);
const message = useCallback(
async (msg: Message) => {
if (msg.author_id === client.user!._id) return;
if (msg.channel_id === channel_id && document.hasFocus()) return;
if (client.user!.status?.presence === Presence.Busy) return;
if (msg.author?.relationship === RelationshipStatus.Blocked) return;
const notifState = getNotificationState(notifs, msg.channel!);
if (!shouldNotify(notifState, msg, client.user!._id)) return;
playSound("message");
if (!showNotification) return;
let title;
switch (msg.channel?.channel_type) {
case "SavedMessages":
return;
case "DirectMessage":
title = `@${msg.author?.username}`;
break;
case "Group":
if (msg.author?._id === SYSTEM_USER_ID) {
title = msg.channel.name;
} else {
title = `@${msg.author?.username} - ${msg.channel.name}`;
}
break;
case "TextChannel":
title = `@${msg.author?.username} (#${msg.channel.name}, ${msg.channel.server?.name})`;
break;
default:
title = msg.channel?._id;
break;
}
let image;
if (msg.attachments) {
const imageAttachment = msg.attachments.find(
(x) => x.metadata.type === "Image",
);
if (imageAttachment) {
image = client.generateFileURL(imageAttachment, {
max_side: 720,
});
}
}
let body, icon;
if (typeof msg.content === "string") {
body = client.markdownToText(msg.content);
icon = msg.author?.generateAvatarURL({ max_side: 256 });
} else {
const users = client.users;
switch (msg.content.type) {
case "user_added":
case "user_remove":
{
const user = users.get(msg.content.id);
body = translate(
`app.main.channel.system.${
msg.content.type === "user_added"
? "added_by"
: "removed_by"
}`,
{
user: user?.username,
other_user: users.get(msg.content.by)
?.username,
},
);
icon = user?.generateAvatarURL({
max_side: 256,
});
}
break;
case "user_joined":
case "user_left":
case "user_kicked":
case "user_banned":
{
const user = users.get(msg.content.id);
body = translate(
`app.main.channel.system.${msg.content.type}`,
{ user: user?.username },
);
icon = user?.generateAvatarURL({
max_side: 256,
});
}
break;
case "channel_renamed":
{
const user = users.get(msg.content.by);
body = translate(
`app.main.channel.system.channel_renamed`,
{
user: users.get(msg.content.by)?.username,
name: msg.content.name,
},
);
icon = user?.generateAvatarURL({
max_side: 256,
});
}
break;
case "channel_description_changed":
case "channel_icon_changed":
{
const user = users.get(msg.content.by);
body = translate(
`app.main.channel.system.${msg.content.type}`,
{ user: users.get(msg.content.by)?.username },
);
icon = user?.generateAvatarURL({
max_side: 256,
});
}
break;
}
}
const notif = await createNotification(title!, {
icon,
image,
body,
timestamp: decodeTime(msg._id),
tag: msg.channel?._id,
badge: "/assets/icons/android-chrome-512x512.png",
silent: true,
});
if (notif) {
notif.addEventListener("click", () => {
window.focus();
const id = msg.channel_id;
if (id !== channel_id) {
const channel = client.channels.get(id);
if (channel) {
if (channel.channel_type === "TextChannel") {
history.push(
`/server/${channel.server_id}/channel/${id}`,
);
} else {
history.push(`/channel/${id}`);
}
}
}
});
notifications[msg.channel_id] = notif;
notif.addEventListener(
"close",
() => delete notifications[msg.channel_id],
);
}
},
[
history,
showNotification,
translate,
channel_id,
client,
notifs,
playSound,
],
);
const relationship = useCallback(
async (user: User) => {
if (client.user?.status?.presence === Presence.Busy) return;
if (!showNotification) return;
let event;
switch (user.relationship) {
case RelationshipStatus.Incoming:
event = translate("notifications.sent_request", {
person: user.username,
});
break;
case RelationshipStatus.Friend:
event = translate("notifications.now_friends", {
person: user.username,
});
break;
default:
return;
}
const notif = await createNotification(event, {
icon: user.generateAvatarURL({ max_side: 256 }),
badge: "/assets/icons/android-chrome-512x512.png",
timestamp: +new Date(),
});
notif?.addEventListener("click", () => {
history.push(`/friends`);
});
},
[client.user?.status?.presence, history, showNotification, translate],
);
useEffect(() => {
client.addListener("message", message);
client.addListener("user/relationship", relationship);
return () => {
client.removeListener("message", message);
client.removeListener("user/relationship", relationship);
};
}, [
client,
playSound,
guild_id,
channel_id,
showNotification,
notifs,
message,
relationship,
]);
useEffect(() => {
function visChange() {
if (document.visibilityState === "visible") {
if (notifications[channel_id]) {
notifications[channel_id].close();
}
}
}
visChange();
document.addEventListener("visibilitychange", visChange);
return () =>
document.removeEventListener("visibilitychange", visChange);
}, [guild_id, channel_id]);
return null;
}
const NotifierComponent = connectState(
Notifier,
(state) => {
return {
options: state.settings.notification,
notifs: state.notifications,
};
},
true,
);
export default function NotificationsComponent() {
return (
<Switch>
<Route path="/server/:server/channel/:channel">
<NotifierComponent />
</Route>
<Route path="/channel/:channel">
<NotifierComponent />
</Route>
<Route path="/">
<NotifierComponent />
</Route>
</Switch>
);
}
src/context/revoltjs/RequiresOnline.tsx
View file @ 1ac5de17
import { Text } from "preact-i18n"; import { WifiOff } from "@styled-icons/boxicons-regular";
import styled from "styled-components"; import styled from "styled-components";
import { Text } from "preact-i18n";
import { useContext } from "preact/hooks"; import { useContext } from "preact/hooks";
import { Children } from "../../types/Preact";
import { WifiOff } from "@styled-icons/feather";
import Preloader from "../../components/ui/Preloader"; import Preloader from "../../components/ui/Preloader";
import { Children } from "../../types/Preact";
import { ClientStatus, StatusContext } from "./RevoltClient"; import { ClientStatus, StatusContext } from "./RevoltClient";
interface Props { interface Props {
...@@ -29,7 +32,7 @@ const Base = styled.div` ...@@ -29,7 +32,7 @@ const Base = styled.div`
export default function RequiresOnline(props: Props) { export default function RequiresOnline(props: Props) {
const status = useContext(StatusContext); const status = useContext(StatusContext);
if (status === ClientStatus.CONNECTING) return <Preloader />; if (status === ClientStatus.CONNECTING) return <Preloader type="ring" />;
if (status !== ClientStatus.ONLINE && status !== ClientStatus.READY) if (status !== ClientStatus.ONLINE && status !== ClientStatus.READY)
return ( return (
<Base> <Base>
...@@ -40,5 +43,5 @@ export default function RequiresOnline(props: Props) { ...@@ -40,5 +43,5 @@ export default function RequiresOnline(props: Props) {
</Base> </Base>
); );
return <>{ props.children }</>; return <>{props.children}</>;
} }
src/context/revoltjs/RevoltClient.tsx
View file @ 1ac5de17
import { openDB } from 'idb'; /* eslint-disable react-hooks/rules-of-hooks */
import { Client } from "revolt.js"; import { Client } from "revolt.js";
import { takeError } from "./util";
import { createContext } from "preact";
import { Children } from "../../types/Preact";
import { Route } from "revolt.js/dist/api/routes"; import { Route } from "revolt.js/dist/api/routes";
import { createContext } from "preact";
import { useContext, useEffect, useMemo, useState } from "preact/hooks";
import { SingletonMessageRenderer } from "../../lib/renderer/Singleton";
import { dispatch } from "../../redux";
import { connectState } from "../../redux/connector"; import { connectState } from "../../redux/connector";
import Preloader from "../../components/ui/Preloader";
import { WithDispatcher } from "../../redux/reducers";
import { AuthState } from "../../redux/reducers/auth"; import { AuthState } from "../../redux/reducers/auth";
import { SyncOptions } from "../../redux/reducers/sync";
import { useEffect, useMemo, useState } from "preact/hooks"; import Preloader from "../../components/ui/Preloader";
import { Children } from "../../types/Preact";
import { useIntermediate } from "../intermediate/Intermediate";
import { registerEvents, setReconnectDisallowed } from "./events"; import { registerEvents, setReconnectDisallowed } from "./events";
import { SingletonMessageRenderer } from '../../lib/renderer/Singleton'; import { takeError } from "./util";
export enum ClientStatus { export enum ClientStatus {
INIT, INIT,
...@@ -31,74 +36,61 @@ export interface ClientOperations { ...@@ -31,74 +36,61 @@ export interface ClientOperations {
ready: () => boolean; ready: () => boolean;
} }
export const AppContext = createContext<Client>(undefined as any); // By the time they are used, they should all be initialized.
export const StatusContext = createContext<ClientStatus>(undefined as any); // Currently the app does not render until a client is built and the other two are always initialized on first render.
export const OperationsContext = createContext<ClientOperations>(undefined as any); // - insert's words
export const AppContext = createContext<Client>(null!);
export const StatusContext = createContext<ClientStatus>(null!);
export const OperationsContext = createContext<ClientOperations>(null!);
type Props = WithDispatcher & { type Props = {
auth: AuthState; auth: AuthState;
sync: SyncOptions;
children: Children; children: Children;
}; };
function Context({ auth, sync, children, dispatcher }: Props) { function Context({ auth, children }: Props) {
const { openScreen } = useIntermediate();
const [status, setStatus] = useState(ClientStatus.INIT); const [status, setStatus] = useState(ClientStatus.INIT);
const [client, setClient] = useState<Client>(undefined as unknown as Client); const [client, setClient] = useState<Client>(
undefined as unknown as Client,
);
useEffect(() => { useEffect(() => {
(async () => { (async () => {
let db;
try {
db = await openDB('state', 3, {
upgrade(db) {
for (let store of [ "channels", "servers", "users", "members" ]) {
db.createObjectStore(store, {
keyPath: '_id'
});
}
},
});
} catch (err) {
console.error('Failed to open IndexedDB store, continuing without.');
}
const client = new Client({ const client = new Client({
autoReconnect: false, autoReconnect: false,
apiURL: import.meta.env.VITE_API_URL, apiURL: import.meta.env.VITE_API_URL,
debug: import.meta.env.DEV, debug: import.meta.env.DEV,
db
}); });
setClient(client); setClient(client);
SingletonMessageRenderer.subscribe(client); SingletonMessageRenderer.subscribe(client);
setStatus(ClientStatus.LOADING); setStatus(ClientStatus.LOADING);
})(); })();
}, [ ]); }, []);
if (status === ClientStatus.INIT) return null; if (status === ClientStatus.INIT) return null;
const operations: ClientOperations = useMemo(() => { const operations: ClientOperations = useMemo(() => {
return { return {
login: async data => { login: async (data) => {
setReconnectDisallowed(true); setReconnectDisallowed(true);
try { try {
const onboarding = await client.login(data); const onboarding = await client.login(data);
setReconnectDisallowed(false); setReconnectDisallowed(false);
const login = () => const login = () =>
dispatcher({ dispatch({
type: "LOGIN", type: "LOGIN",
session: client.session as any session: client.session!, // This [null assertion] is ok, we should have a session by now. - insert's words
}); });
if (onboarding) { if (onboarding) {
/*openScreen({ openScreen({
id: "onboarding", id: "onboarding",
callback: async (username: string) => { callback: async (username: string) =>
await (onboarding as any)(username, true); onboarding(username, true).then(login),
login(); });
}
});*/
} else { } else {
login(); login();
} }
...@@ -107,13 +99,13 @@ function Context({ auth, sync, children, dispatcher }: Props) { ...@@ -107,13 +99,13 @@ function Context({ auth, sync, children, dispatcher }: Props) {
throw err; throw err;
} }
}, },
logout: async shouldRequest => { logout: async (shouldRequest) => {
dispatcher({ type: "LOGOUT" }); dispatch({ type: "LOGOUT" });
delete client.user; client.reset();
dispatcher({ type: "RESET" }); dispatch({ type: "RESET" });
// openScreen({ id: "none" }); openScreen({ id: "none" });
setStatus(ClientStatus.READY); setStatus(ClientStatus.READY);
client.websocket.disconnect(); client.websocket.disconnect();
...@@ -127,23 +119,20 @@ function Context({ auth, sync, children, dispatcher }: Props) { ...@@ -127,23 +119,20 @@ function Context({ auth, sync, children, dispatcher }: Props) {
} }
}, },
loggedIn: () => typeof auth.active !== "undefined", loggedIn: () => typeof auth.active !== "undefined",
ready: () => ( ready: () =>
operations.loggedIn() && operations.loggedIn() && typeof client.user !== "undefined",
typeof client.user !== "undefined" };
) }, [client, auth.active, openScreen]);
}
}, [ client, auth.active ]);
useEffect(() => registerEvents({ operations, dispatcher }, setStatus, client), [ client ]); useEffect(
() => registerEvents({ operations }, setStatus, client),
[client, operations],
);
useEffect(() => { useEffect(() => {
(async () => { (async () => {
if (client.db) {
await client.restore();
}
if (auth.active) { if (auth.active) {
dispatcher({ type: "QUEUE_FAIL_ALL" }); dispatch({ type: "QUEUE_FAIL_ALL" });
const active = auth.accounts[auth.active]; const active = auth.accounts[auth.active];
client.user = client.users.get(active.session.user_id); client.user = client.users.get(active.session.user_id);
...@@ -151,54 +140,38 @@ function Context({ auth, sync, children, dispatcher }: Props) { ...@@ -151,54 +140,38 @@ function Context({ auth, sync, children, dispatcher }: Props) {
return setStatus(ClientStatus.OFFLINE); return setStatus(ClientStatus.OFFLINE);
} }
if (operations.ready()) if (operations.ready()) setStatus(ClientStatus.CONNECTING);
setStatus(ClientStatus.CONNECTING);
if (navigator.onLine) { if (navigator.onLine) {
await client await client
.fetchConfiguration() .fetchConfiguration()
.catch(() => .catch(() =>
console.error("Failed to connect to API server.") console.error("Failed to connect to API server."),
); );
} }
try { try {
await client.fetchConfiguration(); await client.fetchConfiguration();
const callback = await client.useExistingSession( const callback = await client.useExistingSession(
active.session active.session,
); );
//if (callback) { if (callback) {
/*openScreen({ id: "onboarding", callback });*/ openScreen({ id: "onboarding", callback });
//} else { }
/*
// ! FIXME: all this code needs to be re-written
(async () => {
// ! FIXME: should be included in Ready payload
props.dispatcher({
type: 'SYNC_UPDATE',
// ! FIXME: write a procedure to resolve merge conflicts
update: mapSync(
await client.syncFetchSettings(DEFAULT_ENABLED_SYNC.filter(x => !props.sync?.disabled?.includes(x)))
)
});
})()
props.dispatcher({ type: 'UNREADS_SET', unreads: await client.syncFetchUnreads() });*/
//}
} catch (err) { } catch (err) {
setStatus(ClientStatus.DISCONNECTED); setStatus(ClientStatus.DISCONNECTED);
const error = takeError(err); const error = takeError(err);
if (error === "Forbidden") { if (error === "Forbidden" || error === "Unauthorized") {
operations.logout(true); operations.logout(true);
// openScreen({ id: "signed_out" }); openScreen({ id: "signed_out" });
} else { } else {
// openScreen({ id: "error", error }); openScreen({ id: "error", error });
} }
} }
} else { } else {
try { try {
await client.fetchConfiguration() await client.fetchConfiguration();
} catch (err) { } catch (err) {
console.error("Failed to connect to API server."); console.error("Failed to connect to API server.");
} }
...@@ -206,30 +179,29 @@ function Context({ auth, sync, children, dispatcher }: Props) { ...@@ -206,30 +179,29 @@ function Context({ auth, sync, children, dispatcher }: Props) {
setStatus(ClientStatus.READY); setStatus(ClientStatus.READY);
} }
})(); })();
// eslint-disable-next-line
}, []); }, []);
if (status === ClientStatus.LOADING) { if (status === ClientStatus.LOADING) {
return <Preloader />; return <Preloader type="spinner" />;
} }
return ( return (
<AppContext.Provider value={client}> <AppContext.Provider value={client}>
<StatusContext.Provider value={status}> <StatusContext.Provider value={status}>
<OperationsContext.Provider value={operations}> <OperationsContext.Provider value={operations}>
{ children } {children}
</OperationsContext.Provider> </OperationsContext.Provider>
</StatusContext.Provider> </StatusContext.Provider>
</AppContext.Provider> </AppContext.Provider>
); );
} }
export default connectState<{ children: Children }>( export default connectState<{ children: Children }>(Context, (state) => {
Context, return {
state => { auth: state.auth,
return { sync: state.sync,
auth: state.auth, };
sync: state.sync });
};
}, export const useClient = () => useContext(AppContext);
true
);
src/context/revoltjs/StateMonitor.tsx 0 → 100644
View file @ 1ac5de17
/**
* This file monitors the message cache to delete any queued messages that have already sent.
*/
import { Message } from "revolt.js/dist/maps/Messages";
import { useContext, useEffect } from "preact/hooks";
import { dispatch } from "../../redux";
import { connectState } from "../../redux/connector";
import { QueuedMessage } from "../../redux/reducers/queue";
import { AppContext } from "./RevoltClient";
type Props = {
messages: QueuedMessage[];
};
function StateMonitor(props: Props) {
const client = useContext(AppContext);
useEffect(() => {
dispatch({
type: "QUEUE_DROP_ALL",
});
}, []);
useEffect(() => {
function add(msg: Message) {
if (!msg.nonce) return;
if (!props.messages.find((x) => x.id === msg.nonce)) return;
dispatch({
type: "QUEUE_REMOVE",
nonce: msg.nonce,
});
}
client.addListener("message", add);
return () => client.removeListener("message", add);
}, [client, props.messages]);
return null;
}
export default connectState(StateMonitor, (state) => {
return {
messages: [...state.queue],
};
});
src/context/revoltjs/SyncManager.tsx 0 → 100644
View file @ 1ac5de17
/**
* This file monitors changes to settings and syncs them to the server.
*/
import isEqual from "lodash.isequal";
import { UserSettings } from "revolt-api/types/Sync";
import { ClientboundNotification } from "revolt.js/dist/websocket/notifications";
import { useCallback, useContext, useEffect, useMemo } from "preact/hooks";
import { dispatch } from "../../redux";
import { connectState } from "../../redux/connector";
import { Notifications } from "../../redux/reducers/notifications";
import { Settings } from "../../redux/reducers/settings";
import {
DEFAULT_ENABLED_SYNC,
SyncData,
SyncKeys,
SyncOptions,
} from "../../redux/reducers/sync";
import { Language } from "../Locale";
import { AppContext, ClientStatus, StatusContext } from "./RevoltClient";
type Props = {
settings: Settings;
locale: Language;
sync: SyncOptions;
notifications: Notifications;
};
const lastValues: { [key in SyncKeys]?: unknown } = {};
export function mapSync(
packet: UserSettings,
revision?: Record<string, number>,
) {
const update: { [key in SyncKeys]?: [number, SyncData[key]] } = {};
for (const key of Object.keys(packet)) {
const [timestamp, obj] = packet[key];
if (timestamp < (revision ?? {})[key] ?? 0) {
continue;
}
let object;
if (obj[0] === "{") {
object = JSON.parse(obj);
} else {
object = obj;
}
lastValues[key as SyncKeys] = object;
update[key as SyncKeys] = [timestamp, object];
}
return update;
}
function SyncManager(props: Props) {
const client = useContext(AppContext);
const status = useContext(StatusContext);
useEffect(() => {
if (status === ClientStatus.ONLINE) {
client
.syncFetchSettings(
DEFAULT_ENABLED_SYNC.filter(
(x) => !props.sync?.disabled?.includes(x),
),
)
.then((data) => {
dispatch({
type: "SYNC_UPDATE",
update: mapSync(data),
});
});
client
.syncFetchUnreads()
.then((unreads) => dispatch({ type: "UNREADS_SET", unreads }));
}
}, [client, props.sync?.disabled, status]);
const syncChange = useCallback(
(key: SyncKeys, data: unknown) => {
const timestamp = +new Date();
dispatch({
type: "SYNC_SET_REVISION",
key,
timestamp,
});
client.syncSetSettings(
{
[key]: data as string,
},
timestamp,
);
},
[client],
);
const disabled = useMemo(
() => props.sync.disabled ?? [],
[props.sync.disabled],
);
for (const [key, object] of [
["appearance", props.settings.appearance],
["theme", props.settings.theme],
["locale", props.locale],
["notifications", props.notifications],
] as [SyncKeys, unknown][]) {
// eslint-disable-next-line react-hooks/rules-of-hooks
useEffect(() => {
if (disabled.indexOf(key) === -1) {
if (typeof lastValues[key] !== "undefined") {
if (!isEqual(lastValues[key], object)) {
syncChange(key, object);
}
}
}
lastValues[key] = object;
}, [key, syncChange, disabled, object]);
}
useEffect(() => {
function onPacket(packet: ClientboundNotification) {
if (packet.type === "UserSettingsUpdate") {
const update: { [key in SyncKeys]?: [number, SyncData[key]] } =
mapSync(packet.update, props.sync.revision);
dispatch({
type: "SYNC_UPDATE",
update,
});
}
}
client.addListener("packet", onPacket);
return () => client.removeListener("packet", onPacket);
}, [client, disabled, props.sync]);
return null;
}
export default connectState(SyncManager, (state) => {
return {
settings: state.settings,
locale: state.locale,
sync: state.sync,
notifications: state.notifications,
};
});
src/context/revoltjs/events.ts
View file @ 1ac5de17
import { Client } from "revolt.js/dist";
import { Message } from "revolt.js/dist/maps/Messages";
import { ClientboundNotification } from "revolt.js/dist/websocket/notifications"; import { ClientboundNotification } from "revolt.js/dist/websocket/notifications";
import { WithDispatcher } from "../../redux/reducers";
import { Client, Message } from "revolt.js/dist";
import {
ClientOperations,
ClientStatus
} from "./RevoltClient";
import { StateUpdater } from "preact/hooks"; import { StateUpdater } from "preact/hooks";
export var preventReconnect = false; import { dispatch } from "../../redux";
import { ClientOperations, ClientStatus } from "./RevoltClient";
export let preventReconnect = false;
let preventUntil = 0; let preventUntil = 0;
export function setReconnectDisallowed(allowed: boolean) { export function setReconnectDisallowed(allowed: boolean) {
preventReconnect = allowed; preventReconnect = allowed;
} }
export function registerEvents({ export function registerEvents(
operations, { operations }: { operations: ClientOperations },
dispatcher setStatus: StateUpdater<ClientStatus>,
}: { operations: ClientOperations } & WithDispatcher, setStatus: StateUpdater<ClientStatus>, client: Client) { client: Client,
const listeners = { ) {
function attemptReconnect() {
if (preventReconnect) return;
function reconnect() {
preventUntil = +new Date() + 2000;
client.websocket.connect().catch((err) => console.error(err));
}
if (+new Date() > preventUntil) {
setTimeout(reconnect, 2000);
} else {
reconnect();
}
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let listeners: Record<string, (...args: any[]) => void> = {
connecting: () => connecting: () =>
operations.ready() && setStatus(ClientStatus.CONNECTING), operations.ready() && setStatus(ClientStatus.CONNECTING),
dropped: () => { dropped: () => {
operations.ready() && setStatus(ClientStatus.DISCONNECTED); if (operations.ready()) {
setStatus(ClientStatus.DISCONNECTED);
if (preventReconnect) return; attemptReconnect();
function reconnect() {
preventUntil = +new Date() + 2000;
client.websocket.connect().catch(err => console.error(err));
}
if (+new Date() > preventUntil) {
setTimeout(reconnect, 2000);
} else {
reconnect();
} }
}, },
packet: (packet: ClientboundNotification) => { packet: (packet: ClientboundNotification) => {
switch (packet.type) { switch (packet.type) {
case "ChannelStartTyping": {
if (packet.user === client.user?._id) return;
dispatcher({
type: "TYPING_START",
channel: packet.id,
user: packet.user
});
break;
}
case "ChannelStopTyping": {
if (packet.user === client.user?._id) return;
dispatcher({
type: "TYPING_STOP",
channel: packet.id,
user: packet.user
});
break;
}
case "ChannelAck": { case "ChannelAck": {
dispatcher({ dispatch({
type: "UNREADS_MARK_READ", type: "UNREADS_MARK_READ",
channel: packet.id, channel: packet.id,
message: packet.message_id, message: packet.message_id,
request: false
}); });
break; break;
} }
...@@ -71,51 +60,62 @@ export function registerEvents({ ...@@ -71,51 +60,62 @@ export function registerEvents({
}, },
message: (message: Message) => { message: (message: Message) => {
if (message.mentions?.includes(client.user!._id)) { if (message.mention_ids?.includes(client.user!._id)) {
dispatcher({ dispatch({
type: "UNREADS_MENTION", type: "UNREADS_MENTION",
channel: message.channel, channel: message.channel_id,
message: message._id message: message._id,
}); });
} }
}, },
ready: () => { ready: () => setStatus(ClientStatus.ONLINE),
setStatus(ClientStatus.ONLINE);
}
}; };
let listenerFunc: { [key: string]: Function };
if (import.meta.env.DEV) { if (import.meta.env.DEV) {
listenerFunc = {}; listeners = new Proxy(listeners, {
for (const listener of Object.keys(listeners)) { get:
listenerFunc[listener] = (...args: any[]) => { (target, listener) =>
console.debug(`Calling ${listener} with`, args); (...args: unknown[]) => {
(listeners as any)[listener](...args); console.debug(`Calling ${listener.toString()} with`, args);
}; Reflect.get(target, listener)(...args);
} },
} else { });
listenerFunc = listeners;
} }
for (const listener of Object.keys(listenerFunc)) { // TODO: clean this a bit and properly handle types
client.addListener(listener, (listenerFunc as any)[listener]); for (const listener in listeners) {
client.addListener(listener, listeners[listener]);
} }
/*const online = () => const online = () => {
operations.ready() && setStatus(ClientStatus.RECONNECTING); if (operations.ready()) {
const offline = () => setStatus(ClientStatus.RECONNECTING);
operations.ready() && setStatus(ClientStatus.OFFLINE); setReconnectDisallowed(false);
attemptReconnect();
}
};
const offline = () => {
if (operations.ready()) {
setReconnectDisallowed(true);
client.websocket.disconnect();
setStatus(ClientStatus.OFFLINE);
}
};
window.addEventListener("online", online); window.addEventListener("online", online);
window.addEventListener("offline", offline); window.addEventListener("offline", offline);
return () => { return () => {
for (const listener of Object.keys(listenerFunc)) { for (const listener in listeners) {
RevoltClient.removeListener(listener, (listenerFunc as any)[listener]); client.removeListener(
listener,
listeners[listener as keyof typeof listeners],
);
} }
window.removeEventListener("online", online); window.removeEventListener("online", online);
window.removeEventListener("offline", offline); window.removeEventListener("offline", offline);
};*/ };
} }
src/context/revoltjs/hooks.ts deleted 100644 → 0
View file @ d0b9cf90
import { useCallback, useContext, useEffect, useState } from "preact/hooks";
import { Channels, Servers, Users } from "revolt.js/dist/api/objects";
import { Client, PermissionCalculator } from 'revolt.js';
import { AppContext } from "./RevoltClient";
export interface HookContext {
client: Client,
forceUpdate: () => void
}
export function useForceUpdate(context?: HookContext): HookContext {
const client = useContext(AppContext);
if (context) return context;
const [, updateState] = useState({});
return { client, forceUpdate: useCallback(() => updateState({}), []) };
}
function useObject(type: string, id?: string | string[], context?: HookContext) {
const ctx = useForceUpdate(context);
function mutation(target: string) {
if (typeof id === 'string' ? target === id :
Array.isArray(id) ? id.includes(target) : true) {
ctx.forceUpdate();
}
}
const map = (ctx.client as any)[type];
useEffect(() => {
map.addListener("update", mutation);
return () => map.removeListener("update", mutation);
}, [id]);
return typeof id === 'string' ? map.get(id)
: Array.isArray(id) ? id.map(x => map.get(x))
: map.toArray();
}
export function useUser(id?: string, context?: HookContext) {
if (typeof id === "undefined") return;
return useObject('users', id, context) as Readonly<Users.User> | undefined;
}
export function useSelf(context?: HookContext) {
const ctx = useForceUpdate(context);
return useUser(ctx.client.user!._id, ctx);
}
export function useUsers(ids?: string[], context?: HookContext) {
return useObject('users', ids, context) as (Readonly<Users.User> | undefined)[];
}
export function useChannel(id?: string, context?: HookContext) {
if (typeof id === "undefined") return;
return useObject('channels', id, context) as Readonly<Channels.Channel> | undefined;
}
export function useChannels(ids?: string[], context?: HookContext) {
return useObject('channels', ids, context) as (Readonly<Channels.Channel> | undefined)[];
}
export function useServer(id?: string, context?: HookContext) {
if (typeof id === "undefined") return;
return useObject('servers', id, context) as Readonly<Servers.Server> | undefined;
}
export function useServers(ids?: string[], context?: HookContext) {
return useObject('servers', ids, context) as (Readonly<Servers.Server> | undefined)[];
}
export function useDMs(context?: HookContext) {
const ctx = useForceUpdate(context);
function mutation(target: string) {
let channel = ctx.client.channels.get(target);
if (channel) {
if ((channel.channel_type === 'DirectMessage' && channel.active) || channel.channel_type === 'Group') {
ctx.forceUpdate();
}
}
}
const map = ctx.client.channels;
useEffect(() => {
map.addListener("update", mutation);
return () => map.removeListener("update", mutation);
}, []);
return map
.toArray()
.filter(x => x.channel_type === 'DirectMessage' || x.channel_type === 'Group' || x.channel_type === 'SavedMessages') as (Channels.GroupChannel | Channels.DirectMessageChannel | Channels.SavedMessagesChannel)[];
}
export function useUserPermission(id: string, context?: HookContext) {
const ctx = useForceUpdate(context);
const mutation = (target: string) => (target === id) && ctx.forceUpdate();
useEffect(() => {
ctx.client.users.addListener("update", mutation);
return () => ctx.client.users.removeListener("update", mutation);
}, [id]);
let calculator = new PermissionCalculator(ctx.client);
return calculator.forUser(id);
}
export function useChannelPermission(id: string, context?: HookContext) {
const ctx = useForceUpdate(context);
const mutation = (target: string) => (target === id) && ctx.forceUpdate();
useEffect(() => {
ctx.client.channels.addListener("update", mutation);
return () => ctx.client.channels.removeListener("update", mutation);
}, [id]);
let calculator = new PermissionCalculator(ctx.client);
return calculator.forChannel(id);
}
export function useServerPermission(id: string, context?: HookContext) {
const ctx = useForceUpdate(context);
const mutation = (target: string) => (target === id) && ctx.forceUpdate();
useEffect(() => {
ctx.client.servers.addListener("update", mutation);
return () => ctx.client.servers.removeListener("update", mutation);
}, [id]);
let calculator = new PermissionCalculator(ctx.client);
return calculator.forServer(id);
}
src/context/revoltjs/util.tsx
View file @ 1ac5de17
import { Channel, Message, User } from "revolt.js/dist/api/objects"; import { Channel } from "revolt.js/dist/maps/Channels";
import { Children } from "../../types/Preact";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { Client } from "revolt.js";
export function takeError( import { Children } from "../../types/Preact";
error: any
): string { // eslint-disable-next-line @typescript-eslint/no-explicit-any
export function takeError(error: any): string {
const type = error?.response?.data?.type; const type = error?.response?.data?.type;
let id = type; const id = type;
if (!type) { if (!type) {
if (error?.response?.status === 403) { if (error?.response?.status === 403) {
return "Unauthorized"; return "Unauthorized";
} else if (error && (!!error.isAxiosError && !error.response)) { } else if (error && !!error.isAxiosError && !error.response) {
return "NetworkError"; return "NetworkError";
} }
...@@ -22,13 +22,20 @@ export function takeError( ...@@ -22,13 +22,20 @@ export function takeError(
return id; return id;
} }
export function getChannelName(client: Client, channel: Channel, prefixType?: boolean): Children { export function getChannelName(
channel: Channel,
prefixType?: boolean,
): Children {
if (channel.channel_type === "SavedMessages") if (channel.channel_type === "SavedMessages")
return <Text id="app.navigation.tabs.saved" />; return <Text id="app.navigation.tabs.saved" />;
if (channel.channel_type === "DirectMessage") { if (channel.channel_type === "DirectMessage") {
let uid = client.channels.getRecipient(channel._id); return (
return <>{prefixType && "@"}{client.users.get(uid)?.username}</>; <>
{prefixType && "@"}
{channel.recipient!.username}
</>
);
} }
if (channel.channel_type === "TextChannel" && prefixType) { if (channel.channel_type === "TextChannel" && prefixType) {
...@@ -37,12 +44,3 @@ export function getChannelName(client: Client, channel: Channel, prefixType?: bo ...@@ -37,12 +44,3 @@ export function getChannelName(client: Client, channel: Channel, prefixType?: bo
return <>{channel.name}</>; return <>{channel.name}</>;
} }
export type MessageObject = Omit<Message, "edited"> & { edited?: string };
export function mapMessage(message: Partial<Message>) {
const { edited, ...msg } = message;
return {
...msg,
edited: edited?.$date,
} as MessageObject;
}
src/env.d.ts
View file @ 1ac5de17
...@@ -2,4 +2,3 @@ interface ImportMetaEnv { ...@@ -2,4 +2,3 @@ interface ImportMetaEnv {
VITE_API_URL: string; VITE_API_URL: string;
VITE_THEMES_URL: string; VITE_THEMES_URL: string;
} }
\ No newline at end of file
src/globals.d.ts 0 → 100644
View file @ 1ac5de17
type Build = "stable" | "nightly" | "dev";
type NativeConfig = {
frame: boolean;
build: Build;
discordRPC: boolean;
hardwareAcceleration: boolean;
};
declare interface Window {
isNative?: boolean;
nativeVersion: string;
native: {
min();
max();
close();
reload();
relaunch();
getConfig(): NativeConfig;
set(key: keyof NativeConfig, value: unknown);
getAutoStart(): Promise<boolean>;
enableAutoStart(): Promise<void>;
disableAutoStart(): Promise<void>;
};
}
declare const Fragment = preact.Fragment;
src/lib/ConditionalLink.tsx 0 → 100644
View file @ 1ac5de17
import { Link, LinkProps } from "react-router-dom";
type Props = LinkProps &
JSX.HTMLAttributes<HTMLAnchorElement> & {
active: boolean;
};
export default function ConditionalLink(props: Props) {
const { active, ...linkProps } = props;
if (active) {
return <a>{props.children}</a>;
}
return <Link {...linkProps} />;
}
src/lib/ContextMenus.tsx
View file @ 1ac5de17
import { Text } from "preact-i18n"; import {
import { useContext } from "preact/hooks"; At,
Bell,
BellOff,
Check,
CheckSquare,
ChevronRight,
Block,
Square,
LeftArrowAlt,
Trash,
} from "@styled-icons/boxicons-regular";
import { Cog, UserVoice } from "@styled-icons/boxicons-solid";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import { Attachment, Channels, Message, Servers, Users } from "revolt.js/dist/api/objects"; import { Attachment } from "revolt-api/types/Autumn";
import { Presence, RelationshipStatus } from "revolt-api/types/Users";
import {
ChannelPermission,
ServerPermission,
UserPermission,
} from "revolt.js/dist/api/permissions";
import { Channel } from "revolt.js/dist/maps/Channels";
import { Message } from "revolt.js/dist/maps/Messages";
import { Server } from "revolt.js/dist/maps/Servers";
import { User } from "revolt.js/dist/maps/Users";
import { import {
ContextMenu,
ContextMenuWithData, ContextMenuWithData,
MenuItem MenuItem,
openContextMenu,
} from "preact-context-menu"; } from "preact-context-menu";
import { ChannelPermission, ServerPermission, UserPermission } from "revolt.js/dist/api/permissions"; import { Text } from "preact-i18n";
import { useContext } from "preact/hooks";
import { dispatch } from "../redux";
import { connectState } from "../redux/connector";
import {
getNotificationState,
Notifications,
NotificationState,
} from "../redux/reducers/notifications";
import { QueuedMessage } from "../redux/reducers/queue"; import { QueuedMessage } from "../redux/reducers/queue";
import { WithDispatcher } from "../redux/reducers";
import { useIntermediate } from "../context/intermediate/Intermediate"; import { Screen, useIntermediate } from "../context/intermediate/Intermediate";
import { AppContext, ClientStatus, StatusContext } from "../context/revoltjs/RevoltClient"; import {
AppContext,
ClientStatus,
StatusContext,
} from "../context/revoltjs/RevoltClient";
import { takeError } from "../context/revoltjs/util"; import { takeError } from "../context/revoltjs/util";
import { useChannel, useChannelPermission, useForceUpdate, useServer, useServerPermission, useUser, useUserPermission } from "../context/revoltjs/hooks";
import { Children } from "../types/Preact"; import Tooltip from "../components/common/Tooltip";
import UserStatus from "../components/common/user/UserStatus";
import IconButton from "../components/ui/IconButton";
import LineDivider from "../components/ui/LineDivider"; import LineDivider from "../components/ui/LineDivider";
import { connectState } from "../redux/connector";
import { Children } from "../types/Preact";
import { internalEmit } from "./eventEmitter";
interface ContextMenuData { interface ContextMenuData {
user?: string; user?: string;
...@@ -34,43 +73,63 @@ type Action = ...@@ -34,43 +73,63 @@ type Action =
| { action: "copy_id"; id: string } | { action: "copy_id"; id: string }
| { action: "copy_selection" } | { action: "copy_selection" }
| { action: "copy_text"; content: string } | { action: "copy_text"; content: string }
| { action: "mark_as_read"; channel: Channels.Channel } | { action: "mark_as_read"; channel: Channel }
| { action: "retry_message"; message: QueuedMessage } | { action: "retry_message"; message: QueuedMessage }
| { action: "cancel_message"; message: QueuedMessage } | { action: "cancel_message"; message: QueuedMessage }
| { action: "mention"; user: string } | { action: "mention"; user: string }
| { action: "reply_message"; id: string }
| { action: "quote_message"; content: string } | { action: "quote_message"; content: string }
| { action: "edit_message"; id: string } | { action: "edit_message"; id: string }
| { action: "delete_message"; target: Channels.Message } | { action: "delete_message"; target: Message }
| { action: "open_file"; attachment: Attachment } | { action: "open_file"; attachment: Attachment }
| { action: "save_file"; attachment: Attachment } | { action: "save_file"; attachment: Attachment }
| { action: "copy_file_link"; attachment: Attachment } | { action: "copy_file_link"; attachment: Attachment }
| { action: "open_link"; link: string } | { action: "open_link"; link: string }
| { action: "copy_link"; link: string } | { action: "copy_link"; link: string }
| { action: "remove_member"; channel: string; user: string } | { action: "remove_member"; channel: Channel; user: User }
| { action: "kick_member"; target: Servers.Server; user: string } | { action: "kick_member"; target: Server; user: User }
| { action: "ban_member"; target: Servers.Server; user: string } | { action: "ban_member"; target: Server; user: User }
| { action: "view_profile"; user: string } | { action: "view_profile"; user: User }
| { action: "message_user"; user: string } | { action: "message_user"; user: User }
| { action: "block_user"; user: string } | { action: "block_user"; user: User }
| { action: "unblock_user"; user: string } | { action: "unblock_user"; user: User }
| { action: "add_friend"; user: string } | { action: "add_friend"; user: User }
| { action: "remove_friend"; user: string } | { action: "remove_friend"; user: User }
| { action: "cancel_friend"; user: string } | { action: "cancel_friend"; user: User }
| { action: "set_presence"; presence: Users.Presence } | { action: "set_presence"; presence: Presence }
| { action: "set_status" } | { action: "set_status" }
| { action: "clear_status" } | { action: "clear_status" }
| { action: "create_channel"; server: string } | { action: "create_channel"; target: Server }
| { action: "create_invite"; target: Channels.GroupChannel | Channels.TextChannel } | {
| { action: "leave_group"; target: Channels.GroupChannel } action: "create_invite";
| { action: "delete_channel"; target: Channels.TextChannel } target: Channel;
| { action: "close_dm"; target: Channels.DirectMessageChannel } }
| { action: "leave_server"; target: Servers.Server } | { action: "leave_group"; target: Channel }
| { action: "delete_server"; target: Servers.Server } | {
| { action: "open_channel_settings", id: string } action: "delete_channel";
| { action: "open_server_settings", id: string } target: Channel;
| { action: "open_server_channel_settings", server: string, id: string }; }
| { action: "close_dm"; target: Channel }
function ContextMenus(props: WithDispatcher) { | { action: "leave_server"; target: Server }
| { action: "delete_server"; target: Server }
| { action: "open_notification_options"; channel: Channel }
| { action: "open_settings" }
| { action: "open_channel_settings"; id: string }
| { action: "open_server_settings"; id: string }
| { action: "open_server_channel_settings"; server: string; id: string }
| {
action: "set_notification_state";
key: string;
state?: NotificationState;
};
type Props = {
notifications: Notifications;
};
// ! FIXME: I dare someone to re-write this
// Tip: This should just be split into separate context menus per logical area.
function ContextMenus(props: Props) {
const { openScreen, writeClipboard } = useIntermediate(); const { openScreen, writeClipboard } = useIntermediate();
const client = useContext(AppContext); const client = useContext(AppContext);
const userId = client.user!._id; const userId = client.user!._id;
...@@ -87,82 +146,108 @@ function ContextMenus(props: WithDispatcher) { ...@@ -87,82 +146,108 @@ function ContextMenus(props: WithDispatcher) {
writeClipboard(data.id); writeClipboard(data.id);
break; break;
case "copy_selection": case "copy_selection":
writeClipboard(document.getSelection()?.toString() ?? ''); writeClipboard(document.getSelection()?.toString() ?? "");
break; break;
case "mark_as_read": case "mark_as_read":
if (data.channel.channel_type === 'SavedMessages') return; {
props.dispatcher({ if (
type: "UNREADS_MARK_READ", data.channel.channel_type === "SavedMessages" ||
channel: data.channel._id, data.channel.channel_type === "VoiceChannel"
message: data.channel.channel_type === 'TextChannel' ? data.channel.last_message : data.channel.last_message._id, )
request: true return;
});
const message =
typeof data.channel.last_message === "string"
? data.channel.last_message
: data.channel.last_message!._id;
dispatch({
type: "UNREADS_MARK_READ",
channel: data.channel._id,
message,
});
client.req(
"PUT",
`/channels/${data.channel._id}/ack/${message}` as "/channels/id/ack/id",
);
}
break; break;
case "retry_message": case "retry_message":
{ {
const nonce = data.message.id; const nonce = data.message.id;
const fail = (error: any) => const fail = (error: string) =>
props.dispatcher({ dispatch({
type: "QUEUE_FAIL", type: "QUEUE_FAIL",
nonce, nonce,
error error,
}); });
client.channels client.channels
.sendMessage( .get(data.message.channel)!
data.message.channel, .sendMessage({
{ nonce: data.message.id,
content: data.message.data.content as string, content: data.message.data.content as string,
nonce replies: data.message.data.replies,
} })
)
.catch(fail); .catch(fail);
props.dispatcher({ dispatch({
type: "QUEUE_START", type: "QUEUE_START",
nonce nonce,
}); });
} }
break; break;
case "cancel_message": case "cancel_message":
{ {
props.dispatcher({ dispatch({
type: "QUEUE_REMOVE", type: "QUEUE_REMOVE",
nonce: data.message.id nonce: data.message.id,
}); });
} }
break; break;
case "mention": case "mention":
{ {
// edit draft internalEmit(
/*InternalEventEmitter.emit( "MessageBox",
"append_messagebox", "append",
`<@${data.user}>`, `<@${data.user}>`,
"mention" "mention",
);*/ );
} }
break; break;
case "copy_text": case "copy_text":
writeClipboard(data.content); writeClipboard(data.content);
break; break;
case "reply_message":
{
internalEmit("ReplyBar", "add", data.id);
}
break;
case "quote_message": case "quote_message":
{ {
// edit draft internalEmit(
/*InternalEventEmitter.emit( "MessageBox",
"append_messagebox", "append",
data.content, data.content,
"quote" "quote",
);*/ );
} }
break; break;
case "edit_message": case "edit_message":
{ {
// InternalEventEmitter.emit("edit_message", data.id); internalEmit(
"MessageRenderer",
"edit_message",
data.id,
);
} }
break; break;
...@@ -171,7 +256,7 @@ function ContextMenus(props: WithDispatcher) { ...@@ -171,7 +256,7 @@ function ContextMenus(props: WithDispatcher) {
window window
.open( .open(
client.generateFileURL(data.attachment), client.generateFileURL(data.attachment),
"_blank" "_blank",
) )
?.focus(); ?.focus();
} }
...@@ -181,18 +266,25 @@ function ContextMenus(props: WithDispatcher) { ...@@ -181,18 +266,25 @@ function ContextMenus(props: WithDispatcher) {
{ {
window.open( window.open(
// ! FIXME: do this from revolt.js // ! FIXME: do this from revolt.js
client.generateFileURL(data.attachment)?.replace('attachments', 'attachments/download'), client
"_blank" .generateFileURL(data.attachment)
?.replace(
"attachments",
"attachments/download",
),
"_blank",
); );
} }
break; break;
case "copy_file_link": case "copy_file_link":
{ {
const { _id, filename } = data.attachment; const { filename } = data.attachment;
writeClipboard( writeClipboard(
// ! FIXME: do from r.js // ! FIXME: do from r.js
client.generateFileURL(data.attachment) + '/${encodeURI(filename)}', `${client.generateFileURL(
data.attachment,
)}/${encodeURI(filename)}`,
); );
} }
break; break;
...@@ -211,17 +303,17 @@ function ContextMenus(props: WithDispatcher) { ...@@ -211,17 +303,17 @@ function ContextMenus(props: WithDispatcher) {
case "remove_member": case "remove_member":
{ {
client.channels.removeMember(data.channel, data.user); data.channel.removeMember(data.user._id);
} }
break; break;
case "view_profile": case "view_profile":
openScreen({ id: 'profile', user_id: data.user }); openScreen({ id: "profile", user_id: data.user._id });
break; break;
case "message_user": case "message_user":
{ {
const channel = await client.users.openDM(data.user); const channel = await data.user.openDM();
if (channel) { if (channel) {
history.push(`/channel/${channel._id}`); history.push(`/channel/${channel._id}`);
} }
...@@ -230,63 +322,116 @@ function ContextMenus(props: WithDispatcher) { ...@@ -230,63 +322,116 @@ function ContextMenus(props: WithDispatcher) {
case "add_friend": case "add_friend":
{ {
let user = client.users.get(data.user); await data.user.addFriend();
if (user) {
await client.users.addFriend(user.username);
}
} }
break; break;
case "block_user": case "block_user":
await client.users.blockUser(data.user); openScreen({
id: "special_prompt",
type: "block_user",
target: data.user,
});
break; break;
case "unblock_user": case "unblock_user":
await client.users.unblockUser(data.user); await data.user.unblockUser();
break; break;
case "remove_friend": case "remove_friend":
openScreen({
id: "special_prompt",
type: "unfriend_user",
target: data.user,
});
break;
case "cancel_friend": case "cancel_friend":
await client.users.removeFriend(data.user); await data.user.removeFriend();
break; break;
case "set_presence": case "set_presence":
{ {
await client.users.editUser({ await client.users.edit({
status: { status: {
...client.user?.status, ...client.user?.status,
presence: data.presence presence: data.presence,
} },
}); });
} }
break; break;
case "set_status": openScreen({ id: "special_input", type: "set_custom_status" }); break; case "set_status":
openScreen({
id: "special_input",
type: "set_custom_status",
});
break;
case "clear_status": case "clear_status":
{ {
let { text, ...status } = client.user?.status ?? {}; const { text: _text, ...status } =
await client.users.editUser({ status }); client.user?.status ?? {};
await client.users.edit({ status });
} }
break; break;
case "leave_group": case "leave_group":
case "close_dm": case "close_dm":
case "leave_server": case "leave_server":
case "delete_channel": case "delete_channel":
case "delete_server": case "delete_server":
case "delete_message": case "delete_message":
// @ts-expect-error case "create_channel":
case "create_invite": openScreen({ id: "special_prompt", type: data.action, target: data.target }); break; case "create_invite":
// Typescript flattens the case types into a single type and type structure and specifity is lost
openScreen({
id: "special_prompt",
type: data.action,
target: data.target,
} as unknown as Screen);
break;
case "ban_member": case "ban_member":
case "kick_member": openScreen({ id: "special_prompt", type: data.action, target: data.target, user: data.user }); break; case "kick_member":
openScreen({
id: "special_prompt",
type: data.action,
target: data.target,
user: data.user,
});
break;
case "open_notification_options": {
openContextMenu("NotificationOptions", {
channel: data.channel,
});
break;
}
case "create_channel": openScreen({ id: "special_input", type: "create_channel", server: data.server }); break; case "open_settings":
history.push("/settings");
break;
case "open_channel_settings":
history.push(`/channel/${data.id}/settings`);
break;
case "open_server_channel_settings":
history.push(
`/server/${data.server}/channel/${data.id}/settings`,
);
break;
case "open_server_settings":
history.push(`/server/${data.id}/settings`);
break;
case "open_channel_settings": history.push(`/channel/${data.id}/settings`); break; case "set_notification_state": {
case "open_server_channel_settings": history.push(`/server/${data.server}/channel/${data.id}/settings`); break; const { key, state } = data;
case "open_server_settings": history.push(`/server/${data.id}/settings`); break; if (state) {
dispatch({ type: "NOTIFICATIONS_SET", key, state });
} else {
dispatch({ type: "NOTIFICATIONS_REMOVE", key });
}
break;
}
} }
})().catch(err => { })().catch((err) => {
openScreen({ id: "error", error: takeError(err) }); openScreen({ id: "error", error: takeError(err) });
}); });
} }
...@@ -302,29 +447,27 @@ function ContextMenus(props: WithDispatcher) { ...@@ -302,29 +447,27 @@ function ContextMenus(props: WithDispatcher) {
server_list, server_list,
queued, queued,
unread, unread,
contextualChannel: cxid contextualChannel: cxid,
}: ContextMenuData) => { }: ContextMenuData) => {
const forceUpdate = useForceUpdate();
const elements: Children[] = []; const elements: Children[] = [];
var lastDivider = false; let lastDivider = false;
function generateAction( function generateAction(
action: Action, action: Action,
locale?: string, locale?: string,
disabled?: boolean, disabled?: boolean,
tip?: Children tip?: Children,
) { ) {
lastDivider = false; lastDivider = false;
elements.push( elements.push(
<MenuItem data={action} disabled={disabled}> <MenuItem data={action} disabled={disabled}>
<Text <Text
id={`app.context_menu.${locale ?? id={`app.context_menu.${
action.action}`} locale ?? action.action
}`}
/> />
{ tip && <div className="tip"> {tip && <div className="tip">{tip}</div>}
{ tip } </MenuItem>,
</div> }
</MenuItem>
); );
} }
...@@ -335,44 +478,69 @@ function ContextMenus(props: WithDispatcher) { ...@@ -335,44 +478,69 @@ function ContextMenus(props: WithDispatcher) {
} }
if (server_list) { if (server_list) {
let permissions = useServerPermission(server_list, forceUpdate); const server = client.servers.get(server_list)!;
if (permissions & ServerPermission.ManageChannels) generateAction({ action: 'create_channel', server: server_list }); const permissions = server.permission;
if (permissions & ServerPermission.ManageServer) generateAction({ action: 'open_server_settings', id: server_list }); if (server) {
if (permissions & ServerPermission.ManageChannels)
generateAction({
action: "create_channel",
target: server,
});
if (permissions & ServerPermission.ManageServer)
generateAction({
action: "open_server_settings",
id: server_list,
});
}
return elements; return elements;
} }
if (document.getSelection()?.toString().length ?? 0 > 0) { if (document.getSelection()?.toString().length ?? 0 > 0) {
generateAction({ action: "copy_selection" }, undefined, undefined, <Text id="shortcuts.ctrlc" />); generateAction(
{ action: "copy_selection" },
undefined,
undefined,
<Text id="shortcuts.ctrlc" />,
);
pushDivider(); pushDivider();
} }
const channel = useChannel(cid, forceUpdate); const channel = cid ? client.channels.get(cid) : undefined;
const contextualChannel = useChannel(cxid, forceUpdate); const contextualChannel = cxid
? client.channels.get(cxid)
: undefined;
const targetChannel = channel ?? contextualChannel; const targetChannel = channel ?? contextualChannel;
const user = useUser(uid, forceUpdate); const user = uid ? client.users.get(uid) : undefined;
const server = useServer(targetChannel?.channel_type === 'TextChannel' ? targetChannel.server : sid, forceUpdate); const serverChannel =
targetChannel &&
const channelPermissions = targetChannel ? useChannelPermission(targetChannel._id, forceUpdate) : 0; (targetChannel.channel_type === "TextChannel" ||
const serverPermissions = server ? useServerPermission(server._id, forceUpdate) : ( targetChannel.channel_type === "VoiceChannel")
targetChannel?.channel_type === 'TextChannel' ? useServerPermission(targetChannel.server, forceUpdate) : 0 ? targetChannel
); : undefined;
const userPermissions = user ? useUserPermission(user._id, forceUpdate) : 0;
const s = serverChannel ? serverChannel.server_id! : sid;
const server = s ? client.servers.get(s) : undefined;
const channelPermissions = targetChannel?.permission || 0;
const serverPermissions =
(server
? server.permission
: serverChannel
? serverChannel.server?.permission
: 0) || 0;
const userPermissions = (user ? user.permission : 0) || 0;
if (channel && unread) { if (channel && unread) {
generateAction( generateAction({ action: "mark_as_read", channel });
{ action: "mark_as_read", channel },
undefined,
true
);
} }
if (contextualChannel) { if (contextualChannel) {
if (user && user._id !== userId) { if (user && user._id !== userId) {
generateAction({ generateAction({
action: "mention", action: "mention",
user: user._id user: user._id,
}); });
pushDivider(); pushDivider();
...@@ -380,110 +548,147 @@ function ContextMenus(props: WithDispatcher) { ...@@ -380,110 +548,147 @@ function ContextMenus(props: WithDispatcher) {
} }
if (user) { if (user) {
let actions: string[]; let actions: Action["action"][];
switch (user.relationship) { switch (user.relationship) {
case Users.Relationship.User: actions = []; break; case RelationshipStatus.User:
case Users.Relationship.Friend: actions = [];
break;
case RelationshipStatus.Friend:
actions = ["remove_friend", "block_user"];
break;
case RelationshipStatus.Incoming:
actions = [ actions = [
"remove_friend", "add_friend",
"block_user" "cancel_friend",
"block_user",
]; ];
break; break;
case Users.Relationship.Incoming: case RelationshipStatus.Outgoing:
actions = ["add_friend", "block_user"];
break;
case Users.Relationship.Outgoing:
actions = ["cancel_friend", "block_user"]; actions = ["cancel_friend", "block_user"];
break; break;
case Users.Relationship.Blocked: case RelationshipStatus.Blocked:
actions = ["unblock_user"]; actions = ["unblock_user"];
break; break;
case Users.Relationship.BlockedOther: case RelationshipStatus.BlockedOther:
actions = ["block_user"]; actions = ["block_user"];
break; break;
case Users.Relationship.None: case RelationshipStatus.None:
default: default:
actions = ["add_friend", "block_user"]; actions = ["add_friend", "block_user"];
} }
if (userPermissions & UserPermission.ViewProfile) { if (userPermissions & UserPermission.ViewProfile) {
generateAction({ action: 'view_profile', user: user._id }); generateAction({
action: "view_profile",
user,
});
} }
if (user._id !== userId && userPermissions & UserPermission.SendMessage) { if (
generateAction({ action: 'message_user', user: user._id }); user._id !== userId &&
userPermissions & UserPermission.SendMessage
) {
generateAction({
action: "message_user",
user,
});
} }
for (const action of actions) { for (let i = 0; i < actions.length; i++) {
// Typescript can't determine that user the actions are linked together correctly
generateAction({ generateAction({
action: action as any, action: actions[i],
user: user._id user,
}); } as unknown as Action);
} }
} }
if (contextualChannel) { if (contextualChannel) {
if (contextualChannel.channel_type === "Group" && uid) { if (contextualChannel.channel_type === "Group" && uid) {
if ( if (
contextualChannel.owner === userId && contextualChannel.owner_id === userId &&
userId !== uid userId !== uid
) { ) {
generateAction({ generateAction({
action: "remove_member", action: "remove_member",
channel: contextualChannel._id, channel: contextualChannel,
user: uid user: user!,
}); });
} }
} }
if (server && uid && userId !== uid && uid !== server.owner) { if (
if (serverPermissions & ServerPermission.KickMembers) server &&
generateAction({ action: "kick_member", target: server, user: uid }); uid &&
userId !== uid &&
uid !== server.owner
) {
if (
serverPermissions & ServerPermission.KickMembers
)
generateAction({
action: "kick_member",
target: server,
user: user!,
});
if (serverPermissions & ServerPermission.BanMembers) if (serverPermissions & ServerPermission.BanMembers)
generateAction({ action: "ban_member", target: server, user: uid }); generateAction({
action: "ban_member",
target: server,
user: user!,
});
} }
} }
if (queued) { if (queued) {
generateAction({ generateAction({
action: "retry_message", action: "retry_message",
message: queued message: queued,
}); });
generateAction({ generateAction({
action: "cancel_message", action: "cancel_message",
message: queued message: queued,
}); });
} }
if (message && !queued) { if (message && !queued) {
generateAction({
action: "reply_message",
id: message._id,
});
if ( if (
typeof message.content === "string" && typeof message.content === "string" &&
message.content.length > 0 message.content.length > 0
) { ) {
generateAction({ generateAction({
action: "quote_message", action: "quote_message",
content: message.content content: message.content,
}); });
generateAction({ generateAction({
action: "copy_text", action: "copy_text",
content: message.content content: message.content,
}); });
} }
if (message.author === userId) { if (message.author_id === userId) {
generateAction({ generateAction({
action: "edit_message", action: "edit_message",
id: message._id id: message._id,
}); });
} }
if (message.author === userId || if (
channelPermissions & ChannelPermission.ManageMessages) { message.author_id === userId ||
channelPermissions &
ChannelPermission.ManageMessages
) {
generateAction({ generateAction({
action: "delete_message", action: "delete_message",
target: message target: message,
}); });
} }
...@@ -495,40 +700,39 @@ function ContextMenus(props: WithDispatcher) { ...@@ -495,40 +700,39 @@ function ContextMenus(props: WithDispatcher) {
generateAction( generateAction(
{ {
action: "open_file", action: "open_file",
attachment: message.attachments[0] attachment: message.attachments[0],
}, },
type === "Image" type === "Image"
? "open_image" ? "open_image"
: type === "Video" : type === "Video"
? "open_video" ? "open_video"
: "open_file" : "open_file",
); );
generateAction( generateAction(
{ {
action: "save_file", action: "save_file",
attachment: message.attachments[0] attachment: message.attachments[0],
}, },
type === "Image" type === "Image"
? "save_image" ? "save_image"
: type === "Video" : type === "Video"
? "save_video" ? "save_video"
: "save_file" : "save_file",
); );
generateAction( generateAction(
{ {
action: "copy_file_link", action: "copy_file_link",
attachment: message.attachments[0] attachment: message.attachments[0],
}, },
"copy_link" "copy_link",
); );
} }
if (document.activeElement?.tagName === "A") { if (document.activeElement?.tagName === "A") {
let link = document.activeElement.getAttribute( const link =
"href" document.activeElement.getAttribute("href");
);
if (link) { if (link) {
pushDivider(); pushDivider();
generateAction({ action: "open_link", link }); generateAction({ action: "open_link", link });
...@@ -537,120 +741,293 @@ function ContextMenus(props: WithDispatcher) { ...@@ -537,120 +741,293 @@ function ContextMenus(props: WithDispatcher) {
} }
} }
let id = server?._id ?? channel?._id ?? user?._id ?? message?._id; const id = sid ?? cid ?? uid ?? message?._id;
if (id) { if (id) {
pushDivider(); pushDivider();
if (channel) { if (channel) {
if (channel.channel_type !== "VoiceChannel") {
generateAction(
{
action: "open_notification_options",
channel,
},
undefined,
undefined,
<ChevronRight size={24} />,
);
}
switch (channel.channel_type) { switch (channel.channel_type) {
case 'Group': case "Group":
// ! generateAction({ action: "create_invite", target: channel }); FIXME: add support for group invites // ! generateAction({ action: "create_invite", target: channel }); FIXME: add support for group invites
generateAction({ action: "open_channel_settings", id: channel._id }, "open_group_settings"); generateAction(
generateAction({ action: "leave_group", target: channel }, "leave_group"); {
action: "open_channel_settings",
id: channel._id,
},
"open_group_settings",
);
generateAction(
{
action: "leave_group",
target: channel,
},
"leave_group",
);
break; break;
case 'DirectMessage': case "DirectMessage":
generateAction({ action: "close_dm", target: channel }); generateAction({
action: "close_dm",
target: channel,
});
break; break;
case 'TextChannel': case "TextChannel":
// ! FIXME: add permission for invites case "VoiceChannel":
generateAction({ action: "create_invite", target: channel }); if (
channelPermissions &
if (serverPermissions & ServerPermission.ManageServer) ChannelPermission.InviteOthers
generateAction({ action: "open_server_channel_settings", server: channel.server, id: channel._id }, "open_channel_settings"); ) {
generateAction({
if (serverPermissions & ServerPermission.ManageChannels) action: "create_invite",
generateAction({ action: "delete_channel", target: channel }); target: channel,
});
}
if (
serverPermissions &
ServerPermission.ManageServer
)
generateAction(
{
action: "open_server_channel_settings",
server: channel.server_id!,
id: channel._id,
},
"open_channel_settings",
);
if (
serverPermissions &
ServerPermission.ManageChannels
)
generateAction({
action: "delete_channel",
target: channel,
});
break; break;
} }
} }
if (sid && server) { if (sid && server) {
if (serverPermissions & ServerPermission.ManageServer) if (
generateAction({ action: "open_server_settings", id: server._id }, "open_server_settings"); serverPermissions &
ServerPermission.ManageServer
)
generateAction(
{
action: "open_server_settings",
id: server._id,
},
"open_server_settings",
);
if (userId === server.owner) { if (userId === server.owner) {
generateAction({ action: "delete_server", target: server }, "delete_server"); generateAction(
{ action: "delete_server", target: server },
"delete_server",
);
} else { } else {
generateAction({ action: "leave_server", target: server }, "leave_server"); generateAction(
{ action: "leave_server", target: server },
"leave_server",
);
} }
} }
generateAction( generateAction(
{ action: "copy_id", id }, { action: "copy_id", id },
sid ? "copy_sid" : sid
cid ? "copy_cid" : ? "copy_sid"
message ? "copy_mid" : "copy_uid" : cid
? "copy_cid"
: message
? "copy_mid"
: "copy_uid",
);
}
return elements;
}}
</ContextMenuWithData>
<ContextMenuWithData
id="Status"
onClose={contextClick}
className="Status">
{() => {
const user = client.user!;
return (
<>
<div className="header">
<div className="main">
<div
className="username"
onClick={() =>
writeClipboard(
client.user!.username,
)
}>
<Tooltip
content={
<Text id="app.special.copy_username" />
}>
@{user.username}
</Tooltip>
</div>
<div
className="status"
onClick={() =>
contextClick({
action: "set_status",
})
}>
<UserStatus user={user} />
</div>
</div>
<IconButton>
<MenuItem
data={{ action: "open_settings" }}>
<Cog size={22} />
</MenuItem>
</IconButton>
</div>
<LineDivider />
<MenuItem
data={{
action: "set_presence",
presence: Presence.Online,
}}
disabled={!isOnline}>
<div className="indicator online" />
<Text id={`app.status.online`} />
</MenuItem>
<MenuItem
data={{
action: "set_presence",
presence: Presence.Idle,
}}
disabled={!isOnline}>
<div className="indicator idle" />
<Text id={`app.status.idle`} />
</MenuItem>
<MenuItem
data={{
action: "set_presence",
presence: Presence.Busy,
}}
disabled={!isOnline}>
<div className="indicator busy" />
<Text id={`app.status.busy`} />
</MenuItem>
<MenuItem
data={{
action: "set_presence",
presence: Presence.Invisible,
}}
disabled={!isOnline}>
<div className="indicator invisible" />
<Text id={`app.status.invisible`} />
</MenuItem>
<LineDivider />
<MenuItem
data={{ action: "set_status" }}
disabled={!isOnline}>
<UserVoice size={18} />
<Text id={`app.context_menu.custom_status`} />
{client.user!.status?.text && (
<IconButton>
<MenuItem
data={{ action: "clear_status" }}>
<Trash size={18} />
</MenuItem>
</IconButton>
)}
</MenuItem>
</>
);
}}
</ContextMenuWithData>
<ContextMenuWithData
id="NotificationOptions"
onClose={contextClick}>
{({ channel }: { channel: Channel }) => {
const state = props.notifications[channel._id];
const actual = getNotificationState(
props.notifications,
channel,
);
const elements: Children[] = [
<MenuItem
key="notif"
data={{
action: "set_notification_state",
key: channel._id,
}}>
<Text
id={`app.main.channel.notifications.default`}
/>
<div className="tip">
{state !== undefined && <Square size={20} />}
{state === undefined && (
<CheckSquare size={20} />
)}
</div>
</MenuItem>,
];
function generate(key: string, icon: Children) {
elements.push(
<MenuItem
key={key}
data={{
action: "set_notification_state",
key: channel._id,
state: key,
}}>
{icon}
<Text
id={`app.main.channel.notifications.${key}`}
/>
{state === undefined && actual === key && (
<div className="tip">
<LeftArrowAlt size={20} />
</div>
)}
{state === key && (
<div className="tip">
<Check size={20} />
</div>
)}
</MenuItem>,
); );
} }
generate("all", <Bell size={24} />);
generate("mention", <At size={24} />);
generate("muted", <BellOff size={24} />);
generate("none", <Block size={24} />);
return elements; return elements;
}} }}
</ContextMenuWithData> </ContextMenuWithData>
<ContextMenu id="Status" onClose={contextClick}>
<span data-disabled={true}>@{client.user?.username}</span>
<LineDivider />
<MenuItem
data={{
action: "set_presence",
presence: Users.Presence.Online
}}
disabled={!isOnline}
>
<div className="indicator online" />
<Text id={`app.status.online`} />
</MenuItem>
<MenuItem
data={{
action: "set_presence",
presence: Users.Presence.Idle
}}
disabled={!isOnline}
>
<div className="indicator idle" />
<Text id={`app.status.idle`} />
</MenuItem>
<MenuItem
data={{
action: "set_presence",
presence: Users.Presence.Busy
}}
disabled={!isOnline}
>
<div className="indicator busy" />
<Text id={`app.status.busy`} />
</MenuItem>
<MenuItem
data={{
action: "set_presence",
presence: Users.Presence.Invisible
}}
disabled={!isOnline}
>
<div className="indicator invisible" />
<Text id={`app.status.invisible`} />
</MenuItem>
<LineDivider />
<MenuItem data={{ action: "set_status" }} disabled={!isOnline}>
<Text id={`app.context_menu.custom_status`} />
</MenuItem>
{client.user?.status?.text && (
<MenuItem
data={{ action: "clear_status" }}
disabled={!isOnline}
>
<Text id={`app.context_menu.clear_status`} />
</MenuItem>
)}
</ContextMenu>
</> </>
); );
} }
export default connectState( export default connectState(ContextMenus, (state) => {
ContextMenus, return {
() => { notifications: state.notifications,
return {}; };
}, });
true
);
src/lib/PaintCounter.tsx
View file @ 1ac5de17
/* eslint-disable react-hooks/rules-of-hooks */
import { useState } from "preact/hooks"; import { useState } from "preact/hooks";
const counts: { [key: string]: number } = {}; const counts: { [key: string]: number } = {};
export default function PaintCounter({ small, always }: { small?: boolean, always?: boolean }) { export default function PaintCounter({
small,
always,
}: {
small?: boolean;
always?: boolean;
}) {
if (import.meta.env.PROD && !always) return null; if (import.meta.env.PROD && !always) return null;
const [uniqueId] = useState('' + Math.random()); const [uniqueId] = useState(`${Math.random()}`);
const count = counts[uniqueId] ?? 0; const count = counts[uniqueId] ?? 0;
counts[uniqueId] = count + 1; counts[uniqueId] = count + 1;
return ( return (
<div style={{ textAlign: 'center', fontSize: '0.8em' }}> <div style={{ textAlign: "center", fontSize: "0.8em" }}>
{ small ? <>P: { count + 1 }</> : <> {small ? <>P: {count + 1}</> : <>Painted {count + 1} time(s).</>}
Painted {count + 1} time(s).
</> }
</div> </div>
) );
} }
src/lib/TextAreaAutoSize.tsx 0 → 100644
View file @ 1ac5de17
import styled from "styled-components";
import { RefObject } from "preact";
import { useEffect, useLayoutEffect, useRef } from "preact/hooks";
import TextArea, { TextAreaProps } from "../components/ui/TextArea";
import { internalSubscribe } from "./eventEmitter";
import { isTouchscreenDevice } from "./isTouchscreenDevice";
type TextAreaAutoSizeProps = Omit<
JSX.HTMLAttributes<HTMLTextAreaElement>,
"style" | "value" | "onChange" | "children" | "as"
> &
TextAreaProps & {
forceFocus?: boolean;
autoFocus?: boolean;
minHeight?: number;
maxRows?: number;
value: string;
id?: string;
onChange?: (ev: JSX.TargetedEvent<HTMLTextAreaElement, Event>) => void;
};
const Container = styled.div`
flex-grow: 1;
display: flex;
flex-direction: column;
`;
const Ghost = styled.div<{ lineHeight: string; maxRows: number }>`
flex: 0;
width: 100%;
overflow: hidden;
visibility: hidden;
position: relative;
> div {
width: 100%;
white-space: pre-wrap;
word-break: break-all;
top: 0;
position: absolute;
font-size: var(--text-size);
line-height: ${(props) => props.lineHeight};
max-height: calc(
calc(${(props) => props.lineHeight} * ${(props) => props.maxRows})
);
}
`;
export default function TextAreaAutoSize(props: TextAreaAutoSizeProps) {
const {
autoFocus,
minHeight,
maxRows,
value,
padding,
lineHeight,
hideBorder,
forceFocus,
onChange,
...textAreaProps
} = props;
const ref = useRef<HTMLTextAreaElement>() as RefObject<HTMLTextAreaElement>;
const ghost = useRef<HTMLDivElement>() as RefObject<HTMLDivElement>;
useLayoutEffect(() => {
if (ref.current && ghost.current) {
ref.current.style.height = `${ghost.current.clientHeight}px`;
}
}, [ghost, props.value]);
useEffect(() => {
if (isTouchscreenDevice) return;
autoFocus && ref.current && ref.current.focus();
}, [value, autoFocus]);
const inputSelected = () =>
["TEXTAREA", "INPUT"].includes(document.activeElement?.nodeName ?? "");
useEffect(() => {
if (!ref.current) return;
if (forceFocus) {
ref.current.focus();
}
if (isTouchscreenDevice) return;
if (autoFocus && !inputSelected()) {
ref.current.focus();
}
// ? if you are wondering what this is
// ? it is a quick and dirty hack to fix
// ? value not setting correctly
// ? I have no clue what's going on
ref.current.value = value;
if (!autoFocus) return;
function keyDown(e: KeyboardEvent) {
if ((e.ctrlKey && e.key !== "v") || e.altKey || e.metaKey) return;
if (e.key.length !== 1) return;
if (ref && !inputSelected()) {
ref.current!.focus();
}
}
document.body.addEventListener("keydown", keyDown);
return () => document.body.removeEventListener("keydown", keyDown);
}, [ref, autoFocus, forceFocus, value]);
useEffect(() => {
if (!ref.current) return;
function focus(id: string) {
if (id === props.id) {
ref.current!.focus();
}
}
return internalSubscribe(
"TextArea",
"focus",
focus as (...args: unknown[]) => void,
);
}, [props.id, ref]);
return (
<Container>
<TextArea
ref={ref}
value={value}
padding={padding}
style={{ minHeight }}
hideBorder={hideBorder}
lineHeight={lineHeight}
onChange={(ev) => {
onChange && onChange(ev);
}}
{...textAreaProps}
/>
<Ghost
lineHeight={lineHeight ?? "var(--textarea-line-height)"}
maxRows={maxRows ?? 5}>
<div ref={ghost} style={{ padding }}>
{props.value
? props.value
.split("\n")
.map((x) => `\u200e${x}`)
.join("\n")
: undefined ?? "‎\n"}
</div>
</Ghost>
</Container>
);
}