Adding favorite items functionality

Author: jamesdoh0109

.github/workflows/build.yml

@@ -0,0 +1,52 @@
+name: Build Marketplace
+
+on: push
+
+jobs:
+  backend-check:
+    name: Backend Checks
+    runs-on: ubuntu-latest
+    container:
+      image: ghcr.io/astral-sh/uv:python3.11-bookworm
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install dependencies
+        run: |-
+          cd backend
+          uv sync --frozen
+      - name: Run ruff check
+        run: |-
+          cd backend
+          uv run ruff check .
+      - name: Run ruff format
+        run: |-
+          cd backend
+          uv run ruff format .
+
+  frontend-check:
+    name: Frontend Checks
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24
+          cache: "pnpm"
+          cache-dependency-path: frontend/pnpm-lock.yaml
+      - name: Install dependencies
+        run: |-
+          cd frontend
+          pnpm install --frozen-lockfile
+      - name: Run ESLint
+        run: |-
+          cd frontend
+          pnpm lint
+      - name: Run type check
+        run: |-
+          cd frontend
+          pnpm typecheck

backend/market/views.py

@@ -54,7 +54,7 @@ class UserFavorites(ListAPIView, DefaultOrderMixin):
 
     def get_queryset(self):
         user = self.request.user
-        return user.listings_favorited
+        return user.listings_favorited.all()
 
 
 # TODO: Can add feature to filter for active offers only
@@ -250,26 +250,32 @@ class Favorites(
 
     def get_queryset(self):
         user = self.request.user
-        return user.listings_favorited
+        return user.listings_favorited.all()
 
     def create(self, request, *args, **kwargs):
         listing_id = int(self.kwargs["listing_id"])
-        queryset = self.get_queryset()
-        if queryset.filter(id=listing_id).exists():
-            raise exceptions.ValidationError("Favorite already exists")
+        favorites = request.user.listings_favorited
+        if favorites.filter(id=listing_id).exists():
+            return Response(
+                {"favorited": True, "detail": "Favorite already exists"},
+                status=status.HTTP_200_OK,
+            )
         listing = get_object_or_404(Listing, id=listing_id)
-        self.get_queryset().add(listing)
-        return Response(status=status.HTTP_201_CREATED)
+        favorites.add(listing)
+        return Response({"favorited": True}, status=status.HTTP_200_OK)
 
     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():
-            raise exceptions.NotFound("Favorite does not exist.")
+            return Response(
+                {"favorited": False, "detail": "Favorite does not exist"},
+                status=status.HTTP_200_OK,
+            )
 
-        self.get_queryset().remove(listing)
-        return Response(status=status.HTTP_204_NO_CONTENT)
+        request.user.listings_favorited.remove(listing)
+        return Response({"favorited": False}, status=status.HTTP_200_OK)
 
 
 class Offers(viewsets.ModelViewSet):

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

@@ -1,9 +1,11 @@
 import { ListingDetail } from "@/components/listings/detail/ListingDetail";
-import { getListing } from "@/lib/actions";
+import { getListing, getUsersFavorites } 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);
+  const isFavorited = Boolean(favorites?.results?.some((favorite) => favorite.id === item.id));
 
-  return <ListingDetail listing={item} />;
+  return <ListingDetail listing={item} initialIsFavorited={isFavorited} />;
 }

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

@@ -1,9 +1,11 @@
 import { ListingDetail } from "@/components/listings/detail/ListingDetail";
-import { getListing } from "@/lib/actions";
+import { getListing, getUsersFavorites } 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);
+  const isFavorited = Boolean(favorites?.results?.some((favorite) => favorite.id === sublet.id));
 
-  return <ListingDetail listing={sublet} />;
+  return <ListingDetail listing={sublet} initialIsFavorited={isFavorited} />;
 }

frontend/components/listings/ListingsCard.tsx

@@ -4,7 +4,8 @@ import { Calendar } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { formatPrice, formatCondition, formatDate } from "@/lib/utils";
 import { Item, Sublet } from "@/lib/types";
