);
}
diff --git a/frontend/app/create/sublet/page.tsx b/frontend/app/create/sublet/page.tsx
index 91abbb0..d249c02 100644
--- a/frontend/app/create/sublet/page.tsx
+++ b/frontend/app/create/sublet/page.tsx
@@ -1,17 +1,17 @@
import Link from "next/link";
import { BackButton } from "@/components/listings/detail/BackButton";
-import { ListingForm } from "@/components/listings/ListingForm";
+import { SubletForm } from "@/components/listings/form/SubletForm";
export default function CreateSubletPage() {
return (
-
+
-
New Sublet
+ New Sublet
-
+
);
}
diff --git a/frontend/components/common/FormField.tsx b/frontend/components/common/FormField.tsx
index 1ba5aa3..dcf6dc9 100644
--- a/frontend/components/common/FormField.tsx
+++ b/frontend/components/common/FormField.tsx
@@ -6,26 +6,32 @@ interface FormFieldProps {
touched?: boolean;
optional?: boolean;
helperText?: string;
+ /** Rendered next to the label (e.g. info icon with hover message) */
+ labelSupplement?: ReactNode;
children: ReactNode;
}
-export function FormField({
+export const FormField = ({
label,
error,
touched = false,
optional = false,
helperText,
+ labelSupplement,
children,
-}: FormFieldProps) {
+}: FormFieldProps) => {
return (
-
);
-}
+};
diff --git a/frontend/components/common/FormSelect.tsx b/frontend/components/common/FormSelect.tsx
index 64fcab6..858c1f9 100644
--- a/frontend/components/common/FormSelect.tsx
+++ b/frontend/components/common/FormSelect.tsx
@@ -1,3 +1,4 @@
+import { FormField } from "@/components/common/FormField";
import {
Select,
SelectContent,
@@ -5,59 +6,55 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
-import { FormField } from "@/components/common/FormField";
interface Option {
value: string;
label: string;
}
-type FormSelectPropsBase = {
+interface FormSelectPropsBase {
label: string;
options: Option[];
placeholder?: string;
error?: string;
touched?: boolean;
- required?: boolean;
optional?: boolean;
helperText?: string;
-};
+}
type StringFormSelectProps = FormSelectPropsBase & {
+ valueType?: "string";
value: string | undefined;
onChange: (value: string) => void;
- asNumber?: false;
};
type NumberFormSelectProps = FormSelectPropsBase & {
+ valueType: "number";
value: number | undefined;
onChange: (value: number) => void;
- asNumber: true;
};
type FormSelectProps = StringFormSelectProps | NumberFormSelectProps;
-export function FormSelect(props: FormSelectProps) {
- const {
- label,
- options,
- placeholder = "Select an option",
- error,
- touched,
- required,
- optional,
- helperText,
- } = props;
-
- const stringValue = props.asNumber
- ? props.value !== undefined ? String(props.value) : ""
- : props.value ?? "";
+export const FormSelect = ({
+ label,
+ options,
+ placeholder = "Select an option",
+ error,
+ touched,
+ optional,
+ helperText,
+ valueType,
+ value,
+ onChange,
+}: FormSelectProps) => {
+ const stringValue = value !== undefined ? String(value) : "";
const handleChange = (val: string) => {
- if (props.asNumber) {
- props.onChange(Number(val));
+ if (valueType === "number") {
+ onChange(Number(val));
} else {
- props.onChange(val);
+ onChange(val);
}
};
@@ -83,4 +80,4 @@ export function FormSelect(props: FormSelectProps) {
);
-}
+};
diff --git a/frontend/components/common/ImageDropzone.tsx b/frontend/components/common/ImageDropzone.tsx
new file mode 100644
index 0000000..84551ed
--- /dev/null
+++ b/frontend/components/common/ImageDropzone.tsx
@@ -0,0 +1,160 @@
+"use client";
+
+import { useRef, useId } from "react";
+import { ImagePlus, AlertCircle } from "lucide-react";
+import { ImagePreview } from "@/components/common/ImagePreview";
+import type { ImageFile } from "@/hooks/useImageUpload";
+import { cn } from "@/lib/utils";
+
+interface ImageDropzoneProps {
+ images: ImageFile[];
+ isDragging: boolean;
+ canAddMore: boolean;
+ remainingSlots: number;
+ maxFiles: number;
+ label?: string;
+ error?: string;
+ acceptedFormats?: string;
+ onDragEnter: (e: React.DragEvent) => void;
+ onDragLeave: (e: React.DragEvent) => void;
+ onDragOver: (e: React.DragEvent) => void;
+ onDrop: (e: React.DragEvent) => void;
+ onFileSelect: (e: React.ChangeEvent
) => void;
+ onRemove: (id: string) => void;
+}
+
+export const ImageDropzone = ({
+ images,
+ isDragging,
+ canAddMore,
+ remainingSlots,
+ maxFiles,
+ label = "Images",
+ error,
+ acceptedFormats = "image/png,image/jpeg,image/heic,image/webp",
+ onDragEnter,
+ onDragLeave,
+ onDragOver,
+ onDrop,
+ onFileSelect,
+ onRemove,
+}: ImageDropzoneProps) => {
+ const inputRef = useRef(null);
+ const dropzoneId = useId();
+ const errorId = useId();
+ const instructionsId = useId();
+
+ const handleKeyDown = (e: React.KeyboardEvent) => {
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+ inputRef.current?.click();
+ }
+ };
+
+ return (
+
+
+
+
+ {images.length}/{maxFiles} images
+
+
+
+
canAddMore && inputRef.current?.click()}
+ className={cn(
+ "cursor-pointer rounded-lg border-2 border-dashed p-6 text-center transition-all",
+ "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+ isDragging && "scale-[1.02] border-blue-500 bg-blue-50",
+ !isDragging && !error && "border-gray-300 hover:border-blue-400 hover:bg-blue-50/30",
+ error && "border-red-300 bg-red-50/30",
+ !canAddMore && "cursor-not-allowed opacity-50"
+ )}
+ >
+
+
+ {images.length === 0 ? (
+
+
+
+
+
+ {isDragging ? "Drop images here" : "Drop images here or click to browse"}
+
+
+ Up to {maxFiles} images. PNG, JPG, HEIC supported.
+
+
+ ) : (
+
+
+ {images.map((image, index) => (
+ onRemove(image.id)}
+ />
+ ))}
+
+
+ {canAddMore && (
+
+ {remainingSlots === 1
+ ? "You can add 1 more image"
+ : `You can add ${remainingSlots} more images`}
+
+ )}
+
+ )}
+
+
+ {error && (
+
+
+ {error}
+
+ )}
+
+
+
+ {/* Overlay with filename on hover */}
+
+ {image.file.name}
+
+
+ {/* Remove button */}
+
+
+ {/* Status indicator */}
+ {image.status === "uploading" && (
+
+ )}
+
+ {image.status === "error" && (
+
+ )}
+
+
+ $
+
+
+ {isSublet && (
+
+ /mo
+
+ )}
+
+
+ )}
+ />
+
+ {childrenAfterPrice}
+
+ {/* description */}
+ (
+
+
+
+ )}
+ />
+
+ {childrenAfterDescription}
+
+ );
+};
diff --git a/frontend/components/listings/form/ItemForm.tsx b/frontend/components/listings/form/ItemForm.tsx
new file mode 100644
index 0000000..e5791dc
--- /dev/null
+++ b/frontend/components/listings/form/ItemForm.tsx
@@ -0,0 +1,138 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useForm, Controller } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { FormSelect } from "@/components/common/FormSelect";
+import { BaseListingForm } from "@/components/listings/form/BaseListingForm";
+import { ListingFormShell } from "@/components/listings/form/ListingFormShell";
+import { useImageUpload } from "@/hooks/useImageUpload";
+import { createListing } from "@/lib/actions";
+import { CATEGORY_OPTIONS, CONDITION_OPTIONS } from "@/lib/constants";
+import { parsePriceString } from "@/lib/utils";
+import { type CreateItemFormData, createItemSchema } from "@/lib/validations";
+import type { CreateItemPayload } from "@/lib/types";
+
+const DISPLAY_LABEL = "Item";
+const EXAMPLE_TITLE = "e.g., Nike Air Force 1";
+
+export function ItemForm() {
+ const router = useRouter();
+ const queryClient = useQueryClient();
+
+ const {
+ control,
+ handleSubmit,
+ reset,
+ formState: { errors, touchedFields, isDirty, isSubmitting },
+ } = useForm({
+ resolver: zodResolver(createItemSchema),
+ mode: "onBlur",
+ reValidateMode: "onChange",
+ defaultValues: {
+ title: "",
+ price: "",
+ description: "",
+ tags: [],
+ condition: undefined,
+ category: undefined,
+ },
+ });
+
+ const imageUpload = useImageUpload({
+ maxFiles: 10,
+ maxSizeBytes: 10 * 1024 * 1024,
+ onError: (message) => toast.error(message),
+ });
+
+ const { mutate, isPending } = useMutation({
+ mutationFn: createListing,
+ onSuccess: (data) => {
+ toast.success(`${DISPLAY_LABEL} created successfully!`);
+ queryClient.invalidateQueries({ queryKey: ["items"] });
+ reset();
+ imageUpload.clearImages();
+ router.replace(`/items/${data.id}`);
+ },
+ onError: (error: Error) => {
+ toast.error(error.message || "Failed to create listing. Please try again.");
+ },
+ });
+
+ const onSubmit = (data: CreateItemFormData) => {
+ const payload: CreateItemPayload = {
+ title: data.title,
+ description: data.description,
+ price: String(parsePriceString(data.price)),
+ listing_type: "item",
+ additional_data: {
+ condition: data.condition,
+ category: data.category,
+ },
+ };
+ mutate(payload);
+ };
+
+ const isFormDisabled = isPending || isSubmitting;
+
+ const itemFieldsAfterDescription = (
+ <>
+ (
+
+ )}
+ />
+ (
+
+ )}
+ />
+
+ );
+
+ return (
+
+
+ control={control}
+ errors={errors}
+ touchedFields={touchedFields as Partial>}
+ disabled={isFormDisabled}
+ displayLabel={DISPLAY_LABEL}
+ exampleTitle={EXAMPLE_TITLE}
+ abandonGuard={{
+ isDirty,
+ unsavedImageCount: imageUpload.images.length,
+ }}
+ childrenAfterDescription={itemFieldsAfterDescription}
+ />
+
+ );
+}
diff --git a/frontend/components/listings/form/ListingFormShell.tsx b/frontend/components/listings/form/ListingFormShell.tsx
new file mode 100644
index 0000000..1b53640
--- /dev/null
+++ b/frontend/components/listings/form/ListingFormShell.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import { Loader2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { ImageDropzone } from "@/components/common/ImageDropzone";
+import type { useImageUpload } from "@/hooks/useImageUpload";
+
+interface ListingFormShellProps {
+ /** Fires on form submission */
+ onSubmit: (e: React.FormEvent) => void;
+ /** Whether the form is currently submitting or pending */
+ isFormDisabled: boolean;
+ /** Whether the mutation is in-flight (controls spinner) */
+ isPending: boolean;
+ /** Display label for the submit button and photo section (e.g., "Item", "Listing") */
+ displayLabel: string;
+ /** Max number of images allowed */
+ maxFiles?: number;
+ /** Everything returned from useImageUpload */
+ imageUpload: ReturnType;
+ /** The form fields (left column) */
+ children: React.ReactNode;
+}
+
+export function ListingFormShell({
+ onSubmit,
+ isFormDisabled,
+ isPending,
+ displayLabel,
+ maxFiles = 10,
+ imageUpload,
+ children,
+}: ListingFormShellProps) {
+ return (
+
+ );
+}
diff --git a/frontend/components/listings/form/SubletForm.tsx b/frontend/components/listings/form/SubletForm.tsx
new file mode 100644
index 0000000..7075813
--- /dev/null
+++ b/frontend/components/listings/form/SubletForm.tsx
@@ -0,0 +1,222 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useForm, Controller } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { Info } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { FormField } from "@/components/common/FormField";
+import { FormSelect } from "@/components/common/FormSelect";
+import { BaseListingForm } from "@/components/listings/form/BaseListingForm";
+import { ListingFormShell } from "@/components/listings/form/ListingFormShell";
+import { useImageUpload } from "@/hooks/useImageUpload";
+import { createListing } from "@/lib/actions";
+import { BEDS_OPTIONS, BATHS_OPTIONS } from "@/lib/constants";
+import { parsePriceString } from "@/lib/utils";
+import { createSubletSchema } from "@/lib/validations";
+import type { CreateSubletPayload } from "@/lib/types";
+import type { CreateSubletFormData } from "@/lib/validations";
+
+const DISPLAY_LABEL = "Listing";
+const EXAMPLE_TITLE = "e.g., Spacious 2BR near campus";
+
+export function SubletForm() {
+ const router = useRouter();
+ const queryClient = useQueryClient();
+
+ const {
+ control,
+ handleSubmit,
+ reset,
+ formState: { errors, touchedFields, isDirty, isSubmitting },
+ } = useForm({
+ resolver: zodResolver(createSubletSchema),
+ mode: "onBlur",
+ reValidateMode: "onChange",
+ defaultValues: {
+ title: "",
+ price: "",
+ description: "",
+ tags: [],
+ street_address: "",
+ beds: 0,
+ baths: 0,
+ start_date: "",
+ end_date: "",
+ },
+ });
+
+ const imageUpload = useImageUpload({
+ maxFiles: 10,
+ maxSizeBytes: 10 * 1024 * 1024,
+ onError: (message) => toast.error(message),
+ });
+
+ const { mutate, isPending } = useMutation({
+ mutationFn: createListing,
+ onSuccess: (data) => {
+ toast.success(`${DISPLAY_LABEL} created successfully!`);
+ queryClient.invalidateQueries({ queryKey: ["sublets"] });
+ reset();
+ imageUpload.clearImages();
+ router.replace(`/sublets/${data.id}`);
+ },
+ onError: (error: Error) => {
+ toast.error(error.message || "Failed to create listing. Please try again.");
+ },
+ });
+
+ const onSubmit = (data: CreateSubletFormData) => {
+ const payload: CreateSubletPayload = {
+ title: data.title,
+ description: data.description,
+ price: String(parsePriceString(data.price)),
+ listing_type: "sublet",
+ additional_data: {
+ street_address: data.street_address,
+ beds: data.beds,
+ baths: data.baths,
+ start_date: data.start_date,
+ end_date: data.end_date,
+ },
+ };
+ mutate(payload);
+ };
+
+ const isFormDisabled = isPending || isSubmitting;
+
+ const subletFieldsAfterPrice = (
+ <>
+ (
+
+
+
+ Your address will not be visible to the public. Only an approximate location will
+ be shown on the map.
+
+
+ }
+ >
+
+
+ )}
+ />
+
+ (
+
+ )}
+ />
+ (
+
+ )}
+ />
+
+
+ (
+
+
+
+ )}
+ />
+ (
+
+
+
+ )}
+ />
+
+
+ );
+
+ return (
+
+
+ control={control}
+ errors={errors}
+ touchedFields={touchedFields as Partial>}
+ disabled={isFormDisabled}
+ displayLabel={DISPLAY_LABEL}
+ exampleTitle={EXAMPLE_TITLE}
+ isSublet
+ abandonGuard={{
+ isDirty,
+ unsavedImageCount: imageUpload.images.length,
+ }}
+ childrenAfterPrice={subletFieldsAfterPrice}
+ />
+
+ );
+}
diff --git a/frontend/components/navbar/Navbar.tsx b/frontend/components/navbar/Navbar.tsx
index e4bbbd3..c56a614 100644
--- a/frontend/components/navbar/Navbar.tsx
+++ b/frontend/components/navbar/Navbar.tsx
@@ -26,9 +26,7 @@ export const Navbar = () => {
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const showListingsTabs = isAllListingsPage(pathname);
- const createNewConfig = showListingsTabs
- ? ALL_LISTINGS_PAGES_CONFIG[pathname]
- : undefined;
+ const createNewConfig = showListingsTabs ? ALL_LISTINGS_PAGES_CONFIG[pathname] : undefined;
const toggleMobileMenu = () => setIsMobileMenuOpen(!isMobileMenuOpen);
const closeMobileMenu = () => setIsMobileMenuOpen(false);
@@ -48,13 +46,15 @@ export const Navbar = () => {