chore: improve app mutations so that we don't have to wait for the we…

…bsocket message
bnussman · Oct 26, 2024 · fa01b81 · fa01b81
1 parent 3d19303
commit fa01b81
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 55 deletions.
diff --git a/app/components/ActionButton.tsx b/app/components/ActionButton.tsx
@@ -1,8 +1,6 @@
-import React, { useState } from "react";
+import React from "react";
 import { Button } from "@/components/Button";
-import { useEffect } from "react";
 import { RouterOutput, trpc } from "@/utils/trpc";
-import { TRPCClientError } from "@trpc/client";
 
 type Status = RouterOutput['beeper']['queue'][number]['status'];
 
@@ -25,9 +23,15 @@ interface Props {
 
 export function ActionButton(props: Props) {
   const { beep } = props;
-  const [isLoading, setIsLoading] = useState(false);
-  const { mutateAsync: update } = trpc.beeper.updateBeep.useMutation();
   const utils = trpc.useUtils();
+  const { mutate, isPending } = trpc.beeper.updateBeep.useMutation({
+    onSuccess(data) {
+      utils.beeper.queue.setData(undefined, data);
+    },
+    onError(error) {
+      alert(error.message);
+    }
+  });
 
   const getMessage = () => {
     switch (beep.status) {
@@ -46,27 +50,17 @@ export function ActionButton(props: Props) {
     }
   };
 
-  useEffect(() => {
-    setIsLoading(false);
-  }, [beep]);
-
   const onPress = () => {
-    setIsLoading(true);
-    update({
-        beepId: beep.id,
-        data: {
-          status: nextStatusMap[beep.status as InProgressStatuses],
-        }
-    }).then((data) => {
-      utils.beeper.queue.setData(undefined, data);
-    }).catch((error: TRPCClientError<any>) => {
-      setIsLoading(false);
-      alert(error.message);
-    });
+    mutate({
+      beepId: beep.id,
+      data: {
+        status: nextStatusMap[beep.status as InProgressStatuses],
+      }
+    })
   };
 
   return (
-    <Button isLoading={isLoading} onPress={onPress} size="lg">
+    <Button isLoading={isPending} onPress={onPress} size="lg">
       {getMessage()}
     </Button>
   );

diff --git a/app/components/CancelButton.tsx b/app/components/CancelButton.tsx
@@ -1,7 +1,6 @@
-import React, { useState } from "react";
-import { isMobile, Unpacked } from "../utils/constants";
+import React from "react";
+import { isMobile } from "../utils/constants";
 import { Button } from "@/components/Button";
-import { useEffect } from "react";
 import { Alert } from "react-native";
 import { RouterOutput, trpc } from "@/utils/trpc";
 import { TRPCClientError } from "@trpc/client";
@@ -11,12 +10,15 @@ interface Props {
 }
 
 export function CancelButton({ beep }: Props) {
-  const [isLoading, setIsLoading] = useState(false);
-  const { mutateAsync: cancel } = trpc.beeper.updateBeep.useMutation();
-
-  useEffect(() => {
-    setIsLoading(false);
-  }, [beep]);
+  const utils = trpc.useUtils();
+  const { mutate: cancel, isPending } = trpc.beeper.updateBeep.useMutation({
+    onSuccess(data) {
+      utils.beeper.queue.setData(undefined, data);
+    },
+    onError(error) {
+      alert(error.message);
+    }
+  });
 
   const onPress = () => {
     if (isMobile) {
@@ -26,9 +28,6 @@ export function CancelButton({ beep }: Props) {
         [
           {
             text: "No",
-            onPress: () => {
-              setIsLoading(false);
-            },
             style: "cancel",
           },
           {
@@ -44,16 +43,12 @@ export function CancelButton({ beep }: Props) {
   };
 
   const onCancel = () => {
-    setIsLoading(true);
-    cancel({ beepId: beep.id, data: { status: "canceled" } }).catch((error: TRPCClientError<any>) => {
-      setIsLoading(false);
-      alert(error.message);
-    });
+    cancel({ beepId: beep.id, data: { status: "canceled" } });
   };
 
   return (
     <Button
-      isLoading={isLoading}
+      isLoading={isPending}
       onPress={onPress}
       className="text-white bg-red-400 dark:bg-red-400 dark:active:bg-red-500 active:bg-red-500"
     >

diff --git a/app/routes/ride/LeaveButton.tsx b/app/routes/ride/LeaveButton.tsx
@@ -9,9 +9,16 @@ interface Props {
 }
 
 export function LeaveButton(props: Props) {
-  const { beepersId, ...rest } = props;
-  const { mutateAsync: leave } = trpc.rider.leaveQueue.useMutation();
-  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const { beepersId } = props;
+  const utils = trpc.useUtils();
+  const { mutate, isPending } = trpc.rider.leaveQueue.useMutation({
+    onSuccess() {
+      utils.rider.currentRide.setData(undefined, null);
+    },
+    onError(error) {
+      alert(error.message);
+    }
+  });
 
   function leaveQueueWrapper(): void {
     if (isMobile) {
@@ -23,30 +30,21 @@ export function LeaveButton(props: Props) {
             text: "No",
             style: "cancel",
           },
-          { text: "Yes", onPress: () => leaveQueue() },
+          { text: "Yes", onPress: () => mutate({ beeperId: beepersId }) },
         ],
         { cancelable: true },
       );
     } else {
-      leaveQueue();
+      mutate({ beeperId: beepersId });
     }
   }
 
-  async function leaveQueue(): Promise<void> {
-    setIsLoading(true);
-    leave({ beeperId: beepersId }).catch((error) => {
-      alert(error.message);
-      setIsLoading(false);
-    });
-  }
-
   return (
     <Button
-      isLoading={isLoading}
+      isLoading={isPending}
       onPress={() => leaveQueueWrapper()}
       activityIndicatorProps={{ color: "white" }}
       className="min-w-48 !text-white !bg-red-400 active:!bg-red-500"
-      {...rest}
     >
       Leave Queue
     </Button>