Add cancel function to useResendMessage hook

.changeset/cool-ducks-march.md

@@ -0,0 +1,5 @@
+---
+"@xmtp/react-sdk": minor
+---
+
+Add `cancel` function to `useResendMessage` hook, rename `resendMessage` to `resend`.

packages/react-sdk/src/hooks/useMessage.ts

@@ -8,6 +8,7 @@ import {
   updateMessageAfterSending as _updateMessageAfterSending,
   prepareMessageForSending,
   getMessageByXmtpID as _getMessageByXmtpID,
+  deleteMessage as _deleteMessage,
 } from "@/helpers/caching/messages";
 import type {
   CachedMessage,
@@ -74,6 +75,11 @@ export const useMessage = () => {
     RemoveLastParameter<typeof _getMessageByXmtpID>
   >(async (xmtpID) => _getMessageByXmtpID(xmtpID, db), [db]);
 
+  const deleteMessage = useCallback<RemoveLastParameter<typeof _deleteMessage>>(
+    async (message) => _deleteMessage(message, db),
+    [db],
+  );
+
   /**
    * Send a message to a conversation on the XMTP network
    *
@@ -210,6 +216,7 @@ export const useMessage = () => {
   );
 
   return {
+    deleteMessage,
     getMessageByXmtpID,
     processMessage,
     resendMessage,

packages/react-sdk/src/hooks/useResendMessage.ts

@@ -4,23 +4,23 @@ import type { UseSendMessageOptions } from "@/hooks/useSendMessage";
 import type { CachedMessageWithId } from "@/helpers/caching/messages";
 
 /**
- * This hook resends a cached message that previously failed to send.
+ * This hook can be used to resend a previously failed message, or cancel it.
  */
 export const useResendMessage = (options?: UseSendMessageOptions) => {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
-  const { resendMessage: _resendMessage } = useMessage();
+  const { resendMessage, deleteMessage } = useMessage();
 
   // destructure options for more granular dependency array
   const { onError, onSuccess } = options ?? {};
 
-  const resendMessage = useCallback(
+  const resend = useCallback(
     async (message: CachedMessageWithId) => {
       setIsLoading(true);
       setError(null);
 
       try {
-        const sentMessage = await _resendMessage(message);
+        const sentMessage = await resendMessage(message);
         onSuccess?.(sentMessage);
         return sentMessage;
       } catch (e) {
@@ -32,12 +32,27 @@ export const useResendMessage = (options?: UseSendMessageOptions) => {
         setIsLoading(false);
       }
     },
-    [_resendMessage, onError, onSuccess],
+    [resendMessage, onError, onSuccess],
+  );
+
+  const cancel = useCallback(
+    async (message: CachedMessageWithId) => {
+      try {
+        await deleteMessage(message);
+      } catch (e) {
+        setError(e as Error);
+        onError?.(e as Error);
+        // re-throw error for upstream consumption
+        throw e;
+      }
+    },
+    [deleteMessage, onError],
   );
 
   return {
+    cancel,
     error,
     isLoading,
-    resendMessage,
+    resend,
   };
 };