forked from abner/for-legacy-web
Run prettier on all files.
This commit is contained in:
Paul
@@ -1,91 +1,117 @@
|
||||
import { Text } from "preact-i18n";
|
||||
import styles from "./Panes.module.scss";
|
||||
import Button from "../../../components/ui/Button";
|
||||
import { Channels } from "revolt.js/dist/api/objects";
|
||||
import InputBox from "../../../components/ui/InputBox";
|
||||
import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
|
||||
|
||||
import styles from "./Panes.module.scss";
|
||||
import { Text } from "preact-i18n";
|
||||
import { useContext, useEffect, useState } from "preact/hooks";
|
||||
import { AppContext } from "../../../context/revoltjs/RevoltClient";
|
||||
|
||||
import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
|
||||
|
||||
import { FileUploader } from "../../../context/revoltjs/FileUploads";
|
||||
import { AppContext } from "../../../context/revoltjs/RevoltClient";
|
||||
|
||||
import Button from "../../../components/ui/Button";
|
||||
import InputBox from "../../../components/ui/InputBox";
|
||||
|
||||
interface Props {
|
||||
channel: Channels.GroupChannel | Channels.TextChannel | Channels.VoiceChannel;
|
||||
channel:
|
||||
| Channels.GroupChannel
|
||||
| Channels.TextChannel
|
||||
| Channels.VoiceChannel;
|
||||
}
|
||||
|
||||
export default function Overview({ channel }: Props) {
|
||||
const client = useContext(AppContext);
|
||||
const client = useContext(AppContext);
|
||||
|
||||
const [name, setName] = useState(channel.name);
|
||||
const [description, setDescription] = useState(channel.description ?? '');
|
||||
const [name, setName] = useState(channel.name);
|
||||
const [description, setDescription] = useState(channel.description ?? "");
|
||||
|
||||
useEffect(() => setName(channel.name), [ channel.name ]);
|
||||
useEffect(() => setDescription(channel.description ?? ''), [ channel.description ]);
|
||||
useEffect(() => setName(channel.name), [channel.name]);
|
||||
useEffect(
|
||||
() => setDescription(channel.description ?? ""),
|
||||
[channel.description],
|
||||
);
|
||||
|
||||
const [ changed, setChanged ] = useState(false);
|
||||
function save() {
|
||||
let changes: any = {};
|
||||
if (name !== channel.name) changes.name = name;
|
||||
if (description !== channel.description)
|
||||
changes.description = description;
|
||||
const [changed, setChanged] = useState(false);
|
||||
function save() {
|
||||
let changes: any = {};
|
||||
if (name !== channel.name) changes.name = name;
|
||||
if (description !== channel.description)
|
||||
changes.description = description;
|
||||
|
||||
client.channels.edit(channel._id, changes);
|
||||
setChanged(false);
|
||||
}
|
||||
client.channels.edit(channel._id, changes);
|
||||
setChanged(false);
|
||||
}
|
||||
|
||||
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.channels.edit(channel._id, { icon })}
|
||||
previewURL={client.channels.getIconURL(channel._id, { max_side: 256 }, true)}
|
||||
remove={() => client.channels.edit(channel._id, { remove: 'Icon' })}
|
||||
defaultPreview={channel.channel_type === 'Group' ? "/assets/group.png" : undefined}
|
||||
/>
|
||||
<div className={styles.name}>
|
||||
<h3>
|
||||
{ channel.channel_type === 'Group' ?
|
||||
<Text id="app.main.groups.name" /> :
|
||||
<Text id="app.main.servers.channel_name" /> }
|
||||
</h3>
|
||||
<InputBox
|
||||
contrast
|
||||
value={name}
|
||||
maxLength={32}
|
||||
onChange={e => {
|
||||
setName(e.currentTarget.value)
|
||||
if (!changed) setChanged(true)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
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.channels.edit(channel._id, { icon })
|
||||
}
|
||||
previewURL={client.channels.getIconURL(
|
||||
channel._id,
|
||||
{ max_side: 256 },
|
||||
true,
|
||||
)}
|
||||
remove={() =>
|
||||
client.channels.edit(channel._id, { remove: "Icon" })
|
||||
}
|
||||
defaultPreview={
|
||||
channel.channel_type === "Group"
|
||||
? "/assets/group.png"
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
<div className={styles.name}>
|
||||
<h3>
|
||||
{channel.channel_type === "Group" ? (
|
||||
<Text id="app.main.groups.name" />
|
||||
) : (
|
||||
<Text id="app.main.servers.channel_name" />
|
||||
)}
|
||||
</h3>
|
||||
<InputBox
|
||||
contrast
|
||||
value={name}
|
||||
maxLength={32}
|
||||
onChange={(e) => {
|
||||
setName(e.currentTarget.value);
|
||||
if (!changed) setChanged(true);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>
|
||||
{ channel.channel_type === 'Group' ?
|
||||
<Text id="app.main.groups.description" /> :
|
||||
<Text id="app.main.servers.channel_description" /> }
|
||||
</h3>
|
||||
<TextAreaAutoSize
|
||||
maxRows={10}
|
||||
minHeight={60}
|
||||
maxLength={1024}
|
||||
value={description}
|
||||
placeholder={"Add a description..."}
|
||||
onChange={ev => {
|
||||
setDescription(ev.currentTarget.value);
|
||||
if (!changed) setChanged(true)
|
||||
}}
|
||||
/>
|
||||
<p>
|
||||
<Button onClick={save} contrast disabled={!changed}>
|
||||
<Text id="app.special.modals.actions.save" />
|
||||
</Button>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
<h3>
|
||||
{channel.channel_type === "Group" ? (
|
||||
<Text id="app.main.groups.description" />
|
||||
) : (
|
||||
<Text id="app.main.servers.channel_description" />
|
||||
)}
|
||||
</h3>
|
||||
<TextAreaAutoSize
|
||||
maxRows={10}
|
||||
minHeight={60}
|
||||
maxLength={1024}
|
||||
value={description}
|
||||
placeholder={"Add a description..."}
|
||||
onChange={(ev) => {
|
||||
setDescription(ev.currentTarget.value);
|
||||
if (!changed) setChanged(true);
|
||||
}}
|
||||
/>
|
||||
<p>
|
||||
<Button onClick={save} contrast disabled={!changed}>
|
||||
<Text id="app.special.modals.actions.save" />
|
||||
</Button>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,91 +1,111 @@
|
||||
import Tip from "../../../components/ui/Tip";
|
||||
import Button from "../../../components/ui/Button";
|
||||
import { Channels } from "revolt.js/dist/api/objects";
|
||||
import Checkbox from "../../../components/ui/Checkbox";
|
||||
import { useServer } from "../../../context/revoltjs/hooks";
|
||||
import { useContext, useEffect, useState } from "preact/hooks";
|
||||
import { ChannelPermission } from "revolt.js/dist/api/permissions";
|
||||
|
||||
import { useContext, useEffect, useState } from "preact/hooks";
|
||||
|
||||
import { AppContext } from "../../../context/revoltjs/RevoltClient";
|
||||
import { useServer } from "../../../context/revoltjs/hooks";
|
||||
|
||||
import Button from "../../../components/ui/Button";
|
||||
import Checkbox from "../../../components/ui/Checkbox";
|
||||
import Tip from "../../../components/ui/Tip";
|
||||
|
||||
// ! FIXME: export from revolt.js
|
||||
const DEFAULT_PERMISSION_DM = ChannelPermission.View
|
||||
+ ChannelPermission.SendMessage
|
||||
+ ChannelPermission.ManageChannel
|
||||
+ ChannelPermission.VoiceCall
|
||||
+ ChannelPermission.InviteOthers
|
||||
+ ChannelPermission.EmbedLinks
|
||||
+ ChannelPermission.UploadFiles;
|
||||
const DEFAULT_PERMISSION_DM =
|
||||
ChannelPermission.View +
|
||||
ChannelPermission.SendMessage +
|
||||
ChannelPermission.ManageChannel +
|
||||
ChannelPermission.VoiceCall +
|
||||
ChannelPermission.InviteOthers +
|
||||
ChannelPermission.EmbedLinks +
|
||||
ChannelPermission.UploadFiles;
|
||||
|
||||
interface Props {
|
||||
channel: Channels.GroupChannel | Channels.TextChannel | Channels.VoiceChannel;
|
||||
channel:
|
||||
| Channels.GroupChannel
|
||||
| Channels.TextChannel
|
||||
| Channels.VoiceChannel;
|
||||
}
|
||||
|
||||
// ! FIXME: bad code :)
|
||||
export default function Permissions({ channel }: Props) {
|
||||
const [ selected, setSelected ] = useState('default');
|
||||
const client = useContext(AppContext);
|
||||
const [selected, setSelected] = useState("default");
|
||||
const client = useContext(AppContext);
|
||||
|
||||
type R = { name: string, permissions: number };
|
||||
let roles: { [key: string]: R } = {};
|
||||
if (channel.channel_type !== 'Group') {
|
||||
const server = useServer(channel.server);
|
||||
const a = server?.roles ?? {};
|
||||
for (let b of Object.keys(a)) {
|
||||
roles[b] = {
|
||||
name: a[b].name,
|
||||
permissions: a[b].permissions[1]
|
||||
};
|
||||
}
|
||||
}
|
||||
type R = { name: string; permissions: number };
|
||||
let roles: { [key: string]: R } = {};
|
||||
if (channel.channel_type !== "Group") {
|
||||
const server = useServer(channel.server);
|
||||
const a = server?.roles ?? {};
|
||||
for (let b of Object.keys(a)) {
|
||||
roles[b] = {
|
||||
name: a[b].name,
|
||||
permissions: a[b].permissions[1],
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
const keys = [ 'default', ...Object.keys(roles) ];
|
||||
const keys = ["default", ...Object.keys(roles)];
|
||||
|
||||
const defaultRole = { name: 'Default', permissions: (channel.channel_type === 'Group' ? channel.permissions : channel.default_permissions) ?? DEFAULT_PERMISSION_DM };
|
||||
const selectedRole = selected === 'default' ? defaultRole : roles[selected];
|
||||
const defaultRole = {
|
||||
name: "Default",
|
||||
permissions:
|
||||
(channel.channel_type === "Group"
|
||||
? channel.permissions
|
||||
: channel.default_permissions) ?? DEFAULT_PERMISSION_DM,
|
||||
};
|
||||
const selectedRole = selected === "default" ? defaultRole : roles[selected];
|
||||
|
||||
if (!selectedRole) {
|
||||
useEffect(() => setSelected('default'), [ ]);
|
||||
return null;
|
||||
}
|
||||
if (!selectedRole) {
|
||||
useEffect(() => setSelected("default"), []);
|
||||
return null;
|
||||
}
|
||||
|
||||
const [ p, setPerm ] = useState(selectedRole.permissions >>> 0);
|
||||
const [p, setPerm] = useState(selectedRole.permissions >>> 0);
|
||||
|
||||
useEffect(() => {
|
||||
setPerm(selectedRole.permissions >>> 0);
|
||||
}, [ selected, selectedRole.permissions ]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Tip warning>This section is under construction.</Tip>
|
||||
<h2>select role</h2>
|
||||
{ selected }
|
||||
{ keys
|
||||
.map(id => {
|
||||
let role: R = id === 'default' ? defaultRole : roles[id];
|
||||
useEffect(() => {
|
||||
setPerm(selectedRole.permissions >>> 0);
|
||||
}, [selected, selectedRole.permissions]);
|
||||
|
||||
return (
|
||||
<Checkbox checked={selected === id} onChange={selected => selected && setSelected(id)}>
|
||||
{ role.name }
|
||||
</Checkbox>
|
||||
)
|
||||
})
|
||||
}
|
||||
<h2>channel per??issions</h2>
|
||||
{ Object.keys(ChannelPermission)
|
||||
.map(perm => {
|
||||
let value = ChannelPermission[perm as keyof typeof ChannelPermission];
|
||||
if (value & DEFAULT_PERMISSION_DM) {
|
||||
return (
|
||||
<Checkbox checked={(p & value) > 0} onChange={c => setPerm(c ? (p | value) : (p ^ value))}>
|
||||
{ perm }
|
||||
</Checkbox>
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
<Button contrast onClick={() => {
|
||||
client.channels.setPermissions(channel._id, selected, p);
|
||||
}}>click here to save permissions for role</Button>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
<Tip warning>This section is under construction.</Tip>
|
||||
<h2>select role</h2>
|
||||
{selected}
|
||||
{keys.map((id) => {
|
||||
let role: R = id === "default" ? defaultRole : roles[id];
|
||||
|
||||
return (
|
||||
<Checkbox
|
||||
checked={selected === id}
|
||||
onChange={(selected) => selected && setSelected(id)}>
|
||||
{role.name}
|
||||
</Checkbox>
|
||||
);
|
||||
})}
|
||||
<h2>channel per??issions</h2>
|
||||
{Object.keys(ChannelPermission).map((perm) => {
|
||||
let value =
|
||||
ChannelPermission[perm as keyof typeof ChannelPermission];
|
||||
if (value & DEFAULT_PERMISSION_DM) {
|
||||
return (
|
||||
<Checkbox
|
||||
checked={(p & value) > 0}
|
||||
onChange={(c) =>
|
||||
setPerm(c ? p | value : p ^ value)
|
||||
}>
|
||||
{perm}
|
||||
</Checkbox>
|
||||
);
|
||||
}
|
||||
})}
|
||||
<Button
|
||||
contrast
|
||||
onClick={() => {
|
||||
client.channels.setPermissions(channel._id, selected, p);
|
||||
}}>
|
||||
click here to save permissions for role
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user