Merge pull request #70 from pennlabs/james/moderation-frontend

add frontend for moderation

Author: i30101

frontend/components/listings/ListingsCard.tsx

@@ -2,7 +2,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { Calendar } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
-import { formatPrice, formatCondition, formatDate } from "@/lib/utils";
+import { formatPrice, formatCondition, formatDate, cn } from "@/lib/utils";
 import { Item, Sublet } from "@/lib/types";
 
 const DEFAULT_IMAGE = "/images/default-image.jpg";
@@ -58,7 +58,12 @@ export const ListingsCard = ({ listing, previewImageUrl, href, isMyListing = fal
   return (
     <Link
       href={href}
-      className="group flex w-full flex-col overflow-hidden rounded-xl border border-gray-200 bg-white transition-all duration-200 hover:shadow-lg"
+      className={cn(
+        "group flex w-full flex-col overflow-hidden rounded-xl border bg-white transition-all duration-200 hover:shadow-lg",
+        isMyListing && listing.status === "PENDING" && "border-amber-300 opacity-70",
+        isMyListing && listing.status === "REJECTED" && "border-red-300 opacity-50",
+        !(isMyListing && listing.status !== "APPROVED") && "border-gray-200"
+      )}
     >
       {/* image container */}
       <div className="relative aspect-square w-full overflow-hidden bg-gray-100">
@@ -77,6 +82,20 @@ export const ListingsCard = ({ listing, previewImageUrl, href, isMyListing = fal
             </Badge>
           </div>
         )}
+        {isMyListing && listing.status === "PENDING" && (
+          <div className="absolute top-3 right-3">
+            <Badge className="border-none bg-amber-500 text-white shadow-sm hover:bg-amber-600">
+              Under Review
+            </Badge>
+          </div>
+        )}
+        {isMyListing && listing.status === "REJECTED" && (
+          <div className="absolute top-3 right-3">
+            <Badge className="border-none bg-red-500 text-white shadow-sm hover:bg-red-600">
+              Rejected
+            </Badge>
+          </div>
+        )}
         <div className="absolute bottom-3 left-3">
           <Badge className="border-none bg-white/90 text-gray-900 shadow-sm backdrop-blur-sm hover:bg-white">
             {getBadgeContent(listing)}

frontend/components/listings/detail/ListingDetail.tsx

@@ -81,6 +81,16 @@ export const ListingDetail = ({ listingId }: Props) => {
           </button>
         </div>
       </div>
+      {listing.status === "PENDING" && (
+        <div className="mb-4 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
+          This listing is under review and is not yet visible to others.
+        </div>
+      )}
+      {listing.status === "REJECTED" && (
+        <div className="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">
+          This listing was rejected for violating our content policy and is not visible to others.
+        </div>
+      )}
       <div className="grid grid-cols-1 gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
         <ListingImageGallery images={listing.images} />
         <div className="space-y-6">

frontend/components/listings/form/ItemForm.tsx

@@ -50,7 +50,7 @@ export function ItemForm() {
   const { mutate, isPending } = useMutation({
     mutationFn: createListing,
     onSuccess: (data) => {
-      toast.success(`${DISPLAY_LABEL} created successfully!`);
+      toast.success(`${DISPLAY_LABEL} submitted and is under review.`);
       queryClient.invalidateQueries({ queryKey: ["items"] });
       reset();
       imageUpload.clearImages();

frontend/components/listings/form/SubletForm.tsx

@@ -60,7 +60,7 @@ export function SubletForm() {
   const { mutate, isPending } = useMutation({
     mutationFn: createListing,
     onSuccess: (data) => {
-      toast.success(`${DISPLAY_LABEL} created successfully!`);
+      toast.success(`${DISPLAY_LABEL} submitted and is under review.`);
       queryClient.invalidateQueries({ queryKey: ["sublets"] });
       reset();
       imageUpload.clearImages();

frontend/lib/types.ts

@@ -109,6 +109,11 @@ export type ValidatedAddress = {
   placeId: number;
 };
 
+// ------------------------------------------------------------
+// listing status (content moderation)
+// ------------------------------------------------------------
+export type ListingStatus = "PENDING" | "APPROVED" | "REJECTED";
+
 // ------------------------------------------------------------
 // base listing fields (shared by all listings)
 // ------------------------------------------------------------
@@ -126,6 +131,7 @@ type BaseListing = {
   favorite_count: number;
   is_favorited?: boolean;
   seller: User;
+  status: ListingStatus;
 };
 
 // ------------------------------------------------------------