Port modal / popover context.

2021-06-19 18:46:05 +01:00
parent 5b77ed439f
commit 9706dd75f3
57 changed files with 2562 additions and 140 deletions
--- a/src/context/intermediate/modals/Input.tsx
+++ b/src/context/intermediate/modals/Input.tsx
@@ -0,0 +1,149 @@
+import { ulid } from "ulid";
+import { Text } from "preact-i18n";
+import { useHistory } from "react-router";
+import Modal from "../../../components/ui/Modal";
+import { Children } from "../../../types/Preact";
+import { takeError } from "../../revoltjs/util";
+import { useContext, useState } from "preact/hooks";
+import Overline from '../../../components/ui/Overline';
+import InputBox from '../../../components/ui/InputBox';
+import { AppContext } from "../../revoltjs/RevoltClient";
+
+interface Props {
+    onClose: () => void;
+    question: Children;
+    field: Children;
+    defaultValue?: string;
+    callback: (value: string) => Promise<void>;
+}
+
+export function InputModal({
+    onClose,
+    question,
+    field,
+    defaultValue,
+    callback
+}: Props) {
+    const [processing, setProcessing] = useState(false);
+    const [value, setValue] = useState(defaultValue ?? "");
+    const [error, setError] = useState<undefined | string>(undefined);
+
+    return (
+        <Modal
+            visible={true}
+            title={question}
+            disabled={processing}
+            actions={[
+                {
+                    text: <Text id="app.special.modals.actions.ok" />,
+                    onClick: () => {
+                        setProcessing(true);
+                        callback(value)
+                            .then(onClose)
+                            .catch(err => {
+                                setError(takeError(err));
+                                setProcessing(false)
+                            })
+                    }
+                },
+                {
+                    text: <Text id="app.special.modals.actions.cancel" />,
+                    onClick: onClose
+                }
+            ]}
+            onClose={onClose}
+        >
+            <Overline error={error} block>
+                {field}
+            </Overline>
+            <InputBox
+                value={value}
+                onChange={e => setValue(e.currentTarget.value)}
+            />
+        </Modal>
+    );
+}
+
+type SpecialProps = { onClose: () => void } & (
+    { type: "create_group" | "create_server" | "set_custom_status" } |
+    { type: "create_channel", server: string }
+)
+
+export function SpecialInputModal(props: SpecialProps) {
+    const history = useHistory();
+    const client = useContext(AppContext);
+
+    const { onClose } = props;
+    switch (props.type) {
+        case "create_group": {
+            return <InputModal
+                onClose={onClose}
+                question={<Text id="app.main.groups.create" />}
+                field={<Text id="app.main.groups.name" />}
+                callback={async name => {
+                    const group = await client.channels.createGroup(
+                        {
+                            name,
+                            nonce: ulid(),
+                            users: []
+                        }
+                    );
+
+                    history.push(`/channel/${group._id}`);
+                }}
+            />;
+        }
+        case "create_server": {
+            return <InputModal
+                onClose={onClose}
+                question={<Text id="app.main.servers.create" />}
+                field={<Text id="app.main.servers.name" />}
+                callback={async name => {
+                    const server = await client.servers.createServer(
+                        {
+                            name,
+                            nonce: ulid()
+                        }
+                    );
+
+                    history.push(`/server/${server._id}`);
+                }}
+            />;
+        }
+        case "create_channel": {
+            return <InputModal
+                onClose={onClose}
+                question={<Text id="app.context_menu.create_channel" />}
+                field={<Text id="app.main.servers.channel_name" />}
+                callback={async name => {
+                    const channel = await client.servers.createChannel(
+                        props.server,
+                        {
+                            name,
+                            nonce: ulid()
+                        }
+                    );
+
+                    history.push(`/server/${props.server}/channel/${channel._id}`);
+                }}
+            />;
+        }
+        case "set_custom_status": {
+            return <InputModal
+                onClose={onClose}
+                question={<Text id="app.context_menu.set_custom_status" />}
+                field={<Text id="app.context_menu.custom_status" />}
+                defaultValue={client.user?.status?.text}
+                callback={text =>
+                    client.users.editUser({
+                        status: {
+                            ...client.user?.status,
+                            text
+                        }
+                    })
+                }
+            />;
+        }
+        default: return null;
+    }
+}