New listings / updating listings

app/listings/[id]/edit/page.tsx

@@ -0,0 +1,96 @@
+import { connectToDatabase } from "@/lib/mongoose";
+import { getListing } from "@/services/listings/listings";
+import { ListingForm } from "@/components/listings/ListingForm";
+import { notFound } from "next/navigation";
+
+interface EditListingPageProps {
+  params: Promise<{ id: string }>;
+}
+
+function isDatabaseConnectionError(error: unknown) {
+  if (!(error instanceof Error)) {
+    return false;
+  }
+
+  return (
+    error.name === "MongooseServerSelectionError" ||
+    error.message.includes("ECONNREFUSED") ||
+    error.message.includes("Server selection timed out")
+  );
+}
+
+export const metadata = {
+  title: "Edit listing",
+};
+
+export default async function EditListingPage({ params }: EditListingPageProps) {
+  const { id } = await params;
+
+  const fallbackValues = {
+    itemName: "",
+    itemId: id,
+    labId: "",
+    labName: "",
+    labLocation: "",
+    quantityAvailable: 1,
+    expiryDate: undefined,
+    description: "",
+    price: 0,
+    status: "ACTIVE" as const,
+    condition: "Good" as const,
+    hazardTags: [],
+    imageUrls: [],
+  };
+
+  try {
+    await connectToDatabase();
+    const listing = await getListing(id);
+
+    if (!listing) {
+      return notFound();
+    }
+
+    return <ListingForm initialValues={listing} listingId={id} />;
+  } catch (error) {
+    const isDev = process.env.NODE_ENV !== "production";
+    if (isDev && isDatabaseConnectionError(error)) {
+      return <ListingForm initialValues={fallbackValues} />;
+    }
+
+    return (
+      <main
+        style={{
+          minHeight: "100vh",
+          display: "grid",
+          placeItems: "center",
+          padding: "2rem",
+          background: "#f8f6f0",
+        }}
+      >
+        <section
+          style={{
+            width: "min(100%, 600px)",
+            padding: "2rem",
+            borderRadius: "1.5rem",
+            border: "1px solid black",
+            backgroundColor: "white",
+          }}
+        >
+          <h1
+            style={{
+              margin: "0 0 0.75rem 0",
+              fontSize: "2rem",
+              lineHeight: 1.1,
+            }}
+          >
+            Listing unavailable
+          </h1>
+          <p style={{ margin: 0, color: "#534a3d", lineHeight: 1.4 }}>
+            The listing could not be loaded right now. Please try refreshing the
+            page in a moment.
+          </p>
+        </section>
+      </main>
+    );
+  }
+}

app/listings/[id]/page.tsx

@@ -1,6 +1,6 @@
 import { connectToDatabase } from "@/lib/mongoose";
+import type { Listing } from "@/models/Listing";
 import { getListing } from "@/services/listings/listings";
-import { Listing } from "@/models/Listing";
 import { ListingDetails } from "@/components/listings/ListingDetails";
 import { notFound } from "next/navigation";
 
@@ -47,17 +47,39 @@ function getListingContactEmail() {
  * @returns listing page as entry point
  */
 export default async function ListingPage({ params }: ListingPageProps) {
-  // const { id } = await params; to test styling page
+  const { id } = await params;
+
+  const fallbackListing: Listing = {
+    id,
+    itemName: "Listing Preview",
+    itemId: id,
+    labName: "Marketplace",
+    labLocation: "Unavailable in offline dev mode",
+    labId: "lab-dev-fallback",
+    imageUrls: [],
+    quantityAvailable: 1,
+    createdAt: new Date(),
+    expiryDate: undefined,
+    description:
+      "Database is currently unavailable. This fallback is only shown in development.",
+    price: 0,
+    status: "ACTIVE",
+    condition: "Good",
+    hazardTags: [],
+  };
+
   try {
-    // await connectToDatabase();
-    // const listing = await getListing(id);
+    await connectToDatabase();
+    const listing = await getListing(id);
 
-    // if (!listing) notFound();
+    if (!listing) {
+      notFound();
+    }
 
     return (
       <ListingDetails
         contactEmail={getListingContactEmail()}
-        listing={mockListing}
+        listing={listing}
       />
     );
   } catch (error) {

app/listings/new/page.tsx

@@ -0,0 +1,9 @@
+import { ListingForm } from "@/components/listings/ListingForm";
+
+export const metadata = {
+  title: "Add listing",
+};
+
+export default function NewListingPage() {
+  return <ListingForm />;
+}

app/marketplace/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useMemo } from "react";
+import { useRouter } from "next/navigation";
 import { useInventory } from "@/app/hooks/useInventory";
 import ItemGrid from "@/components/marketplace/ItemGrid";
 import MarketplaceFilters, {
@@ -29,6 +30,7 @@ const MOCK_USER: User = {
 // ─────────────────────────────────────────────────────────────────────────────
 
 export default function MarketplacePage() {
+    const router = useRouter();
     const currentUser = MOCK_USER; // swap with real auth
 
     const { items, isLoading, error } = useInventory();
@@ -76,13 +78,11 @@ export default function MarketplacePage() {
 
     // ── Handlers (stubs — wire up to your form/modal later) ──────────────────
     function handleEditItem(item: Item) {
-        console.log("Edit item:", item.id);
-        // TODO: open edit modal/drawer
+        router.push(`/listings/${item.id}/edit`);
     }
 
     function handleListNewItem() {
-        console.log("List new item");
-        // TODO: open create item form
+        router.push("/listings/new");
     }
 
     function handleEditProfile() {