feat: close contact modal and reset form on success (#8)

AmbossTech · Jul 4, 2024 · 0993db1 · 0993db1
1 parent b351f73
commit 0993db1
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/src/views/contacts/AddContact.tsx b/src/views/contacts/AddContact.tsx
@@ -2,7 +2,7 @@
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Loader2 } from 'lucide-react';
-import { FC } from 'react';
+import { Dispatch, FC, SetStateAction } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -35,7 +35,10 @@ const formSchema = z.object({
   // .email('This is not a valid email.'),
 });
 
-export const AddContact: FC<{ walletId: string }> = ({ walletId }) => {
+export const AddContact: FC<{
+  walletId: string;
+  setOpenDialog: Dispatch<SetStateAction<boolean>>;
+}> = ({ walletId, setOpenDialog }) => {
   const { toast } = useToast();
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -47,11 +50,13 @@ export const AddContact: FC<{ walletId: string }> = ({ walletId }) => {
 
   const [create, { loading }] = useCreateContactMutation({
     onCompleted: () => {
+      setOpenDialog(false);
       toast({
         variant: 'default',
         title: 'Contact Added',
         description: 'New contact has been added successfully',
       });
+      form.reset();
     },
     onError: err => {
       const messages = handleApolloError(err);

diff --git a/src/views/contacts/Contacts.tsx b/src/views/contacts/Contacts.tsx
@@ -64,7 +64,8 @@ const ContactCard: FC<{ contact: ContactType; cbk?: () => void }> = ({
 };
 
 export const Contacts = () => {
-  const [open, setOpen] = useState(false);
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [openDialog, setOpenDialog] = useState(false);
 
   const currentContact = useContactStore(s => s.currentContact);
   const setContact = useContactStore(s => s.setCurrentContact);
@@ -95,7 +96,7 @@ export const Contacts = () => {
         <div className="flex w-full items-center justify-between">
           <h1 className="text-sm font-semibold md:text-lg">Contacts</h1>
           <div className="flex gap-2">
-            <Drawer open={open} onOpenChange={setOpen}>
+            <Drawer open={openDrawer} onOpenChange={setOpenDrawer}>
               <DrawerTrigger asChild className="flex md:hidden">
                 <Button size={'icon'} variant={'outline'}>
                   <User className="size-4" />
@@ -112,7 +113,7 @@ export const Contacts = () => {
                       <ContactCard
                         key={c.id}
                         contact={c}
-                        cbk={() => setOpen(p => !p)}
+                        cbk={() => setOpenDrawer(p => !p)}
                       />
                     ))
                   ) : (
@@ -131,13 +132,13 @@ export const Contacts = () => {
               </DrawerContent>
             </Drawer>
 
-            <Dialog>
+            <Dialog open={openDialog} onOpenChange={setOpenDialog}>
               <DialogTrigger asChild>
                 <Button size={'icon'} variant={'outline'}>
                   <Plus className="size-4" />
                 </Button>
               </DialogTrigger>
-              <AddContact walletId={value} />
+              <AddContact walletId={value} setOpenDialog={setOpenDialog} />
             </Dialog>
           </div>
         </div>