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 1222 additions and 931 deletions
src/context/intermediate/modals/Onboarding.tsx
View file @ 1ac5de17
import { SubmitHandler, useForm } from "react-hook-form";
import styles from "./Onboarding.module.scss";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { useState } from "preact/hooks"; import { useState } from "preact/hooks";
import { useForm } from "react-hook-form";
import styles from "./Onboarding.module.scss"; import wideSVG from "../../../assets/wide.svg";
import { takeError } from "../../revoltjs/util";
import Button from "../../../components/ui/Button"; import Button from "../../../components/ui/Button";
import FormField from "../../../pages/login/FormField";
import Preloader from "../../../components/ui/Preloader"; import Preloader from "../../../components/ui/Preloader";
import wideSVG from '../../../assets/wide.svg'; import FormField from "../../../pages/login/FormField";
import { takeError } from "../../revoltjs/util";
interface Props { interface Props {
onClose: () => void; onClose: () => void;
callback: (username: string, loginAfterSuccess?: true) => Promise<void>; callback: (username: string, loginAfterSuccess?: true) => Promise<void>;
} }
interface FormInputs {
username: string;
}
export function OnboardingModal({ onClose, callback }: Props) { export function OnboardingModal({ onClose, callback }: Props) {
const { handleSubmit, register } = useForm(); const { handleSubmit, register } = useForm<FormInputs>();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | undefined>(undefined); const [error, setError] = useState<string | undefined>(undefined);
async function onSubmit({ username }: { username: string }) { const onSubmit: SubmitHandler<FormInputs> = ({ username }) => {
setLoading(true); setLoading(true);
callback(username, true) callback(username, true)
.then(onClose) .then(() => onClose())
.catch((err: any) => { .catch((err: unknown) => {
setError(takeError(err)); setError(takeError(err));
setLoading(false); setLoading(false);
}); });
} };
return ( return (
<div className={styles.onboarding}> <div className={styles.onboarding}>
<div className={styles.header}> <div className={styles.header}>
<h1> <h1>
<Text id="app.special.modals.onboarding.welcome" /> <Text id="app.special.modals.onboarding.welcome" />
<img src={wideSVG} /> <img src={wideSVG} loading="eager" />
</h1> </h1>
</div> </div>
<div className={styles.form}> <div className={styles.form}>
...@@ -45,7 +51,12 @@ export function OnboardingModal({ onClose, callback }: Props) { ...@@ -45,7 +51,12 @@ export function OnboardingModal({ onClose, callback }: Props) {
<p> <p>
<Text id="app.special.modals.onboarding.pick" /> <Text id="app.special.modals.onboarding.pick" />
</p> </p>
<form onSubmit={handleSubmit(onSubmit) as any}> <form
onSubmit={
handleSubmit(
onSubmit,
) as JSX.GenericEventHandler<HTMLFormElement>
}>
<div> <div>
<FormField <FormField
type="username" type="username"
......
src/context/intermediate/modals/Prompt.module.scss
View file @ 1ac5de17
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
user-select: all; user-select: all;
font-size: 1.4em; font-size: 1.4em;
text-align: center; text-align: center;
font-family: "Fira Mono"; font-family: var(--monospace-font);
} }
} }
......
src/context/intermediate/modals/Prompt.tsx
View file @ 1ac5de17
import { observer } from "mobx-react-lite";
import { useHistory } from "react-router-dom";
import { Channel } from "revolt.js/dist/maps/Channels";
import { Message as MessageI } from "revolt.js/dist/maps/Messages";
import { Server } from "revolt.js/dist/maps/Servers";
import { User } from "revolt.js/dist/maps/Users";
import { ulid } from "ulid"; import { ulid } from "ulid";
import styles from "./Prompt.module.scss";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import styles from './Prompt.module.scss'; import { useContext, useEffect, useState } from "preact/hooks";
import { useHistory } from "react-router-dom";
import Radio from "../../../components/ui/Radio"; import { TextReact } from "../../../lib/i18n";
import { Children } from "../../../types/Preact";
import { useIntermediate } from "../Intermediate"; import Message from "../../../components/common/messaging/Message";
import UserIcon from "../../../components/common/user/UserIcon";
import InputBox from "../../../components/ui/InputBox"; import InputBox from "../../../components/ui/InputBox";
import Modal, { Action } from "../../../components/ui/Modal";
import Overline from "../../../components/ui/Overline"; import Overline from "../../../components/ui/Overline";
import Radio from "../../../components/ui/Radio";
import { Children } from "../../../types/Preact";
import { AppContext } from "../../revoltjs/RevoltClient"; import { AppContext } from "../../revoltjs/RevoltClient";
import { mapMessage, takeError } from "../../revoltjs/util"; import { takeError } from "../../revoltjs/util";
import Modal, { Action } from "../../../components/ui/Modal"; import { useIntermediate } from "../Intermediate";
import { Channels, Servers, Users } from "revolt.js/dist/api/objects";
import { useContext, useEffect, useState } from "preact/hooks";
import UserIcon from "../../../components/common/user/UserIcon";
import Message from "../../../components/common/messaging/Message";
import { TextReact } from "../../../lib/i18n";
interface Props { interface Props {
onClose: () => void; onClose: () => void;
...@@ -25,7 +33,14 @@ interface Props { ...@@ -25,7 +33,14 @@ interface Props {
error?: string; error?: string;
} }
export function PromptModal({ onClose, question, content, actions, disabled, error }: Props) { export function PromptModal({
onClose,
question,
content,
actions,
disabled,
error,
}: Props) {
return ( return (
<Modal <Modal
visible={true} visible={true}
...@@ -33,89 +48,107 @@ export function PromptModal({ onClose, question, content, actions, disabled, err ...@@ -33,89 +48,107 @@ export function PromptModal({ onClose, question, content, actions, disabled, err
actions={actions} actions={actions}
onClose={onClose} onClose={onClose}
disabled={disabled}> disabled={disabled}>
{ error && <Overline error={error} type="error" /> } {error && <Overline error={error} type="error" />}
{ content } {content}
</Modal> </Modal>
); );
} }
type SpecialProps = { onClose: () => void } & ( type SpecialProps = { onClose: () => void } & (
{ type: "leave_group", target: Channels.GroupChannel } | | { type: "leave_group"; target: Channel }
{ type: "close_dm", target: Channels.DirectMessageChannel } | | { type: "close_dm"; target: Channel }
{ type: "leave_server", target: Servers.Server } | | { type: "leave_server"; target: Server }
{ type: "delete_server", target: Servers.Server } | | { type: "delete_server"; target: Server }
{ type: "delete_channel", target: Channels.TextChannel } | | { type: "delete_channel"; target: Channel }
{ type: "delete_message", target: Channels.Message } | | { type: "delete_message"; target: MessageI }
{ type: "create_invite", target: Channels.TextChannel | Channels.GroupChannel } | | {
{ type: "kick_member", target: Servers.Server, user: string } | type: "create_invite";
{ type: "ban_member", target: Servers.Server, user: string } | target: Channel;
{ type: "unfriend_user", target: Users.User } | }
{ type: "block_user", target: Users.User } | | { type: "kick_member"; target: Server; user: User }
{ type: "create_channel", target: Servers.Server } | { type: "ban_member"; target: Server; user: User }
) | { type: "unfriend_user"; target: User }
| { type: "block_user"; target: User }
| { type: "create_channel"; target: Server }
);
export function SpecialPromptModal(props: SpecialProps) { export const SpecialPromptModal = observer((props: SpecialProps) => {
const client = useContext(AppContext); const client = useContext(AppContext);
const [ processing, setProcessing ] = useState(false); const [processing, setProcessing] = useState(false);
const [ error, setError ] = useState<undefined | string>(undefined); const [error, setError] = useState<undefined | string>(undefined);
const { onClose } = props; const { onClose } = props;
switch (props.type) { switch (props.type) {
case 'leave_group': case "leave_group":
case 'close_dm': case "close_dm":
case 'leave_server': case "leave_server":
case 'delete_server': case "delete_server":
case 'delete_channel': case "delete_channel":
case 'unfriend_user': case "unfriend_user":
case 'block_user': { case "block_user": {
const EVENTS = { const EVENTS = {
'close_dm': ['confirm_close_dm', 'close'], close_dm: ["confirm_close_dm", "close"],
'delete_server': ['confirm_delete', 'delete'], delete_server: ["confirm_delete", "delete"],
'delete_channel': ['confirm_delete', 'delete'], delete_channel: ["confirm_delete", "delete"],
'leave_group': ['confirm_leave', 'leave'], leave_group: ["confirm_leave", "leave"],
'leave_server': ['confirm_leave', 'leave'], leave_server: ["confirm_leave", "leave"],
'unfriend_user': ['unfriend_user', 'remove'], unfriend_user: ["unfriend_user", "remove"],
'block_user': ['block_user', 'block'] block_user: ["block_user", "block"],
}; };
let event = EVENTS[props.type]; const event = EVENTS[props.type];
let name; let name;
switch (props.type) { switch (props.type) {
case 'unfriend_user': case "unfriend_user":
case 'block_user': name = props.target.username; break; case "block_user":
case 'close_dm': name = client.users.get(client.channels.getRecipient(props.target._id))?.username; break; name = props.target.username;
default: name = props.target.name; break;
case "close_dm":
name = props.target.recipient?.username;
break;
default:
name = props.target.name;
} }
return ( return (
<PromptModal <PromptModal
onClose={onClose} onClose={onClose}
question={<Text question={
id={`app.special.modals.prompt.${event[0]}`} <Text
fields={{ name }} id={`app.special.modals.prompt.${event[0]}`}
/>} fields={{ name }}
/>
}
actions={[ actions={[
{ {
confirmation: true, confirmation: true,
contrast: true, contrast: true,
error: true, error: true,
text: <Text id={`app.special.modals.actions.${event[1]}`} />, children: (
<Text
id={`app.special.modals.actions.${event[1]}`}
/>
),
onClick: async () => { onClick: async () => {
setProcessing(true); setProcessing(true);
try { try {
switch (props.type) { switch (props.type) {
case 'unfriend_user': case "unfriend_user":
await client.users.removeFriend(props.target._id); break; await props.target.removeFriend();
case 'block_user': break;
await client.users.blockUser(props.target._id); break; case "block_user":
case 'leave_group': await props.target.blockUser();
case 'close_dm': break;
case 'delete_channel': case "leave_group":
await client.channels.delete(props.target._id); break; case "close_dm":
case 'leave_server': case "delete_channel":
case 'delete_server': props.target.delete();
await client.servers.delete(props.target._id); break; break;
case "leave_server":
case "delete_server":
props.target.delete();
break;
} }
onClose(); onClose();
...@@ -123,63 +156,89 @@ export function SpecialPromptModal(props: SpecialProps) { ...@@ -123,63 +156,89 @@ export function SpecialPromptModal(props: SpecialProps) {
setError(takeError(err)); setError(takeError(err));
setProcessing(false); setProcessing(false);
} }
} },
},
{
children: (
<Text id="app.special.modals.actions.cancel" />
),
onClick: onClose,
}, },
{ text: <Text id="app.special.modals.actions.cancel" />, onClick: onClose }
]} ]}
content={<TextReact id={`app.special.modals.prompt.${event[0]}_long`} fields={{ name: <b>{ name }</b> }} />} content={
<TextReact
id={`app.special.modals.prompt.${event[0]}_long`}
fields={{ name: <b>{name}</b> }}
/>
}
disabled={processing} disabled={processing}
error={error} error={error}
/> />
) );
} }
case 'delete_message': { case "delete_message": {
return ( return (
<PromptModal <PromptModal
onClose={onClose} onClose={onClose}
question={<Text id={'app.context_menu.delete_message'} />} question={<Text id={"app.context_menu.delete_message"} />}
actions={[ actions={[
{ {
confirmation: true, confirmation: true,
contrast: true, contrast: true,
error: true, error: true,
text: <Text id="app.special.modals.actions.delete" />, children: (
<Text id="app.special.modals.actions.delete" />
),
onClick: async () => { onClick: async () => {
setProcessing(true); setProcessing(true);
try { try {
await client.channels.deleteMessage(props.target.channel, props.target._id); props.target.delete();
onClose(); onClose();
} catch (err) { } catch (err) {
setError(takeError(err)); setError(takeError(err));
setProcessing(false); setProcessing(false);
} }
} },
},
{
children: (
<Text id="app.special.modals.actions.cancel" />
),
onClick: onClose,
plain: true,
}, },
{ text: <Text id="app.special.modals.actions.cancel" />, onClick: onClose }
]} ]}
content={<> content={
<Text id={`app.special.modals.prompt.confirm_delete_message_long`} /> <>
<Message message={mapMessage(props.target)} head={true} contrast /> <Text
</>} id={`app.special.modals.prompt.confirm_delete_message_long`}
/>
<Message
message={props.target}
head={true}
contrast
/>
</>
}
disabled={processing} disabled={processing}
error={error} error={error}
/> />
) );
} }
case "create_invite": { case "create_invite": {
const [ code, setCode ] = useState('abcdef'); const [code, setCode] = useState("abcdef");
const { writeClipboard } = useIntermediate(); const { writeClipboard } = useIntermediate();
useEffect(() => { useEffect(() => {
setProcessing(true); setProcessing(true);
client.channels.createInvite(props.target._id) props.target
.then(code => setCode(code)) .createInvite()
.catch(err => setError(takeError(err))) .then((code) => setCode(code))
.catch((err) => setError(takeError(err)))
.finally(() => setProcessing(false)); .finally(() => setProcessing(false));
}, []); }, [props.target]);
return ( return (
<PromptModal <PromptModal
...@@ -187,69 +246,89 @@ export function SpecialPromptModal(props: SpecialProps) { ...@@ -187,69 +246,89 @@ export function SpecialPromptModal(props: SpecialProps) {
question={<Text id={`app.context_menu.create_invite`} />} question={<Text id={`app.context_menu.create_invite`} />}
actions={[ actions={[
{ {
text: <Text id="app.special.modals.actions.ok" />, children: (
<Text id="app.special.modals.actions.ok" />
),
confirmation: true, confirmation: true,
onClick: onClose onClick: onClose,
}, },
{ {
text: <Text id="app.context_menu.copy_link" />, children: <Text id="app.context_menu.copy_link" />,
onClick: () => writeClipboard(`${window.location.protocol}//${window.location.host}/invite/${code}`) onClick: () =>
} writeClipboard(
`${window.location.protocol}//${window.location.host}/invite/${code}`,
),
},
]} ]}
content={ content={
processing ? processing ? (
<Text id="app.special.modals.prompt.create_invite_generate" /> <Text id="app.special.modals.prompt.create_invite_generate" />
: <div className={styles.invite}> ) : (
<Text id="app.special.modals.prompt.create_invite_created" /> <div className={styles.invite}>
<code>{code}</code> <Text id="app.special.modals.prompt.create_invite_created" />
<code>{code}</code>
</div> </div>
)
} }
disabled={processing} disabled={processing}
error={error} error={error}
/> />
) );
} }
case "kick_member": { case "kick_member": {
const user = client.users.get(props.user);
return ( return (
<PromptModal <PromptModal
onClose={onClose} onClose={onClose}
question={<Text id={`app.context_menu.kick_member`} />} question={<Text id={`app.context_menu.kick_member`} />}
actions={[ actions={[
{ {
text: <Text id="app.special.modals.actions.kick" />, children: (
<Text id="app.special.modals.actions.kick" />
),
contrast: true, contrast: true,
error: true, error: true,
confirmation: true, confirmation: true,
onClick: async () => { onClick: async () => {
setProcessing(true); setProcessing(true);
try { try {
await client.servers.members.kickMember(props.target._id, props.user); client.members
.getKey({
server: props.target._id,
user: props.user._id,
})
?.kick();
onClose(); onClose();
} catch (err) { } catch (err) {
setError(takeError(err)); setError(takeError(err));
setProcessing(false); setProcessing(false);
} }
} },
},
{
children: (
<Text id="app.special.modals.actions.cancel" />
),
onClick: onClose,
}, },
{ text: <Text id="app.special.modals.actions.cancel" />, onClick: onClose }
]} ]}
content={<div className={styles.column}> content={
<UserIcon target={user} size={64} /> <div className={styles.column}>
<Text <UserIcon target={props.user} size={64} />
id="app.special.modals.prompt.confirm_kick" <Text
fields={{ name: user?.username }} /> id="app.special.modals.prompt.confirm_kick"
</div>} fields={{ name: props.user?.username }}
/>
</div>
}
disabled={processing} disabled={processing}
error={error} error={error}
/> />
) );
} }
case "ban_member": { case "ban_member": {
const [ reason, setReason ] = useState<string | undefined>(undefined); const [reason, setReason] = useState<string | undefined>(undefined);
const user = client.users.get(props.user);
return ( return (
<PromptModal <PromptModal
...@@ -257,40 +336,59 @@ export function SpecialPromptModal(props: SpecialProps) { ...@@ -257,40 +336,59 @@ export function SpecialPromptModal(props: SpecialProps) {
question={<Text id={`app.context_menu.ban_member`} />} question={<Text id={`app.context_menu.ban_member`} />}
actions={[ actions={[
{ {
text: <Text id="app.special.modals.actions.ban" />, children: (
<Text id="app.special.modals.actions.ban" />
),
contrast: true, contrast: true,
error: true, error: true,
confirmation: true, confirmation: true,
onClick: async () => { onClick: async () => {
setProcessing(true); setProcessing(true);
try { try {
await client.servers.banUser(props.target._id, props.user, { reason }); await props.target.banUser(props.user._id, {
reason,
});
onClose(); onClose();
} catch (err) { } catch (err) {
setError(takeError(err)); setError(takeError(err));
setProcessing(false); setProcessing(false);
} }
} },
},
{
children: (
<Text id="app.special.modals.actions.cancel" />
),
onClick: onClose,
}, },
{ text: <Text id="app.special.modals.actions.cancel" />, onClick: onClose }
]} ]}
content={<div className={styles.column}> content={
<UserIcon target={user} size={64} /> <div className={styles.column}>
<Text <UserIcon target={props.user} size={64} />
id="app.special.modals.prompt.confirm_ban" <Text
fields={{ name: user?.username }} /> id="app.special.modals.prompt.confirm_ban"
<Overline><Text id="app.special.modals.prompt.confirm_ban_reason" /></Overline> fields={{ name: props.user?.username }}
<InputBox value={reason ?? ''} onChange={e => setReason(e.currentTarget.value)} /> />
</div>} <Overline>
<Text id="app.special.modals.prompt.confirm_ban_reason" />
</Overline>
<InputBox
value={reason ?? ""}
onChange={(e) =>
setReason(e.currentTarget.value)
}
/>
</div>
}
disabled={processing} disabled={processing}
error={error} error={error}
/> />
) );
} }
case 'create_channel': { case "create_channel": {
const [ name, setName ] = useState(''); const [name, setName] = useState("");
const [ type, setType ] = useState<'Text' | 'Voice'>('Text'); const [type, setType] = useState<"Text" | "Voice">("Text");
const history = useHistory(); const history = useHistory();
return ( return (
...@@ -301,46 +399,67 @@ export function SpecialPromptModal(props: SpecialProps) { ...@@ -301,46 +399,67 @@ export function SpecialPromptModal(props: SpecialProps) {
{ {
confirmation: true, confirmation: true,
contrast: true, contrast: true,
text: <Text id="app.special.modals.actions.create" />, children: (
<Text id="app.special.modals.actions.create" />
),
onClick: async () => { onClick: async () => {
setProcessing(true); setProcessing(true);
try { try {
const channel = await client.servers.createChannel( const channel =
props.target._id, await props.target.createChannel({
{
type, type,
name, name,
nonce: ulid() nonce: ulid(),
} });
history.push(
`/server/${props.target._id}/channel/${channel._id}`,
); );
history.push(`/server/${props.target._id}/channel/${channel._id}`);
onClose(); onClose();
} catch (err) { } catch (err) {
setError(takeError(err)); setError(takeError(err));
setProcessing(false); setProcessing(false);
} }
} },
},
{
children: (
<Text id="app.special.modals.actions.cancel" />
),
onClick: onClose,
}, },
{ text: <Text id="app.special.modals.actions.cancel" />, onClick: onClose }
]} ]}
content={<> content={
<Overline block type="subtle"><Text id="app.main.servers.channel_type" /></Overline> <>
<Radio checked={type === 'Text'} onSelect={() => setType('Text')}> <Overline block type="subtle">
<Text id="app.main.servers.text_channel" /></Radio> <Text id="app.main.servers.channel_type" />
<Radio checked={type === 'Voice'} onSelect={() => setType('Voice')}> </Overline>
<Text id="app.main.servers.voice_channel" /></Radio> <Radio
<Overline block type="subtle"><Text id="app.main.servers.channel_name" /></Overline> checked={type === "Text"}
<InputBox onSelect={() => setType("Text")}>
value={name} <Text id="app.main.servers.text_channel" />
onChange={e => setName(e.currentTarget.value)} /> </Radio>
</>} <Radio
checked={type === "Voice"}
onSelect={() => setType("Voice")}>
<Text id="app.main.servers.voice_channel" />
</Radio>
<Overline block type="subtle">
<Text id="app.main.servers.channel_name" />
</Overline>
<InputBox
value={name}
onChange={(e) => setName(e.currentTarget.value)}
/>
</>
}
disabled={processing} disabled={processing}
error={error} error={error}
/> />
) );
} }
default: return null; default:
return null;
} }
} });
src/context/intermediate/modals/SignedOut.tsx
View file @ 1ac5de17
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import Modal from "../../../components/ui/Modal"; import Modal from "../../../components/ui/Modal";
interface Props { interface Props {
...@@ -15,8 +16,8 @@ export function SignedOutModal({ onClose }: Props) { ...@@ -15,8 +16,8 @@ export function SignedOutModal({ onClose }: Props) {
{ {
onClick: onClose, onClick: onClose,
confirmation: true, confirmation: true,
text: <Text id="app.special.modals.actions.ok" /> children: <Text id="app.special.modals.actions.ok" />,
} },
]} ]}
/> />
); );
......
src/context/intermediate/popovers/ChannelInfo.tsx
View file @ 1ac5de17
import { X } from "@styled-icons/boxicons-regular"; import { X } from "@styled-icons/boxicons-regular";
import { observer } from "mobx-react-lite";
import { Channel } from "revolt.js/dist/maps/Channels";
import styles from "./ChannelInfo.module.scss"; import styles from "./ChannelInfo.module.scss";
import Modal from "../../../components/ui/Modal"; import Modal from "../../../components/ui/Modal";
import { getChannelName } from "../../revoltjs/util";
import Markdown from "../../../components/markdown/Markdown"; import Markdown from "../../../components/markdown/Markdown";
import { useChannel, useForceUpdate } from "../../revoltjs/hooks"; import { getChannelName } from "../../revoltjs/util";
interface Props { interface Props {
channel_id: string; channel: Channel;
onClose: () => void; onClose: () => void;
} }
export function ChannelInfo({ channel_id, onClose }: Props) { export const ChannelInfo = observer(({ channel, onClose }: Props) => {
const ctx = useForceUpdate(); if (
const channel = useChannel(channel_id, ctx); channel.channel_type === "DirectMessage" ||
if (!channel) return null; channel.channel_type === "SavedMessages"
) {
if (channel.channel_type === "DirectMessage" || channel.channel_type === 'SavedMessages') {
onClose(); onClose();
return null; return null;
} }
...@@ -24,15 +27,15 @@ export function ChannelInfo({ channel_id, onClose }: Props) { ...@@ -24,15 +27,15 @@ export function ChannelInfo({ channel_id, onClose }: Props) {
<Modal visible={true} onClose={onClose}> <Modal visible={true} onClose={onClose}>
<div className={styles.info}> <div className={styles.info}>
<div className={styles.header}> <div className={styles.header}>
<h1>{ getChannelName(ctx.client, channel, true) }</h1> <h1>{getChannelName(channel, true)}</h1>
<div onClick={onClose}> <div onClick={onClose}>
<X size={36} /> <X size={36} />
</div> </div>
</div> </div>
<p> <p>
<Markdown content={channel.description} /> <Markdown content={channel.description!} />
</p> </p>
</div> </div>
</Modal> </Modal>
); );
} });
src/context/intermediate/popovers/ImageViewer.module.scss
View file @ 1ac5de17
.viewer { .viewer {
display: flex;
flex-direction: column;
border-end-end-radius: 4px;
border-end-start-radius: 4px;
overflow: hidden;
img { img {
width: auto;
height: auto;
max-width: 90vw; max-width: 90vw;
max-height: 90vh; max-height: 75vh;
border-bottom: thin solid var(--tertiary-foreground);
object-fit: contain;
} }
} }
src/context/intermediate/popovers/ImageViewer.tsx
View file @ 1ac5de17
/* eslint-disable react-hooks/rules-of-hooks */
import { Attachment, AttachmentMetadata } from "revolt-api/types/Autumn";
import { EmbedImage } from "revolt-api/types/January";
import styles from "./ImageViewer.module.scss"; import styles from "./ImageViewer.module.scss";
import Modal from "../../../components/ui/Modal";
import { useContext, useEffect } from "preact/hooks";
import { AppContext } from "../../revoltjs/RevoltClient";
import { Attachment, EmbedImage } from "revolt.js/dist/api/objects";
import EmbedMediaActions from "../../../components/common/messaging/embed/EmbedMediaActions";
import AttachmentActions from "../../../components/common/messaging/attachments/AttachmentActions"; import AttachmentActions from "../../../components/common/messaging/attachments/AttachmentActions";
import EmbedMediaActions from "../../../components/common/messaging/embed/EmbedMediaActions";
import Modal from "../../../components/ui/Modal";
import { useClient } from "../../revoltjs/RevoltClient";
interface Props { interface Props {
onClose: () => void; onClose: () => void;
...@@ -12,31 +16,45 @@ interface Props { ...@@ -12,31 +16,45 @@ interface Props {
attachment?: Attachment; attachment?: Attachment;
} }
type ImageMetadata = AttachmentMetadata & { type: "Image" };
export function ImageViewer({ attachment, embed, onClose }: Props) { export function ImageViewer({ attachment, embed, onClose }: Props) {
// ! FIXME: temp code if (attachment && attachment.metadata.type !== "Image") {
// ! add proxy function to client console.warn(
function proxyImage(url: string) { `Attempted to use a non valid attatchment type in the image viewer: ${attachment.metadata.type}`,
return 'https://jan.revolt.chat/proxy?url=' + encodeURIComponent(url); );
return null;
} }
if (attachment && attachment.metadata.type !== "Image") return null; const client = useClient();
const client = useContext(AppContext);
return ( return (
<Modal visible={true} onClose={onClose} noBackground> <Modal visible={true} onClose={onClose} noBackground>
<div className={styles.viewer}> <div className={styles.viewer}>
{ attachment && {attachment && (
<> <>
<img src={client.generateFileURL(attachment)} /> <img
loading="eager"
src={client.generateFileURL(attachment)}
width={(attachment.metadata as ImageMetadata).width}
height={
(attachment.metadata as ImageMetadata).height
}
/>
<AttachmentActions attachment={attachment} /> <AttachmentActions attachment={attachment} />
</> </>
} )}
{ embed && {embed && (
<> <>
<img src={proxyImage(embed.url)} /> <img
loading="eager"
src={client.proxyFile(embed.url)}
width={embed.width}
height={embed.height}
/>
<EmbedMediaActions embed={embed} /> <EmbedMediaActions embed={embed} />
</> </>
} )}
</div> </div>
</Modal> </Modal>
); );
......
src/context/intermediate/popovers/ModifyAccount.tsx
View file @ 1ac5de17
import { SubmitHandler, useForm } from "react-hook-form";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { useForm } from "react-hook-form";
import Modal from "../../../components/ui/Modal";
import { takeError } from "../../revoltjs/util";
import { useContext, useState } from "preact/hooks"; import { useContext, useState } from "preact/hooks";
import FormField from '../../../pages/login/FormField';
import Modal from "../../../components/ui/Modal";
import Overline from "../../../components/ui/Overline"; import Overline from "../../../components/ui/Overline";
import FormField from "../../../pages/login/FormField";
import { AppContext } from "../../revoltjs/RevoltClient"; import { AppContext } from "../../revoltjs/RevoltClient";
import { takeError } from "../../revoltjs/util";
interface Props { interface Props {
onClose: () => void; onClose: () => void;
field: "username" | "email" | "password"; field: "username" | "email" | "password";
} }
interface FormInputs {
password: string;
new_email: string;
new_username: string;
new_password: string;
// TODO: figure out if this is correct or not
// it wasn't in the types before this was typed but the element itself was there
current_password?: string;
}
export function ModifyAccountModal({ onClose, field }: Props) { export function ModifyAccountModal({ onClose, field }: Props) {
const client = useContext(AppContext); const client = useContext(AppContext);
const { handleSubmit, register, errors } = useForm(); const { handleSubmit, register, errors } = useForm<FormInputs>();
const [error, setError] = useState<string | undefined>(undefined); const [error, setError] = useState<string | undefined>(undefined);
async function onSubmit({ const onSubmit: SubmitHandler<FormInputs> = async ({
password, password,
new_username, new_username,
new_email, new_email,
new_password new_password,
}: { }) => {
password: string;
new_username: string;
new_email: string;
new_password: string;
}) {
try { try {
if (field === "email") { if (field === "email") {
await client.req("POST", "/auth/change/email", { await client.req("POST", "/auth/change/email", {
password, password,
new_email new_email,
}); });
onClose(); onClose();
} else if (field === "password") { } else if (field === "password") {
await client.req("POST", "/auth/change/password", { await client.req("POST", "/auth/change/password", {
password, password,
new_password new_password,
}); });
onClose(); onClose();
} else if (field === "username") { } else if (field === "username") {
await client.req("PATCH", "/users/id/username", { await client.req("PATCH", "/users/id/username", {
username: new_username, username: new_username,
password password,
}); });
onClose(); onClose();
} }
} catch (err) { } catch (err) {
setError(takeError(err)); setError(takeError(err));
} }
} };
return ( return (
<Modal <Modal
...@@ -62,20 +71,27 @@ export function ModifyAccountModal({ onClose, field }: Props) { ...@@ -62,20 +71,27 @@ export function ModifyAccountModal({ onClose, field }: Props) {
{ {
confirmation: true, confirmation: true,
onClick: handleSubmit(onSubmit), onClick: handleSubmit(onSubmit),
text: children:
field === "email" ? ( field === "email" ? (
<Text id="app.special.modals.actions.send_email" /> <Text id="app.special.modals.actions.send_email" />
) : ( ) : (
<Text id="app.special.modals.actions.update" /> <Text id="app.special.modals.actions.update" />
) ),
}, },
{ {
onClick: onClose, onClick: onClose,
text: <Text id="app.special.modals.actions.close" /> children: <Text id="app.special.modals.actions.close" />,
} },
]} ]}>
> {/* Preact / React typing incompatabilities */}
<form onSubmit={handleSubmit(onSubmit) as any}> <form
onSubmit={(e) => {
e.preventDefault();
handleSubmit(
onSubmit,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
)(e as any);
}}>
{field === "email" && ( {field === "email" && (
<FormField <FormField
type="email" type="email"
......
src/context/intermediate/popovers/PendingRequests.tsx
View file @ 1ac5de17
import { Text } from "preact-i18n"; import { observer } from "mobx-react-lite";
import { User } from "revolt.js/dist/maps/Users";
import styles from "./UserPicker.module.scss"; import styles from "./UserPicker.module.scss";
import { useUsers } from "../../revoltjs/hooks"; import { Text } from "preact-i18n";
import Modal from "../../../components/ui/Modal"; import Modal from "../../../components/ui/Modal";
import { Friend } from "../../../pages/friends/Friend"; import { Friend } from "../../../pages/friends/Friend";
interface Props { interface Props {
users: string[]; users: User[];
onClose: () => void; onClose: () => void;
} }
export function PendingRequests({ users: ids, onClose }: Props) { export const PendingRequests = observer(({ users, onClose }: Props) => {
const users = useUsers(ids);
return ( return (
<Modal <Modal
visible={true} visible={true}
title={<Text id="app.special.friends.pending" />} title={<Text id="app.special.friends.pending" />}
onClose={onClose}> onClose={onClose}>
<div className={styles.list}> <div className={styles.list}>
{ users {users.map((x) => (
.filter(x => typeof x !== 'undefined') <Friend user={x!} key={x!._id} />
.map(x => <Friend user={x!} key={x!._id} />) } ))}
</div> </div>
</Modal> </Modal>
); );
} });
src/context/intermediate/popovers/UserPicker.module.scss
View file @ 1ac5de17
...@@ -4,7 +4,6 @@ ...@@ -4,7 +4,6 @@
max-height: 360px; max-height: 360px;
overflow-y: scroll; overflow-y: scroll;
// ! FIXME: very temporary code
> label { > label {
> span { > span {
align-items: flex-start !important; align-items: flex-start !important;
...@@ -18,4 +17,4 @@ ...@@ -18,4 +17,4 @@
} }
} }
} }
} }
\ No newline at end of file
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 Modal from "../../../components/ui/Modal";
import { User, Users } from "revolt.js/dist/api/objects";
import UserCheckbox from "../../../components/common/user/UserCheckbox"; import UserCheckbox from "../../../components/common/user/UserCheckbox";
import Modal from "../../../components/ui/Modal";
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 { decodeTime } from "ulid"; import { Money } from "@styled-icons/boxicons-regular";
import { Envelope, Edit, UserPlus, Shield } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { Link, useHistory } from "react-router-dom"; import { Link, useHistory } from "react-router-dom";
import { Localizer, Text } from "preact-i18n"; 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 styles from "./UserProfile.module.scss";
import { Localizer, Text } from "preact-i18n";
import { useContext, useEffect, useLayoutEffect, useState } from "preact/hooks";
import ChannelIcon from "../../../components/common/ChannelIcon";
import Tooltip from "../../../components/common/Tooltip";
import UserIcon from "../../../components/common/user/UserIcon";
import UserStatus from "../../../components/common/user/UserStatus";
import IconButton from "../../../components/ui/IconButton";
import Modal from "../../../components/ui/Modal"; import Modal from "../../../components/ui/Modal";
import { Route } from "revolt.js/dist/api/routes";
import { Users } from "revolt.js/dist/api/objects";
import { useIntermediate } from "../Intermediate";
import Preloader from "../../../components/ui/Preloader"; import Preloader from "../../../components/ui/Preloader";
import Tooltip from '../../../components/common/Tooltip';
import IconButton from "../../../components/ui/IconButton"; import Markdown from "../../../components/markdown/Markdown";
import Markdown from '../../../components/markdown/Markdown'; import {
import { UserPermission } from "revolt.js/dist/api/permissions"; ClientStatus,
import UserIcon from '../../../components/common/user/UserIcon'; StatusContext,
import ChannelIcon from '../../../components/common/ChannelIcon'; useClient,
import UserStatus from '../../../components/common/user/UserStatus'; } from "../../revoltjs/RevoltClient";
import { Envelope, Edit, UserPlus, Shield, Money } from "@styled-icons/boxicons-regular"; import { useIntermediate } from "../Intermediate";
import { useContext, useEffect, useLayoutEffect, useState } from "preact/hooks";
import { AppContext, ClientStatus, StatusContext } from "../../revoltjs/RevoltClient";
import { useChannels, useForceUpdate, useUserPermission, useUsers } from "../../revoltjs/hooks";
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 {
...@@ -31,301 +38,316 @@ enum Badges { ...@@ -31,301 +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 { openScreen, 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 history = useHistory(); const history = useHistory();
const client = useContext(AppContext); const client = useClient();
const status = useContext(StatusContext); const status = useContext(StatusContext);
const [tab, setTab] = useState("profile"); 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) {
useEffect(onClose, []);
return null;
}
const permissions = useUserPermission(user!._id, ctx); const users = mutual?.users.map((id) => client.users.get(id));
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
useEffect(() => { }, [user_id]);
if (dummy) return;
if (
status === ClientStatus.ONLINE &&
typeof mutual === "undefined"
) {
setMutual(null);
client.users
.fetchMutual(user_id)
.then(data => setMutual(data));
}
}, [mutual, status]);
useEffect(() => {
if (dummy) return;
if (
status === ClientStatus.ONLINE &&
typeof profile === "undefined"
) {
setProfile(null);
if (permissions & UserPermission.ViewProfile) { useEffect(() => {
client.users if (dummy) {
.fetchProfile(user_id) setProfile(dummyProfile);
.then(data => setProfile(data))
.catch(() => {});
} }
} }, [dummy, dummyProfile]);
}, [profile, status]);
const mutualGroups = channels.filter( useEffect(() => {
channel => if (dummy) return;
channel?.channel_type === "Group" && if (
channel.recipients.includes(user_id) status === ClientStatus.ONLINE &&
); typeof mutual === "undefined"
) {
setMutual(null);
user.fetchMutual().then(setMutual);
}
}, [mutual, status, dummy, user]);
const backgroundURL = profile && client.users.getBackgroundURL(profile, { width: 1000 }, true); useEffect(() => {
const badges = (user.badges ?? 0) | (decodeTime(user._id) < 1623751765790 ? Badges.EarlyAdopter : 0); if (dummy) return;
if (
status === ClientStatus.ONLINE &&
typeof profile === "undefined"
) {
setProfile(null);
return ( if (user.permission & UserPermission.ViewProfile) {
<Modal visible user.fetchProfile().then(setProfile);
border={dummy}
padding={false}
onClose={onClose}
dontModal={dummy}>
<div
className={styles.header}
data-force={
profile?.background
? "light"
: undefined
} }
style={{ }
backgroundImage: backgroundURL && `linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url('${backgroundURL}')` }, [profile, status, dummy, user]);
}}
> const backgroundURL =
<div className={styles.profile}> profile &&
<UserIcon size={80} target={user} status /> client.generateFileURL(profile.background, { width: 1000 }, true);
<div className={styles.details}> const badges = user.badges ?? 0;
<Localizer>
<span return (
className={styles.username} <Modal
onClick={() => writeClipboard(user.username)}> visible
@{user.username} border={dummy}
</span> padding={false}
</Localizer> onClose={onClose}
{user.status?.text && ( dontModal={dummy}>
<span className={styles.status}> <div
<UserStatus user={user} /> className={styles.header}
</span> data-force={profile?.background ? "light" : undefined}
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}>
<Localizer>
<span
className={styles.username}
onClick={() =>
writeClipboard(user.username)
}>
@{user.username}
</span>
</Localizer>
{user.status?.text && (
<span className={styles.status}>
<UserStatus user={user} tooltip />
</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" />
<Envelope size={30} /> </div>
</IconButton> <div
</Tooltip> data-active={tab === "groups"}
</Localizer> onClick={() => setTab("groups")}>
)} <Text id="app.special.popovers.user_profile.mutual_groups" />
{user.relationship === Users.Relationship.User && ( </div>
<IconButton </>
onClick={() => { )}
onClose();
if (dummy) return;
history.push(`/settings/profile`);
}}>
<Edit size={28} />
</IconButton>
)}
{(user.relationship === Users.Relationship.Incoming ||
user.relationship === Users.Relationship.None) && (
<IconButton onClick={() => client.users.addFriend(user.username)}>
<UserPlus size={28} />
</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={
<Money 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" && (
<div onClick={() => openScreen({ id: 'profile', user_id: x._id })} <Link to={`/channel/${x._id}`}>
className={styles.entry} <div
key={x._id}> className={styles.entry}
<UserIcon size={32} target={x} /> key={x._id}>
<span>{x.username}</span> <ChannelIcon
</div> target={x}
) size={32}
/>
<span>{x.name}</span>
</div>
</Link>
),
) )
)} )}
</div> </div>
) : ( )}
<Preloader type="ring" /> </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 { useContext } from "preact/hooks";
import { Redirect } from "react-router-dom"; import { Redirect } from "react-router-dom";
import { Children } from "../../types/Preact";
import { useContext } from "preact/hooks";
import { Children } from "../../types/Preact";
import { OperationsContext } from "./RevoltClient"; import { OperationsContext } from "./RevoltClient";
interface Props { interface 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
import { Text } from "preact-i18n"; import { Plus } from "@styled-icons/boxicons-regular";
import { takeError } from "./util"; import { Pencil } from "@styled-icons/boxicons-solid";
import classNames from "classnames";
import { AppContext } from "./RevoltClient";
import styles from './FileUploads.module.scss';
import Axios, { AxiosRequestConfig } from "axios"; import Axios, { AxiosRequestConfig } from "axios";
import styles from "./FileUploads.module.scss";
import classNames from "classnames";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks"; import { useContext, useEffect, useState } from "preact/hooks";
import Preloader from "../../components/ui/Preloader";
import { determineFileSize } from "../../lib/fileSize"; import { determineFileSize } from "../../lib/fileSize";
import IconButton from '../../components/ui/IconButton';
import { Edit, Plus, X, XCircle } from "@styled-icons/boxicons-regular"; 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 { 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> }
{ behaviour: 'multi', onChange: (files: File[]) => void, append?: (files: File[]) => void } | {
) & ( behaviour: "multi";
{ style: 'icon' | 'banner', defaultPreview?: string, previewURL?: string, width?: number, height?: number } | onChange: (files: File[]) => void;
{ style: 'attachment', attached: boolean, uploading: boolean, cancel: () => void, size?: number } 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) { export function grabFiles(
maxFileSize: number,
cb: (files: File[]) => void,
tooLarge: () => void,
multiple?: boolean,
) {
const input = document.createElement("input"); const input = document.createElement("input");
input.type = "file"; input.type = "file";
input.multiple = multiple ?? false; input.multiple = multiple ?? false;
input.onchange = async e => { input.onchange = async (e) => {
const files = (e.target as any)?.files; const files = (e.currentTarget as HTMLInputElement)?.files;
if (!files) return; if (!files) return;
for (let file of files) { for (const file of files) {
if (file.size > maxFileSize) { if (file.size > maxFileSize) {
return tooLarge(); return tooLarge();
} }
...@@ -63,65 +95,76 @@ export function FileUploader(props: Props) { ...@@ -63,65 +95,76 @@ export function FileUploader(props: 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;
grabFiles(maxFileSize, async files => { grabFiles(
setUploading(true); maxFileSize,
async (files) => {
setUploading(true);
try { try {
if (props.behaviour === 'multi') { if (props.behaviour === "multi") {
props.onChange(files); props.onChange(files);
} else if (props.behaviour === 'ask') { } else if (props.behaviour === "ask") {
props.onChange(files[0]); props.onChange(files[0]);
} else { } else {
await props.onUpload(await uploadFile(client.configuration!.features.autumn.url, fileType, files[0])); 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); );
}
}, () =>
openScreen({ id: "error", error: "FileTooLarge" }),
props.behaviour === 'multi');
} }
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.behaviour === 'multi' && props.append) { if (props.behaviour === "multi" && props.append) {
// eslint-disable-next-line
useEffect(() => { useEffect(() => {
// File pasting. // File pasting.
function paste(e: ClipboardEvent) { function paste(e: ClipboardEvent) {
const items = e.clipboardData?.items; const items = e.clipboardData?.items;
if (typeof items === "undefined") return; if (typeof items === "undefined") return;
if (props.behaviour !== 'multi' || !props.append) return; if (props.behaviour !== "multi" || !props.append) return;
let files = []; const files = [];
for (const item of items) { for (const item of items) {
if (!item.type.startsWith("text/")) { if (!item.type.startsWith("text/")) {
const blob = item.getAsFile(); const blob = item.getAsFile();
if (blob) { if (blob) {
if (blob.size > props.maxFileSize) { if (blob.size > props.maxFileSize) {
openScreen({ id: 'error', error: 'FileTooLarge' }); openScreen({
id: "error",
error: "FileTooLarge",
});
} }
files.push(blob); files.push(blob);
...@@ -142,14 +185,14 @@ export function FileUploader(props: Props) { ...@@ -142,14 +185,14 @@ export function FileUploader(props: Props) {
// File dropping. // File dropping.
function drop(e: DragEvent) { function drop(e: DragEvent) {
e.preventDefault(); e.preventDefault();
if (props.behaviour !== 'multi' || !props.append) return; if (props.behaviour !== "multi" || !props.append) return;
const dropped = e.dataTransfer?.files; const dropped = e.dataTransfer?.files;
if (dropped) { if (dropped) {
let files = []; const files = [];
for (const item of dropped) { for (const item of dropped) {
if (item.size > props.maxFileSize) { if (item.size > props.maxFileSize) {
openScreen({ id: 'error', error: 'FileTooLarge' }); openScreen({ id: "error", error: "FileTooLarge" });
} }
files.push(item); files.push(item);
...@@ -168,41 +211,63 @@ export function FileUploader(props: Props) { ...@@ -168,41 +211,63 @@ export function FileUploader(props: Props) {
document.removeEventListener("dragover", dragover); document.removeEventListener("dragover", dragover);
document.removeEventListener("drop", drop); document.removeEventListener("drop", drop);
}; };
}, [ props.append ]); }, [openScreen, props, props.append]);
} }
if (props.style === 'icon' || props.style === 'banner') { 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 type="ring" /> <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
...@@ -210,10 +275,11 @@ export function FileUploader(props: Props) { ...@@ -210,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();
}}> }}
{ uploading ? <XCircle size={size} /> : 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
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 { decodeTime } from "ulid";
import { SoundContext } from "../Settings";
import { AppContext } from "./RevoltClient"; import { useCallback, useContext, useEffect } from "preact/hooks";
import { useTranslation } from "../../lib/i18n"; import { useTranslation } from "../../lib/i18n";
import { Users } from "revolt.js/dist/api/objects";
import { useContext, useEffect } from "preact/hooks";
import { connectState } from "../../redux/connector"; import { connectState } from "../../redux/connector";
import { Message, SYSTEM_USER_ID, User } from "revolt.js"; import {
getNotificationState,
Notifications,
shouldNotify,
} from "../../redux/reducers/notifications";
import { NotificationOptions } from "../../redux/reducers/settings"; import { NotificationOptions } from "../../redux/reducers/settings";
import { Route, Switch, useHistory, useParams } from "react-router-dom";
import { getNotificationState, Notifications, shouldNotify } from "../../redux/reducers/notifications"; import { SoundContext } from "../Settings";
import { AppContext } from "./RevoltClient";
interface Props { interface Props {
options?: NotificationOptions; options?: NotificationOptions;
...@@ -17,11 +27,14 @@ interface Props { ...@@ -17,11 +27,14 @@ interface Props {
const notifications: { [key: string]: Notification } = {}; const notifications: { [key: string]: Notification } = {};
async function createNotification(title: string, options: globalThis.NotificationOptions) { async function createNotification(
title: string,
options: globalThis.NotificationOptions,
) {
try { try {
return new Notification(title, options); return new Notification(title, options);
} catch (err) { } catch (err) {
let sw = await navigator.serviceWorker.getRegistration(); const sw = await navigator.serviceWorker.getRegistration();
sw?.showNotification(title, options); sw?.showNotification(title, options);
} }
} }
...@@ -38,167 +51,225 @@ function Notifier({ options, notifs }: Props) { ...@@ -38,167 +51,225 @@ function Notifier({ options, notifs }: Props) {
const history = useHistory(); const history = useHistory();
const playSound = useContext(SoundContext); const playSound = useContext(SoundContext);
async function message(msg: Message) { const message = useCallback(
if (msg.author === client.user!._id) return; async (msg: Message) => {
if (msg.channel === channel_id && document.hasFocus()) return; if (msg.author_id === client.user!._id) return;
if (client.user!.status?.presence === Users.Presence.Busy) return; if (msg.channel_id === channel_id && document.hasFocus()) return;
if (client.user!.status?.presence === Presence.Busy) return;
const channel = client.channels.get(msg.channel); if (msg.author?.relationship === RelationshipStatus.Blocked) return;
const author = client.users.get(msg.author);
if (!channel) return;
if (author?.relationship === Users.Relationship.Blocked) return;
const notifState = getNotificationState(notifs, channel);
if (!shouldNotify(notifState, msg, client.user!._id)) return;
playSound('message');
if (!showNotification) return;
let title;
switch (channel.channel_type) {
case "SavedMessages":
return;
case "DirectMessage":
title = `@${author?.username}`;
break;
case "Group":
if (author?._id === SYSTEM_USER_ID) {
title = channel.name;
} else {
title = `@${author?.username} - ${channel.name}`;
}
break;
case "TextChannel":
const server = client.servers.get(channel.server);
title = `@${author?.username} (#${channel.name}, ${server?.name})`;
break;
default:
title = msg.channel;
break;
}
let image; const notifState = getNotificationState(notifs, msg.channel!);
if (msg.attachments) { if (!shouldNotify(notifState, msg, client.user!._id)) return;
let imageAttachment = msg.attachments.find(x => x.metadata.type === 'Image');
if (imageAttachment) {
image = client.generateFileURL(imageAttachment, { max_side: 720 });
}
}
let body, icon; playSound("message");
if (typeof msg.content === "string") { if (!showNotification) return;
body = client.markdownToText(msg.content);
icon = client.users.getAvatarURL(msg.author, { max_side: 256 }); let title;
} else { switch (msg.channel?.channel_type) {
let users = client.users; case "SavedMessages":
switch (msg.content.type) { return;
case "user_added": case "DirectMessage":
case "user_remove": title = `@${msg.author?.username}`;
body = translate(
`app.main.channel.system.${msg.content.type === 'user_added' ? 'added_by' : 'removed_by'}`,
{ user: users.get(msg.content.id)?.username, other_user: users.get(msg.content.by)?.username }
);
icon = client.users.getAvatarURL(msg.content.id, { max_side: 256 });
break; break;
case "user_joined": case "Group":
case "user_left": if (msg.author?._id === SYSTEM_USER_ID) {
case "user_kicked": title = msg.channel.name;
case "user_banned": } else {
body = translate( title = `@${msg.author?.username} - ${msg.channel.name}`;
`app.main.channel.system.${msg.content.type}`, }
{ user: users.get(msg.content.id)?.username }
);
icon = client.users.getAvatarURL(msg.content.id, { max_side: 256 });
break; break;
case "channel_renamed": case "TextChannel":
body = translate( title = `@${msg.author?.username} (#${msg.channel.name}, ${msg.channel.server?.name})`;
`app.main.channel.system.channel_renamed`,
{ user: users.get(msg.content.by)?.username, name: msg.content.name }
);
icon = client.users.getAvatarURL(msg.content.by, { max_side: 256 });
break; break;
case "channel_description_changed": default:
case "channel_icon_changed": title = msg.channel?._id;
body = translate(
`app.main.channel.system.${msg.content.type}`,
{ user: users.get(msg.content.by)?.username }
);
icon = client.users.getAvatarURL(msg.content.by, { max_side: 256 });
break; break;
} }
}
let notif = await createNotification(title, { let image;
icon, if (msg.attachments) {
image, const imageAttachment = msg.attachments.find(
body, (x) => x.metadata.type === "Image",
timestamp: decodeTime(msg._id), );
tag: msg.channel, if (imageAttachment) {
badge: '/assets/icons/android-chrome-512x512.png', image = client.generateFileURL(imageAttachment, {
silent: true max_side: 720,
}); });
}
if (notif) { }
notif.addEventListener("click", () => {
window.focus(); let body, icon;
const id = msg.channel; if (typeof msg.content === "string") {
if (id !== channel_id) { body = client.markdownToText(msg.content);
let channel = client.channels.get(id); icon = msg.author?.generateAvatarURL({ max_side: 256 });
if (channel) { } else {
if (channel.channel_type === 'TextChannel') { const users = client.users;
history.push(`/server/${channel.server}/channel/${id}`); switch (msg.content.type) {
} else { case "user_added":
history.push(`/channel/${id}`); 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,
}); });
notifications[msg.channel] = notif; if (notif) {
notif.addEventListener( notif.addEventListener("click", () => {
"close", window.focus();
() => delete notifications[msg.channel] 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}`);
}
}
}
});
async function relationship(user: User, property: string) { notifications[msg.channel_id] = notif;
if (client.user?.status?.presence === Users.Presence.Busy) return; notif.addEventListener(
if (property !== "relationship") return; "close",
if (!showNotification) return; () => delete notifications[msg.channel_id],
);
let event; }
switch (user.relationship) { },
case Users.Relationship.Incoming: [
event = translate("notifications.sent_request", { person: user.username }); history,
break; showNotification,
case Users.Relationship.Friend: translate,
event = translate("notifications.now_friends", { person: user.username }); channel_id,
break; client,
default: notifs,
return; playSound,
} ],
);
let notif = await createNotification(event, { const relationship = useCallback(
icon: client.users.getAvatarURL(user._id, { max_side: 256 }), async (user: User) => {
badge: '/assets/icons/android-chrome-512x512.png', if (client.user?.status?.presence === Presence.Busy) return;
timestamp: +new Date() if (!showNotification) return;
});
notif?.addEventListener("click", () => { let event;
history.push(`/friends`); 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(() => { useEffect(() => {
client.addListener("message", message); client.addListener("message", message);
client.users.addListener("mutation", relationship); client.addListener("user/relationship", relationship);
return () => { return () => {
client.removeListener("message", message); client.removeListener("message", message);
client.users.removeListener("mutation", relationship); client.removeListener("user/relationship", relationship);
}; };
}, [client, playSound, guild_id, channel_id, showNotification, notifs]); }, [
client,
playSound,
guild_id,
channel_id,
showNotification,
notifs,
message,
relationship,
]);
useEffect(() => { useEffect(() => {
function visChange() { function visChange() {
...@@ -216,21 +287,21 @@ function Notifier({ options, notifs }: Props) { ...@@ -216,21 +287,21 @@ function Notifier({ options, notifs }: Props) {
document.removeEventListener("visibilitychange", visChange); document.removeEventListener("visibilitychange", visChange);
}, [guild_id, channel_id]); }, [guild_id, channel_id]);
return <></>; return null;
} }
const NotifierComponent = connectState( const NotifierComponent = connectState(
Notifier, Notifier,
state => { (state) => {
return { return {
options: state.settings.notification, options: state.settings.notification,
notifs: state.notifications notifs: state.notifications,
}; };
}, },
true true,
); );
export default function Notifications() { export default function NotificationsComponent() {
return ( return (
<Switch> <Switch>
<Route path="/server/:server/channel/:channel"> <Route path="/server/:server/channel/:channel">
......
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/boxicons-regular";
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 {
...@@ -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 { useHistory } from 'react-router-dom';
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 { useEffect, useMemo, useState } from "preact/hooks";
import { useIntermediate } from '../intermediate/Intermediate'; 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,
...@@ -30,79 +34,62 @@ export interface ClientOperations { ...@@ -30,79 +34,62 @@ export interface ClientOperations {
logout: (shouldRequest?: boolean) => Promise<void>; logout: (shouldRequest?: boolean) => Promise<void>;
loggedIn: () => boolean; loggedIn: () => boolean;
ready: () => boolean; ready: () => boolean;
openDM: (user_id: string) => Promise<string>;
} }
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;
children: Children; children: Children;
}; };
function Context({ auth, children, dispatcher }: Props) { function Context({ auth, children }: Props) {
const history = useHistory();
const { openScreen } = useIntermediate(); 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 {
// Match sw.ts#L23
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();
...@@ -112,11 +99,11 @@ function Context({ auth, children, dispatcher }: Props) { ...@@ -112,11 +99,11 @@ function Context({ auth, children, dispatcher }: Props) {
throw err; throw err;
} }
}, },
logout: async shouldRequest => { logout: async (shouldRequest) => {
dispatcher({ type: "LOGOUT" }); dispatch({ type: "LOGOUT" });
client.reset(); client.reset();
dispatcher({ type: "RESET" }); dispatch({ type: "RESET" });
openScreen({ id: "none" }); openScreen({ id: "none" });
setStatus(ClientStatus.READY); setStatus(ClientStatus.READY);
...@@ -132,28 +119,20 @@ function Context({ auth, children, dispatcher }: Props) { ...@@ -132,28 +119,20 @@ function Context({ auth, 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]);
openDM: async (user_id: string) => {
let channel = await client.users.openDM(user_id);
history.push(`/channel/${channel!._id}`);
return channel!._id;
}
}
}, [ 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);
...@@ -161,21 +140,20 @@ function Context({ auth, children, dispatcher }: Props) { ...@@ -161,21 +140,20 @@ function Context({ auth, 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) {
...@@ -193,7 +171,7 @@ function Context({ auth, children, dispatcher }: Props) { ...@@ -193,7 +171,7 @@ function Context({ auth, children, dispatcher }: Props) {
} }
} 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.");
} }
...@@ -201,6 +179,7 @@ function Context({ auth, children, dispatcher }: Props) { ...@@ -201,6 +179,7 @@ function Context({ auth, children, dispatcher }: Props) {
setStatus(ClientStatus.READY); setStatus(ClientStatus.READY);
} }
})(); })();
// eslint-disable-next-line
}, []); }, []);
if (status === ClientStatus.LOADING) { if (status === ClientStatus.LOADING) {
...@@ -211,20 +190,18 @@ function Context({ auth, children, dispatcher }: Props) { ...@@ -211,20 +190,18 @@ function Context({ auth, children, dispatcher }: Props) {
<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
View file @ 1ac5de17
/** /**
* This file monitors the message cache to delete any queued messages that have already sent. * This file monitors the message cache to delete any queued messages that have already sent.
*/ */
import { Message } from "revolt.js/dist/maps/Messages";
import { Message } from "revolt.js";
import { AppContext } from "./RevoltClient";
import { Typing } from "../../redux/reducers/typing";
import { useContext, useEffect } from "preact/hooks"; import { useContext, useEffect } from "preact/hooks";
import { dispatch } from "../../redux";
import { connectState } from "../../redux/connector"; import { connectState } from "../../redux/connector";
import { WithDispatcher } from "../../redux/reducers";
import { QueuedMessage } from "../../redux/reducers/queue"; import { QueuedMessage } from "../../redux/reducers/queue";
type Props = WithDispatcher & { import { AppContext } from "./RevoltClient";
type Props = {
messages: QueuedMessage[]; messages: QueuedMessage[];
typing: Typing
}; };
function StateMonitor(props: Props) { function StateMonitor(props: Props) {
const client = useContext(AppContext); const client = useContext(AppContext);
useEffect(() => { useEffect(() => {
props.dispatcher({ dispatch({
type: 'QUEUE_DROP_ALL' type: "QUEUE_DROP_ALL",
}); });
}, [ ]); }, []);
useEffect(() => { useEffect(() => {
function add(msg: Message) { function add(msg: Message) {
if (!msg.nonce) return; if (!msg.nonce) return;
if (!props.messages.find(x => x.id === msg.nonce)) return; if (!props.messages.find((x) => x.id === msg.nonce)) return;
props.dispatcher({ dispatch({
type: 'QUEUE_REMOVE', type: "QUEUE_REMOVE",
nonce: msg.nonce nonce: msg.nonce,
}); });
} }
client.addListener('message', add); client.addListener("message", add);
return () => client.removeListener('message', add); return () => client.removeListener("message", add);
}, [ props.messages ]); }, [client, props.messages]);
useEffect(() => {
function removeOld() {
if (!props.typing) return;
for (let channel of Object.keys(props.typing)) {
let users = props.typing[channel];
for (let user of users) {
if (+ new Date() > user.started + 5000) {
props.dispatcher({
type: 'TYPING_STOP',
channel,
user: user.id
});
}
}
}
}
removeOld();
let interval = setInterval(removeOld, 1000);
return () => clearInterval(interval);
}, [ props.typing ]);
return <></>; return null;
} }
export default connectState( export default connectState(StateMonitor, (state) => {
StateMonitor, return {
state => { messages: [...state.queue],
return { };
messages: [...state.queue], });
typing: state.typing
};
},
true
);