-import defaultImage from "@/public/images/default-image.jpg";
+
+const DEFAULT_IMAGE = "/images/default-image.jpg";
 
 interface Props {
   listing: Item | Sublet;
@@ -62,7 +63,7 @@ export const ListingsCard = ({ listing, previewImageUrl, href, isMyListing = fal
       {/* image container */}
       <div className="relative aspect-square w-full overflow-hidden bg-gray-100">
         <Image
-          src={previewImageUrl || defaultImage}
+          src={previewImageUrl || DEFAULT_IMAGE}
           alt={listing.title}
           fill
           className="object-cover transition-transform duration-200 group-hover:scale-105"

frontend/components/listings/detail/ListingDetail.tsx

@@ -1,27 +1,57 @@
+"use client";
+
+import { useState } from "react";
 import { Heart, Share } from "lucide-react";
 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 } from "@/lib/actions";
 
 interface Props {
   listing: Item | Sublet;
+  initialIsFavorited: boolean;
 }
 
-export const ListingDetail = ({ listing }: 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 [isInsideFavorites, setIsInsideFavorites] = useState(initialIsFavorited);
+
+  const handleToggleFavorite = async () => {
+    try {
+      if (isInsideFavorites) {
+        await deleteFromUsersFavorites(listing.id);
+        setIsInsideFavorites(false);
+      } else {
+        await addToUsersFavorites(listing.id);
+        setIsInsideFavorites(true);
+      }
+    } catch (err) {
+      // Ignore favorite toggle errors in UI
+      console.log(err);
+    }
+  };
 
   return (
     <div className="mx-auto flex w-full max-w-[96rem] flex-col p-8 px-4 sm:px-12">
       <div className="mb-4 flex items-center justify-between">
         <BackButton />
         <div className="flex items-center gap-3">
           <Share className="h-5 w-5" />
-          <Heart className="h-5 w-5" />
+          <button
+            type="button"
+            onClick={handleToggleFavorite}
+            aria-pressed={isInsideFavorites}
+            aria-label={isInsideFavorites ? "Remove from favorites" : "Add to favorites"}
+          >
+            <Heart
+              className={isInsideFavorites ? "h-5 w-5 fill-red-500 text-red-500" : "h-5 w-5"}
+            />
+          </button>
         </div>
       </div>
       <div className="grid grid-cols-1 gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">

frontend/components/listings/detail/ListingImageGallery.tsx

@@ -2,9 +2,10 @@
 
 import Image from "next/image";
 import { useState } from "react";
-import defaultImage from "@/public/images/default-image.jpg";
 import { cn } from "@/lib/utils";
 
+const DEFAULT_IMAGE = "/images/default-image.jpg";
+
 interface Props {
   images: string[];
 }
@@ -17,7 +18,7 @@ export const ListingImageGallery = ({ images }: Props) => {
       <div className="relative h-[400px] overflow-hidden rounded-2xl md:h-[450px] lg:h-[500px]">
         {/* blurred background */}
         <Image
-          src={images[selectedImage] || defaultImage}
+          src={images[selectedImage] || DEFAULT_IMAGE}
           alt="Background"
           fill
           className="scale-110 object-cover opacity-50 blur-2xl"
@@ -27,7 +28,7 @@ export const ListingImageGallery = ({ images }: Props) => {
         {/* main selected image */}
         <div className="relative flex h-full w-full items-center justify-center">
           <Image
-            src={images[selectedImage] || defaultImage}
+            src={images[selectedImage] || DEFAULT_IMAGE}
             alt="Listing image"
             fill
             className="object-contain"

frontend/lib/actions.ts

@@ -4,7 +4,16 @@ import { cookies } from "next/headers";
 import { FETCH_LISTINGS_LIMIT } from "@/constants/listings";
 import { API_BASE_URL } from "@/lib/constants";
 import { APIError, ErrorMessages } from "@/lib/errors";
-import { AuthTokens, CreateItemPayload, CreateSubletPayload, Item, Listing, PaginatedResponse, Sublet, User } from "@/lib/types";
+import {
+  AuthTokens,
+  CreateItemPayload,
+  CreateSubletPayload,
+  Item,
+  Listing,
+  PaginatedResponse,
+  Sublet,
+  User,
+} from "@/lib/types";
 
 async function getTokensFromCookies(): Promise<AuthTokens | null> {
   try {
@@ -201,20 +210,35 @@ export async function verifyPhoneCode(phoneNumber: string, code: string) {
     body: JSON.stringify({ phone_number: phoneNumber, code }),
   });
 }
+// ------------------------------------------------------------
+// adding and removing listings from favorites
+// ------------------------------------------------------------
 
+export async function addToUsersFavorites(listingId: number) {
+  const res = await serverFetch<void>(`/market/listings/${listingId}/favorites/`, {
+    method: "POST",
+  });
+  return res;
+}
+export async function deleteFromUsersFavorites(listingId: number) {
+  return await serverFetch<void>(`/market/listings/${listingId}/favorites/`, {
+    method: "DELETE",
+  });
+}
 
+export async function getUsersFavorites() {
+  return await serverFetch<PaginatedResponse<Item | Sublet>>("/market/favorites/");
+}
 
 // ------------------------------------------------------------
 // creating new listings
 // ------------------------------------------------------------
 
-
-
 export type CreateListingPayload = CreateItemPayload | CreateSubletPayload;
 
 export async function createListing(payload: CreateListingPayload): Promise<Listing> {
   return await serverFetch<Listing>("/market/listings/", {
     method: "POST",
     body: JSON.stringify(payload),
   });
-}
+}