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 1062 additions and 479 deletions
src/pages/settings/panes/Sessions.tsx
View file @ 1ac5de17
import dayjs from "dayjs"; import { Chrome, Android, Apple, Windows } from "@styled-icons/boxicons-logos";
import { decodeTime } from "ulid"; import { HelpCircle, Desktop } from "@styled-icons/boxicons-regular";
import { Text } from "preact-i18n";
import styles from "./Panes.module.scss";
import Tip from "../../../components/ui/Tip";
import { useHistory } from "react-router-dom";
import Button from "../../../components/ui/Button";
import Preloader from "../../../components/ui/Preloader";
import { useContext, useEffect, useState } from "preact/hooks";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { HelpCircle } from "@styled-icons/boxicons-regular";
import { import {
Android, Safari,
Firefoxbrowser, Firefoxbrowser,
Googlechrome, Microsoftedge,
Ios,
Linux, Linux,
Macos, Macos,
Microsoftedge, Opera,
Safari,
Windows
} from "@styled-icons/simple-icons"; } from "@styled-icons/simple-icons";
import relativeTime from "dayjs/plugin/relativeTime"; import relativeTime from "dayjs/plugin/relativeTime";
import { useHistory } from "react-router-dom";
import { decodeTime } from "ulid";
import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
import { dayjs } from "../../../context/Locale";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import Button from "../../../components/ui/Button";
import Preloader from "../../../components/ui/Preloader";
import Tip from "../../../components/ui/Tip";
dayjs.extend(relativeTime); dayjs.extend(relativeTime);
interface Session { interface Session {
...@@ -43,14 +43,14 @@ export function Sessions() { ...@@ -43,14 +43,14 @@ export function Sessions() {
} }
useEffect(() => { useEffect(() => {
client.req("GET", "/auth/sessions").then(data => { client.req("GET", "/auth/sessions").then((data) => {
data.sort( data.sort(
(a, b) => (a, b) =>
(b.id === deviceId ? 1 : 0) - (a.id === deviceId ? 1 : 0) (b.id === deviceId ? 1 : 0) - (a.id === deviceId ? 1 : 0),
); );
setSessions(data); setSessions(data);
}); });
}, []); }, [client, setSessions, deviceId]);
if (typeof sessions === "undefined") { if (typeof sessions === "undefined") {
return ( return (
...@@ -64,15 +64,19 @@ export function Sessions() { ...@@ -64,15 +64,19 @@ export function Sessions() {
const name = session.friendly_name; const name = session.friendly_name;
switch (true) { switch (true) {
case /firefox/i.test(name): case /firefox/i.test(name):
return <Firefoxbrowser />; return <Firefoxbrowser size={32} />;
case /chrome/i.test(name): case /chrome/i.test(name):
return <Googlechrome />; return <Chrome size={32} />;
case /safari/i.test(name): case /safari/i.test(name):
return <Safari />; return <Safari size={32} />;
case /edge/i.test(name): case /edge/i.test(name):
return <Microsoftedge />; return <Microsoftedge size={32} />;
case /opera/i.test(name):
return <Opera size={32} />;
case /desktop/i.test(name):
return <Desktop size={32} />;
default: default:
return <HelpCircle />; return <HelpCircle size={32} />;
} }
} }
...@@ -80,34 +84,34 @@ export function Sessions() { ...@@ -80,34 +84,34 @@ export function Sessions() {
const name = session.friendly_name; const name = session.friendly_name;
switch (true) { switch (true) {
case /linux/i.test(name): case /linux/i.test(name):
return <Linux />; return <Linux size={14} />;
case /android/i.test(name): case /android/i.test(name):
return <Android />; return <Android size={14} />;
case /mac.*os/i.test(name): case /mac.*os/i.test(name):
return <Macos />; return <Macos size={14} />;
case /ios/i.test(name): case /ios/i.test(name):
return <Ios />; return <Apple size={14} />;
case /windows/i.test(name): case /windows/i.test(name):
return <Windows />; return <Windows size={14} />;
default: default:
return null; return null;
} }
} }
const mapped = sessions.map(session => { const mapped = sessions.map((session) => {
return { return {
...session, ...session,
timestamp: decodeTime(session.id) timestamp: decodeTime(session.id),
}; };
}); });
mapped.sort((a, b) => b.timestamp - a.timestamp); mapped.sort((a, b) => b.timestamp - a.timestamp);
let id = mapped.findIndex(x => x.id === deviceId); const id = mapped.findIndex((x) => x.id === deviceId);
const render = [ const render = [
mapped[id], mapped[id],
...mapped.slice(0, id), ...mapped.slice(0, id),
...mapped.slice(id + 1, mapped.length) ...mapped.slice(id + 1, mapped.length),
]; ];
return ( return (
...@@ -115,64 +119,116 @@ export function Sessions() { ...@@ -115,64 +119,116 @@ export function Sessions() {
<h3> <h3>
<Text id="app.settings.pages.sessions.active_sessions" /> <Text id="app.settings.pages.sessions.active_sessions" />
</h3> </h3>
{render.map(session => ( {render.map((session) => {
<div const systemIcon = getSystemIcon(session);
className={styles.entry} return (
data-active={session.id === deviceId} <div
data-deleting={attemptingDelete.indexOf(session.id) > -1} key={session.id}
> className={styles.entry}
{deviceId === session.id && ( data-active={session.id === deviceId}
<span className={styles.label}> data-deleting={
<Text id="app.settings.pages.sessions.this_device" />{" "} attemptingDelete.indexOf(session.id) > -1
</span> }>
)} {deviceId === session.id && (
<div className={styles.session}> <span className={styles.label}>
<div className={styles.icon}> <Text id="app.settings.pages.sessions.this_device" />{" "}
{getIcon(session)}
<div>{getSystemIcon(session)}</div>
</div>
<div className={styles.info}>
<span className={styles.name}>
{session.friendly_name}
</span> </span>
<span className={styles.time}> )}
<Text <div className={styles.session}>
id="app.settings.pages.sessions.created" <div className={styles.detail}>
fields={{ <svg width={42} height={42} viewBox="0 0 32 32">
time_ago: dayjs( <foreignObject
session.timestamp x="0"
).fromNow() y="0"
width="32"
height="32"
mask={
systemIcon
? "url(#session)"
: undefined
}>
{getIcon(session)}
</foreignObject>
<foreignObject
x="18"
y="18"
width="14"
height="14">
{systemIcon}
</foreignObject>
</svg>
<div className={styles.info}>
<input
type="text"
className={styles.name}
value={session.friendly_name}
autocomplete="off"
style={{ pointerEvents: "none" }}
/>
<span className={styles.time}>
<Text
id="app.settings.pages.sessions.created"
fields={{
time_ago: dayjs(
session.timestamp,
).fromNow(),
}}
/>
</span>
</div>
</div>
{deviceId !== session.id && (
<Button
onClick={async () => {
setDelete([
...attemptingDelete,
session.id,
]);
await client.req(
"DELETE",
`/auth/sessions/${session.id}` as "/auth/sessions",
);
setSessions(
sessions?.filter(
(x) => x.id !== session.id,
),
);
}} }}
/> disabled={
</span> attemptingDelete.indexOf(session.id) >
-1
}>
<Text id="app.settings.pages.logOut" />
</Button>
)}
</div> </div>
{deviceId !== session.id && (
<Button
onClick={async () => {
setDelete([
...attemptingDelete,
session.id
]);
await client.req(
"DELETE",
`/auth/sessions/${session.id}` as any
);
setSessions(
sessions?.filter(
x => x.id !== session.id
)
);
}}
disabled={
attemptingDelete.indexOf(session.id) > -1
}
>
<Text id="app.settings.pages.logOut" />
</Button>
)}
</div> </div>
</div> );
))} })}
<Button
error
onClick={async () => {
// ! FIXME: add to rAuth
const del: string[] = [];
render.forEach((session) => {
if (deviceId !== session.id) {
del.push(session.id);
}
});
setDelete(del);
for (const id of del) {
await client.req(
"DELETE",
`/auth/sessions/${id}` as "/auth/sessions",
);
}
setSessions(sessions.filter((x) => x.id === deviceId));
}}>
<Text id="app.settings.pages.sessions.logout" />
</Button>
<Tip> <Tip>
<span> <span>
<Text id="app.settings.tips.sessions.a" /> <Text id="app.settings.tips.sessions.a" />
......
src/pages/settings/panes/Sync.tsx
View file @ 1ac5de17
import { Text } from "preact-i18n";
import styles from "./Panes.module.scss"; import styles from "./Panes.module.scss";
import Checkbox from "../../../components/ui/Checkbox"; import { Text } from "preact-i18n";
import { dispatch } from "../../../redux";
import { connectState } from "../../../redux/connector"; import { connectState } from "../../../redux/connector";
import { WithDispatcher } from "../../../redux/reducers";
import { SyncKeys, SyncOptions } from "../../../redux/reducers/sync"; import { SyncKeys, SyncOptions } from "../../../redux/reducers/sync";
import Checkbox from "../../../components/ui/Checkbox";
interface Props { interface Props {
options?: SyncOptions; options?: SyncOptions;
} }
export function Component(props: Props & WithDispatcher) { export function Component(props: Props) {
return ( return (
<div className={styles.notifications}> <div className={styles.notifications}>
<h3> <h3>
<Text id="app.settings.pages.sync.categories" /> <Text id="app.settings.pages.sync.categories" />
</h3> </h3>
{ {(
([ [
['appearance', 'appearance.title'], ["appearance", "appearance.title"],
['theme', 'appearance.theme'], ["theme", "appearance.theme"],
['locale', 'language.title'] ["locale", "language.title"],
// notifications sync is always-on // notifications sync is always-on
] as [ SyncKeys, string ][]).map( ] as [SyncKeys, string][]
([ key, title ]) => ).map(([key, title]) => (
<Checkbox <Checkbox
checked={(props.options?.disabled ?? []).indexOf(key) === -1} key={key}
onChange={enabled => { checked={
props.dispatcher({ (props.options?.disabled ?? []).indexOf(key) === -1
type: enabled ? 'SYNC_ENABLE_KEY' : 'SYNC_DISABLE_KEY', }
key description={
}); <Text
}} id={`app.settings.pages.sync.descriptions.${key}`}
> />
<Text id={`app.settings.pages.${title}`} /> }
<p> onChange={(enabled) =>
<Text id={`app.settings.pages.sync.descriptions.${key}`} /> dispatch({
</p> type: enabled
</Checkbox> ? "SYNC_ENABLE_KEY"
) : "SYNC_DISABLE_KEY",
} key,
})
}>
<Text id={`app.settings.pages.${title}`} />
</Checkbox>
))}
</div> </div>
); );
} }
export const Sync = connectState( export const Sync = connectState(Component, (state) => {
Component, return {
state => { options: state.sync,
return { };
options: state.sync });
};
},
true
);
src/pages/settings/server/Bans.tsx
View file @ 1ac5de17
import Tip from "../../../components/ui/Tip"; import { XCircle } from "@styled-icons/boxicons-regular";
import { Servers } from "revolt.js/dist/api/objects"; import { observer } from "mobx-react-lite";
import { useContext, useEffect, useState } from "preact/hooks"; import { Route } from "revolt.js/dist/api/routes";
import { AppContext } from "../../../context/revoltjs/RevoltClient"; import { Server } from "revolt.js/dist/maps/Servers";
import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { useEffect, useState } from "preact/hooks";
import UserIcon from "../../../components/common/user/UserIcon";
import IconButton from "../../../components/ui/IconButton";
import Preloader from "../../../components/ui/Preloader";
interface Props { interface Props {
server: Servers.Server; server: Server;
} }
export function Bans({ server }: Props) { export const Bans = observer(({ server }: Props) => {
const client = useContext(AppContext); const [deleting, setDelete] = useState<string[]>([]);
const [bans, setBans] = useState<Servers.Ban[] | undefined>(undefined); const [data, setData] = useState<
Route<"GET", "/servers/id/bans">["response"] | undefined
>(undefined);
useEffect(() => { useEffect(() => {
client.servers.fetchBans(server._id) server.fetchBans().then(setData);
.then(bans => setBans(bans)) }, [server, setData]);
}, [ ]);
return ( return (
<div> <div className={styles.userList}>
<Tip warning>This section is under construction.</Tip> <div className={styles.subtitle}>
{ bans?.map(x => <div>{x._id.user}: {x.reason ?? 'no reason'} <button onClick={() => client.servers.unbanUser(server._id, x._id.user)}>unban</button></div>) } <span>
<Text id="app.settings.server_pages.bans.user" />
</span>
<span class={styles.reason}>
<Text id="app.settings.server_pages.bans.reason" />
</span>
<span>
<Text id="app.settings.server_pages.bans.revoke" />
</span>
</div>
{typeof data === "undefined" && <Preloader type="ring" />}
{data?.bans.map((x) => {
const user = data.users.find((y) => y._id === x._id.user);
return (
<div
key={x._id.user}
className={styles.ban}
data-deleting={deleting.indexOf(x._id.user) > -1}>
<span>
<UserIcon attachment={user?.avatar} size={24} />
{user?.username}
</span>
<div className={styles.reason}>
{x.reason ?? (
<Text id="app.settings.server_pages.bans.no_reason" />
)}
</div>
<IconButton
onClick={async () => {
setDelete([...deleting, x._id.user]);
await server.unbanUser(x._id.user);
setData({
...data,
bans: data.bans.filter(
(y) => y._id.user !== x._id.user,
),
});
}}
disabled={deleting.indexOf(x._id.user) > -1}>
<XCircle size={24} />
</IconButton>
</div>
);
})}
</div> </div>
); );
} });
src/pages/settings/server/Categories.tsx 0 → 100644
View file @ 1ac5de17
import isEqual from "lodash.isequal";
import { observer } from "mobx-react-lite";
import { Category } from "revolt-api/types/Servers";
import { Server } from "revolt.js/dist/maps/Servers";
import { ulid } from "ulid";
import { useState } from "preact/hooks";
import ChannelIcon from "../../../components/common/ChannelIcon";
import Button from "../../../components/ui/Button";
import ComboBox from "../../../components/ui/ComboBox";
import InputBox from "../../../components/ui/InputBox";
import Tip from "../../../components/ui/Tip";
interface Props {
server: Server;
}
// ! FIXME: really bad code
export const Categories = observer(({ server }: Props) => {
const channels = server.channels.filter((x) => typeof x !== "undefined");
const [cats, setCats] = useState<Category[]>(server.categories ?? []);
const [name, setName] = useState("");
return (
<div>
<Tip warning>This section is under construction.</Tip>
<p>
<Button
contrast
disabled={isEqual(server.categories ?? [], cats)}
onClick={() => server.edit({ categories: cats })}>
save categories
</Button>
</p>
<h2>categories</h2>
{cats.map((category) => (
<div style={{ background: "var(--hover)" }} key={category.id}>
<InputBox
value={category.title}
onChange={(e) =>
setCats(
cats.map((y) =>
y.id === category.id
? {
...y,
title: e.currentTarget.value,
}
: y,
),
)
}
contrast
/>
<Button
contrast
onClick={() =>
setCats(cats.filter((x) => x.id !== category.id))
}>
delete {category.title}
</Button>
</div>
))}
<h2>create new</h2>
<p>
<InputBox
value={name}
onChange={(e) => setName(e.currentTarget.value)}
contrast
/>
<Button
contrast
onClick={() => {
setName("");
setCats([
...cats,
{
id: ulid(),
title: name,
channels: [],
},
]);
}}>
create
</Button>
</p>
<h2>channels</h2>
{channels.map((channel) => {
return (
<div
key={channel!._id}
style={{
display: "flex",
gap: "12px",
alignItems: "center",
}}>
<div style={{ flexShrink: 0 }}>
<ChannelIcon target={channel} size={24} />{" "}
<span>{channel!.name}</span>
</div>
<ComboBox
style={{ flexGrow: 1 }}
value={
cats.find((x) =>
x.channels.includes(channel!._id),
)?.id ?? "none"
}
onChange={(e) =>
setCats(
cats.map((x) => {
return {
...x,
channels: [
...x.channels.filter(
(y) => y !== channel!._id,
),
...(e.currentTarget.value ===
x.id
? [channel!._id]
: []),
],
};
}),
)
}>
<option value="none">Uncategorised</option>
{cats.map((x) => (
<option key={x.id} value={x.id}>
{x.title}
</option>
))}
</ComboBox>
</div>
);
})}
</div>
);
});
src/pages/settings/server/Invites.tsx
View file @ 1ac5de17
import { Text } from "preact-i18n";
import styles from './Panes.module.scss';
import { XCircle } from "@styled-icons/boxicons-regular"; import { XCircle } from "@styled-icons/boxicons-regular";
import { observer } from "mobx-react-lite";
import { ServerInvite } from "revolt-api/types/Invites";
import { Server } from "revolt.js/dist/maps/Servers";
import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { useEffect, useState } from "preact/hooks"; import { useEffect, useState } from "preact/hooks";
import Preloader from "../../../components/ui/Preloader";
import IconButton from "../../../components/ui/IconButton"; import { useClient } from "../../../context/revoltjs/RevoltClient";
import UserIcon from "../../../components/common/user/UserIcon";
import { getChannelName } from "../../../context/revoltjs/util"; import { getChannelName } from "../../../context/revoltjs/util";
import { Invites as InvitesNS, Servers } from "revolt.js/dist/api/objects";
import { useChannels, useForceUpdate, useUsers } from "../../../context/revoltjs/hooks"; import UserIcon from "../../../components/common/user/UserIcon";
import IconButton from "../../../components/ui/IconButton";
import Preloader from "../../../components/ui/Preloader";
interface Props { interface Props {
server: Servers.Server; server: Server;
} }
export function Invites({ server }: Props) { export const Invites = observer(({ server }: Props) => {
const [invites, setInvites] = useState<InvitesNS.ServerInvite[] | undefined>(undefined);
const ctx = useForceUpdate();
const [deleting, setDelete] = useState<string[]>([]); const [deleting, setDelete] = useState<string[]>([]);
const users = useUsers(invites?.map(x => x.creator) ?? [], ctx); const [invites, setInvites] = useState<ServerInvite[] | undefined>(
const channels = useChannels(invites?.map(x => x.channel) ?? [], ctx); undefined,
);
const client = useClient();
const users = invites?.map((invite) => client.users.get(invite.creator));
const channels = invites?.map((invite) =>
client.channels.get(invite.channel),
);
useEffect(() => { useEffect(() => {
ctx.client.servers.fetchInvites(server._id) server.fetchInvites().then(setInvites);
.then(invites => setInvites(invites)) }, [server, setInvites]);
}, [ ]);
return ( return (
<div className={styles.invites}> <div className={styles.userList}>
<div className={styles.subtitle}> <div className={styles.subtitle}>
<span>Invite Code</span> <span>
<span>Invitor</span> <Text id="app.settings.server_pages.invites.code" />
<span>Channel</span> </span>
<span>Revoke</span> <span>
<Text id="app.settings.server_pages.invites.invitor" />
</span>
<span>
<Text id="app.settings.server_pages.invites.channel" />
</span>
<span>
<Text id="app.settings.server_pages.invites.revoke" />
</span>
</div> </div>
{ typeof invites === 'undefined' && <Preloader type="ring" /> } {typeof invites === "undefined" && <Preloader type="ring" />}
{ {invites?.map((invite, index) => {
invites?.map( const creator = users![index];
invite => { const channel = channels![index];
let creator = users.find(x => x?._id === invite.creator);
let channel = channels.find(x => x?._id === invite.channel);
return ( return (
<div className={styles.invite} <div
data-deleting={deleting.indexOf(invite._id) > -1}> key={invite._id}
<code>{ invite._id }</code> className={styles.invite}
<span> data-deleting={deleting.indexOf(invite._id) > -1}>
<UserIcon target={creator} size={24} /> {creator?.username ?? 'unknown'} <code>{invite._id}</code>
</span> <span>
<span>{ (channel && creator) ? getChannelName(ctx.client, channel, true) : '#unknown' }</span> <UserIcon target={creator} size={24} />{" "}
<IconButton {creator?.username ?? (
onClick={async () => { <Text id="app.main.channel.unknown_user" />
setDelete([ )}
...deleting, </span>
invite._id <span>
]); {channel && creator
? getChannelName(channel, true)
: "#??"}
</span>
<IconButton
onClick={async () => {
setDelete([...deleting, invite._id]);
await ctx.client.deleteInvite(invite._id); await client.deleteInvite(invite._id);
setInvites( setInvites(
invites?.filter( invites?.filter(
x => x._id !== invite._id (x) => x._id !== invite._id,
) ),
); );
}} }}
disabled={deleting.indexOf(invite._id) > -1}> disabled={deleting.indexOf(invite._id) > -1}>
<XCircle size={24} /> <XCircle size={24} />
</IconButton> </IconButton>
</div> </div>
) );
} })}
)
}
</div> </div>
); );
} });
src/pages/settings/server/Members.tsx
View file @ 1ac5de17
import styles from './Panes.module.scss'; import { ChevronDown } from "@styled-icons/boxicons-regular";
import { isEqual } from "lodash";
import { observer } from "mobx-react-lite";
import { Member } from "revolt.js/dist/maps/Members";
import { Server } from "revolt.js/dist/maps/Servers";
import { User } from "revolt.js/dist/maps/Users";
import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { useEffect, useState } from "preact/hooks"; import { useEffect, useState } from "preact/hooks";
import { Servers } from "revolt.js/dist/api/objects";
import UserIcon from "../../../components/common/user/UserIcon"; import UserIcon from "../../../components/common/user/UserIcon";
import { useForceUpdate, useUsers } from "../../../context/revoltjs/hooks"; import Button from "../../../components/ui/Button";
import Checkbox from "../../../components/ui/Checkbox";
import IconButton from "../../../components/ui/IconButton";
import Overline from "../../../components/ui/Overline";
interface Props { interface Props {
server: Servers.Server; server: Server;
} }
// ! FIXME: bad code :) export const Members = observer(({ server }: Props) => {
export function Members({ server }: Props) { const [selected, setSelected] = useState<undefined | string>();
const [members, setMembers] = useState<Servers.Member[] | undefined>(undefined); const [data, setData] = useState<
{ members: Member[]; users: User[] } | undefined
>(undefined);
const ctx = useForceUpdate(); useEffect(() => {
const users = useUsers(members?.map(x => x._id.user) ?? [], ctx); server.fetchMembers().then(setData);
}, [server, setData]);
const [roles, setRoles] = useState<string[]>([]);
useEffect(() => { useEffect(() => {
ctx.client.servers.members.fetchMembers(server._id) if (selected) {
.then(members => setMembers(members)) setRoles(
}, [ ]); data!.members.find((x) => x._id.user === selected)?.roles ?? [],
);
}
}, [setRoles, selected, data]);
return ( return (
<div className={styles.members}> <div className={styles.userList}>
<div className={styles.subtitle}> <div className={styles.subtitle}>
X Members {data?.members.length ?? 0} Members
</div> </div>
{ members && members.length > 0 && users?.map(x => x && {data &&
<div className={styles.member}> data.members.length > 0 &&
<div>@{x.username}</div> data.members
</div>) .map((member) => {
} return {
member,
user: data.users.find(
(x) => x._id === member._id.user,
),
};
})
.map(({ member, user }) => (
// @ts-expect-error brokey
// eslint-disable-next-line react/jsx-no-undef
<Fragment key={member._id.user}>
<div
className={styles.member}
data-open={selected === member._id.user}
onClick={() =>
setSelected(
selected === member._id.user
? undefined
: member._id.user,
)
}>
<span>
<UserIcon target={user} size={24} />{" "}
{user?.username ?? (
<Text id="app.main.channel.unknown_user" />
)}
</span>
<IconButton className={styles.chevron}>
<ChevronDown size={24} />
</IconButton>
</div>
{selected === member._id.user && (
<div
key={`drop_${member._id.user}`}
className={styles.memberView}>
<Overline type="subtle">Roles</Overline>
{Object.keys(server.roles ?? {}).map(
(key) => {
const role = server.roles![key];
return (
<Checkbox
key={key}
checked={
roles.includes(key) ??
false
}
onChange={(v) => {
if (v) {
setRoles([
...roles,
key,
]);
} else {
setRoles(
roles.filter(
(x) =>
x !==
key,
),
);
}
}}>
<span
style={{
color: role.colour,
}}>
{role.name}
</span>
</Checkbox>
);
},
)}
<Button
compact
disabled={isEqual(
member.roles ?? [],
roles,
)}
onClick={() =>
member.edit({
roles,
})
}>
<Text id="app.special.modals.actions.save" />
</Button>
</div>
)}
</Fragment>
))}
</div> </div>
); );
} });
src/pages/settings/server/Overview.tsx
View file @ 1ac5de17
import isEqual from "lodash.isequal";
import { observer } from "mobx-react-lite";
import { Server } from "revolt.js/dist/maps/Servers";
import styles from "./Panes.module.scss";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import styles from './Panes.module.scss'; import { useEffect, useState } from "preact/hooks";
import Button from "../../../components/ui/Button";
import { Servers } from "revolt.js/dist/api/objects";
import InputBox from "../../../components/ui/InputBox";
import TextAreaAutoSize from "../../../lib/TextAreaAutoSize"; import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
import { useContext, useEffect, useState } from "preact/hooks";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { FileUploader } from "../../../context/revoltjs/FileUploads"; import { FileUploader } from "../../../context/revoltjs/FileUploads";
import { getChannelName } from "../../../context/revoltjs/util";
import Button from "../../../components/ui/Button";
import ComboBox from "../../../components/ui/ComboBox";
import InputBox from "../../../components/ui/InputBox";
interface Props { interface Props {
server: Servers.Server; server: Server;
} }
export function Overview({ server }: Props) { export const Overview = observer(({ server }: Props) => {
const client = useContext(AppContext);
const [name, setName] = useState(server.name); const [name, setName] = useState(server.name);
const [description, setDescription] = useState(server.description ?? ''); const [description, setDescription] = useState(server.description ?? "");
const [systemMessages, setSystemMessages] = useState(
server.system_messages,
);
useEffect(() => setName(server.name), [ server.name ]); useEffect(() => setName(server.name), [server.name]);
useEffect(() => setDescription(server.description ?? ''), [ server.description ]); useEffect(
() => setDescription(server.description ?? ""),
[server.description],
);
useEffect(
() => setSystemMessages(server.system_messages),
[server.system_messages],
);
const [ changed, setChanged ] = useState(false); const [changed, setChanged] = useState(false);
function save() { function save() {
let changes: any = {}; const changes: Record<string, unknown> = {};
if (name !== server.name) changes.name = name; if (name !== server.name) changes.name = name;
if (description !== server.description) if (description !== server.description)
changes.description = description; changes.description = description;
if (!isEqual(systemMessages, server.system_messages))
client.servers.edit(server._id, changes); changes.system_messages = systemMessages ?? undefined;
server.edit(changes);
setChanged(false); setChanged(false);
} }
...@@ -42,9 +59,9 @@ export function Overview({ server }: Props) { ...@@ -42,9 +59,9 @@ export function Overview({ server }: Props) {
fileType="icons" fileType="icons"
behaviour="upload" behaviour="upload"
maxFileSize={2_500_000} maxFileSize={2_500_000}
onUpload={icon => client.servers.edit(server._id, { icon })} onUpload={(icon) => server.edit({ icon })}
previewURL={client.servers.getIconURL(server._id, { max_side: 256 }, true)} previewURL={server.generateIconURL({ max_side: 256 }, true)}
remove={() => client.servers.edit(server._id, { remove: 'Icon' })} remove={() => server.edit({ remove: "Icon" })}
/> />
<div className={styles.name}> <div className={styles.name}>
<h3> <h3>
...@@ -54,9 +71,9 @@ export function Overview({ server }: Props) { ...@@ -54,9 +71,9 @@ export function Overview({ server }: Props) {
contrast contrast
value={name} value={name}
maxLength={32} maxLength={32}
onChange={e => { onChange={(e) => {
setName(e.currentTarget.value) setName(e.currentTarget.value);
if (!changed) setChanged(true) if (!changed) setChanged(true);
}} }}
/> />
</div> </div>
...@@ -71,16 +88,11 @@ export function Overview({ server }: Props) { ...@@ -71,16 +88,11 @@ export function Overview({ server }: Props) {
maxLength={1024} maxLength={1024}
value={description} value={description}
placeholder={"Add a topic..."} placeholder={"Add a topic..."}
onChange={ev => { onChange={(ev) => {
setDescription(ev.currentTarget.value); setDescription(ev.currentTarget.value);
if (!changed) setChanged(true) if (!changed) setChanged(true);
}} }}
/> />
<p>
<Button onClick={save} contrast disabled={!changed}>
<Text id="app.special.modals.actions.save" />
</Button>
</p>
<h3> <h3>
<Text id="app.main.servers.custom_banner" /> <Text id="app.main.servers.custom_banner" />
...@@ -91,10 +103,70 @@ export function Overview({ server }: Props) { ...@@ -91,10 +103,70 @@ export function Overview({ server }: Props) {
fileType="banners" fileType="banners"
behaviour="upload" behaviour="upload"
maxFileSize={6_000_000} maxFileSize={6_000_000}
onUpload={banner => client.servers.edit(server._id, { banner })} onUpload={(banner) => server.edit({ banner })}
previewURL={client.servers.getBannerURL(server._id, { width: 1000 }, true)} previewURL={server.generateBannerURL({ width: 1000 }, true)}
remove={() => client.servers.edit(server._id, { remove: 'Banner' })} remove={() => server.edit({ remove: "Banner" })}
/> />
<h3>
<Text id="app.settings.server_pages.overview.system_messages" />
</h3>
{[
["User Joined", "user_joined"],
["User Left", "user_left"],
["User Kicked", "user_kicked"],
["User Banned", "user_banned"],
].map(([i18n, key]) => (
// ! FIXME: temporary code just so we can expose the options
<p
key={key}
style={{
display: "flex",
gap: "8px",
alignItems: "center",
}}>
<span style={{ flexShrink: "0", flex: `25%` }}>{i18n}</span>
<ComboBox
value={
systemMessages?.[
key as keyof typeof systemMessages
] ?? "disabled"
}
onChange={(e) => {
if (!changed) setChanged(true);
const v = e.currentTarget.value;
if (v === "disabled") {
const {
[key as keyof typeof systemMessages]: _,
...other
} = systemMessages;
setSystemMessages(other);
} else {
setSystemMessages({
...systemMessages,
[key]: v,
});
}
}}>
<option value="disabled">
<Text id="general.disabled" />
</option>
{server.channels
.filter((x) => typeof x !== "undefined")
.map((channel) => (
<option key={channel!._id} value={channel!._id}>
{getChannelName(channel!, true)}
</option>
))}
</ComboBox>
</p>
))}
<p>
<Button onClick={save} contrast disabled={!changed}>
<Text id="app.special.modals.actions.save" />
</Button>
</p>
</div> </div>
); );
} });
src/pages/settings/server/Panes.module.scss
View file @ 1ac5de17
...@@ -6,6 +6,10 @@ ...@@ -6,6 +6,10 @@
.name { .name {
flex-grow: 1; flex-grow: 1;
h3 {
margin-top: 0;
}
input { input {
width: 100%; width: 100%;
} }
...@@ -13,21 +17,32 @@ ...@@ -13,21 +17,32 @@
} }
} }
.invites { .userList {
gap: 8px; gap: 8px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.subtitle { .subtitle {
gap: 8px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: 13px; font-size: 13px;
text-transform: uppercase; text-transform: uppercase;
color: var(--secondary-foreground); color: var(--secondary-foreground);
font-weight: 700; font-weight: 700;
.reason {
text-align: center;
}
}
.reason {
flex: 2;
} }
.invite { .invite,
.ban,
.member {
gap: 8px; gap: 8px;
padding: 10px; padding: 10px;
display: flex; display: flex;
...@@ -35,7 +50,8 @@ ...@@ -35,7 +50,8 @@
flex-direction: row; flex-direction: row;
background: var(--secondary-background); background: var(--secondary-background);
code, span { span,
code {
flex: 1; flex: 1;
} }
...@@ -54,25 +70,23 @@ ...@@ -54,25 +70,23 @@
opacity: 0.5; opacity: 0.5;
} }
} }
}
.members {
.subtitle {
display: flex;
justify-content: space-between;
font-size: 13px;
text-transform: uppercase;
color: var(--secondary-foreground);
font-weight: 700;
}
.member { .member {
gap: 8px; cursor: pointer;
.chevron {
transition: 0.2s ease all;
}
&:not([data-open="true"]) .chevron {
transform: rotateZ(90deg);
}
}
.memberView {
padding: 10px; padding: 10px;
display: flex; margin: 0 10px;
align-items: center; background: var(--background);
flex-direction: row;
background: var(--secondary-background);
} }
} }
...@@ -91,10 +105,6 @@ ...@@ -91,10 +105,6 @@
flex-grow: 1; flex-grow: 1;
padding: 0 8px; padding: 0 8px;
overflow-y: scroll; overflow-y: scroll;
section {
margin-bottom: 1em;
}
} }
.title { .title {
...@@ -103,7 +113,8 @@ ...@@ -103,7 +113,8 @@
margin-bottom: 1em; margin-bottom: 1em;
align-items: center; align-items: center;
h1, h2 { h1,
h2 {
margin: 0; margin: 0;
min-width: 0; min-width: 0;
flex-grow: 1; flex-grow: 1;
...@@ -122,4 +133,4 @@ ...@@ -122,4 +133,4 @@
display: flex; display: flex;
padding: 8px 0; padding: 8px 0;
} }
} }
\ No newline at end of file
src/pages/settings/server/Roles.tsx
View file @ 1ac5de17
import { Plus } from "@styled-icons/boxicons-regular";
import isEqual from "lodash.isequal";
import { observer } from "mobx-react-lite";
import { ChannelPermission, ServerPermission } from "revolt.js";
import { Server } from "revolt.js/dist/maps/Servers";
import styles from "./Panes.module.scss";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import styles from './Panes.module.scss'; import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import Button from "../../../components/ui/Button"; import Button from "../../../components/ui/Button";
import Overline from "../../../components/ui/Overline";
import { Servers } from "revolt.js/dist/api/objects";
import Checkbox from "../../../components/ui/Checkbox"; import Checkbox from "../../../components/ui/Checkbox";
import { useContext, useEffect, useState } from "preact/hooks"; import ColourSwatches from "../../../components/ui/ColourSwatches";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { ChannelPermission, ServerPermission } from "revolt.js/dist/api/permissions";
import Tip from "../../../components/ui/Tip";
import IconButton from "../../../components/ui/IconButton";
import ButtonItem from "../../../components/navigation/items/ButtonItem";
import isEqual from 'lodash.isequal';
import InputBox from "../../../components/ui/InputBox"; import InputBox from "../../../components/ui/InputBox";
import { Plus } from "@styled-icons/boxicons-regular"; import Overline from "../../../components/ui/Overline";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import ButtonItem from "../../../components/navigation/items/ButtonItem";
interface Props { interface Props {
server: Servers.Server; server: Server;
} }
const I32ToU32 = (arr: number[]) => arr.map(x => x >>> 0); const I32ToU32 = (arr: number[]) => arr.map((x) => x >>> 0);
// ! FIXME: bad code :) // ! FIXME: bad code :)
export function Roles({ server }: Props) { export const Roles = observer(({ server }: Props) => {
const [ role, setRole ] = useState('default'); const [role, setRole] = useState("default");
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
const client = useContext(AppContext); const roles = useMemo(() => server.roles ?? {}, [server]);
const roles = server.roles ?? {};
if (role !== 'default' && typeof roles[role] === 'undefined') { if (role !== "default" && typeof roles[role] === "undefined") {
useEffect(() => setRole('default')); useEffect(() => setRole("default"), [role]);
return; return null;
} }
const v = (id: string) => I32ToU32(id === 'default' ? server.default_permissions : roles[id].permissions) const {
const [ perm, setPerm ] = useState(v(role)); name: roleName,
useEffect(() => setPerm(v(role)), [ role, roles[role]?.permissions ]); colour: roleColour,
permissions,
} = roles[role] ?? {};
const getPermissions = useCallback(
(id: string) => {
return I32ToU32(
id === "default"
? server.default_permissions
: roles[id].permissions,
);
},
[roles, server],
);
const [perm, setPerm] = useState(getPermissions(role));
const [name, setName] = useState(roleName);
const [colour, setColour] = useState(roleColour);
useEffect(
() => setPerm(getPermissions(role)),
[getPermissions, role, permissions],
);
useEffect(() => setName(roleName), [role, roleName]);
useEffect(() => setColour(roleColour), [role, roleColour]);
const modified =
!isEqual(perm, getPermissions(role)) ||
!isEqual(name, roleName) ||
!isEqual(colour, roleColour);
const save = () => {
if (!isEqual(perm, getPermissions(role))) {
server.setPermissions(role, {
server: perm[0],
channel: perm[1],
});
}
if (!isEqual(name, roleName) || !isEqual(colour, roleColour)) {
server.editRole(role, { name, colour });
}
};
const modified = !isEqual(perm, v(role));
const save = () => client.servers.setPermissions(server._id, role, { server: perm[0], channel: perm[1] });
const deleteRole = () => { const deleteRole = () => {
setRole('default'); setRole("default");
client.servers.deleteRole(server._id, role); server.deleteRole(role);
}; };
return ( return (
<div className={styles.roles}> <div className={styles.roles}>
<div className={styles.list}> <div className={styles.list}>
<div className={styles.title}> <div className={styles.title}>
<h1><Text id="app.settings.server_pages.roles.title" /></h1> <h1>
<Plus size={22} onClick={() => <Text id="app.settings.server_pages.roles.title" />
openScreen({ id: 'special_input', type: 'create_role', server: server._id, callback: id => setRole(id) })} /> </h1>
</div> <Plus
{ [ 'default', ...Object.keys(roles) ] size={22}
.map(id => { onClick={() =>
if (id === 'default') { openScreen({
return ( id: "special_input",
<ButtonItem active={role === 'default'} onClick={() => setRole('default')}> type: "create_role",
<Text id="app.settings.permissions.default_role" /> server,
</ButtonItem> callback: (id) => setRole(id),
) })
} else {
return (
<ButtonItem active={role === id} onClick={() => setRole(id)}>
{ roles[id].name }
</ButtonItem>
)
} }
}) />
} </div>
{["default", ...Object.keys(roles)].map((id) => {
if (id === "default") {
return (
<ButtonItem
active={role === "default"}
onClick={() => setRole("default")}>
<Text id="app.settings.permissions.default_role" />
</ButtonItem>
);
}
return (
<ButtonItem
key={id}
active={role === id}
onClick={() => setRole(id)}
style={{ color: roles[id].colour }}>
{roles[id].name}
</ButtonItem>
);
})}
</div> </div>
<div className={styles.permissions}> <div className={styles.permissions}>
<div className={styles.title}> <div className={styles.title}>
<h2>{ role === 'default' ? <Text id="app.settings.permissions.default_role" /> : roles[role].name }</h2> <h2>
<Button contrast disabled={!modified} onClick={save}>Save</Button> {role === "default" ? (
<Text id="app.settings.permissions.default_role" />
) : (
roles[role].name
)}
</h2>
<Button contrast disabled={!modified} onClick={save}>
Save
</Button>
</div> </div>
{role !== "default" && (
<>
<section>
<Overline type="subtle">Role Name</Overline>
<p>
<InputBox
value={name}
onChange={(e) =>
setName(e.currentTarget.value)
}
contrast
/>
</p>
</section>
<section>
<Overline type="subtle">Role Colour</Overline>
<p>
<ColourSwatches
value={colour ?? "gray"}
onChange={(value) => setColour(value)}
/>
</p>
</section>
</>
)}
<section> <section>
<Overline type="subtle"><Text id="app.settings.permissions.server" /></Overline> <Overline type="subtle">
{ Object.keys(ServerPermission) <Text id="app.settings.permissions.server" />
.map(key => { </Overline>
if (key === 'View') return; {Object.keys(ServerPermission).map((key) => {
let value = ServerPermission[key as keyof typeof ServerPermission]; if (key === "View") return;
const value =
return ( ServerPermission[
<Checkbox checked={(perm[0] & value) > 0} key as keyof typeof ServerPermission
onChange={() => setPerm([ perm[0] ^ value, perm[1] ])} ];
description={<Text id={`permissions.server.${key}.d`} />}>
<Text id={`permissions.server.${key}.t`} /> return (
</Checkbox> <Checkbox
) key={key}
}) checked={(perm[0] & value) > 0}
} onChange={() =>
setPerm([perm[0] ^ value, perm[1]])
}
description={
<Text id={`permissions.server.${key}.d`} />
}>
<Text id={`permissions.server.${key}.t`} />
</Checkbox>
);
})}
</section> </section>
<section> <section>
<Overline type="subtle"><Text id="app.settings.permissions.channel" /></Overline> <Overline type="subtle">
{ Object.keys(ChannelPermission) <Text id="app.settings.permissions.channel" />
.map(key => { </Overline>
if (key === 'ManageChannel') return; {Object.keys(ChannelPermission).map((key) => {
let value = ChannelPermission[key as keyof typeof ChannelPermission]; if (key === "ManageChannel") return;
const value =
return ( ChannelPermission[
<Checkbox checked={((perm[1] >>> 0) & value) > 0} key as keyof typeof ChannelPermission
onChange={() => setPerm([ perm[0], perm[1] ^ value ])} ];
disabled={key === 'View'}
description={<Text id={`permissions.channel.${key}.d`} />}> return (
<Text id={`permissions.channel.${key}.t`} /> <Checkbox
</Checkbox> key={key}
) checked={((perm[1] >>> 0) & value) > 0}
}) onChange={() =>
} setPerm([perm[0], perm[1] ^ value])
}
disabled={key === "View"}
description={
<Text id={`permissions.channel.${key}.d`} />
}>
<Text id={`permissions.channel.${key}.t`} />
</Checkbox>
);
})}
</section> </section>
<div className={styles.actions}> <div className={styles.actions}>
<Button contrast disabled={!modified} onClick={save}>Save</Button> <Button contrast disabled={!modified} onClick={save}>
{ role !== 'default' && <Button contrast error onClick={deleteRole}>Delete</Button> } Save
</Button>
{role !== "default" && (
<Button contrast error onClick={deleteRole}>
Delete
</Button>
)}
</div> </div>
</div> </div>
</div> </div>
); );
} });
src/preact.d.ts
View file @ 1ac5de17
// eslint-disable-next-line @typescript-eslint/no-unused-vars /* eslint-disable */
import JSX = preact.JSX; import JSX = preact.JSX;
src/redux/State.tsx
View file @ 1ac5de17
import { store } from ".";
import localForage from "localforage"; import localForage from "localforage";
import { Provider } from "react-redux"; import { Provider } from "react-redux";
import { Children } from "../types/Preact";
import { useEffect, useState } from "preact/hooks"; import { useEffect, useState } from "preact/hooks";
import { dispatch, State, store } from ".";
import { Children } from "../types/Preact";
interface Props { interface Props {
children: Children; children: Children;
} }
export default function State(props: Props) { export default function StateLoader(props: Props) {
const [loaded, setLoaded] = useState(false); const [loaded, setLoaded] = useState(false);
useEffect(() => { useEffect(() => {
localForage.getItem("state") localForage.getItem("state").then((state) => {
.then(state => { if (state !== null) {
if (state !== null) { dispatch({ type: "__INIT", state: state as State });
store.dispatch({ type: "__INIT", state }); }
}
setLoaded(true);
setLoaded(true); });
});
}, []); }, []);
if (!loaded) return null; if (!loaded) return null;
......
src/redux/connector.tsx
View file @ 1ac5de17
/* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-explicit-any */
import { connect, ConnectedComponent } from "react-redux";
import { State } from ".";
import { h } from "preact"; import { h } from "preact";
import { memo } from "preact/compat"; import { memo } from "preact/compat";
import { connect, ConnectedComponent } from "react-redux";
import { State } from ".";
export function connectState<T>( export function connectState<T>(
component: (props: any) => h.JSX.Element | null, component: (props: any) => h.JSX.Element | null,
mapKeys: (state: State, props: T) => any, mapKeys: (state: State, props: T) => any,
useDispatcher?: boolean, memoize?: boolean,
memoize?: boolean
): ConnectedComponent<(props: any) => h.JSX.Element | null, T> { ): ConnectedComponent<(props: any) => h.JSX.Element | null, T> {
let c = ( const c = connect(mapKeys)(component);
useDispatcher
? connect(mapKeys, (dispatcher) => {
return { dispatcher };
})
: connect(mapKeys)
)(component);
return memoize ? memo(c) : c; return memoize ? memo(c) : c;
} }
src/redux/index.ts
View file @ 1ac5de17
import { createStore } from "redux";
import rootReducer from "./reducers";
import localForage from "localforage"; import localForage from "localforage";
import { createStore } from "redux";
import { RevoltConfiguration } from "revolt-api/types/Core";
import { Core } from "revolt.js/dist/api/objects";
import { Typing } from "./reducers/typing";
import { Drafts } from "./reducers/drafts";
import { AuthState } from "./reducers/auth";
import { Language } from "../context/Locale"; import { Language } from "../context/Locale";
import { Unreads } from "./reducers/unreads";
import { SyncOptions } from "./reducers/sync"; import rootReducer, { Action } from "./reducers";
import { Settings } from "./reducers/settings"; import { AuthState } from "./reducers/auth";
import { QueuedMessage } from "./reducers/queue"; import { Drafts } from "./reducers/drafts";
import { ExperimentOptions } from "./reducers/experiments"; import { ExperimentOptions } from "./reducers/experiments";
import { LastOpened } from "./reducers/last_opened"; import { LastOpened } from "./reducers/last_opened";
import { Notifications } from "./reducers/notifications"; import { Notifications } from "./reducers/notifications";
import { QueuedMessage } from "./reducers/queue";
import { SectionToggle } from "./reducers/section_toggle"; import { SectionToggle } from "./reducers/section_toggle";
import { Settings } from "./reducers/settings";
import { SyncOptions } from "./reducers/sync";
import { Unreads } from "./reducers/unreads";
export type State = { export type State = {
config: Core.RevoltNodeConfiguration, config: RevoltConfiguration;
locale: Language; locale: Language;
auth: AuthState; auth: AuthState;
settings: Settings; settings: Settings;
unreads: Unreads; unreads: Unreads;
queue: QueuedMessage[]; queue: QueuedMessage[];
typing: Typing;
drafts: Drafts; drafts: Drafts;
sync: SyncOptions; sync: SyncOptions;
experiments: ExperimentOptions; experiments: ExperimentOptions;
...@@ -59,7 +58,7 @@ store.subscribe(() => { ...@@ -59,7 +58,7 @@ store.subscribe(() => {
experiments, experiments,
lastOpened, lastOpened,
notifications, notifications,
sectionToggle sectionToggle,
} = store.getState() as State; } = store.getState() as State;
localForage.setItem("state", { localForage.setItem("state", {
...@@ -74,6 +73,14 @@ store.subscribe(() => { ...@@ -74,6 +73,14 @@ store.subscribe(() => {
experiments, experiments,
lastOpened, lastOpened,
notifications, notifications,
sectionToggle sectionToggle,
}); });
}); });
export function dispatch(action: Action) {
store.dispatch(action);
}
export function getState(): State {
return store.getState();
}
src/redux/reducers/auth.ts
View file @ 1ac5de17
import type { Auth } from "revolt.js/dist/api/objects"; import { Session } from "revolt-api/types/Auth";
export interface AuthState { export interface AuthState {
accounts: { accounts: {
[key: string]: { [key: string]: {
session: Auth.Session; session: Session;
}; };
}; };
active?: string; active?: string;
...@@ -13,7 +13,7 @@ export type AuthAction = ...@@ -13,7 +13,7 @@ export type AuthAction =
| { type: undefined } | { type: undefined }
| { | {
type: "LOGIN"; type: "LOGIN";
session: Auth.Session; session: Session;
} }
| { | {
type: "LOGOUT"; type: "LOGOUT";
...@@ -22,7 +22,7 @@ export type AuthAction = ...@@ -22,7 +22,7 @@ export type AuthAction =
export function auth( export function auth(
state = { accounts: {} } as AuthState, state = { accounts: {} } as AuthState,
action: AuthAction action: AuthAction,
): AuthState { ): AuthState {
switch (action.type) { switch (action.type) {
case "LOGIN": case "LOGIN":
......
src/redux/reducers/experiments.ts
View file @ 1ac5de17
export type Experiments = never; export type Experiments = "search";
export const AVAILABLE_EXPERIMENTS: Experiments[] = []; export const AVAILABLE_EXPERIMENTS: Experiments[] = ["search"];
export const EXPERIMENTS: {
[key in Experiments]: { title: string; description: string };
} = {
search: {
title: "Search",
description: "Allows you to search for messages in channels.",
},
};
export interface ExperimentOptions { export interface ExperimentOptions {
enabled?: Experiments[]; enabled?: Experiments[];
...@@ -18,7 +26,7 @@ export type ExperimentsAction = ...@@ -18,7 +26,7 @@ export type ExperimentsAction =
export function experiments( export function experiments(
state = {} as ExperimentOptions, state = {} as ExperimentOptions,
action: ExperimentsAction action: ExperimentsAction,
): ExperimentOptions { ): ExperimentOptions {
switch (action.type) { switch (action.type) {
case "EXPERIMENTS_ENABLE": case "EXPERIMENTS_ENABLE":
......
src/redux/reducers/index.ts
View file @ 1ac5de17
import { State } from "..";
import { combineReducers } from "redux"; import { combineReducers } from "redux";
import { config, ConfigAction } from "./server_config"; import { State } from "..";
import { settings, SettingsAction } from "./settings";
import { locale, LocaleAction } from "./locale";
import { auth, AuthAction } from "./auth"; import { auth, AuthAction } from "./auth";
import { unreads, UnreadsAction } from "./unreads";
import { queue, QueueAction } from "./queue";
import { typing, TypingAction } from "./typing";
import { drafts, DraftAction } from "./drafts"; import { drafts, DraftAction } from "./drafts";
import { sync, SyncAction } from "./sync";
import { experiments, ExperimentsAction } from "./experiments"; import { experiments, ExperimentsAction } from "./experiments";
import { lastOpened, LastOpenedAction } from "./last_opened"; import { lastOpened, LastOpenedAction } from "./last_opened";
import { locale, LocaleAction } from "./locale";
import { notifications, NotificationsAction } from "./notifications"; import { notifications, NotificationsAction } from "./notifications";
import { queue, QueueAction } from "./queue";
import { sectionToggle, SectionToggleAction } from "./section_toggle"; import { sectionToggle, SectionToggleAction } from "./section_toggle";
import { config, ConfigAction } from "./server_config";
import { settings, SettingsAction } from "./settings";
import { sync, SyncAction } from "./sync";
import { unreads, UnreadsAction } from "./unreads";
export default combineReducers({ export default combineReducers({
config, config,
...@@ -22,13 +21,12 @@ export default combineReducers({ ...@@ -22,13 +21,12 @@ export default combineReducers({
settings, settings,
unreads, unreads,
queue, queue,
typing,
drafts, drafts,
sync, sync,
experiments, experiments,
lastOpened, lastOpened,
notifications, notifications,
sectionToggle sectionToggle,
}); });
export type Action = export type Action =
...@@ -38,7 +36,6 @@ export type Action = ...@@ -38,7 +36,6 @@ export type Action =
| SettingsAction | SettingsAction
| UnreadsAction | UnreadsAction
| QueueAction | QueueAction
| TypingAction
| DraftAction | DraftAction
| SyncAction | SyncAction
| ExperimentsAction | ExperimentsAction
...@@ -46,17 +43,3 @@ export type Action = ...@@ -46,17 +43,3 @@ export type Action =
| NotificationsAction | NotificationsAction
| SectionToggleAction | SectionToggleAction
| { type: "__INIT"; state: State }; | { type: "__INIT"; state: State };
export type WithDispatcher = { dispatcher: (action: Action) => void };
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function filter(obj: any, keys: string[]) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const newObj: any = {};
for (const key of keys) {
const v = obj[key];
if (v) newObj[key] = v;
}
return newObj;
}
src/redux/reducers/last_opened.ts
View file @ 1ac5de17
export interface LastOpened { export interface LastOpened {
[key: string]: string [key: string]: string;
} }
export type LastOpenedAction = export type LastOpenedAction =
| { type: undefined } | { type: undefined }
| { | {
type: "LAST_OPENED_SET"; type: "LAST_OPENED_SET";
parent: string; parent: string;
child: string; child: string;
} }
| { | {
type: "RESET"; type: "RESET";
}; };
export function lastOpened(state = {} as LastOpened, action: LastOpenedAction): LastOpened { export function lastOpened(
state = {} as LastOpened,
action: LastOpenedAction,
): LastOpened {
switch (action.type) { switch (action.type) {
case "LAST_OPENED_SET": { case "LAST_OPENED_SET": {
return { return {
...state, ...state,
[action.parent]: action.child [action.parent]: action.child,
} };
} }
case "RESET": case "RESET":
return {}; return {};
......
src/redux/reducers/locale.ts
View file @ 1ac5de17
import { Language } from "../../context/Locale"; import { Language } from "../../context/Locale";
import type { SyncUpdateAction } from "./sync"; import type { SyncUpdateAction } from "./sync";
export type LocaleAction = export type LocaleAction =
......
src/redux/reducers/notifications.ts
View file @ 1ac5de17
import type { Channel, Message } from "revolt.js"; import { Channel } from "revolt.js/dist/maps/Channels";
import { Message } from "revolt.js/dist/maps/Messages";
import type { SyncUpdateAction } from "./sync"; import type { SyncUpdateAction } from "./sync";
export type NotificationState = 'all' | 'mention' | 'none' | 'muted'; export type NotificationState = "all" | "mention" | "none" | "muted";
export type Notifications = { export type Notifications = {
[key: string]: NotificationState [key: string]: NotificationState;
} };
export const DEFAULT_STATES: { [key in Channel['channel_type']]: NotificationState } = { export const DEFAULT_STATES: {
'SavedMessages': 'all', [key in Channel["channel_type"]]: NotificationState;
'DirectMessage': 'all', } = {
'Group': 'all', SavedMessages: "all",
'TextChannel': 'mention', DirectMessage: "all",
'VoiceChannel': 'mention' Group: "all",
TextChannel: "mention",
VoiceChannel: "mention",
}; };
export function getNotificationState(notifications: Notifications, channel: Channel) { export function getNotificationState(
notifications: Notifications,
channel: Channel,
) {
return notifications[channel._id] ?? DEFAULT_STATES[channel.channel_type]; return notifications[channel._id] ?? DEFAULT_STATES[channel.channel_type];
} }
export function shouldNotify(state: NotificationState, message: Message, user_id: string) { export function shouldNotify(
state: NotificationState,
message: Message,
user_id: string,
) {
switch (state) { switch (state) {
case 'muted': case "muted":
case 'none': return false; case "none":
case 'mention': { return false;
if (!message.mentions?.includes(user_id)) return false; case "mention": {
if (!message.mention_ids?.includes(user_id)) return false;
} }
} }
...@@ -34,34 +46,33 @@ export function shouldNotify(state: NotificationState, message: Message, user_id ...@@ -34,34 +46,33 @@ export function shouldNotify(state: NotificationState, message: Message, user_id
export type NotificationsAction = export type NotificationsAction =
| { type: undefined } | { type: undefined }
| { | {
type: "NOTIFICATIONS_SET"; type: "NOTIFICATIONS_SET";
key: string; key: string;
state: NotificationState; state: NotificationState;
} }
| { | {
type: "NOTIFICATIONS_REMOVE"; type: "NOTIFICATIONS_REMOVE";
key: string; key: string;
} }
| SyncUpdateAction | SyncUpdateAction
| { | {
type: "RESET"; type: "RESET";
}; };
export function notifications( export function notifications(
state = {} as Notifications, state = {} as Notifications,
action: NotificationsAction action: NotificationsAction,
): Notifications { ): Notifications {
switch (action.type) { switch (action.type) {
case "NOTIFICATIONS_SET": case "NOTIFICATIONS_SET":
return { return {
...state, ...state,
[action.key]: action.state [action.key]: action.state,
}; };
case "NOTIFICATIONS_REMOVE": case "NOTIFICATIONS_REMOVE": {
{ const { [action.key]: _, ...newState } = state;
const { [action.key]: _, ...newState } = state; return newState;
return newState; }
}
case "SYNC_UPDATE": case "SYNC_UPDATE":
return action.update.notifications?.[1] ?? state; return action.update.notifications?.[1] ?? state;
case "RESET": case "RESET":
......
src/redux/reducers/queue.ts
View file @ 1ac5de17
import type { MessageObject } from "../../context/revoltjs/util";
export enum QueueStatus { export enum QueueStatus {
SENDING = "sending", SENDING = "sending",
ERRORED = "errored", ERRORED = "errored",
} }
export interface Reply { export interface Reply {
id: string, id: string;
mention: boolean mention: boolean;
} }
export type QueuedMessageData = Omit<MessageObject, 'content' | 'replies'> & { export type QueuedMessageData = {
_id: string;
author: string;
channel: string;
content: string; content: string;
replies: Reply[]; replies: Reply[];
} };
export interface QueuedMessage { export interface QueuedMessage {
id: string; id: string;
...@@ -56,7 +58,7 @@ export type QueueAction = ...@@ -56,7 +58,7 @@ export type QueueAction =
export function queue( export function queue(
state: QueuedMessage[] = [], state: QueuedMessage[] = [],
action: QueueAction action: QueueAction,
): QueuedMessage[] { ): QueuedMessage[] {
switch (action.type) { switch (action.type) {
case "QUEUE_ADD": { case "QUEUE_ADD": {
...@@ -72,7 +74,7 @@ export function queue( ...@@ -72,7 +74,7 @@ export function queue(
} }
case "QUEUE_FAIL": { case "QUEUE_FAIL": {
const entry = state.find( const entry = state.find(
(x) => x.id === action.nonce (x) => x.id === action.nonce,
) as QueuedMessage; ) as QueuedMessage;
return [ return [
...state.filter((x) => x.id !== action.nonce), ...state.filter((x) => x.id !== action.nonce),
...@@ -85,7 +87,7 @@ export function queue( ...@@ -85,7 +87,7 @@ export function queue(
} }
case "QUEUE_START": { case "QUEUE_START": {
const entry = state.find( const entry = state.find(
(x) => x.id === action.nonce (x) => x.id === action.nonce,
) as QueuedMessage; ) as QueuedMessage;
return [ return [
...state.filter((x) => x.id !== action.nonce), ...state.filter((x) => x.id !== action.nonce),
......