fix guild settings

AdaptChat · Jul 13, 2024 · f367b21 · f367b21
1 parent 3a5c933
commit f367b21
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 20 deletions.
diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
@@ -74,12 +74,10 @@ export type ModalContext = {
 export const ModalContext = createContext<ModalContext>()
 export const useModal = () => useContext(ModalContext) ?? {} as ModalContext
 
-export default function ModalContainer(
-  { isShowing, hide, children }: ParentProps<{ isShowing: Accessor<boolean>, hide: () => void }>
-) {
+export default function ModalContainer(props: ParentProps<{ isShowing: Accessor<boolean>, hide: () => void }>) {
   const [invisible, setInvisible] = createSignal(true)
   createEffect(() => {
-    if (isShowing()) setInvisible(false)
+    if (props.isShowing()) setInvisible(false)
     else setTimeout(() => setInvisible(true), 200)
   })
 
@@ -91,27 +89,27 @@ export default function ModalContainer(
             "flex absolute items-center justify-center bg-black/50 backdrop-blur w-full h-full inset-0"
             + " transition-all duration-200 font-sans text-fg"
           ]: true,
-          "opacity-0 z-[-90]": !isShowing(),
-          "opacity-100 z-[9999]": isShowing(),
+          "opacity-0 z-[-90]": !props.isShowing(),
+          "opacity-100 z-[9999]": props.isShowing(),
           "invisible": invisible(),
           "visible": !invisible(),
         }}
-        onClick={(event) => event.currentTarget == event.target && hide()}
+        onClick={(event) => event.currentTarget == event.target && props.hide()}
       >
         <div classList={{
           "relative bg-2 p-6 rounded-lg max-w-xl transition-all duration-200 mx-2": true,
-          "scale-50": !isShowing(),
-          "scale-100": isShowing(),
+          "scale-50": !props.isShowing(),
+          "scale-100": props.isShowing(),
         }}>
           <button>
             <Icon
               icon={Xmark}
               title="Close Modal"
               class="w-5 h-5 fill-fg absolute right-4 top-4 select-none opacity-50 hover:opacity-100 transition-all duration-200"
-              onClick={() => hide()}
+              onClick={() => props.hide()}
             />
           </button>
-          {children}
+          {props.children}
         </div>
       </div>
     </Portal>

diff --git a/src/pages/guilds/settings/GuildSettings.tsx b/src/pages/guilds/settings/GuildSettings.tsx
@@ -1,15 +1,14 @@
 import SidebarButton from "../../../components/ui/SidebarButton";
 import {generateSettingsComponents, SettingsSection} 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 GuildIcon from "../../../components/guilds/GuildIcon";
 import CircleInfo from "../../../components/icons/svg/CircleInfo";
 import UserTag from "../../../components/icons/svg/UserTag";
 import Envelope from "../../../components/icons/svg/Envelope";
-import Modal from "../../../components/ui/Modal";
-import ConfirmGuildDeleteModal from "../../../components/guilds/ConfirmGuildDeleteModal";
+import {ModalId, useModal} from "../../../components/ui/Modal";
 import FaceSmile from "../../../components/icons/svg/FaceSmile";
 
 function GuildSettingsSidebar() {
@@ -20,14 +19,10 @@ function GuildSettingsSidebar() {
   const guild = createMemo(() => api.cache!.guilds.get(guildId())!)
   const perms = createMemo(() => api.cache!.getClientPermissions(guildId()))
   const root = createMemo(() => `/guilds/${guildId()}/settings`)
-
-  const [confirmGuildDeleteModal, setConfirmGuildDeleteModal] = createSignal(false)
+  const {showModal} = useModal()
 
   return (
     <>
-      <Modal get={confirmGuildDeleteModal} set={setConfirmGuildDeleteModal}>
-        <ConfirmGuildDeleteModal guild={guild()} setConfirmGuildLeaveModal={setConfirmGuildDeleteModal} />
-      </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">
         <GuildIcon guild={guild()} sizeClass="w-8 h-8 mobile:w-7 mobile:h-7 text-xs" unread={false} pings={0} />
         <span class="font-title">{guild().name}</span>
@@ -59,7 +54,7 @@ function GuildSettingsSidebar() {
           large
           svg={Trash}
           danger
-          onClick={() => setConfirmGuildDeleteModal(true)}
+          onClick={() => showModal(ModalId.DeleteGuild, guild())}
         >
           Delete Server
         </SidebarButton>