Addressing frontend comments 2

Author: LautaroJBeck

frontend/components/listings/detail/EditListing.tsx

@@ -9,15 +9,16 @@ import { PhoneInputModal } from "@/components/listings/offer/PhoneInputModal";
 import { VerificationCodeModal } from "@/components/listings/offer/VerificationCodeModal";
 import { DeleteListing } from "@/components/listings/detail/DeleteListing";
 import { Button } from "@/components/ui/button";
-import { getPhoneStatus } from "@/lib/actions";
-import type { Item, Sublet } from "@/lib/types";
+import { getMyOfferForListing, getPhoneStatus } from "@/lib/actions";
+import type { Item, Offer, Sublet } from "@/lib/types";
 
 interface Props {
   listing: Item | Sublet;
   listingPrice: number;
   listingOwnerLabel: string;
   priceLabel?: string;
   isOwner?: boolean;
+  initialMyOffer?: Offer | null;
 }
 
 type ModalState = "none" | "phone-input" | "verification" | "offer";
@@ -28,6 +29,7 @@ export const ListingActions = ({
   priceLabel,
   listingOwnerLabel,
   isOwner = false,
+  initialMyOffer = null,
 }: Props) => {
   const [modalState, setModalState] = useState<ModalState>("none");
   const [pendingPhoneNumber, setPendingPhoneNumber] = useState<string>("");
@@ -41,6 +43,12 @@ export const ListingActions = ({
     queryFn: getPhoneStatus,
     enabled: !isOwner,
   });
+  const { data: myOffer, isLoading: isLoadingMyOffer } = useQuery({
+    queryKey: ["myOffer", listing.id],
+    queryFn: () => getMyOfferForListing(listing.id),
+    enabled: !isOwner,
+    initialData: initialMyOffer,
+  });
 
   if (isOwner) {
     const typeLabel = listing.listing_type === "sublet" ? "Sublet" : "Item";
@@ -102,13 +110,15 @@ export const ListingActions = ({
 
   return (
     <>
-      <Button
-        onClick={handleMakeOfferClick}
-        className="bg-brand hover:bg-brand-hover h-12 w-full cursor-pointer text-base text-white"
-      >
-        <DollarSign className="mr-2 h-5 w-5" />
-        Make an Offer
-      </Button>
+      {!isLoadingMyOffer && !myOffer && (
+        <Button
+          onClick={handleMakeOfferClick}
+          className="bg-brand hover:bg-brand-hover h-12 w-full cursor-pointer text-base text-white"
+        >
+          <DollarSign className="mr-2 h-5 w-5" />
+          Make an Offer
+        </Button>
+      )}
 
       <PhoneInputModal
         isOpen={modalState === "phone-input"}

frontend/components/listings/detail/ListingActions.tsx

@@ -6,7 +6,7 @@ import { ListingImageGallery } from "@/components/listings/detail/ListingImageGa
 import { ListingInfo } from "@/components/listings/detail/ListingInfo";
 import { UserCard } from "@/components/listings/detail/UserCard";
 import { ListingActions } from "@/components/listings/detail/ListingActions";
-import { OffersReceivedSection } from "@/components/listings/offer/OffersSection";
+import { OffersReceived } from "@/components/listings/offer/OffersReceived";
 import { BackButton } from "@/components/listings/detail/BackButton";
 import {
   addToUsersFavorites,
@@ -142,8 +142,9 @@ export const ListingDetail = ({
             priceLabel={priceLabel}
             listingOwnerLabel={listingOwnerLabel}
             isOwner={isOwner}
+            initialMyOffer={myOfferGiven}
           />
-          <OffersReceivedSection
+          <OffersReceived
             isOwner={isOwner}
             offersReceived={offersReceived}
             myOfferGiven={myOfferGiven}

frontend/components/listings/detail/ListingDetail.tsx

@@ -60,14 +60,30 @@ export function EditMyOfferModal({
         message: data.message?.trim() || "",
       });
     },
-    onSuccess: () => {
+    onMutate: async (data: OfferFormData) => {
+      await queryClient.cancelQueries({ queryKey: ["myOffer", offer.listing] });
+      const previousOffer = queryClient.getQueryData<Offer | null>(["myOffer", offer.listing]);
+      queryClient.setQueryData<Offer | null>(["myOffer", offer.listing], {
+        ...offer,
+        offered_price: parsePriceString(data.offeredPrice),
+        message: data.message?.trim() || "",
+      });
+      return { previousOffer };
+    },
+    onSuccess: (updatedOffer) => {
       toast.success("Offer updated!");
-      queryClient.invalidateQueries({ queryKey: ["myOffer", offer.listing] });
+      queryClient.setQueryData(["myOffer", offer.listing], updatedOffer);
       onSaved();
     },
-    onError: () => {
+    onError: (_error, _vars, context) => {
+      if (context?.previousOffer !== undefined) {
+        queryClient.setQueryData(["myOffer", offer.listing], context.previousOffer);
+      }
       toast.error("Failed to update offer.");
     },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["myOffer", offer.listing] });
+    },
   });
 
   return (

frontend/components/listings/offer/EditMyOfferModal.tsx

@@ -60,12 +60,42 @@ export function MakeOfferModal({
 
   const createOfferMutation = useMutation({
     mutationFn: createOffer,
+    onMutate: async (variables) => {
+      await queryClient.cancelQueries({ queryKey: ["myOffer", listingId] });
+      const previousOffer = queryClient.getQueryData<Offer | null>(["myOffer", listingId]);
+      const optimisticOffer: Offer = {
+        id: -Date.now(),
+        user: previousOffer?.user ?? {
+          id: 0,
+          username: "you",
+          first_name: "You",
+          last_name: "",
+          email: "",
+          phone_number: null,
+          phone_verified: false,
+        },
+        listing: listingId,
+        offered_price: variables.offeredPrice,
+        message: variables.message ?? "",
+        status: "pending",
+        created_at: new Date().toISOString(),
+      };
+      queryClient.setQueryData(["myOffer", listingId], optimisticOffer);
+      return { previousOffer };
+    },
     onSuccess: (createdOffer: Offer) => {
       toast.success(`Offer sent! The ${listingOwnerLabel.toLowerCase()} will contact you.`);
       queryClient.setQueryData(["myOffer", listingId], createdOffer);
-      queryClient.invalidateQueries({ queryKey: ["myOffer", listingId] });
       onClose();
     },
+    onError: (_error, _vars, context) => {
+      if (context?.previousOffer !== undefined) {
+        queryClient.setQueryData(["myOffer", listingId], context.previousOffer);
+      }
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["myOffer", listingId] });
+    },
   });
 
   const handleCreateOffer = (data: OfferFormData) => {

frontend/components/listings/offer/MakeOfferModal.tsx

@@ -1,10 +1,11 @@
 "use client";
 
 import { Pencil, Trash2, Clock, Star } from "lucide-react";
+import { useQuery } from "@tanstack/react-query";
 import type { Offer } from "@/lib/types";
 import { Button } from "@/components/ui/button";
 import Image from "next/image";
-import { formatDateTime } from "@/lib/utils";
+import { formatServerDateTimeToLocal } from "@/lib/utils";
 
 const STATUS_BADGE: Record<string, { label: string; className: string }> = {
   pending: { label: "Pending", className: "bg-yellow-100 text-yellow-700" },
@@ -21,7 +22,11 @@ export function MyOfferCard({
   onEdit: () => void;
   onDelete: () => void;
 }) {
-  const { date, time } = formatDateTime(offer.created_at);
+  const { data: localCreatedAt } = useQuery({
+    queryKey: ["localDateTime", offer.created_at],
+    queryFn: () => formatServerDateTimeToLocal(offer.created_at),
+    staleTime: Infinity,
+  });
   const badge = STATUS_BADGE[offer.status];
 
   return (
@@ -50,7 +55,7 @@ export function MyOfferCard({
               <div className="flex items-center gap-1 text-xs text-gray-400">
                 <Clock className="h-3 w-3" />
                 <span>
-                  {date} at {time}
+                  {localCreatedAt ? `${localCreatedAt.date} at ${localCreatedAt.time}` : ""}
                 </span>
               </div>
             </div>

frontend/components/listings/offer/MyOfferCard.tsx

@@ -2,11 +2,11 @@
 
 import Image from "next/image";
 import { Check, Clock, Star, X } from "lucide-react";
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { Offer } from "@/lib/types";
 import { Button } from "@/components/ui/button";
 import { changeOfferStatus } from "@/lib/actions";
-import { formatDateTime } from "@/lib/utils";
+import { formatServerDateTimeToLocal } from "@/lib/utils";
 
 const STATUS_BADGE: Record<string, { label: string; className: string }> = {
   accepted: { label: "Accepted", className: "bg-green-100 text-green-700" },
@@ -20,7 +20,11 @@ export const OfferCard = ({
   offer: Offer;
   onStatusChange: (id: number, status: Offer["status"]) => void;
 }) => {
-  const { date, time } = formatDateTime(offer.created_at);
+  const { data: localCreatedAt } = useQuery({
+    queryKey: ["localDateTime", offer.created_at],
+    queryFn: () => formatServerDateTimeToLocal(offer.created_at),
+    staleTime: Infinity,
+  });
 
   const mutation = useMutation({
     mutationFn: (status: Offer["status"]) => changeOfferStatus(offer.id, status),
@@ -53,7 +57,7 @@ export const OfferCard = ({
               <div className="flex items-center gap-1 text-xs text-gray-400">
                 <Clock className="h-3 w-3" />
                 <span>
-                  {date} at {time}
+                  {localCreatedAt ? `${localCreatedAt.date} at ${localCreatedAt.time}` : ""}
                 </span>
               </div>
             </div>

frontend/components/listings/offer/OfferCard.tsx

@@ -5,8 +5,8 @@ import { Offer } from "@/lib/types";
 import { OfferCard } from "@/components/listings/offer/OfferCard";
 import { MyOfferCard } from "@/components/listings/offer/MyOfferCard";
 import { EditMyOfferModal } from "@/components/listings/offer/EditMyOfferModal";
-import { deleteMyOfferForListing } from "@/lib/actions";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { deleteMyOfferForListing, getMyOfferForListing } from "@/lib/actions";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -17,7 +17,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 
-export const OffersReceivedSection = ({
+export const OffersReceived = ({
   isOwner,
   offersReceived: initialOffersReceived,
   myOfferGiven,
@@ -32,28 +32,47 @@ export const OffersReceivedSection = ({
   const [isEditOfferOpen, setIsEditOfferOpen] = useState(false);
   const [isDeleteOfferOpen, setIsDeleteOfferOpen] = useState(false);
   const queryClient = useQueryClient();
+  const { data: myOffer } = useQuery({
+    queryKey: ["myOffer", listingId],
+    queryFn: () => getMyOfferForListing(listingId),
+    enabled: !isOwner,
+    initialData: myOfferGiven,
+  });
 
   const handleStatusChange = (id: number, status: Offer["status"]) => {
     setOffersReceived((prev) => prev.map((offer) => (offer.id === id ? { ...offer, status } : offer)));
   };
 
   const deleteMyOfferMutation = useMutation({
     mutationFn: () => deleteMyOfferForListing(listingId),
+    onMutate: async () => {
+      await queryClient.cancelQueries({ queryKey: ["myOffer", listingId] });
+      const previousOffer = queryClient.getQueryData<Offer | null>(["myOffer", listingId]);
+      queryClient.setQueryData<Offer | null>(["myOffer", listingId], null);
+      return { previousOffer };
+    },
     onSuccess: () => {
       setIsDeleteOfferOpen(false);
+    },
+    onError: (_error, _vars, context) => {
+      if (context?.previousOffer !== undefined) {
+        queryClient.setQueryData(["myOffer", listingId], context.previousOffer);
+      }
+    },
+    onSettled: () => {
       queryClient.invalidateQueries({ queryKey: ["myOffer", listingId] });
     },
   });
 
   if (!isOwner) {
-    if (!myOfferGiven) return null;
+    if (!myOffer) return null;
 
     return (
       <>
         <div className="space-y-3">
           <h2 className="text-lg font-semibold">Your offer</h2>
           <MyOfferCard
-            offer={myOfferGiven}
+            offer={myOffer}
             onEdit={() => setIsEditOfferOpen(true)}
             onDelete={() => setIsDeleteOfferOpen(true)}
           />
@@ -62,7 +81,7 @@ export const OffersReceivedSection = ({
         <EditMyOfferModal
           isOpen={isEditOfferOpen}
           onClose={() => setIsEditOfferOpen(false)}
-          offer={myOfferGiven}
+          offer={myOffer}
           onSaved={() => {
             queryClient.invalidateQueries({ queryKey: ["myOffer", listingId] });
             setIsEditOfferOpen(false);
@@ -116,4 +135,3 @@ export const OffersReceivedSection = ({
     </div>
   );
 };
-

…ponents/listings/offer/OffersSection.tsx …onents/listings/offer/OffersReceived.tsxfrontend/components/listings/offer/OffersSection.tsx renamed to frontend/components/listings/offer/OffersReceived.tsx frontend/components/listings/offer/OffersSection.tsx renamed to frontend/components/listings/offer/OffersReceived.tsx

@@ -26,6 +26,24 @@ export function formatDate(dateString: string) {
 }
 
 export function formatDateTime(dateString: string) {
+  const date = new Date(dateString);
+  const datePart = date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    timeZone: "UTC",
+  });
+  const timePart = date.toLocaleTimeString("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true,
+    timeZone: "UTC",
+  });
+  return { date: datePart, time: timePart };
+}
+
+// Convert an ISO timestamp from the server into the viewer's local machine time.
+export function formatServerDateTimeToLocal(dateString: string) {
   const date = new Date(dateString);
   const datePart = date.toLocaleDateString("en-US", {
     month: "short",