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 { useParams } from "react-router-dom";
|
||||||
import { API } from "revolt.js";
|
import { API } from "revolt.js";
|
||||||
import styled from "styled-components/macro";
|
import styled from "styled-components/macro";
|
||||||
|
|
@ -11,21 +12,64 @@ import Markdown from "../../components/markdown/Markdown";
|
||||||
import { useClient } from "../../controllers/client/ClientController";
|
import { useClient } from "../../controllers/client/ClientController";
|
||||||
|
|
||||||
const BotInfo = styled.div`
|
const BotInfo = styled.div`
|
||||||
gap: 12px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
|
width: 100%;
|
||||||
|
margin: 20px 0;
|
||||||
|
border-radius: 10px;
|
||||||
|
|
||||||
h1,
|
.name {
|
||||||
p {
|
display: flex;
|
||||||
margin: 0;
|
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`
|
const Option = styled.div`
|
||||||
gap: 8px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-top: 4px;
|
flex-direction: column;
|
||||||
margin-bottom: 12px;
|
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() {
|
export default function InviteBot() {
|
||||||
|
|
@ -38,71 +82,113 @@ export default function InviteBot() {
|
||||||
// eslint-disable-next-line
|
// eslint-disable-next-line
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const [server, setServer] = useState("none");
|
const [server, setServer] = useState<string | undefined>(undefined);
|
||||||
const [group, setGroup] = useState("none");
|
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 (
|
return (
|
||||||
<div style={{ padding: "6em" }}>
|
<div
|
||||||
|
style={{
|
||||||
|
padding: "6em",
|
||||||
|
overflowY: "auto",
|
||||||
|
}}>
|
||||||
<Tip palette="warning">This section is under construction.</Tip>
|
<Tip palette="warning">This section is under construction.</Tip>
|
||||||
{typeof data === "undefined" && <Preloader type="spinner" />}
|
{typeof data === "undefined" && <Preloader type="spinner" />}
|
||||||
{data && (
|
{data && (
|
||||||
<>
|
<>
|
||||||
<BotInfo>
|
<BotInfo
|
||||||
<UserIcon size={64} attachment={data.avatar} />
|
style={{
|
||||||
|
padding: "16px",
|
||||||
|
}}>
|
||||||
<div className="name">
|
<div className="name">
|
||||||
|
<UserIcon size={64} attachment={data.avatar} />
|
||||||
<h1>{data.username}</h1>
|
<h1>{data.username}</h1>
|
||||||
{data.description && (
|
|
||||||
<Markdown content={data.description} />
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
{data.description && (
|
||||||
|
<div className="description">
|
||||||
|
<Markdown content={data.description} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</BotInfo>
|
</BotInfo>
|
||||||
<Category>Add to server</Category>
|
|
||||||
<Option>
|
<Option>
|
||||||
<ComboBox
|
<Category>
|
||||||
value={server}
|
Add this bot to your Revolt server, group
|
||||||
onChange={(e) => setServer(e.currentTarget.value)}>
|
</Category>
|
||||||
<option value="none">Select a server</option>
|
<div className="select-container">
|
||||||
{[...client.servers.values()]
|
<ComboBox
|
||||||
.filter((x) => x.havePermission("ManageServer"))
|
id="server-select"
|
||||||
.map((server) => (
|
value={selectedOption}
|
||||||
<option value={server._id} key={server._id}>
|
onChange={(e) =>
|
||||||
{server.name}
|
setSelectedOption(e.currentTarget.value)
|
||||||
</option>
|
}>
|
||||||
))}
|
<option value="">Select an option</option>
|
||||||
</ComboBox>
|
<option value="server">Server</option>
|
||||||
<Button
|
<option value="group">Group</option>
|
||||||
palette="secondary"
|
</ComboBox>
|
||||||
onClick={() =>
|
{selectedOption === "server" && (
|
||||||
server !== "none" &&
|
<div className="select-container">
|
||||||
client.bots.invite(data._id, { server })
|
<ComboBox
|
||||||
}>
|
id="server-select"
|
||||||
Add
|
value={server}
|
||||||
</Button>
|
onChange={(e) =>
|
||||||
</Option>
|
setServer(e.currentTarget.value)
|
||||||
<Category>Add to group</Category>
|
}>
|
||||||
<Option>
|
<option value="none">
|
||||||
<ComboBox
|
Select a server
|
||||||
value={group}
|
</option>
|
||||||
onChange={(e) => setGroup(e.currentTarget.value)}>
|
{[...client.servers.values()]
|
||||||
<option value="none">Select a group</option>
|
.filter((x) =>
|
||||||
{[...client.channels.values()]
|
x.havePermission(
|
||||||
.filter((x) => x.channel_type === "Group")
|
"ManageServer",
|
||||||
.map((channel) => (
|
),
|
||||||
<option
|
)
|
||||||
value={channel._id}
|
.map((server) => (
|
||||||
key={channel._id}>
|
<option
|
||||||
{channel.name}
|
value={server._id}
|
||||||
</option>
|
key={server._id}>
|
||||||
))}
|
{server.name}
|
||||||
</ComboBox>
|
</option>
|
||||||
<Button
|
))}
|
||||||
palette="secondary"
|
</ComboBox>
|
||||||
onClick={() =>
|
</div>
|
||||||
group !== "none" &&
|
)}
|
||||||
client.bots.invite(data._id, { group })
|
{selectedOption === "group" && (
|
||||||
}>
|
<div className="select-container">
|
||||||
Add
|
<ComboBox
|
||||||
</Button>
|
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>
|
</Option>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue