Hook up bid now button (#84)

Co-authored-by: _Kevin_Zhang_ <[email protected]>
Co-authored-by: Lance Tan <[email protected]>

backend/auction/serializers.py

@@ -1,9 +1,13 @@
+from datetime import date
+
 from rest_framework import serializers
 
 from .models import Auction, AuctionItem, AuctionVerifiedUser
 
 
 class AuctionSerializer(serializers.ModelSerializer):
+    auctionday_id = serializers.SerializerMethodField()
+
     class Meta:
         model = Auction
         fields = [
@@ -15,8 +19,14 @@ class Meta:
             "end_time",
             "cover_image",
             "is_published",
+            "auctionday_id",  # Add auctionday_id to the fields
         ]
 
+    def get_auctionday_id(self, obj):
+        current_date = date.today()
+        auction_day = obj.days.filter(date=current_date).first()
+        return auction_day.id if auction_day else None
+
 
 class AuctionItemSerializer(serializers.ModelSerializer):
     class Meta:

frontend/src/components/modals/BiddingModal.jsx

@@ -3,15 +3,18 @@ import DoNotDisturbOnOutlinedIcon from '@mui/icons-material/DoNotDisturbOnOutlin
 import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
 import BidNowButton from '../buttons/BidNowButton';
 import CancelButton from '../buttons/CancelButton';
+import useAxios from '../../hooks/useAxios';
 
 export default function BiddingModal({
 	isOpen,
 	onClose,
-	handleBidNow,
+	auction,
+	vehicle,
 	minimumBid,
+	onPriceUpdate,
 }) {
 	if (!isOpen) return null;
-
+	const { fetchData } = useAxios();
 	const increments = minimumBid > 100000 ? 5000 : 1000;
 	const [bidAmount, setBidAmount] = useState(minimumBid + increments);
 
@@ -37,6 +40,30 @@ export default function BiddingModal({
 		}
 	};
 
+	const handleBidNow = async () => {
+		const bidderId = 1;
+
+		try {
+			const response = await fetchData({
+				method: 'POST',
+				endpoint: '/v1/bids/',
+				data: {
+					amount: bidAmount,
+					bidder_id: bidderId,
+					auction_id: auction.id,
+					auction_day_id: auction.auctionday_id,
+					object_id: vehicle.id,
+				},
+			});
+			if (response.status === 201) {
+				onClose();
+				onPriceUpdate(bidAmount);
+			}
+		} catch (error) {
+			/* empty */
+		}
+	};
+
 	useEffect(() => {
 		window.addEventListener('click', handleOutsideClick);
 		return () => {

frontend/src/pages/VehicleDetailsPage.jsx

@@ -37,7 +37,6 @@ export default function VehicleDetailsPage() {
 				endpoint: '/v1/auctions/current',
 				method: 'GET',
 			});
-
 			setAuction(response.data);
 		};
 		fetchAuction();
@@ -63,7 +62,12 @@ export default function VehicleDetailsPage() {
 		startTime.setDate(startTime.getDate() + 1);
 		endTime.setDate(endTime.getDate() + 1);
 	}
-
+	const handlePriceUpdate = (newPrice) => {
+		setVehicle((prevVehicle) => ({
+			...prevVehicle,
+			current_price: newPrice,
+		}));
+	};
 	return (
 		<div className="flex flex-col max-w-screen min-w-screen min-h-screen justify-between">
 			<ScrollRestoration />
@@ -187,10 +191,12 @@ export default function VehicleDetailsPage() {
 			</div>
 			{bidModalOpen && (
 				<BiddingModal
+					vehicle={vehicle}
+					auction={auction}
 					isOpen={bidModalOpen}
 					onClose={() => setBidModalOpen(false)}
-					handleBidNow={() => {}}
-					minimumBid={210000}
+					minimumBid={vehicle.current_price}
+					onPriceUpdate={handlePriceUpdate}
 				/>
 			)}