for-legacy-web/src/pages/invite/InviteBot.tsx

81 lines
3.1 KiB
TypeScript

import { useParams } from "react-router-dom";
import { Route } from "revolt.js/dist/api/routes";
import { useEffect, useState } from "preact/hooks";
import { useClient } from "../../context/revoltjs/RevoltClient";
import UserIcon from "../../components/common/user/UserIcon";
import Button from "../../components/ui/Button";
import ComboBox from "../../components/ui/ComboBox";
import Overline from "../../components/ui/Overline";
import Preloader from "../../components/ui/Preloader";
export default function InviteBot() {
const { id } = useParams<{ id: string }>();
const client = useClient();
const [data, setData] =
useState<Route<"GET", "/bots/id/invite">["response"]>();
useEffect(() => {
client.bots.fetchPublic(id).then(setData);
// eslint-disable-next-line
}, []);
const [server, setServer] = useState("none");
const [group, setGroup] = useState("none");
return (
<div style={{ padding: "6em" }}>
{typeof data === "undefined" && <Preloader type="spinner" />}
{data && (
<>
<UserIcon size={64} attachment={data.avatar} />
<h1>{data.username}</h1>
{data.description && <p>{data.description}</p>}
<Overline type="subtle">Add to server</Overline>
<ComboBox
value={server}
onChange={(e) => setServer(e.currentTarget.value)}>
<option value="none">un selected</option>
{[...client.servers.values()].map((server) => (
<option value={server._id} key={server._id}>
{server.name}
</option>
))}
</ComboBox>
<Button
contrast
onClick={() =>
group !== "none" &&
client.bots.invite(data._id, { server })
}>
add
</Button>
<Overline type="subtle">Add to group</Overline>
<ComboBox
value={group}
onChange={(e) => setGroup(e.currentTarget.value)}>
<option value="none">un selected</option>
{[...client.channels.values()]
.filter((x) => x.channel_type === "Group")
.map((channel) => (
<option value={channel._id} key={channel._id}>
{channel.name}
</option>
))}
</ComboBox>
<Button
contrast
onClick={() =>
group !== "none" &&
client.bots.invite(data._id, { group })
}>
add
</Button>
</>
)}
</div>
);
}