From 06c229e43d4062b93c7e2f71aaaadffa4146647e Mon Sep 17 00:00:00 2001
From: NoLogicAlan <88591830+NoLogicAlan@users.noreply.github.com>
Date: Sat, 25 Feb 2023 23:47:49 +0300
Subject: [PATCH] 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.
---
 src/pages/invite/InviteBot.tsx | 208 +++++++++++++++++++++++----------
 1 file changed, 147 insertions(+), 61 deletions(-)

diff --git a/src/pages/invite/InviteBot.tsx b/src/pages/invite/InviteBot.tsx
index 8711d4fd..1b337910 100644
--- a/src/pages/invite/InviteBot.tsx
+++ b/src/pages/invite/InviteBot.tsx
@@ -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>
                 </>
             )}