feat: Add a new bot invite menu.
This code allows you to add a bot to your Revolt server or group. Simply select the option to add to a server or group, then choose the specific server or group from the dropdown menu. Click the "Add Bot" button to complete the process. This code is easy to use and can help streamline your communication and organization efforts within Revolt.pull/841/head
NoLogicAlan
GitHub
parent
21175dffda
commit
06c229e43d
|
|
@ -1,3 +1,4 @@
|
|||
/* eslint-disable react/jsx-no-literals */
|
||||
import { useParams } from "react-router-dom";
|
||||
import { API } from "revolt.js";
|
||||
import styled from "styled-components/macro";
|
||||
|
|
@ -11,21 +12,64 @@ import Markdown from "../../components/markdown/Markdown";
|
|||
import { useClient } from "../../controllers/client/ClientController";
|
||||
|
||||
const BotInfo = styled.div`
|
||||
gap: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
border-radius: 10px;
|
||||
|
||||
h1,
|
||||
p {
|
||||
margin: 0;
|
||||
.name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
color: #ddd;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
`;
|
||||
|
||||
const Option = styled.div`
|
||||
gap: 8px;
|
||||
display: flex;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 12px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
|
||||
label {
|
||||
font-size: 16px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.select-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
export default function InviteBot() {
|
||||
|
|
@ -38,71 +82,113 @@ export default function InviteBot() {
|
|||
// eslint-disable-next-line
|
||||
}, []);
|
||||
|
||||
const [server, setServer] = useState("none");
|
||||
const [group, setGroup] = useState("none");
|
||||
const [server, setServer] = useState<string | undefined>(undefined);
|
||||
const [group, setGroup] = useState<string | undefined>(undefined);
|
||||
const [selectedOption, setSelectedOption] = useState("");
|
||||
|
||||
const handleAdd = () => {
|
||||
if (selectedOption === "server" && server) {
|
||||
client.bots.invite(data!._id, { server });
|
||||
} else if (selectedOption === "group" && group) {
|
||||
client.bots.invite(data!._id, { group });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ padding: "6em" }}>
|
||||
<div
|
||||
style={{
|
||||
padding: "6em",
|
||||
overflowY: "auto",
|
||||
}}>
|
||||
<Tip palette="warning">This section is under construction.</Tip>
|
||||
{typeof data === "undefined" && <Preloader type="spinner" />}
|
||||
{data && (
|
||||
<>
|
||||
<BotInfo>
|
||||
<UserIcon size={64} attachment={data.avatar} />
|
||||
<BotInfo
|
||||
style={{
|
||||
padding: "16px",
|
||||
}}>
|
||||
<div className="name">
|
||||
<UserIcon size={64} attachment={data.avatar} />
|
||||
<h1>{data.username}</h1>
|
||||
{data.description && (
|
||||
<Markdown content={data.description} />
|
||||
)}
|
||||
</div>
|
||||
{data.description && (
|
||||
<div className="description">
|
||||
<Markdown content={data.description} />
|
||||
</div>
|
||||
)}
|
||||
</BotInfo>
|
||||
<Category>Add to server</Category>
|
||||
<Option>
|
||||
<ComboBox
|
||||
value={server}
|
||||
onChange={(e) => setServer(e.currentTarget.value)}>
|
||||
<option value="none">Select a server</option>
|
||||
{[...client.servers.values()]
|
||||
.filter((x) => x.havePermission("ManageServer"))
|
||||
.map((server) => (
|
||||
<option value={server._id} key={server._id}>
|
||||
{server.name}
|
||||
</option>
|
||||
))}
|
||||
</ComboBox>
|
||||
<Button
|
||||
palette="secondary"
|
||||
onClick={() =>
|
||||
server !== "none" &&
|
||||
client.bots.invite(data._id, { server })
|
||||
}>
|
||||
Add
|
||||
</Button>
|
||||
</Option>
|
||||
<Category>Add to group</Category>
|
||||
<Option>
|
||||
<ComboBox
|
||||
value={group}
|
||||
onChange={(e) => setGroup(e.currentTarget.value)}>
|
||||
<option value="none">Select a group</option>
|
||||
{[...client.channels.values()]
|
||||
.filter((x) => x.channel_type === "Group")
|
||||
.map((channel) => (
|
||||
<option
|
||||
value={channel._id}
|
||||
key={channel._id}>
|
||||
{channel.name}
|
||||
</option>
|
||||
))}
|
||||
</ComboBox>
|
||||
<Button
|
||||
palette="secondary"
|
||||
onClick={() =>
|
||||
group !== "none" &&
|
||||
client.bots.invite(data._id, { group })
|
||||
}>
|
||||
Add
|
||||
</Button>
|
||||
<Category>
|
||||
Add this bot to your Revolt server, group
|
||||
</Category>
|
||||
<div className="select-container">
|
||||
<ComboBox
|
||||
id="server-select"
|
||||
value={selectedOption}
|
||||
onChange={(e) =>
|
||||
setSelectedOption(e.currentTarget.value)
|
||||
}>
|
||||
<option value="">Select an option</option>
|
||||
<option value="server">Server</option>
|
||||
<option value="group">Group</option>
|
||||
</ComboBox>
|
||||
{selectedOption === "server" && (
|
||||
<div className="select-container">
|
||||
<ComboBox
|
||||
id="server-select"
|
||||
value={server}
|
||||
onChange={(e) =>
|
||||
setServer(e.currentTarget.value)
|
||||
}>
|
||||
<option value="none">
|
||||
Select a server
|
||||
</option>
|
||||
{[...client.servers.values()]
|
||||
.filter((x) =>
|
||||
x.havePermission(
|
||||
"ManageServer",
|
||||
),
|
||||
)
|
||||
.map((server) => (
|
||||
<option
|
||||
value={server._id}
|
||||
key={server._id}>
|
||||
{server.name}
|
||||
</option>
|
||||
))}
|
||||
</ComboBox>
|
||||
</div>
|
||||
)}
|
||||
{selectedOption === "group" && (
|
||||
<div className="select-container">
|
||||
<ComboBox
|
||||
value={group}
|
||||
onChange={(e) =>
|
||||
setGroup(e.currentTarget.value)
|
||||
}>
|
||||
<option value="none">
|
||||
Select a group
|
||||
</option>
|
||||
{[...client.channels.values()]
|
||||
.filter(
|
||||
(x) =>
|
||||
x.channel_type === "Group",
|
||||
)
|
||||
.map((channel) => (
|
||||
<option
|
||||
value={channel._id}
|
||||
key={channel._id}>
|
||||
{channel.name}
|
||||
</option>
|
||||
))}
|
||||
</ComboBox>
|
||||
</div>
|
||||
)}
|
||||
<Button palette="secondary" onClick={handleAdd}>
|
||||
Add Bot
|
||||
</Button>
|
||||
</div>
|
||||
</Option>
|
||||
</>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Reference in New Issue