feat(SPV-1005): added loading state, improved loading logic

bitcoin-sv · Sep 30, 2024 · 5114b65 · 5114b65
1 parent 2025b5d
commit 5114b65
Show file tree

Hide file tree

Showing 15 changed files with 245 additions and 118 deletions.
diff --git a/src/components/AddAccessKeyDialog/AddAccessKeyDialog.tsx b/src/components/AddAccessKeyDialog/AddAccessKeyDialog.tsx
@@ -1,11 +1,3 @@
-import { Metadata } from '@bsv/spv-wallet-js-client';
-import { QuestionMarkCircleIcon as Question } from '@heroicons/react/24/outline';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { CirclePlus } from 'lucide-react';
-import React, { useState } from 'react';
-
-import { toast } from 'sonner';
-
 import {
   Button,
   Dialog,
@@ -14,6 +6,7 @@ import {
   DialogTitle,
   DialogTrigger,
   Label,
+  LoadingSpinner,
   Textarea,
   Tooltip,
   TooltipContent,
@@ -23,6 +16,13 @@ import {
 import { useSpvWalletClient } from '@/contexts';
 
 import { errorWrapper } from '@/utils';
+import { Metadata } from '@bsv/spv-wallet-js-client';
+import { QuestionMarkCircleIcon as Question } from '@heroicons/react/24/outline';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { CirclePlus } from 'lucide-react';
+import React, { useState } from 'react';
+
+import { toast } from 'sonner';
 
 export interface AddAccessKeyDialogProps {
   className?: string;
@@ -69,6 +69,8 @@ export const AddAccessKeyDialog = ({ className }: AddAccessKeyDialogProps) => {
     }
   };
 
+  const { isPending } = mutation;
+
   return (
     <Dialog open={isAddDialogOpen} onOpenChange={handleDialogOpen}>
       <DialogTrigger asChild className={className}>
@@ -98,7 +100,9 @@ export const AddAccessKeyDialog = ({ className }: AddAccessKeyDialogProps) => {
 
         <Textarea placeholder="Metadata" id="metadata" value={metadata} onChange={handleMetadataChange} />
         <div className="grid grid-cols-2 gap-4">
-          <Button onClick={handleAdd}>Add</Button>
+          <Button onClick={handleAdd} disabled={isPending}>
+            Add {isPending && <LoadingSpinner className="ml-2" />}
+          </Button>
           <Button variant="ghost" onClick={handleDialogOpen}>
             Cancel
           </Button>

diff --git a/src/components/AddPaymailDialog/AddPaymailDialog.tsx b/src/components/AddPaymailDialog/AddPaymailDialog.tsx
@@ -1,10 +1,4 @@
-import { HD } from '@bsv/sdk';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { CirclePlus } from 'lucide-react';
-
-import React, { useState } from 'react';
-
-import { toast } from 'sonner';
+import { LoadingSpinner } from '@/components';
 
 import { Button } from '@/components/ui';
 import {
@@ -20,6 +14,13 @@ import { Input } from '@/components/ui/input.tsx';
 import { Label } from '@/components/ui/label.tsx';
 import { useSpvWalletClient } from '@/contexts';
 import { errorWrapper } from '@/utils';
+import { HD } from '@bsv/sdk';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { CirclePlus } from 'lucide-react';
+
+import React, { useState } from 'react';
+
+import { toast } from 'sonner';
 
 interface AddPaymailDialogProps {
   className?: string;
@@ -92,6 +93,8 @@ export const AddPaymailDialog = ({ className }: AddPaymailDialogProps) => {
       errorWrapper(error);
     }
   };
+
+  const { isPending } = mutation;
   return (
     <Dialog>
       <DialogTrigger asChild className={className}>
@@ -150,7 +153,9 @@ export const AddPaymailDialog = ({ className }: AddPaymailDialogProps) => {
           </div>
         </div>
         <DialogFooter>
-          <Button onClick={onSubmit}>Add Paymail</Button>
+          <Button onClick={onSubmit} disabled={isPending}>
+            Add Paymail {isPending && <LoadingSpinner className="ml-2" />}
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>

diff --git a/src/components/AddXpubDialog/AddXpubDialog.tsx b/src/components/AddXpubDialog/AddXpubDialog.tsx
@@ -1,3 +1,4 @@
+import { LoadingSpinner } from '@/components';
 import { Button } from '@/components/ui';
 import {
   Dialog,
@@ -147,6 +148,8 @@ export const AddXpubDialog = ({ className }: AddXpubDialogProps) => {
     }
   };
 
+  const { isPending } = mutation;
+
   return (
     <Dialog open={isOpen} onOpenChange={handeDialogToggle}>
       <DialogTrigger asChild className={className}>
@@ -203,7 +206,9 @@ export const AddXpubDialog = ({ className }: AddXpubDialogProps) => {
               name="xPub"
             />
             <DialogFooter className="mt-4">
-              <Button type="submit">Add xPub</Button>
+              <Button type="submit" disabled={isPending}>
+                Add xPub {isPending && <LoadingSpinner className="ml-2" />}
+              </Button>
             </DialogFooter>
           </form>
         </Form>

diff --git a/src/components/ContactAcceptDialog/ContactAcceptDialog.tsx b/src/components/ContactAcceptDialog/ContactAcceptDialog.tsx
@@ -1,9 +1,4 @@
-import { useQueryClient } from '@tanstack/react-query';
-import { Row } from '@tanstack/react-table';
-import { UserRoundCheck } from 'lucide-react';
-import { useState } from 'react';
-
-import { toast } from 'sonner';
+import { LoadingSpinner } from '@/components';
 
 import { Button } from '@/components/ui';
 import {
@@ -18,6 +13,12 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 import { useSpvWalletClient } from '@/contexts';
 import { errorWrapper } from '@/utils';
 import { Contact } from '@bsv/spv-wallet-js-client';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { Row } from '@tanstack/react-table';
+import { UserRoundCheck } from 'lucide-react';
+import { useState } from 'react';
+
+import { toast } from 'sonner';
 
 export interface ContactAcceptDialogProps {
   row: Row<Contact>;
@@ -30,21 +31,32 @@ export const ContactAcceptDialog = ({ row }: ContactAcceptDialogProps) => {
 
   const queryClient = useQueryClient();
 
-  const handleAcceptDialogOpen = () => {
-    setIsAcceptDialogOpen((prev) => !prev);
-  };
-
-  const handleAcceptContact = async () => {
-    try {
-      await spvWalletClient?.AdminAcceptContact(row.original.id);
+  const acceptContactMutation = useMutation({
+    mutationFn: async (id: string) => {
+      // At this point, spvWalletClient is defined; using non-null assertion.
+      return await spvWalletClient!.AdminAcceptContact(id);
+    },
+    onSuccess: async () => {
       await queryClient.invalidateQueries();
       setIsAcceptDialogOpen(false);
       toast.success('Contact accepted');
-    } catch (err) {
+    },
+    onError: (err) => {
       toast.error('Failed to accept contact');
       errorWrapper(err);
-    }
+    },
+  });
+
+  const handleAcceptDialogOpen = () => {
+    setIsAcceptDialogOpen((prev) => !prev);
   };
+
+  const handleAcceptContact = () => {
+    acceptContactMutation.mutate(row.original.id);
+  };
+
+  const { isPending } = acceptContactMutation;
+
   return (
     <Dialog open={isAcceptDialogOpen} onOpenChange={handleAcceptDialogOpen}>
       <DialogTrigger>
@@ -68,7 +80,9 @@ export const ContactAcceptDialog = ({ row }: ContactAcceptDialogProps) => {
           </DialogDescription>
         </DialogHeader>
         <div className="grid grid-cols-2 gap-4">
-          <Button onClick={handleAcceptContact}>Accept</Button>
+          <Button onClick={handleAcceptContact} disabled={isPending}>
+            Accept {isPending && <LoadingSpinner className="ml-2" />}
+          </Button>
           <Button variant="outline" onClick={handleAcceptDialogOpen}>
             Cancel
           </Button>

diff --git a/src/components/ContactDeleteDialog/ContactDeleteDialog.tsx b/src/components/ContactDeleteDialog/ContactDeleteDialog.tsx
@@ -1,8 +1,4 @@
-import { useQueryClient } from '@tanstack/react-query';
-import { Row } from '@tanstack/react-table';
-import { useState } from 'react';
-
-import { toast } from 'sonner';
+import { LoadingSpinner } from '@/components';
 
 import { Button } from '@/components/ui';
 import {
@@ -17,6 +13,11 @@ import { DropdownMenuItem } from '@/components/ui/dropdown-menu.tsx';
 import { useSpvWalletClient } from '@/contexts';
 import { errorWrapper } from '@/utils';
 import { Contact } from '@bsv/spv-wallet-js-client';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { Row } from '@tanstack/react-table';
+import { useState } from 'react';
+
+import { toast } from 'sonner';
 
 export interface ContactDeleteDialogProps {
   row: Row<Contact>;
@@ -32,19 +33,28 @@ export const ContactDeleteDialog = ({ row }: ContactDeleteDialogProps) => {
     setIsDeleteDialogOpen((prev) => !prev);
   };
 
-  const handleDelete = async () => {
-    try {
-      await spvWalletClient?.AdminDeleteContact(row.original.id);
+  const deleteMutation = useMutation({
+    mutationFn: async (id: string) => {
+      // At this point, spvWalletClient is defined; using non-null assertion.
+      return await spvWalletClient!.AdminDeleteContact(id);
+    },
+    onSuccess: async () => {
       await queryClient.invalidateQueries();
-
       toast.success('Contact deleted');
       setIsDeleteDialogOpen(false);
-    } catch (error) {
+    },
+    onError: (error) => {
       toast.error('Failed to delete contact');
       errorWrapper(error);
-    }
+    },
+  });
+
+  const handleDelete = () => {
+    deleteMutation.mutate(row.original.id);
   };
 
+  const { isPending } = deleteMutation;
+
   return (
     <Dialog open={isDeleteDialogOpen} onOpenChange={handleDeleteDialogOpen}>
       <DialogTrigger className="w-full">
@@ -56,8 +66,8 @@ export const ContactDeleteDialog = ({ row }: ContactDeleteDialogProps) => {
           <DialogDescription>This action cannot be undone. Please confirm your decision to proceed.</DialogDescription>
         </DialogHeader>
         <div className="grid grid-cols-2 gap-4">
-          <Button variant="destructive" onClick={handleDelete}>
-            Delete
+          <Button variant="destructive" onClick={handleDelete} disabled={isPending}>
+            Delete {isPending && <LoadingSpinner className="ml-2" />}
           </Button>
           <Button variant="ghost" onClick={handleDeleteDialogOpen}>
             Cancel

diff --git a/src/components/ContactEditDialog/ContactEditDialog.tsx b/src/components/ContactEditDialog/ContactEditDialog.tsx
@@ -1,10 +1,3 @@
-import { Contact, Metadata } from '@bsv/spv-wallet-js-client';
-import { useQueryClient } from '@tanstack/react-query';
-import { Row } from '@tanstack/react-table';
-import React, { useState } from 'react';
-
-import { toast } from 'sonner';
-
 import {
   Button,
   Dialog,
@@ -15,10 +8,17 @@ import {
   DropdownMenuItem,
   Input,
   Label,
+  LoadingSpinner,
   Textarea,
 } from '@/components';
 import { useSpvWalletClient } from '@/contexts';
 import { errorWrapper } from '@/utils';
+import { Contact, Metadata } from '@bsv/spv-wallet-js-client';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { Row } from '@tanstack/react-table';
+import React, { useState } from 'react';
+
+import { toast } from 'sonner';
 
 export interface ContactEditDialogProps {
   row: Row<Contact>;
@@ -36,19 +36,24 @@ export const ContactEditDialog = ({ row }: ContactEditDialogProps) => {
     setIsEditDialogOpen((prev) => !prev);
   };
 
-  const handleEdit = async () => {
-    try {
+  const editMutation = useMutation({
+    mutationFn: async ({ id, fullName, metadata }: { id: string; fullName: string; metadata: string }) => {
       const metadataParsed = JSON.parse(metadata) as Metadata;
-
-      await spvWalletClient?.AdminUpdateContact(row.original.id, fullName, metadataParsed);
+      return await spvWalletClient!.AdminUpdateContact(id, fullName, metadataParsed);
+    },
+    onSuccess: async () => {
       await queryClient.invalidateQueries();
-
       toast.success('Contact updated');
       setIsEditDialogOpen(false);
-    } catch (error) {
+    },
+    onError: (error) => {
       toast.error('Failed to update contact');
       errorWrapper(error);
-    }
+    },
+  });
+
+  const handleEdit = () => {
+    editMutation.mutate({ id: row.original.id, fullName, metadata });
   };
 
   const handleFullNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -59,6 +64,8 @@ export const ContactEditDialog = ({ row }: ContactEditDialogProps) => {
     setMetadata(e.target.value);
   };
 
+  const { isPending } = editMutation;
+
   return (
     <Dialog open={isEditDialogOpen} onOpenChange={handleEditDialogOpen}>
       <DialogTrigger className="w-full">
@@ -75,7 +82,9 @@ export const ContactEditDialog = ({ row }: ContactEditDialogProps) => {
         <Label htmlFor="metadata">Metadata</Label>
         <Textarea placeholder="Metadata" id="metadata" value={metadata} onChange={handleMetadataChange} />
         <div className="grid grid-cols-2 gap-4">
-          <Button onClick={handleEdit}>Edit</Button>
+          <Button onClick={handleEdit} disabled={isPending}>
+            Edit {isPending && <LoadingSpinner className="ml-2" />}
+          </Button>
           <Button variant="ghost" onClick={handleEditDialogOpen}>
             Cancel
           </Button>