From b17aaf63e4618e6bbf3753ca118adb0a9d8fcf2b Mon Sep 17 00:00:00 2001
From: Hassan Khan <h@twodoors.dev>
Date: Sun, 13 Oct 2024 17:21:10 +0100
Subject: [PATCH] fix(apps/mobile): disable interactions while mutations are in
 progress

---
 apps/mobile/src/features/CatCard/DeleteButton.tsx      |  4 ++--
 apps/mobile/src/features/CatCard/DownvoteButton.tsx    |  4 ++--
 apps/mobile/src/features/CatCard/FavouriteButton.tsx   | 10 ++++++++--
 apps/mobile/src/features/CatCard/UpvoteButton.tsx      |  4 ++--
 .../features/UploadImageModal/ImageSourceButton.tsx    |  3 ++-
 5 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/apps/mobile/src/features/CatCard/DeleteButton.tsx b/apps/mobile/src/features/CatCard/DeleteButton.tsx
index b987bc5..add8bd0 100644
--- a/apps/mobile/src/features/CatCard/DeleteButton.tsx
+++ b/apps/mobile/src/features/CatCard/DeleteButton.tsx
@@ -5,8 +5,7 @@ import { useDeleteImageMutation } from '../../store/services/CatApi';
 import { CardProps } from './shared';
 
 export const DeleteButton = ({ item }: CardProps) => {
-  const [deleteMutationFn, { isLoading, data, error }] =
-    useDeleteImageMutation();
+  const [deleteMutationFn, { isLoading }] = useDeleteImageMutation();
 
   const handleDelete = useCallback(() => {
     Alert.alert('Delete', 'Are you sure you want to delete this image?', [
@@ -24,6 +23,7 @@ export const DeleteButton = ({ item }: CardProps) => {
   return (
     <IconButton
       rounded
+      disabled={isLoading}
       iconProps={{ name: 'trash', size: 24, color: 'black' }}
       onPress={handleDelete}
     />
diff --git a/apps/mobile/src/features/CatCard/DownvoteButton.tsx b/apps/mobile/src/features/CatCard/DownvoteButton.tsx
index 56eab52..2b36bb5 100644
--- a/apps/mobile/src/features/CatCard/DownvoteButton.tsx
+++ b/apps/mobile/src/features/CatCard/DownvoteButton.tsx
@@ -4,14 +4,14 @@ import { useDownvoteImageMutation } from '../../store/services/CatApi';
 import { CardProps } from './shared';
 
 export const DownvoteButton = ({ item }: CardProps) => {
-  const [downvoteMutationFn, { data, error, isLoading }] =
-    useDownvoteImageMutation();
+  const [downvoteMutationFn, { isLoading }] = useDownvoteImageMutation();
 
   const handlePress = useCallback(() => {
     downvoteMutationFn(item.id);
   }, [item.id, downvoteMutationFn]);
   return (
     <IconButton
+      disabled={isLoading}
       iconProps={{ name: 'thumbsdown', size: 24, color: 'red' }}
       onPress={handlePress}
     />
diff --git a/apps/mobile/src/features/CatCard/FavouriteButton.tsx b/apps/mobile/src/features/CatCard/FavouriteButton.tsx
index 7a8a9a7..fa6671f 100644
--- a/apps/mobile/src/features/CatCard/FavouriteButton.tsx
+++ b/apps/mobile/src/features/CatCard/FavouriteButton.tsx
@@ -7,16 +7,22 @@ import {
 import { CardProps } from './shared';
 
 export const FavouriteButton = ({ item }: CardProps) => {
-  const [favouriteMutationFn] = useFavouriteImageMutation();
-  const [unfavouriteMutationFn] = useUnfavouriteImageMutation();
+  const [favouriteMutationFn, { isLoading: isFavouriteLoading }] =
+    useFavouriteImageMutation();
+  const [unfavouriteMutationFn, { isLoading: isUnfavouriteLoading }] =
+    useUnfavouriteImageMutation();
   const handleFavourite = useCallback(() => {
     item.favourite
       ? unfavouriteMutationFn(item.favourite.id)
       : favouriteMutationFn(item.id);
   }, [favouriteMutationFn, item, unfavouriteMutationFn]);
+
+  const isLoading = isFavouriteLoading || isUnfavouriteLoading;
+
   return (
     <IconButton
       rounded
+      disabled={isLoading}
       iconProps={{
         name: item.favourite ? 'heart-fill' : 'heart',
         size: 24,
diff --git a/apps/mobile/src/features/CatCard/UpvoteButton.tsx b/apps/mobile/src/features/CatCard/UpvoteButton.tsx
index fad6615..3464810 100644
--- a/apps/mobile/src/features/CatCard/UpvoteButton.tsx
+++ b/apps/mobile/src/features/CatCard/UpvoteButton.tsx
@@ -4,8 +4,7 @@ import { useUpvoteImageMutation } from '../../store/services/CatApi';
 import { CardProps } from './shared';
 
 export const UpvoteButton = ({ item }: CardProps) => {
-  const [upvoteMutationFn, { data, error, isLoading }] =
-    useUpvoteImageMutation();
+  const [upvoteMutationFn, { isLoading }] = useUpvoteImageMutation();
 
   const handlePress = useCallback(() => {
     upvoteMutationFn(item.id);
@@ -13,6 +12,7 @@ export const UpvoteButton = ({ item }: CardProps) => {
 
   return (
     <IconButton
+      disabled={isLoading}
       iconProps={{ name: 'thumbsup', size: 24, color: 'green' }}
       onPress={handlePress}
     />
diff --git a/apps/mobile/src/features/UploadImageModal/ImageSourceButton.tsx b/apps/mobile/src/features/UploadImageModal/ImageSourceButton.tsx
index 30a079e..4bea82c 100644
--- a/apps/mobile/src/features/UploadImageModal/ImageSourceButton.tsx
+++ b/apps/mobile/src/features/UploadImageModal/ImageSourceButton.tsx
@@ -14,7 +14,7 @@ const upperCaseFirstLetter = (str: string) =>
 
 export const ImageSourceButton = ({ source }: InteractiveImageSourceProps) => {
   const dispatch = useAppDispatch();
-  const [uploadImageFn, { isLoading: isUpdating }] = useUploadImageMutation();
+  const [uploadImageFn, { isLoading }] = useUploadImageMutation();
 
   const thunk =
     source === 'camera' ? launchNativeCamera : launchNativePhotoPicker;
@@ -46,6 +46,7 @@ export const ImageSourceButton = ({ source }: InteractiveImageSourceProps) => {
 
   return (
     <ImageSource
+      disabled={isLoading}
       icon={icon}
       label={upperCaseFirstLetter(source)}
       onPress={handleSelectAndUpload}