Merge branch 'master' into james/remove-my-purchases

i30101 · web-flow · commit d8ddfab9ebc3 · 2026-04-22T16:03:43.000-04:00
diff --git a/.gitignore b/.gitignore
@@ -50,3 +50,7 @@ yarn-error.log*
 # TypeScript
 *.tsbuildinfo
 next-env.d.ts
+
+# git worktrees
+.worktrees/
+.claude/worktrees/
diff --git a/CLAUDE.md b/CLAUDE.md
@@ -0,0 +1,100 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+Penn Marketplace is a full-stack platform for Penn students to buy/sell items and browse/post sublets. It uses a **hybrid Docker development approach**: services (Postgres, Redis, Django, Next.js) run in Docker, but dependencies are also installed locally for IDE support.
+
+- **Frontend**: Next.js 15 (App Router) + React 19 + TypeScript + Tailwind CSS 4
+- **Backend**: Django 5.0 + Django REST Framework
+- **Database**: PostgreSQL 15.8, **Cache**: Redis
+- **Auth**: Penn Platform OIDC via `django-labs-accounts` (backend) and `jose` JWT handling (frontend)
+
+## Commands
+
+### Development (Docker)
+
+```bash
+make setup          # One-time: install local deps + pre-commit hooks
+make up             # Start all containers (frontend :3000, backend :8000)
+make up-d           # Start in background
+make down           # Stop containers
+make logs           # View all container logs
+```
+
+### Frontend (from `frontend/`, package manager: pnpm)
+
+```bash
+pnpm dev            # Dev server with Turbopack
+pnpm check          # Run all checks: lint + typecheck + format:check
+pnpm fix            # Auto-fix: lint:fix + format
+pnpm lint           # ESLint only
+pnpm typecheck      # TypeScript only (tsc --noEmit)
+pnpm format         # Prettier only
+```
+
+### Backend (from `backend/`, package manager: uv)
+
+```bash
+uv run pytest                               # Run tests
+uv run ruff check .                         # Lint
+uv run ruff format .                        # Format
+make migrate                                # Apply migrations (via Docker)
+make makemigrations                         # Create migrations (via Docker)
+make test                                   # Run pytest via Docker
+make generate-data                          # Generate fake listings
+```
+
+### CI Checks (must pass before merge)
+
+Backend: `uv run ruff check .` + `uv run ruff format .`
+Frontend: `pnpm lint` + `pnpm typecheck`
+
+Run `./scripts/check.sh` locally to match CI. Pre-commit hooks auto-fix on commit.
+
+## Architecture
+
+### Frontend (`frontend/`)
+
+- **App Router**: Pages in `app/`, with `items/`, `sublets/`, `create/` routes
+- **Server Actions** (`lib/actions.ts`): All API calls go through `serverFetch<T>()` which handles auth headers from cookies. This is the main data-fetching layer.
+- **TanStack Query**: Client-side caching/refetching via `providers/TanstackQueryProvider.tsx`
+- **Form handling**: React Hook Form + Zod schemas (`lib/validations.ts`)
+- **Middleware** (`middleware.ts`): OIDC token refresh and auth redirects
+- **UI primitives**: shadcn/ui components in `components/ui/` (built on Radix UI)
+- **Types**: All API response types in `lib/types.ts`
+- **Constants**: Environment variables and app constants in `lib/constants.ts`
+
+### Backend (`backend/`)
+
+- **Single Django app** (`market/`): models, views, serializers, permissions, urls
+- **Config**: Split settings in `config/settings/` (base, development, production)
+- **Models**: `User` (extends AbstractUser), `Listing` (base), `Item` and `Sublet` (inherit from Listing), `ListingImage`, `Offer`, `Category`, `Tag`
+- **Views**: DRF ViewSets (`Listings`, `Offers`, `Favorites`) and function-based views for user/phone endpoints
+- **URL prefix**: All market endpoints under `/market/` (listings, offers, favorites, tags, phone verification, user)
+- **Tests**: `tests/market/test_market.py` using pytest + DRF's APIClient
+
+### API Pattern
+
+REST JSON API with offset/limit pagination. Endpoints return `{ count, next, previous, results }`. Auth via `Authorization: Bearer <token>` header (set automatically by server actions).
+
+## Key Conventions
+
+### Frontend
+- Strict TypeScript (`"strict": true`) — avoid `any`
+- Prettier: 100 char width, 2 spaces, semicolons, Tailwind class sorting plugin
+- Server Components by default; use `"use client"` only when needed
+- Component composition: Page → Filters → Grid → Card
+
+### Backend
+- Ruff for linting + formatting (88 char width, double quotes, isort with 2 blank lines after imports)
+- Excluded from ruff: `migrations/`, `.venv/`
+- Migrations are auto-applied on Docker startup
+
+### Installing New Packages
+
+**Frontend**: `cd frontend && pnpm add <pkg>`, then `docker compose exec frontend pnpm install`
+**Backend**: `cd backend && uv add <pkg>`, then `docker compose exec backend uv sync`
+
+No Docker rebuild needed — lock files are volume-mounted.
diff --git a/backend/market/views.py b/backend/market/views.py
@@ -189,7 +189,7 @@ def retrieve(self, request, *args, **kwargs):
             serializer_class = ListingSerializer
         else:
             serializer_class = ListingSerializerPublic
-        serializer = serializer_class(instance)
+        serializer = serializer_class(instance, context={"request": request})
         return Response(serializer.data)
 
 
diff --git a/frontend/app/items/[id]/page.tsx b/frontend/app/items/[id]/page.tsx
@@ -1,9 +1,20 @@
+import { QueryClient, dehydrate, HydrationBoundary } from "@tanstack/react-query";
 import { ListingDetail } from "@/components/listings/detail/ListingDetail";
 import { getListingOrNotFound } from "@/lib/actions";
+import { queryKeys } from "@/lib/queryKeys";
 
 export default async function ItemPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params;
   const item = await getListingOrNotFound(id);
 
-  return <ListingDetail listing={item} initialIsFavorited={item.is_favorited ?? false} />;
+  // seed the cache with the already-fetched listing (no additional fetch).
+  // We use setQueryData instead of prefetchQuery to preserve the notFound() throw above.
+  const queryClient = new QueryClient();
+  queryClient.setQueryData(queryKeys.listing(item.id), item);
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <ListingDetail listingId={item.id} />
+    </HydrationBoundary>
+  );
 }
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
@@ -1,16 +1,32 @@
+import { QueryClient, dehydrate, HydrationBoundary } from "@tanstack/react-query";
 import { getCurrentUser, getItems } from "@/lib/actions";
+import { queryKeys } from "@/lib/queryKeys";
 import { PageHeader } from "@/components/common/PageHeader";
 import { ItemFilters } from "@/components/filters/ItemFilters";
 import { ListingsGrid } from "@/components/listings/ListingsGrid";
 
 export default async function ItemsPage() {
-  const [items, currentUser] = await Promise.all([getItems({ pageParam: 1 }), getCurrentUser()]);
+  const queryClient = new QueryClient();
+
+  const [, currentUser] = await Promise.all([
+    queryClient.fetchInfiniteQuery({
+      queryKey: queryKeys.listings("items"),
+      queryFn: () => getItems({ pageParam: 1 }),
+      initialPageParam: 1,
+      getNextPageParam: (lastPage, allPages) =>
+        lastPage.results.length > 0 ? allPages.length + 1 : undefined,
+      pages: 1,
+    }),
+    getCurrentUser(),
+  ]);
 
   return (
     <div className="container mx-auto w-full max-w-[96rem] space-y-6 px-12 pt-6">
       <PageHeader title="Browse Items" description="Discover the latest items on sale at Penn" />
       <ItemFilters />
-      <ListingsGrid type="items" listings={items} currentUser={currentUser} />
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        <ListingsGrid type="items" currentUser={currentUser} />
+      </HydrationBoundary>
     </div>
   );
 }
diff --git a/frontend/app/sublets/[id]/page.tsx b/frontend/app/sublets/[id]/page.tsx
@@ -1,9 +1,20 @@
+import { QueryClient, dehydrate, HydrationBoundary } from "@tanstack/react-query";
 import { ListingDetail } from "@/components/listings/detail/ListingDetail";
 import { getListingOrNotFound } from "@/lib/actions";
