fix(ui): close modal on create org

gistsapp · Oct 28, 2024 · 42731ff · 42731ff
1 parent 9c87649
commit 42731ff
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 8 deletions.
diff --git a/src/app/(gistLayout)/layout-ui.tsx b/src/app/(gistLayout)/layout-ui.tsx
@@ -26,6 +26,7 @@ export default function GistLayout({ avatar, children, username, onMyGists, onCr
   const [gistName, setGistName] = useState('')
   const [gistContent, setGistContent] = useState('')
   const [orgName, setOrgName] = useState('')
+  const [isOrgModalOpen, setIsOrgModalOpen] = useState(false)
 
   const language = getLanguage(gistName)
 
@@ -78,6 +79,8 @@ export default function GistLayout({ avatar, children, username, onMyGists, onCr
             My Gists
           </MenuButton>
           <Modal
+            open={isOrgModalOpen}
+            onOpenChange={setIsOrgModalOpen}
             trigger={
               <MenuButton icon={<PlusIcon />} variant="menu" size="menu" letter="T" className="w-full">
                 Create org
@@ -90,11 +93,19 @@ export default function GistLayout({ avatar, children, username, onMyGists, onCr
               </div>
             }
             footer={
-              <MenuButton variant="default" size="sm" onClick={() => onCreateOrg(orgName)} className="">
+              <MenuButton
+                variant="default"
+                size="sm"
+                onClick={() => {
+                  onCreateOrg(orgName)
+                  setOrgName('')
+                  setIsOrgModalOpen(false)
+                }}
+              >
                 Create
               </MenuButton>
             }
-          ></Modal>
+          />
         </div>
         <OrgListFeature />
       </div>

diff --git a/src/components/ui/modal.tsx b/src/components/ui/modal.tsx
@@ -1,18 +1,18 @@
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '../shadcn/dialog'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '../shadcn/dialog'
 
 interface ModalProps {
   trigger: React.ReactNode
   content: React.ReactNode
   footer: React.ReactNode
   title: string
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
 }
 
-export function Modal({ trigger, title, content, footer }: ModalProps) {
+export function Modal({ trigger, title, content, footer, open, onOpenChange }: ModalProps) {
   return (
-    <Dialog>
-      <DialogTrigger asChild>
-        {trigger}
-      </DialogTrigger>
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
       <DialogContent className="gap-0" aria-describedby={undefined}>
         <DialogHeader>
           <DialogTitle className="text-sm p-3">{title}</DialogTitle>