Refactor favorite functionality: unify naming conventions, remove unused favorites hook, and enhance input schema in OpenAPI spec

Author: rahulharpal1603

docs/backend/backend_python/openapi.json

@@ -1117,9 +1117,14 @@
             "in": "query",
             "required": false,
             "schema": {
-              "$ref": "#/components/schemas/InputType",
+              "allOf": [
+                {
+                  "$ref": "#/components/schemas/InputType"
+                }
+              ],
               "description": "Choose input type: 'path' or 'base64'",
-              "default": "path"
+              "default": "path",
+              "title": "Input Type"
             },
             "description": "Choose input type: 'path' or 'base64'"
           }
@@ -2199,7 +2204,6 @@
           "metadata": {
             "anyOf": [
               {
-                "additionalProperties": true,
                 "type": "object"
               },
               {

frontend/src/api/api-functions/togglefav.ts

@@ -4,7 +4,7 @@ import { APIResponse } from '@/types/API';
 
 export const togglefav = async (image_id: string): Promise<APIResponse> => {
   const response = await apiClient.post<APIResponse>(
-    imagesEndpoints.setfavourite,
+    imagesEndpoints.setFavourite,
     { image_id },
   );
   return response.data;

frontend/src/api/apiEndpoints.ts

@@ -1,6 +1,6 @@
 export const imagesEndpoints = {
   getAllImages: '/images/',
-  setfavourite: '/images/toggle-favourite',
+  setFavourite: '/images/toggle-favourite',
 };
 
 export const faceClustersEndpoints = {

frontend/src/components/Media/ImageCard.tsx

@@ -25,22 +25,15 @@ export function ImageCard({
   onClick,
 }: ImageCardViewProps) {
   const [isImageHovered, setIsImageHovered] = useState(false);
-  const [isfav, setIsfav] = useState(false);
   // Default to empty array if no tags are provided
   const tags = image.tags || [];
   const { toggleFavourite } = useToggleFav();
 
-  const handle_favourite_toggle = () => {
-    if (!image?.id) return;
-    toggleFavourite(image?.id);
-  };
-
-  const handleToggleFavorite = useCallback(() => {
-    if (image) {
-      setIsfav((prev) => !prev);
-      handle_favourite_toggle();
+  const handleToggleFavourite = useCallback(() => {
+    if (image?.id) {
+      toggleFavourite(image.id);
     }
-  }, [image, isfav]);
+  }, [image, toggleFavourite]);
   return (
     <div
       className={cn(
@@ -87,15 +80,15 @@ export function ImageCard({
               onClick={(e) => {
                 console.log(image);
                 e.stopPropagation();
-                handleToggleFavorite();
+                handleToggleFavourite();
               }}
             >
               {image.isFavourite ? (
                 <Heart className="h-5 w-5" fill="currentColor"></Heart>
               ) : (
                 <Heart className="h-5 w-5" />
               )}
-              <span className="sr-only">Favorite</span>
+              <span className="sr-only">Favourite</span>
             </Button>
 
             <Button

frontend/src/components/Media/MediaThumbnails.tsx

@@ -1,5 +1,4 @@
 import React, { useRef, useEffect } from 'react';
-import { Heart } from 'lucide-react';
 import { convertFileSrc } from '@tauri-apps/api/core';
 
 interface MediaThumbnailsProps {
@@ -11,7 +10,6 @@ interface MediaThumbnailsProps {
   currentIndex: number;
   showThumbnails: boolean;
   onThumbnailClick: (index: number) => void;
-  favorites: string[];
   type?: string;
 }
 
@@ -20,14 +18,12 @@ export const MediaThumbnails: React.FC<MediaThumbnailsProps> = ({
   currentIndex,
   showThumbnails,
   onThumbnailClick,
-  favorites,
   type = 'image',
 }) => {
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const thumbnailRefs = useRef<Map<number, HTMLDivElement>>(new Map());
   const touchStartRef = useRef(0);
   const initialScrollLeftRef = useRef(0);
-  const isFavorite = (imagePath: string) => favorites.includes(imagePath);
 
   useEffect(() => {
     const scrollContainer = scrollContainerRef.current;
@@ -120,11 +116,6 @@ export const MediaThumbnails: React.FC<MediaThumbnailsProps> = ({
                 : 'opacity-70 hover:opacity-100'
             } cursor-pointer transition-all duration-200 hover:scale-105`}
           >
-            {isFavorite(image.path) && (
-              <div className="absolute top-1 right-1 z-10 rounded-full bg-black/30 p-0.5">
-                <Heart className="h-3 w-3 fill-current text-rose-500" />
-              </div>
-            )}
             <img
               src={convertFileSrc(image.thumbnailPath) || '/placeholder.svg'}
               alt={`thumbnail-${index}`}

frontend/src/components/Media/MediaView.tsx

@@ -17,7 +17,6 @@ import type { ImageViewerRef } from './ImageViewer';
 // Custom hooks
 import { useImageViewControls } from '@/hooks/useImageViewControls';
 import { useSlideshow } from '@/hooks/useSlideshow';
-import { useFavorites } from '@/hooks/useFavorites';
 import { useKeyboardNavigation } from '@/hooks/useKeyboardNavigation';
 import { useToggleFav } from '../../hooks/useToggleFav';
 import { useLocation } from 'react-router';
@@ -33,8 +32,6 @@ export function MediaView({
   const currentViewIndex = useSelector(selectCurrentViewIndex);
   const totalImages = images.length;
   // guard: images default to empty array in the signature so `images.length` is safe
-  // keep debug output minimal
-  // console.log(totalImages);
 
   const currentImage = useMemo(() => {
     if (currentViewIndex >= 0 && currentViewIndex < images.length) {
@@ -52,8 +49,6 @@ export function MediaView({
 
   // Custom hooks
   const { viewState, handlers } = useImageViewControls();
-  const { favorites } = useFavorites();
-  const [isfav, setIsfav] = useState(currentImage?.isFavourite || false);
   // Navigation handlers
   const handleNextImage = useCallback(() => {
     if (currentViewIndex < images.length - 1) {
@@ -84,13 +79,6 @@ export function MediaView({
 
   const location = useLocation();
   const { toggleFavourite } = useToggleFav();
-  // handling toogle_favvvvv
-  const handle_favourite_toggle = () => {
-    console.log(location.pathname);
-
-    if (!currentImage?.id) return;
-    toggleFavourite(currentImage?.id);
-  };
 
   // Slideshow functionality
   const { isSlideshowActive, toggleSlideshow } = useSlideshow(
@@ -115,13 +103,14 @@ export function MediaView({
   }, []);
 
   // Hooks that depend on currentImage but always declared
-  const handleToggleFavorite = useCallback(() => {
+  const handleToggleFavourite = useCallback(() => {
     if (currentImage) {
-      setIsfav((prev) => !prev);
-      handle_favourite_toggle();
+      if (currentImage?.id) {
+        toggleFavourite(currentImage.id);
+      }
       if (location.pathname === '/favourites') handleClose();
     }
-  }, [currentImage, isfav]);
+  }, [currentImage, toggleFavourite]);
 
   const handleZoomIn = useCallback(() => {
     imageViewerRef.current?.zoomIn();
@@ -163,8 +152,8 @@ export function MediaView({
       <MediaViewControls
         showInfo={showInfo}
         onToggleInfo={toggleInfo}
-        onToggleFavorite={handleToggleFavorite}
-        isFavorite={isfav}
+        onToggleFavourite={handleToggleFavourite}
+        isFavourite={currentImage.isFavourite || false}
         onOpenFolder={handleOpenFolder}
         isSlideshowActive={isSlideshowActive}
         onToggleSlideshow={toggleSlideshow}
@@ -217,7 +206,6 @@ export function MediaView({
           currentIndex={currentViewIndex}
           showThumbnails={showThumbnails}
           onThumbnailClick={handleThumbnailClick}
-          favorites={favorites}
           type={type}
         />
       </div>

frontend/src/components/Media/MediaViewControls.tsx

@@ -4,9 +4,9 @@ import { Info, Folder, Share2, Heart, Play, Pause, X } from 'lucide-react';
 interface MediaViewControlsProps {
   showInfo: boolean;
   onToggleInfo: () => void;
-  onToggleFavorite: () => void;
+  onToggleFavourite: () => void;
   onOpenFolder: () => Promise<void>;
-  isFavorite: boolean;
+  isFavourite: boolean;
   isSlideshowActive: boolean;
   onToggleSlideshow: () => void;
   onClose: () => void;
@@ -16,9 +16,9 @@ interface MediaViewControlsProps {
 export const MediaViewControls: React.FC<MediaViewControlsProps> = ({
   showInfo,
   onToggleInfo,
-  onToggleFavorite,
+  onToggleFavourite,
   onOpenFolder,
-  isFavorite,
+  isFavourite,
   isSlideshowActive,
   onToggleSlideshow,
   onClose,
@@ -55,16 +55,18 @@ export const MediaViewControls: React.FC<MediaViewControlsProps> = ({
       </button>
 
       <button
-        onClick={onToggleFavorite}
+        onClick={onToggleFavourite}
         className={`cursor-pointer rounded-full p-2.5 text-white transition-all duration-300 ${
-          isFavorite
+          isFavourite
             ? 'bg-rose-500/80 hover:bg-rose-600 hover:shadow-lg'
             : 'bg-black/50 hover:bg-black/20 hover:text-white hover:shadow-lg'
         }`}
-        aria-label={isFavorite ? 'Remove from favorites' : 'Add to favorites'}
-        title="Favorites"
+        aria-label={
+          isFavourite ? 'Remove from favourites' : 'Add to favourites'
+        }
+        title="Favourites"
       >
-        <Heart className={`h-5 w-5 ${isFavorite ? 'fill-current' : ''}`} />
+        <Heart className={`h-5 w-5 ${isFavourite ? 'fill-current' : ''}`} />
       </button>
 
       {type === 'image' && (

frontend/src/hooks/useFavorites.ts

@@ -9,6 +9,7 @@ export const useToggleFav = () => {
   });
   useMutationFeedback(toggleFavouriteMutation, {
     showLoading: false,
+    showSuccess: false,
   });
   return {
     toggleFavourite: (id: any) => toggleFavouriteMutation.mutate(id),

frontend/src/hooks/useToggleFav.ts

@@ -7,13 +7,12 @@ import {
 import TimelineScrollbar from '@/components/Timeline/TimelineScrollbar';
 import { Image } from '@/types/Media';
 import { setImages } from '@/features/imageSlice';
-import { showLoader, hideLoader } from '@/features/loaderSlice';
 import { selectImages } from '@/features/imageSelectors';
 import { usePictoQuery } from '@/hooks/useQueryExtension';
 import { fetchAllImages } from '@/api/api-functions';
 import { RootState } from '@/app/store';
-import { showInfoDialog } from '@/features/infoDialogSlice';
 import { EmptyGalleryState } from '@/components/EmptyStates/EmptyGalleryState';
+import { useMutationFeedback } from '@/hooks/useMutationFeedback';
 
 export const Home = () => {
   const dispatch = useDispatch();
@@ -23,33 +22,28 @@ export const Home = () => {
   const searchState = useSelector((state: RootState) => state.search);
   const isSearchActive = searchState.active;
 
-  const { data, isLoading, isSuccess, isError } = usePictoQuery({
+  const { data, isLoading, isSuccess, isError, error } = usePictoQuery({
     queryKey: ['images'],
     queryFn: () => fetchAllImages(),
     enabled: !isSearchActive,
   });
 
-  // Handle fetching lifecycle
+  useMutationFeedback(
+    { isPending: isLoading, isSuccess, isError, error },
+    {
+      loadingMessage: 'Loading images',
+      showSuccess: false,
+      errorTitle: 'Error',
+      errorMessage: 'Failed to load images. Please try again later.',
+    },
+  );
+
   useEffect(() => {
-    if (!isSearchActive) {
-      if (isLoading) {
-        dispatch(showLoader('Loading images'));
-      } else if (isError) {
-        dispatch(hideLoader());
-        dispatch(
-          showInfoDialog({
-            title: 'Error',
-            message: 'Failed to load images. Please try again later.',
-            variant: 'error',
-          }),
-        );
-      } else if (isSuccess) {
-        const images = data?.data as Image[];
-        dispatch(setImages(images));
-        dispatch(hideLoader());
-      }
+    if (!isSearchActive && isSuccess) {
+      const images = data?.data as Image[];
+      dispatch(setImages(images));
     }
-  }, [data, isSuccess, isError, isLoading, dispatch, isSearchActive]);
+  }, [data, isSuccess, dispatch, isSearchActive]);
 
   const title =
     isSearchActive && images.length > 0