fix(apps/mobile): disable interactions while mutations are in progress

twodoorsdev · Oct 13, 2024 · b17aaf6 · b17aaf6
1 parent 2aa0da8
commit b17aaf6
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -4,15 +4,15 @@ 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);
   }, [item.id, upvoteMutationFn]);
 
   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
@@ -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}