forked from abner/for-legacy-web
Run prettier on all files.
This commit is contained in:
Paul
@@ -1,25 +1,37 @@
|
||||
import Tip from "../../../components/ui/Tip";
|
||||
import { Servers } from "revolt.js/dist/api/objects";
|
||||
|
||||
import { useContext, useEffect, useState } from "preact/hooks";
|
||||
|
||||
import { AppContext } from "../../../context/revoltjs/RevoltClient";
|
||||
|
||||
import Tip from "../../../components/ui/Tip";
|
||||
|
||||
interface Props {
|
||||
server: Servers.Server;
|
||||
server: Servers.Server;
|
||||
}
|
||||
|
||||
export function Bans({ server }: Props) {
|
||||
const client = useContext(AppContext);
|
||||
const [bans, setBans] = useState<Servers.Ban[] | undefined>(undefined);
|
||||
const client = useContext(AppContext);
|
||||
const [bans, setBans] = useState<Servers.Ban[] | undefined>(undefined);
|
||||
|
||||
useEffect(() => {
|
||||
client.servers.fetchBans(server._id)
|
||||
.then(bans => setBans(bans))
|
||||
}, [ ]);
|
||||
useEffect(() => {
|
||||
client.servers.fetchBans(server._id).then((bans) => setBans(bans));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Tip warning>This section is under construction.</Tip>
|
||||
{ bans?.map(x => <div>{x._id.user}: {x.reason ?? 'no reason'} <button onClick={() => client.servers.unbanUser(server._id, x._id.user)}>unban</button></div>) }
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
<Tip warning>This section is under construction.</Tip>
|
||||
{bans?.map((x) => (
|
||||
<div>
|
||||
{x._id.user}: {x.reason ?? "no reason"}{" "}
|
||||
<button
|
||||
onClick={() =>
|
||||
client.servers.unbanUser(server._id, x._id.user)
|
||||
}>
|
||||
unban
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,77 +1,86 @@
|
||||
import { Text } from "preact-i18n";
|
||||
import styles from './Panes.module.scss';
|
||||
import { XCircle } from "@styled-icons/boxicons-regular";
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
import Preloader from "../../../components/ui/Preloader";
|
||||
import IconButton from "../../../components/ui/IconButton";
|
||||
import UserIcon from "../../../components/common/user/UserIcon";
|
||||
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 styles from "./Panes.module.scss";
|
||||
import { Text } from "preact-i18n";
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
|
||||
import {
|
||||
useChannels,
|
||||
useForceUpdate,
|
||||
useUsers,
|
||||
} from "../../../context/revoltjs/hooks";
|
||||
import { getChannelName } from "../../../context/revoltjs/util";
|
||||
|
||||
import UserIcon from "../../../components/common/user/UserIcon";
|
||||
import IconButton from "../../../components/ui/IconButton";
|
||||
import Preloader from "../../../components/ui/Preloader";
|
||||
|
||||
interface Props {
|
||||
server: Servers.Server;
|
||||
server: Servers.Server;
|
||||
}
|
||||
|
||||
export function Invites({ server }: Props) {
|
||||
const [invites, setInvites] = useState<InvitesNS.ServerInvite[] | undefined>(undefined);
|
||||
const [invites, setInvites] = useState<
|
||||
InvitesNS.ServerInvite[] | undefined
|
||||
>(undefined);
|
||||
|
||||
const ctx = useForceUpdate();
|
||||
const [deleting, setDelete] = useState<string[]>([]);
|
||||
const users = useUsers(invites?.map(x => x.creator) ?? [], ctx);
|
||||
const channels = useChannels(invites?.map(x => x.channel) ?? [], ctx);
|
||||
const ctx = useForceUpdate();
|
||||
const [deleting, setDelete] = useState<string[]>([]);
|
||||
const users = useUsers(invites?.map((x) => x.creator) ?? [], ctx);
|
||||
const channels = useChannels(invites?.map((x) => x.channel) ?? [], ctx);
|
||||
|
||||
useEffect(() => {
|
||||
ctx.client.servers.fetchInvites(server._id)
|
||||
.then(invites => setInvites(invites))
|
||||
}, [ ]);
|
||||
useEffect(() => {
|
||||
ctx.client.servers
|
||||
.fetchInvites(server._id)
|
||||
.then((invites) => setInvites(invites));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={styles.invites}>
|
||||
<div className={styles.subtitle}>
|
||||
<span>Invite Code</span>
|
||||
<span>Invitor</span>
|
||||
<span>Channel</span>
|
||||
<span>Revoke</span>
|
||||
</div>
|
||||
{ typeof invites === 'undefined' && <Preloader type="ring" /> }
|
||||
{
|
||||
invites?.map(
|
||||
invite => {
|
||||
let creator = users.find(x => x?._id === invite.creator);
|
||||
let channel = channels.find(x => x?._id === invite.channel);
|
||||
return (
|
||||
<div className={styles.invites}>
|
||||
<div className={styles.subtitle}>
|
||||
<span>Invite Code</span>
|
||||
<span>Invitor</span>
|
||||
<span>Channel</span>
|
||||
<span>Revoke</span>
|
||||
</div>
|
||||
{typeof invites === "undefined" && <Preloader type="ring" />}
|
||||
{invites?.map((invite) => {
|
||||
let creator = users.find((x) => x?._id === invite.creator);
|
||||
let channel = channels.find((x) => x?._id === invite.channel);
|
||||
|
||||
return (
|
||||
<div className={styles.invite}
|
||||
data-deleting={deleting.indexOf(invite._id) > -1}>
|
||||
<code>{ invite._id }</code>
|
||||
<span>
|
||||
<UserIcon target={creator} size={24} /> {creator?.username ?? 'unknown'}
|
||||
</span>
|
||||
<span>{ (channel && creator) ? getChannelName(ctx.client, channel, true) : '#unknown' }</span>
|
||||
<IconButton
|
||||
onClick={async () => {
|
||||
setDelete([
|
||||
...deleting,
|
||||
invite._id
|
||||
]);
|
||||
return (
|
||||
<div
|
||||
className={styles.invite}
|
||||
data-deleting={deleting.indexOf(invite._id) > -1}>
|
||||
<code>{invite._id}</code>
|
||||
<span>
|
||||
<UserIcon target={creator} size={24} />{" "}
|
||||
{creator?.username ?? "unknown"}
|
||||
</span>
|
||||
<span>
|
||||
{channel && creator
|
||||
? getChannelName(ctx.client, channel, true)
|
||||
: "#unknown"}
|
||||
</span>
|
||||
<IconButton
|
||||
onClick={async () => {
|
||||
setDelete([...deleting, invite._id]);
|
||||
|
||||
await ctx.client.deleteInvite(invite._id);
|
||||
|
||||
setInvites(
|
||||
invites?.filter(
|
||||
x => x._id !== invite._id
|
||||
)
|
||||
);
|
||||
}}
|
||||
disabled={deleting.indexOf(invite._id) > -1}>
|
||||
<XCircle size={24} />
|
||||
</IconButton>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
}
|
||||
</div>
|
||||
);
|
||||
await ctx.client.deleteInvite(invite._id);
|
||||
|
||||
setInvites(
|
||||
invites?.filter(
|
||||
(x) => x._id !== invite._id,
|
||||
),
|
||||
);
|
||||
}}
|
||||
disabled={deleting.indexOf(invite._id) > -1}>
|
||||
<XCircle size={24} />
|
||||
</IconButton>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,34 +1,44 @@
|
||||
import styles from './Panes.module.scss';
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
import { Servers } from "revolt.js/dist/api/objects";
|
||||
|
||||
import styles from "./Panes.module.scss";
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
|
||||
import { useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
|
||||
|
||||
interface Props {
|
||||
server: Servers.Server;
|
||||
server: Servers.Server;
|
||||
}
|
||||
|
||||
// ! FIXME: bad code :)
|
||||
export function Members({ server }: Props) {
|
||||
const [members, setMembers] = useState<Servers.Member[] | undefined>(undefined);
|
||||
const [members, setMembers] = useState<Servers.Member[] | undefined>(
|
||||
undefined,
|
||||
);
|
||||
|
||||
const ctx = useForceUpdate();
|
||||
const users = useUsers(members?.map(x => x._id.user) ?? [], ctx);
|
||||
const ctx = useForceUpdate();
|
||||
const users = useUsers(members?.map((x) => x._id.user) ?? [], ctx);
|
||||
|
||||
useEffect(() => {
|
||||
ctx.client.servers.members.fetchMembers(server._id)
|
||||
.then(members => setMembers(members))
|
||||
}, [ ]);
|
||||
useEffect(() => {
|
||||
ctx.client.servers.members
|
||||
.fetchMembers(server._id)
|
||||
.then((members) => setMembers(members));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={styles.members}>
|
||||
<div className={styles.subtitle}>
|
||||
{ members?.length ?? 0 } Members
|
||||
</div>
|
||||
{ members && members.length > 0 && users?.map(x => x &&
|
||||
<div className={styles.member}>
|
||||
<div>@{x.username}</div>
|
||||
</div>)
|
||||
}
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className={styles.members}>
|
||||
<div className={styles.subtitle}>
|
||||
{members?.length ?? 0} Members
|
||||
</div>
|
||||
{members &&
|
||||
members.length > 0 &&
|
||||
users?.map(
|
||||
(x) =>
|
||||
x && (
|
||||
<div className={styles.member}>
|
||||
<div>@{x.username}</div>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,142 +1,193 @@
|
||||
import { Text } from "preact-i18n";
|
||||
import isEqual from "lodash.isequal";
|
||||
import styles from './Panes.module.scss';
|
||||
import Button from "../../../components/ui/Button";
|
||||
import InputBox from "../../../components/ui/InputBox";
|
||||
import ComboBox from "../../../components/ui/ComboBox";
|
||||
import { Servers, Server } from "revolt.js/dist/api/objects";
|
||||
import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
|
||||
|
||||
import styles from "./Panes.module.scss";
|
||||
import { Text } from "preact-i18n";
|
||||
import { useContext, useEffect, useState } from "preact/hooks";
|
||||
import { getChannelName } from "../../../context/revoltjs/util";
|
||||
import { AppContext } from "../../../context/revoltjs/RevoltClient";
|
||||
|
||||
import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
|
||||
|
||||
import { FileUploader } from "../../../context/revoltjs/FileUploads";
|
||||
import { AppContext } from "../../../context/revoltjs/RevoltClient";
|
||||
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 {
|
||||
server: Servers.Server;
|
||||
server: Servers.Server;
|
||||
}
|
||||
|
||||
export function Overview({ server }: Props) {
|
||||
const client = useContext(AppContext);
|
||||
const client = useContext(AppContext);
|
||||
|
||||
const [name, setName] = useState(server.name);
|
||||
const [description, setDescription] = useState(server.description ?? '');
|
||||
const [systemMessages, setSystemMessages] = useState(server.system_messages);
|
||||
const [name, setName] = useState(server.name);
|
||||
const [description, setDescription] = useState(server.description ?? "");
|
||||
const [systemMessages, setSystemMessages] = useState(
|
||||
server.system_messages,
|
||||
);
|
||||
|
||||
useEffect(() => setName(server.name), [ server.name ]);
|
||||
useEffect(() => setDescription(server.description ?? ''), [ server.description ]);
|
||||
useEffect(() => setSystemMessages(server.system_messages), [ server.system_messages ]);
|
||||
useEffect(() => setName(server.name), [server.name]);
|
||||
useEffect(
|
||||
() => setDescription(server.description ?? ""),
|
||||
[server.description],
|
||||
);
|
||||
useEffect(
|
||||
() => setSystemMessages(server.system_messages),
|
||||
[server.system_messages],
|
||||
);
|
||||
|
||||
const [ changed, setChanged ] = useState(false);
|
||||
function save() {
|
||||
let changes: Partial<Pick<Servers.Server, 'name' | 'description' | 'system_messages'>> = {};
|
||||
if (name !== server.name) changes.name = name;
|
||||
if (description !== server.description) changes.description = description;
|
||||
if (!isEqual(systemMessages, server.system_messages)) changes.system_messages = systemMessages;
|
||||
|
||||
client.servers.edit(server._id, changes);
|
||||
setChanged(false);
|
||||
}
|
||||
const [changed, setChanged] = useState(false);
|
||||
function save() {
|
||||
let changes: Partial<
|
||||
Pick<Servers.Server, "name" | "description" | "system_messages">
|
||||
> = {};
|
||||
if (name !== server.name) changes.name = name;
|
||||
if (description !== server.description)
|
||||
changes.description = description;
|
||||
if (!isEqual(systemMessages, server.system_messages))
|
||||
changes.system_messages = systemMessages;
|
||||
|
||||
return (
|
||||
<div className={styles.overview}>
|
||||
<div className={styles.row}>
|
||||
<FileUploader
|
||||
width={80}
|
||||
height={80}
|
||||
style="icon"
|
||||
fileType="icons"
|
||||
behaviour="upload"
|
||||
maxFileSize={2_500_000}
|
||||
onUpload={icon => client.servers.edit(server._id, { icon })}
|
||||
previewURL={client.servers.getIconURL(server._id, { max_side: 256 }, true)}
|
||||
remove={() => client.servers.edit(server._id, { remove: 'Icon' })}
|
||||
/>
|
||||
<div className={styles.name}>
|
||||
<h3>
|
||||
<Text id="app.main.servers.name" />
|
||||
</h3>
|
||||
<InputBox
|
||||
contrast
|
||||
value={name}
|
||||
maxLength={32}
|
||||
onChange={e => {
|
||||
setName(e.currentTarget.value)
|
||||
if (!changed) setChanged(true)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
client.servers.edit(server._id, changes);
|
||||
setChanged(false);
|
||||
}
|
||||
|
||||
<h3>
|
||||
<Text id="app.main.servers.description" />
|
||||
</h3>
|
||||
<TextAreaAutoSize
|
||||
maxRows={10}
|
||||
minHeight={60}
|
||||
maxLength={1024}
|
||||
value={description}
|
||||
placeholder={"Add a topic..."}
|
||||
onChange={ev => {
|
||||
setDescription(ev.currentTarget.value);
|
||||
if (!changed) setChanged(true)
|
||||
}}
|
||||
/>
|
||||
return (
|
||||
<div className={styles.overview}>
|
||||
<div className={styles.row}>
|
||||
<FileUploader
|
||||
width={80}
|
||||
height={80}
|
||||
style="icon"
|
||||
fileType="icons"
|
||||
behaviour="upload"
|
||||
maxFileSize={2_500_000}
|
||||
onUpload={(icon) =>
|
||||
client.servers.edit(server._id, { icon })
|
||||
}
|
||||
previewURL={client.servers.getIconURL(
|
||||
server._id,
|
||||
{ max_side: 256 },
|
||||
true,
|
||||
)}
|
||||
remove={() =>
|
||||
client.servers.edit(server._id, { remove: "Icon" })
|
||||
}
|
||||
/>
|
||||
<div className={styles.name}>
|
||||
<h3>
|
||||
<Text id="app.main.servers.name" />
|
||||
</h3>
|
||||
<InputBox
|
||||
contrast
|
||||
value={name}
|
||||
maxLength={32}
|
||||
onChange={(e) => {
|
||||
setName(e.currentTarget.value);
|
||||
if (!changed) setChanged(true);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>
|
||||
<Text id="app.main.servers.custom_banner" />
|
||||
</h3>
|
||||
<FileUploader
|
||||
height={160}
|
||||
style="banner"
|
||||
fileType="banners"
|
||||
behaviour="upload"
|
||||
maxFileSize={6_000_000}
|
||||
onUpload={banner => client.servers.edit(server._id, { banner })}
|
||||
previewURL={client.servers.getBannerURL(server._id, { width: 1000 }, true)}
|
||||
remove={() => client.servers.edit(server._id, { remove: 'Banner' })}
|
||||
/>
|
||||
<h3>
|
||||
<Text id="app.main.servers.description" />
|
||||
</h3>
|
||||
<TextAreaAutoSize
|
||||
maxRows={10}
|
||||
minHeight={60}
|
||||
maxLength={1024}
|
||||
value={description}
|
||||
placeholder={"Add a topic..."}
|
||||
onChange={(ev) => {
|
||||
setDescription(ev.currentTarget.value);
|
||||
if (!changed) setChanged(true);
|
||||
}}
|
||||
/>
|
||||
|
||||
<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 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.map(id => {
|
||||
const channel = client.channels.get(id);
|
||||
if (!channel) return null;
|
||||
return <option value={id}>{ getChannelName(client, channel, true) }</option>;
|
||||
}) }
|
||||
</ComboBox>
|
||||
</p>
|
||||
)}
|
||||
<h3>
|
||||
<Text id="app.main.servers.custom_banner" />
|
||||
</h3>
|
||||
<FileUploader
|
||||
height={160}
|
||||
style="banner"
|
||||
fileType="banners"
|
||||
behaviour="upload"
|
||||
maxFileSize={6_000_000}
|
||||
onUpload={(banner) =>
|
||||
client.servers.edit(server._id, { banner })
|
||||
}
|
||||
previewURL={client.servers.getBannerURL(
|
||||
server._id,
|
||||
{ width: 1000 },
|
||||
true,
|
||||
)}
|
||||
remove={() =>
|
||||
client.servers.edit(server._id, { remove: "Banner" })
|
||||
}
|
||||
/>
|
||||
|
||||
<p>
|
||||
<Button onClick={save} contrast disabled={!changed}>
|
||||
<Text id="app.special.modals.actions.save" />
|
||||
</Button>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
<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
|
||||
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.map((id) => {
|
||||
const channel = client.channels.get(id);
|
||||
if (!channel) return null;
|
||||
return (
|
||||
<option value={id}>
|
||||
{getChannelName(client, channel, true)}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</ComboBox>
|
||||
</p>
|
||||
))}
|
||||
|
||||
<p>
|
||||
<Button onClick={save} contrast disabled={!changed}>
|
||||
<Text id="app.special.modals.actions.save" />
|
||||
</Button>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,120 +1,179 @@
|
||||
import { Text } from "preact-i18n";
|
||||
import styles from './Panes.module.scss';
|
||||
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 { useContext, useEffect, useState } from "preact/hooks";
|
||||
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 { Plus } from "@styled-icons/boxicons-regular";
|
||||
import isEqual from "lodash.isequal";
|
||||
import { Servers } from "revolt.js/dist/api/objects";
|
||||
import {
|
||||
ChannelPermission,
|
||||
ServerPermission,
|
||||
} from "revolt.js/dist/api/permissions";
|
||||
|
||||
import styles from "./Panes.module.scss";
|
||||
import { Text } from "preact-i18n";
|
||||
import { useContext, useEffect, useState } from "preact/hooks";
|
||||
|
||||
import { useIntermediate } from "../../../context/intermediate/Intermediate";
|
||||
import { AppContext } from "../../../context/revoltjs/RevoltClient";
|
||||
|
||||
import Button from "../../../components/ui/Button";
|
||||
import Checkbox from "../../../components/ui/Checkbox";
|
||||
import IconButton from "../../../components/ui/IconButton";
|
||||
import InputBox from "../../../components/ui/InputBox";
|
||||
import Overline from "../../../components/ui/Overline";
|
||||
import Tip from "../../../components/ui/Tip";
|
||||
|
||||
import ButtonItem from "../../../components/navigation/items/ButtonItem";
|
||||
|
||||
interface Props {
|
||||
server: Servers.Server;
|
||||
server: Servers.Server;
|
||||
}
|
||||
|
||||
const I32ToU32 = (arr: number[]) => arr.map(x => x >>> 0);
|
||||
const I32ToU32 = (arr: number[]) => arr.map((x) => x >>> 0);
|
||||
|
||||
// ! FIXME: bad code :)
|
||||
export function Roles({ server }: Props) {
|
||||
const [ role, setRole ] = useState('default');
|
||||
const { openScreen } = useIntermediate();
|
||||
const client = useContext(AppContext);
|
||||
const roles = server.roles ?? {};
|
||||
const [role, setRole] = useState("default");
|
||||
const { openScreen } = useIntermediate();
|
||||
const client = useContext(AppContext);
|
||||
const roles = server.roles ?? {};
|
||||
|
||||
if (role !== 'default' && typeof roles[role] === 'undefined') {
|
||||
useEffect(() => setRole('default'));
|
||||
return null;
|
||||
}
|
||||
if (role !== "default" && typeof roles[role] === "undefined") {
|
||||
useEffect(() => setRole("default"));
|
||||
return null;
|
||||
}
|
||||
|
||||
const v = (id: string) => I32ToU32(id === 'default' ? server.default_permissions : roles[id].permissions)
|
||||
const [ perm, setPerm ] = useState(v(role));
|
||||
useEffect(() => setPerm(v(role)), [ role, roles[role]?.permissions ]);
|
||||
const v = (id: string) =>
|
||||
I32ToU32(
|
||||
id === "default"
|
||||
? server.default_permissions
|
||||
: roles[id].permissions,
|
||||
);
|
||||
const [perm, setPerm] = useState(v(role));
|
||||
useEffect(() => setPerm(v(role)), [role, roles[role]?.permissions]);
|
||||
|
||||
const modified = !isEqual(perm, v(role));
|
||||
const save = () => client.servers.setPermissions(server._id, role, { server: perm[0], channel: perm[1] });
|
||||
const deleteRole = () => {
|
||||
setRole('default');
|
||||
client.servers.deleteRole(server._id, role);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.roles}>
|
||||
<div className={styles.list}>
|
||||
<div className={styles.title}>
|
||||
<h1><Text id="app.settings.server_pages.roles.title" /></h1>
|
||||
<Plus size={22} onClick={() =>
|
||||
openScreen({ id: 'special_input', type: 'create_role', server: server._id, callback: id => setRole(id) })} />
|
||||
</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>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<ButtonItem active={role === id} onClick={() => setRole(id)}>
|
||||
{ roles[id].name }
|
||||
</ButtonItem>
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
</div>
|
||||
<div className={styles.permissions}>
|
||||
<div className={styles.title}>
|
||||
<h2>{ role === 'default' ? <Text id="app.settings.permissions.default_role" /> : roles[role].name }</h2>
|
||||
<Button contrast disabled={!modified} onClick={save}>Save</Button>
|
||||
</div>
|
||||
<section>
|
||||
<Overline type="subtle"><Text id="app.settings.permissions.server" /></Overline>
|
||||
{ Object.keys(ServerPermission)
|
||||
.map(key => {
|
||||
if (key === 'View') return;
|
||||
let value = ServerPermission[key as keyof typeof ServerPermission];
|
||||
const modified = !isEqual(perm, v(role));
|
||||
const save = () =>
|
||||
client.servers.setPermissions(server._id, role, {
|
||||
server: perm[0],
|
||||
channel: perm[1],
|
||||
});
|
||||
const deleteRole = () => {
|
||||
setRole("default");
|
||||
client.servers.deleteRole(server._id, role);
|
||||
};
|
||||
|
||||
return (
|
||||
<Checkbox 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>
|
||||
<Overline type="subtle"><Text id="app.settings.permissions.channel" /></Overline>
|
||||
{ Object.keys(ChannelPermission)
|
||||
.map(key => {
|
||||
if (key === 'ManageChannel') return;
|
||||
let value = ChannelPermission[key as keyof typeof ChannelPermission];
|
||||
return (
|
||||
<div className={styles.roles}>
|
||||
<div className={styles.list}>
|
||||
<div className={styles.title}>
|
||||
<h1>
|
||||
<Text id="app.settings.server_pages.roles.title" />
|
||||
</h1>
|
||||
<Plus
|
||||
size={22}
|
||||
onClick={() =>
|
||||
openScreen({
|
||||
id: "special_input",
|
||||
type: "create_role",
|
||||
server: server._id,
|
||||
callback: (id) => setRole(id),
|
||||
})
|
||||
}
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<ButtonItem
|
||||
active={role === id}
|
||||
onClick={() => setRole(id)}>
|
||||
{roles[id].name}
|
||||
</ButtonItem>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
<div className={styles.permissions}>
|
||||
<div className={styles.title}>
|
||||
<h2>
|
||||
{role === "default" ? (
|
||||
<Text id="app.settings.permissions.default_role" />
|
||||
) : (
|
||||
roles[role].name
|
||||
)}
|
||||
</h2>
|
||||
<Button contrast disabled={!modified} onClick={save}>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
<section>
|
||||
<Overline type="subtle">
|
||||
<Text id="app.settings.permissions.server" />
|
||||
</Overline>
|
||||
{Object.keys(ServerPermission).map((key) => {
|
||||
if (key === "View") return;
|
||||
let value =
|
||||
ServerPermission[
|
||||
key as keyof typeof ServerPermission
|
||||
];
|
||||
|
||||
return (
|
||||
<Checkbox 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>
|
||||
<div className={styles.actions}>
|
||||
<Button contrast disabled={!modified} onClick={save}>Save</Button>
|
||||
{ role !== 'default' && <Button contrast error onClick={deleteRole}>Delete</Button> }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<Checkbox
|
||||
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>
|
||||
<Overline type="subtle">
|
||||
<Text id="app.settings.permissions.channel" />
|
||||
</Overline>
|
||||
{Object.keys(ChannelPermission).map((key) => {
|
||||
if (key === "ManageChannel") return;
|
||||
let value =
|
||||
ChannelPermission[
|
||||
key as keyof typeof ChannelPermission
|
||||
];
|
||||
|
||||
return (
|
||||
<Checkbox
|
||||
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>
|
||||
<div className={styles.actions}>
|
||||
<Button contrast disabled={!modified} onClick={save}>
|
||||
Save
|
||||
</Button>
|
||||
{role !== "default" && (
|
||||
<Button contrast error onClick={deleteRole}>
|
||||
Delete
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user