Port settings.

2021-06-19 22:37:12 +01:00
parent b4bc2262ae
commit 31d8950ea1
48 changed files with 3056 additions and 106 deletions
--- a/src/pages/settings/channel/Overview.tsx
+++ b/src/pages/settings/channel/Overview.tsx
@@ -0,0 +1,89 @@
+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 { SettingsTextArea } from "../SettingsTextArea";
+import { useContext, useEffect, useState } from "preact/hooks";
+import { AppContext } from "../../../context/revoltjs/RevoltClient";
+import { FileUploader } from "../../../context/revoltjs/FileUploads";
+
+interface Props {
+    channel: Channels.GroupChannel | Channels.TextChannel;
+}
+
+export function Overview({ channel }: Props) {
+    const client = useContext(AppContext);
+
+    const [name, setName] = useState(channel.name);
+    const [description, setDescription] = useState(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;
+
+        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>
+
+            <h3>
+                { channel.channel_type === 'Group' ?
+                    <Text id="app.main.groups.description" /> :
+                    <Text id="app.main.servers.channel_description" /> }
+            </h3>
+            <SettingsTextArea
+                maxRows={10}
+                minHeight={60}
+                maxLength={1024}
+                value={description}
+                placeholder={"Add a description..."}
+                onChange={content => {
+                    setDescription(content);
+                    if (!changed) setChanged(true)
+                }}
+            />
+            <Button onClick={save} style="contrast" disabled={!changed}>
+                <Text id="app.special.modals.actions.save" />
+            </Button>
+        </div>
+    );
+}