Adding is_favorited, changing response messages

Author: LautaroJBeck

backend/market/serializers.py

@@ -133,6 +133,7 @@ class ListingSerializer(ListingTypeMixin, ModelSerializer):
     seller = UserSerializer(read_only=True)
     listing_type = SerializerMethodField()
     additional_data = SerializerMethodField()
+    is_favorited = SerializerMethodField()
     external_link = URLField(required=False, allow_blank=True, allow_null=True)
     negotiable = BooleanField(required=False, default=True)
     expires_at = DateTimeField(required=False, allow_null=True)
@@ -155,6 +156,7 @@ class Meta:
             "images",
             "listing_type",
             "additional_data",
+            "is_favorited",
         ]
         read_only_fields = [
             "id",
@@ -196,6 +198,12 @@ def validate(self, attrs):
 
         return super().validate(attrs)
 
+    def get_is_favorited(self, obj):
+        request = self.context.get("request")
+        if not request or not request.user or not request.user.is_authenticated:
+            return False
+        return request.user.listings_favorited.filter(id=obj.id).exists()
+
     def validate_title(self, value):
         if self.contains_profanity(value):
             raise ValidationError("The title contains inappropriate language.")
@@ -327,6 +335,7 @@ def _update_sublet(self, instance, additional_data):
 class ListingSerializerPublic(ListingTypeMixin, ModelSerializer):
     buyer_count = SerializerMethodField()
     favorite_count = SerializerMethodField()
+    is_favorited = SerializerMethodField()
     tags = SlugRelatedField(many=True, slug_field="name", queryset=Tag.objects.all())
     images = ListingImageURLSerializer(many=True)
     seller = UserSerializer(read_only=True)
@@ -350,6 +359,7 @@ class Meta:
             "favorite_count",
             "listing_type",
             "additional_data",
+            "is_favorited",
         ]
         read_only_fields = fields
 
@@ -359,6 +369,12 @@ def get_buyer_count(self, obj):
     def get_favorite_count(self, obj):
         return obj.favorites.count()
 
+    def get_is_favorited(self, obj):
+        request = self.context.get("request")
+        if not request or not request.user or not request.user.is_authenticated:
+            return False
+        return request.user.listings_favorited.filter(id=obj.id).exists()
+
 
 # Read-only serializer for use when pulling all listings /etc
 class ListingSerializerList(ListingTypeMixin, ModelSerializer):

backend/market/views.py

@@ -262,25 +262,25 @@ def create(self, request, *args, **kwargs):
         favorites = request.user.listings_favorited
         if favorites.filter(id=listing_id).exists():
             return Response(
-                {"favorited": True, "detail": "Favorite already exists"},
+                {"liked": True, "detail": "User has already liked the listing"},
                 status=status.HTTP_200_OK,
             )
         listing = get_object_or_404(Listing, id=listing_id)
         favorites.add(listing)
-        return Response({"favorited": True}, status=status.HTTP_201_CREATED)
+        return Response({"liked": True}, status=status.HTTP_201_CREATED)
 
     def destroy(self, request, *args, **kwargs):
         listing_id = int(self.kwargs["listing_id"])
         listing = get_object_or_404(Listing, id=listing_id)
 
         if listing not in request.user.listings_favorited.all():
             return Response(
-                {"favorited": False, "detail": "Favorite does not exist"},
+                {"liked": False, "detail": "User hasn't liked the listing yet"},
                 status=status.HTTP_404_OK,
             )
 
         request.user.listings_favorited.remove(listing)
-        return Response({"favorited": False}, status=status.HTTP_200_OK)
+        return Response({"liked": False}, status=status.HTTP_200_OK)
 
 
 class Offers(viewsets.ModelViewSet):

frontend/app/items/[id]/page.tsx

@@ -1,10 +1,9 @@
 import { ListingDetail } from "@/components/listings/detail/ListingDetail";
-import { getListing, getUsersFavorites } from "@/lib/actions";
+import { getListing } from "@/lib/actions";
 
 export default async function ItemPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params;
   const item = await getListing(id);
-  const favorites = await getUsersFavorites().catch(() => null);
 
-  return <ListingDetail listing={item} initialFavorites={favorites} />;
+  return <ListingDetail listing={item} initialIsFavorited={item.is_favorited ?? false} />;
 }

frontend/app/sublets/[id]/page.tsx

@@ -1,10 +1,9 @@
 import { ListingDetail } from "@/components/listings/detail/ListingDetail";
-import { getListing, getUsersFavorites } from "@/lib/actions";
+import { getListing } from "@/lib/actions";
 
 export default async function SubletPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params;
   const sublet = await getListing(id);
-  const favorites = await getUsersFavorites().catch(() => null);
 
-  return <ListingDetail listing={sublet} initialFavorites={favorites} />;
+  return <ListingDetail listing={sublet} initialIsFavorited={sublet.is_favorited ?? false} />;
 }

frontend/components/listings/detail/ListingDetail.tsx

@@ -1,37 +1,33 @@
 "use client";
 
-import { useMemo } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { addToUsersFavorites, deleteFromUsersFavorites } from "@/lib/actions";
 import { Heart, Share } from "lucide-react";
-import { Item, PaginatedResponse, Sublet } from "@/lib/types";
+import { Item, Sublet } from "@/lib/types";
 import { ListingActions } from "@/components/listings/detail/ListingActions";
 import { ListingImageGallery } from "@/components/listings/detail/ListingImageGallery";
 import { ListingInfo } from "@/components/listings/detail/ListingInfo";
 import { UserCard } from "@/components/listings/detail/UserCard";
 import { BackButton } from "@/components/listings/detail/BackButton";
-import { addToUsersFavorites, deleteFromUsersFavorites, getUsersFavorites } from "@/lib/actions";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 interface Props {
   listing: Item | Sublet;
-  initialFavorites: PaginatedResponse<Item | Sublet> | null;
+  initialIsFavorited: boolean;
 }
 
-export const ListingDetail = ({ listing, initialFavorites }: Props) => {
+export const ListingDetail = ({ listing, initialIsFavorited }: Props) => {
   const listingType = listing.listing_type;
   const priceLabel = listingType === "sublet" ? "/mo" : undefined;
   const listingOwnerLabel = listingType === "item" ? "Seller" : "Owner";
   const queryClient = useQueryClient();
   const favoritesQuery = useQuery({
-    queryKey: ["favorites"],
-    queryFn: getUsersFavorites,
-    initialData: initialFavorites ?? undefined,
-    enabled: initialFavorites !== null,
+    queryKey: ["favorite", listing.id],
+    queryFn: async () => initialIsFavorited,
+    initialData: initialIsFavorited,
+    staleTime: Infinity,
   });
 
-  const isInsideFavorites = useMemo(
-    () => !!favoritesQuery.data?.results?.some((favorite) => favorite.id === listing.id),
-    [favoritesQuery.data, listing.id]
-  );
+  const isInsideFavorites = favoritesQuery.data ?? false;
 
   const toggleFavoriteMutation = useMutation({
     mutationFn: async (shouldFavorite: boolean) => {
@@ -42,36 +38,16 @@ export const ListingDetail = ({ listing, initialFavorites }: Props) => {
       }
     },
     onMutate: async (shouldFavorite: boolean) => {
-      await queryClient.cancelQueries({ queryKey: ["favorites"] });
-      const previous = queryClient.getQueryData<PaginatedResponse<Item | Sublet>>(["favorites"]);
-
-      if (previous) {
-        const exists = previous.results?.some((favorite) => favorite.id === listing.id);
-        let results = previous.results ?? [];
-
-        if (shouldFavorite && !exists) {
-          results = [...results, listing];
-        }
-        if (!shouldFavorite && exists) {
-          results = results.filter((favorite) => favorite.id !== listing.id);
-        }
-
-        queryClient.setQueryData<PaginatedResponse<Item | Sublet>>(["favorites"], {
-          ...previous,
-          results,
-        });
-      }
-
+      await queryClient.cancelQueries({ queryKey: ["favorite", listing.id] });
+      const previous = queryClient.getQueryData<boolean>(["favorite", listing.id]);
+      queryClient.setQueryData(["favorite", listing.id], shouldFavorite);
       return { previous };
     },
     onError: (_error, _shouldFavorite, context) => {
-      if (context?.previous) {
-        queryClient.setQueryData(["favorites"], context.previous);
+      if (context?.previous !== undefined) {
+        queryClient.setQueryData(["favorite", listing.id], context.previous);
       }
     },
-    onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: ["favorites"] });
-    },
   });
 
   const handleToggleFavorite = async () => {
@@ -86,6 +62,7 @@ export const ListingDetail = ({ listing, initialFavorites }: Props) => {
           <Share className="h-5 w-5" />
           <button
             type="button"
+            className="cursor-pointer"
             onClick={handleToggleFavorite}
             aria-pressed={isInsideFavorites}
             aria-label={isInsideFavorites ? "Remove from favorites" : "Add to favorites"}

frontend/lib/types.ts

@@ -61,6 +61,7 @@ type BaseListing = {
   images: string[];
   tags: string[];
   favorite_count: number;
+  is_favorited?: boolean;
   seller: User;
 };