chore: move from useState.disabled to useMutation.loading

JSConfCL · Nov 5, 2024 · 9ba3aa1 · 9ba3aa1
1 parent 773eb50
commit 9ba3aa1
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 17 deletions.
diff --git a/app/components/MyEvent/TransferTicketDialog.tsx b/app/components/MyEvent/TransferTicketDialog.tsx
@@ -1,6 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { AlertCircle } from "lucide-react";
-import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -50,8 +49,8 @@ export const TransferTicketDialog = ({
   onOpenChange: (open: boolean) => void;
   ticketId: string;
 }) => {
-  const [transferTicket] = useTransferTicketMutation();
-  const [isDisabled, setIsDisabled] = useState(false);
+  const [transferTicket, { loading: tranferTicketLoading }] =
+    useTransferTicketMutation();
   const form = useForm<z.infer<typeof StartTransferTicketSchema>>({
     resolver: zodResolver(StartTransferTicketSchema),
     defaultValues: {
@@ -64,7 +63,6 @@ export const TransferTicketDialog = ({
     name,
     message,
   }: z.infer<typeof StartTransferTicketSchema>) => {
-    setIsDisabled(true);
     await transferTicket({
       variables: {
         ticketId,
@@ -77,21 +75,18 @@ export const TransferTicketDialog = ({
       onCompleted(data) {
         // Redirect to payment page
         if (data.transferMyTicketToUser?.id) {
-          setIsDisabled(false);
           toast.success(
             `La transferenciaha se ha hecho exitosamente. Hemos notificado al ${email}. Ahora, ${name} tiene 7 días para aceptar la transferencia o será revertida.`,
           );
           form.reset();
           onOpenChange(false);
         } else {
-          setIsDisabled(false);
           toast.error(
             "Ocurrió un error al intentar transferir el ticket. Por favor intenta de nuevo.",
           );
         }
       },
       onError() {
-        setIsDisabled(false);
         toast.error(
           "Ocurrió un error al intentar transferir el ticket. Por favor intenta de nuevo.",
         );
@@ -175,7 +170,7 @@ export const TransferTicketDialog = ({
             </Button>
           </AlertDialogCancel>
           <Button
-            disabled={isDisabled}
+            disabled={tranferTicketLoading}
             className={cn(
               "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
             )}

diff --git a/app/components/MyEvents/MyTicketsList.tsx b/app/components/MyEvents/MyTicketsList.tsx
@@ -1,6 +1,6 @@
 import { Link } from "@remix-run/react";
 import { Bell, Calendar, MapPin } from "lucide-react";
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import { toast } from "sonner";
 
 import { TicketTransferAttemptStatus } from "~/api/gql/graphql";
@@ -107,8 +107,8 @@ export const MyTicketsList = ({
   });
   const { data: receivedTransfersData, refetch: refetchReceivedTransfers } =
     useMyReceivedTransfersSuspenseQuery();
-  const [acceptTicket] = useAcceptTransferredTicketMutation();
-  const [isDisabled, setIsDisabled] = useState(false);
+  const [acceptTicket, { loading: acceptTicketLoading }] =
+    useAcceptTransferredTicketMutation();
 
   const { groupedByDate, orderedDates } = useMemo(() => {
     const groupedByDate = data.searchEvents.data.reduce(
@@ -160,29 +160,24 @@ export const MyTicketsList = ({
   const ticketTransfer = myTicketTransfers?.[0];
 
   const handleAcceptTransfer = async () => {
-    setIsDisabled(true);
-
     await acceptTicket({
       variables: {
         transferId: ticketTransfer.id,
       },
       onCompleted(data) {
         if (data.acceptTransferredTicket.id) {
-          setIsDisabled(false);
           toast.success(
             `La transferenciaha se ha confirmado exitosamente. Hemos notificado al ${ticketTransfer.sender.email}.`,
           );
           void refetchReceivedTransfers();
           void refetchMyEvents();
         } else {
-          setIsDisabled(false);
           toast.error(
             "Ocurrió un error al intentar confirmar la transferencia. Por favor intenta de nuevo.",
           );
         }
       },
       onError() {
-        setIsDisabled(false);
         toast.error(
           "Ocurrió un error al intentar confirmar la transferencia. Por favor intenta de nuevo.",
         );
@@ -213,7 +208,7 @@ export const MyTicketsList = ({
                 onClick={() => {
                   void handleAcceptTransfer();
                 }}
-                disabled={isDisabled}
+                disabled={acceptTicketLoading}
               >
                 Aceptar Transferencia
               </Button>