mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-22 07:00:58 -05:00
feat: clean up invite bot page
This commit is contained in:
parent
bf82c24281
commit
0255c3167a
1 changed files with 81 additions and 41 deletions
|
@ -1,5 +1,7 @@
|
||||||
import { useParams } from "react-router-dom";
|
import { useParams } from "react-router-dom";
|
||||||
|
import { ServerPermission } from "revolt.js";
|
||||||
import { Route } from "revolt.js/dist/api/routes";
|
import { Route } from "revolt.js/dist/api/routes";
|
||||||
|
import styled from "styled-components";
|
||||||
|
|
||||||
import { useEffect, useState } from "preact/hooks";
|
import { useEffect, useState } from "preact/hooks";
|
||||||
|
|
||||||
|
@ -12,6 +14,26 @@ import Overline from "../../components/ui/Overline";
|
||||||
import Preloader from "../../components/ui/Preloader";
|
import Preloader from "../../components/ui/Preloader";
|
||||||
import Tip from "../../components/ui/Tip";
|
import Tip from "../../components/ui/Tip";
|
||||||
|
|
||||||
|
import Markdown from "../../components/markdown/Markdown";
|
||||||
|
|
||||||
|
const BotInfo = styled.div`
|
||||||
|
gap: 12px;
|
||||||
|
display: flex;
|
||||||
|
padding: 12px;
|
||||||
|
|
||||||
|
h1,
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Option = styled.div`
|
||||||
|
gap: 8px;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 4px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
`;
|
||||||
|
|
||||||
export default function InviteBot() {
|
export default function InviteBot() {
|
||||||
const { id } = useParams<{ id: string }>();
|
const { id } = useParams<{ id: string }>();
|
||||||
const client = useClient();
|
const client = useClient();
|
||||||
|
@ -34,15 +56,28 @@ export default function InviteBot() {
|
||||||
{typeof data === "undefined" && <Preloader type="spinner" />}
|
{typeof data === "undefined" && <Preloader type="spinner" />}
|
||||||
{data && (
|
{data && (
|
||||||
<>
|
<>
|
||||||
|
<BotInfo>
|
||||||
<UserIcon size={64} attachment={data.avatar} />
|
<UserIcon size={64} attachment={data.avatar} />
|
||||||
|
<div className="name">
|
||||||
<h1>{data.username}</h1>
|
<h1>{data.username}</h1>
|
||||||
{data.description && <p>{data.description}</p>}
|
{data.description && (
|
||||||
|
<Markdown content={data.description} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</BotInfo>
|
||||||
<Overline type="subtle">Add to server</Overline>
|
<Overline type="subtle">Add to server</Overline>
|
||||||
|
<Option>
|
||||||
<ComboBox
|
<ComboBox
|
||||||
value={server}
|
value={server}
|
||||||
onChange={(e) => setServer(e.currentTarget.value)}>
|
onChange={(e) => setServer(e.currentTarget.value)}>
|
||||||
<option value="none">Select a server</option>
|
<option value="none">Select a server</option>
|
||||||
{[...client.servers.values()].map((server) => (
|
{[...client.servers.values()]
|
||||||
|
.filter(
|
||||||
|
(x) =>
|
||||||
|
x.permission &
|
||||||
|
ServerPermission.ManageServer,
|
||||||
|
)
|
||||||
|
.map((server) => (
|
||||||
<option value={server._id} key={server._id}>
|
<option value={server._id} key={server._id}>
|
||||||
{server.name}
|
{server.name}
|
||||||
</option>
|
</option>
|
||||||
|
@ -54,9 +89,11 @@ export default function InviteBot() {
|
||||||
server !== "none" &&
|
server !== "none" &&
|
||||||
client.bots.invite(data._id, { server })
|
client.bots.invite(data._id, { server })
|
||||||
}>
|
}>
|
||||||
add
|
Add
|
||||||
</Button>
|
</Button>
|
||||||
|
</Option>
|
||||||
<Overline type="subtle">Add to group</Overline>
|
<Overline type="subtle">Add to group</Overline>
|
||||||
|
<Option>
|
||||||
<ComboBox
|
<ComboBox
|
||||||
value={group}
|
value={group}
|
||||||
onChange={(e) => setGroup(e.currentTarget.value)}>
|
onChange={(e) => setGroup(e.currentTarget.value)}>
|
||||||
|
@ -64,7 +101,9 @@ export default function InviteBot() {
|
||||||
{[...client.channels.values()]
|
{[...client.channels.values()]
|
||||||
.filter((x) => x.channel_type === "Group")
|
.filter((x) => x.channel_type === "Group")
|
||||||
.map((channel) => (
|
.map((channel) => (
|
||||||
<option value={channel._id} key={channel._id}>
|
<option
|
||||||
|
value={channel._id}
|
||||||
|
key={channel._id}>
|
||||||
{channel.name}
|
{channel.name}
|
||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
|
@ -75,8 +114,9 @@ export default function InviteBot() {
|
||||||
group !== "none" &&
|
group !== "none" &&
|
||||||
client.bots.invite(data._id, { group })
|
client.bots.invite(data._id, { group })
|
||||||
}>
|
}>
|
||||||
add
|
Add
|
||||||
</Button>
|
</Button>
|
||||||
|
</Option>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue