fix bot modals

AdaptChat · Jul 13, 2024 · 23b7781 · 23b7781
1 parent 5c78b70
commit 23b7781
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 20 deletions.
diff --git a/src/components/settings/CreateBotModal.tsx b/src/components/settings/CreateBotModal.tsx
@@ -1,4 +1,4 @@
-import {ModalTemplate} from "../ui/Modal";
+import {ModalTemplate, useModal} from "../ui/Modal";
 import Icon from "../icons/Icon";
 import RocketLaunch from "../icons/svg/RocketLaunch";
 import {createEffect, createSignal, Setter} from "solid-js";
@@ -8,7 +8,6 @@ import {useNavigate} from "@solidjs/router";
 
 export default function CreateBotModal(props: {
   setBots: Setter<Bot[] | null>,
-  setShow: Setter<boolean>,
 }) {
   const api = getApi()!
   const navigate = useNavigate()
@@ -24,6 +23,8 @@ export default function CreateBotModal(props: {
   const [focused, setFocused] = createSignal(false)
   const [submitting, setSubmitting] = createSignal(false)
 
+  const {hideModal} = useModal()
+
   const createBot = async (e: SubmitEvent) => {
     e.preventDefault()
 
@@ -37,7 +38,7 @@ export default function CreateBotModal(props: {
 
     const data = response.jsonOrThrow() as Bot & { token: string }
     props.setBots(bots => bots ? [...bots, data] : [data])
-    props.setShow(false)
+    hideModal()
     navigate(`/settings/bots/${data.user.id}`, { state: { token: data.token } })
   }
 

diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
@@ -4,7 +4,7 @@ import {
   createEffect,
   createSignal,
   Match,
-  ParentProps,
+  ParentProps, Setter,
   Switch,
   useContext
 } from "solid-js";
@@ -24,6 +24,8 @@ import CreateRoleModal from "../guilds/CreateRoleModal";
 import ConfirmRoleDeleteModal from "../guilds/ConfirmRoleDeleteModal";
 import AddFriendModal from "../friends/AddFriendModal";
 import SetPresence from "../users/SetPresenceModal";
+import CreateBotModal from "../settings/CreateBotModal";
+import {Bot} from "../../types/user";
 
 export enum ModalId {
   NewGuild,
@@ -37,6 +39,7 @@ export enum ModalId {
   DeleteRole,
   AddFriend,
   UpdatePresence,
+  CreateBot,
 }
 
 type ModalMapping = {
@@ -51,6 +54,7 @@ type ModalMapping = {
   [ModalId.DeleteRole]: Role,
   [ModalId.AddFriend]: undefined,
   [ModalId.UpdatePresence]: undefined,
+  [ModalId.CreateBot]: Setter<Bot[] | null>,
 }
 
 type ModalDataPair = {
@@ -167,6 +171,9 @@ export function ModalProvider(props: ParentProps) {
           <Match when={context.id === ModalId.UpdatePresence}>
             <SetPresence />
           </Match>
+          <Match when={context.id === ModalId.CreateBot}>
+            <CreateBotModal setBots={context.data as Setter<Bot[] | null>} />
+          </Match>
         </Switch>
       </ModalContainer>
     </ModalContext.Provider>

diff --git a/src/pages/channels/settings/GuildChannelSettings.tsx b/src/pages/channels/settings/GuildChannelSettings.tsx
@@ -1,14 +1,13 @@
 import SidebarButton from "../../../components/ui/SidebarButton";
 import {generateSettingsComponents} from "../../settings/SettingsLayout";
-import {createMemo, createSignal, Show} from "solid-js";
+import {createMemo, Show} from "solid-js";
 import {useParams} from "@solidjs/router";
 import {getApi} from "../../../api/Api";
 import Trash from "../../../components/icons/svg/Trash";
 import CircleInfo from "../../../components/icons/svg/CircleInfo";
 import UserTag from "../../../components/icons/svg/UserTag";
-import Modal from "../../../components/ui/Modal";
-import ConfirmChannelDeleteModal from "../../../components/channels/ConfirmChannelDeleteModal";
 import {GuildChannel} from "../../../types/channel";
+import {ModalId, useModal} from "../../../components/ui/Modal";
 
 function GuildChannelSettingsSidebar() {
   const params = useParams()
@@ -22,13 +21,10 @@ function GuildChannelSettingsSidebar() {
   const perms = createMemo(() => api.cache!.getClientPermissions(guildId(), channelId()))
   const hasModifyChannels = () => perms().has('MODIFY_CHANNELS')
 
-  const [confirmDelete, setConfirmDelete] = createSignal(false)
+  const {showModal} = useModal()
 
   return (
     <>
-      <Modal get={confirmDelete} set={setConfirmDelete}>
-        <ConfirmChannelDeleteModal channel={channel()} setConfirmChannelDeleteModal={setConfirmDelete} />
-      </Modal>
       <div class="flex px-1 py-2 text-fg/50 mobile:text-sm mobile:px-1 mobile:pt-0 items-center gap-x-1">
         <span class="font-title">Channel: {channel().name}</span>
       </div>
@@ -51,7 +47,7 @@ function GuildChannelSettingsSidebar() {
           large
           svg={Trash}
           danger
-          onClick={() => setConfirmDelete(true)}
+          onClick={() => showModal(ModalId.DeleteChannel, channel())}
         >
           Delete Channel
         </SidebarButton>

diff --git a/src/pages/settings/Bots.tsx b/src/pages/settings/Bots.tsx
@@ -11,8 +11,7 @@ import Fuse from "fuse.js";
 import Xmark from "../../components/icons/svg/Xmark";
 import Plus from "../../components/icons/svg/Plus";
 import Robot from "../../components/icons/svg/Robot";
-import Modal from "../../components/ui/Modal";
-import CreateBotModal from "../../components/settings/CreateBotModal";
+import {ModalId, useModal} from "../../components/ui/Modal";
 import {displayName} from "../../utils";
 import {A} from "@solidjs/router";
 import {defaultAvatar} from "../../api/ApiCache";
@@ -56,14 +55,12 @@ export default function Bots() {
     : bots()
   )
 
-  const [showCreateBotModal, setShowCreateBotModal] = createSignal(false)
+  const {showModal} = useModal()
+  const showCreateBotModal = () => showModal(ModalId.CreateBot, setBots)
 
   return (
     <div class="p-4">
       <Header>Bots</Header>
-      <Modal get={showCreateBotModal} set={setShowCreateBotModal}>
-        <CreateBotModal setBots={setBots} setShow={setShowCreateBotModal} />
-      </Modal>
       <p class="text-sm font-light text-fg/60">
         Bots are used to automate tasks and provide additional functionality throughout Adapt.
       </p>
@@ -101,7 +98,7 @@ export default function Bots() {
             />
           </Show>
         </div>
-        <button class="btn btn-primary btn-sm rounded-xl flex gap-x-1" onClick={() => setShowCreateBotModal(true)}>
+        <button class="btn btn-primary btn-sm rounded-xl flex gap-x-1" onClick={showCreateBotModal}>
           <Icon icon={Plus} class="w-4 h-4 fill-fg"/>
           <span>New Bot</span>
         </button>
@@ -122,7 +119,7 @@ export default function Bots() {
               <Show when={searchQuery()} fallback={
                 <>
                   No bots yet...
-                  <button class="btn btn-ghost btn-sm rounded-xl flex gap-x-1" onClick={() => setShowCreateBotModal(true)}>
+                  <button class="btn btn-ghost btn-sm rounded-xl flex gap-x-1" onClick={showCreateBotModal}>
                     <span>Create one?</span>
                   </button>
                 </>