feat(apps/mobile): track when an image is being uploaded

apps/mobile/src/app/index.tsx

@@ -7,6 +7,8 @@ import { UploadButton } from '../components/UploadButton';
 import { ImageList } from '../features/HomePage/ImageList';
 import { NoImagesFound } from '../features/HomePage/NoImagesFound';
 import { UploadImageSheet } from '../features/UploadImageModal/UploadImageSheet';
+import { useAppSelector } from '../store/overrides';
+import { getIsImageUploading } from '../store/selectors/getIsImageUploading';
 import {
   useGetMyFavouritesQuery,
   useGetMyImagesQuery,
@@ -24,6 +26,7 @@ const Home = () => {
   const isLoading = isImagesLoading || isFavouritesLoading || isVotesLoading;
 
   const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
+  const isImageUploading = useAppSelector(getIsImageUploading);
 
   const handleUploadButtonPress = useCallback(() => {
     setIsBottomSheetOpen(true);

apps/mobile/src/store/selectors/getIsImageUploading.ts

@@ -0,0 +1,4 @@
+import { RootState } from '../store';
+
+export const getIsImageUploading = (state: RootState) =>
+  state.imageActivity.isImageUploading;

apps/mobile/src/store/slices/ImageActivitySlice.ts

@@ -0,0 +1,33 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { CatApi } from '../services/CatApi';
+
+const initialState = {
+  isImageUploading: false,
+};
+
+export const ImageActivitySlice = createSlice({
+  name: 'imageActivity',
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addMatcher(
+        CatApi.endpoints.uploadImage.matchPending,
+        (state, { payload }) => {
+          state.isImageUploading = true;
+        }
+      )
+      .addMatcher(
+        CatApi.endpoints.uploadImage.matchFulfilled,
+        (state, { payload }) => {
+          state.isImageUploading = false;
+        }
+      )
+      .addMatcher(
+        CatApi.endpoints.uploadImage.matchRejected,
+        (state, { payload }) => {
+          state.isImageUploading = false;
+        }
+      );
+  },
+});

apps/mobile/src/store/store.ts

@@ -4,6 +4,7 @@ import devToolsEnhancer from 'redux-devtools-expo-dev-plugin';
 import { ToastMiddleware } from './middleware/ToastMiddleware';
 
 import { CatApi } from './services/CatApi';
+import { ImageActivitySlice } from './slices/ImageActivitySlice';
 
 export const store = configureStore({
   enhancers: (getDefaultEnhancers) =>
@@ -19,6 +20,8 @@ export const store = configureStore({
   reducer: {
     // RTK-Query reducers
     [CatApi.reducerPath]: CatApi.reducer,
+    // RTK slices
+    [ImageActivitySlice.name]: ImageActivitySlice.reducer,
   },
 });