+import { queryKeys } from "@/lib/queryKeys";
 
 export default async function SubletPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params;
   const sublet = await getListingOrNotFound(id);
 
-  return <ListingDetail listing={sublet} initialIsFavorited={sublet.is_favorited ?? false} />;
+  // seed the cache with the already-fetched listing (no additional fetch).
+  // We use setQueryData instead of prefetchQuery to preserve the notFound() throw above.
+  const queryClient = new QueryClient();
+  queryClient.setQueryData(queryKeys.listing(sublet.id), sublet);
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <ListingDetail listingId={sublet.id} />
+    </HydrationBoundary>
+  );
 }
diff --git a/frontend/app/sublets/page.tsx b/frontend/app/sublets/page.tsx
@@ -1,19 +1,32 @@
+import { QueryClient, dehydrate, HydrationBoundary } from "@tanstack/react-query";
 import { getCurrentUser, getSublets } from "@/lib/actions";
+import { queryKeys } from "@/lib/queryKeys";
 import { PageHeader } from "@/components/common/PageHeader";
 import { SubletFilters } from "@/components/filters/SubletFilters";
 import { ListingsGrid } from "@/components/listings/ListingsGrid";
 
 export default async function SubletsPage() {
-  const [sublets, currentUser] = await Promise.all([
-    getSublets({ pageParam: 1 }),
+  const queryClient = new QueryClient();
+
+  const [, currentUser] = await Promise.all([
+    queryClient.fetchInfiniteQuery({
+      queryKey: queryKeys.listings("sublets"),
+      queryFn: () => getSublets({ pageParam: 1 }),
+      initialPageParam: 1,
+      getNextPageParam: (lastPage, allPages) =>
+        lastPage.results.length > 0 ? allPages.length + 1 : undefined,
+      pages: 1,
+    }),
     getCurrentUser(),
   ]);
 
   return (
     <div className="container mx-auto w-full max-w-[96rem] space-y-6 px-12 pt-6">
       <PageHeader title="Browse Sublets" description="Find your perfect housing solution at Penn" />
       <SubletFilters />
-      <ListingsGrid type="sublets" listings={sublets} currentUser={currentUser} />
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        <ListingsGrid type="sublets" currentUser={currentUser} />
+      </HydrationBoundary>
     </div>
   );
 }
diff --git a/frontend/components/listings/ListingsGrid.tsx b/frontend/components/listings/ListingsGrid.tsx
@@ -5,22 +5,15 @@ import { Spinner } from "@/components/ui/spinner";
 import { ListingsCard } from "@/components/listings/ListingsCard";
 import { NoListingsFound } from "@/components/listings/NoListingsFound";
 import { useListings } from "@/hooks/useListings";
-import { Item, PaginatedResponse, Sublet, User } from "@/lib/types";
+import { ListingTypes, User } from "@/lib/types";
 
-type Props =
-  | {
-      type: "items";
-      listings: PaginatedResponse<Item>;
-      currentUser: User;
-    }
-  | {
-      type: "sublets";
-      listings: PaginatedResponse<Sublet>;
-      currentUser: User;
-    };
+type Props = {
+  type: ListingTypes;
+  currentUser: User;
+};
 
-export const ListingsGrid = ({ type, listings, currentUser }: Props) => {
-  const { data, error, isFetchingNextPage, hasNextPage, ref } = useListings({ type, listings });
+export const ListingsGrid = ({ type, currentUser }: Props) => {
+  const { data, error, isFetchingNextPage, hasNextPage, ref } = useListings({ type });
 
   const totalResults = data?.pages.reduce((acc, page) => acc + page.results.length, 0) || 0;
   const isEmpty = totalResults === 0;
diff --git a/frontend/components/listings/detail/ListingDetail.tsx b/frontend/components/listings/detail/ListingDetail.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { addToUsersFavorites, deleteFromUsersFavorites } from "@/lib/actions";
+import { addToUsersFavorites, deleteFromUsersFavorites, getListing } from "@/lib/actions";
+import { queryKeys } from "@/lib/queryKeys";
 import { Heart, Share } from "lucide-react";
 import { Item, Sublet } from "@/lib/types";
 import { ListingActions } from "@/components/listings/detail/ListingActions";
@@ -12,42 +13,40 @@ import { BackButton } from "@/components/listings/detail/BackButton";
 import { SubletMap } from "@/components/listings/detail/SubletMap";
 
 interface Props {
-  listing: Item | Sublet;
-  initialIsFavorited: boolean;
+  listingId: number;
 }
 
-export const ListingDetail = ({ listing, initialIsFavorited }: Props) => {
-  const listingType = listing.listing_type;
-  const priceLabel = listingType === "sublet" ? "/mo" : undefined;
-  const listingOwnerLabel = listingType === "item" ? "Seller" : "Owner";
+export const ListingDetail = ({ listingId }: Props) => {
   const queryClient = useQueryClient();
-  const favoritesQuery = useQuery({
-    queryKey: ["favorite", listing.id],
-    queryFn: async () => initialIsFavorited,
-    initialData: initialIsFavorited,
-    staleTime: Infinity,
+  const queryKey = queryKeys.listing(listingId);
+
+  const { data: listing } = useQuery({
+    queryKey,
+    queryFn: () => getListing(String(listingId)),
   });
 
-  const isFavorited = favoritesQuery.data ?? false;
+  const isFavorited = listing?.is_favorited ?? false;
 
   const toggleFavoriteMutation = useMutation({
     meta: { suppressErrorToast: true }, // since it's noisy to show error toast on top of optimistic update
     mutationFn: async (shouldFavorite: boolean) => {
       if (shouldFavorite) {
-        await addToUsersFavorites(listing.id);
+        await addToUsersFavorites(listingId);
       } else {
-        await deleteFromUsersFavorites(listing.id);
+        await deleteFromUsersFavorites(listingId);
       }
     },
     onMutate: async (shouldFavorite: boolean) => {
-      await queryClient.cancelQueries({ queryKey: ["favorite", listing.id] });
-      const previous = queryClient.getQueryData<boolean>(["favorite", listing.id]);
-      queryClient.setQueryData(["favorite", listing.id], shouldFavorite);
+      await queryClient.cancelQueries({ queryKey });
+      const previous = queryClient.getQueryData<Item | Sublet>(queryKey);
+      if (previous) {
+        queryClient.setQueryData(queryKey, { ...previous, is_favorited: shouldFavorite });
+      }
       return { previous };
     },
     onError: (_error, _shouldFavorite, context) => {
-      if (context?.previous !== undefined) {
-        queryClient.setQueryData(["favorite", listing.id], context.previous);
+      if (context?.previous) {
+        queryClient.setQueryData(queryKey, context.previous);
       }
     },
   });
@@ -56,6 +55,12 @@ export const ListingDetail = ({ listing, initialIsFavorited }: Props) => {
     toggleFavoriteMutation.mutate(!isFavorited);
   };
 
+  if (!listing) return null;
+
+  const listingType = listing.listing_type;
+  const priceLabel = listingType === "sublet" ? "/mo" : undefined;
+  const listingOwnerLabel = listingType === "item" ? "Seller" : "Owner";
+
   const subletCoords = listingType === "sublet" ? listing.additional_data : null;
   const hasLocation = subletCoords?.latitude != null && subletCoords?.longitude != null;
 
diff --git a/frontend/components/navbar/NavbarActions.tsx b/frontend/components/navbar/NavbarActions.tsx
@@ -91,7 +91,7 @@ export const NavbarActions = ({
       <Button
         variant="ghost"
         size="icon"
-        className="relative"
+        className="relative cursor-pointer"
         onClick={handleNotificationClick}
         aria-label={`Notifications${hasUnreadNotifications ? " (unread)" : ""}`}
       >
@@ -109,7 +109,7 @@ export const NavbarActions = ({
         <Button
           variant="ghost"
           size="icon"
-          className="overflow-hidden rounded-full p-0 transition-opacity hover:opacity-80"
+          className="cursor-pointer overflow-hidden rounded-full p-0 transition-opacity hover:opacity-80"
           onClick={handleAvatarClick}
           aria-label="User menu"
           aria-expanded={isDropdownOpen}
diff --git a/frontend/hooks/useListings.ts b/frontend/hooks/useListings.ts
diff --git a/frontend/lib/actions.ts b/frontend/lib/actions.ts
diff --git a/frontend/lib/queryKeys.ts b/frontend/lib/queryKeys.ts
