Hook up real time bid updates to frontend

backend/bid/signals.py

@@ -43,7 +43,7 @@ def bid_updated(sender, instance, created, **kwargs):
         }
 
         async_to_sync(channel_layer.group_send)(
-            "auction_{}".format(instance.auction_id),
+            "bid_updates",
             {"type": "bid.update", "bid_data": bid_data},
         )
 

backend/bid/views.py

@@ -15,6 +15,7 @@
 
 class BidListApiView(APIView):
     permission_classes = [IsAuthenticated]
+
     serializer_class = BidSerializer
     cognitoService = AWSCognitoService()
 
@@ -52,8 +53,14 @@ def post(self, request, *args, **kwargs):
 
         item = get_object_or_404(model, id=data.get("object_id"))
 
-        highest_bid = Bid.objects.filter(item=item).order_by("-amount").first()
-        if highest_bid and int(data["amount"]) <= highest_bid.amount:
+        highest_bid = Bid.objects.filter(object_id=item.id).order_by("-amount").first()
+        if highest_bid is None:
+            if int(data["amount"]) < item.starting_price:
+                return Response(
+                    {"error": "Your bid must be higher than the starting price."},
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
+        elif highest_bid and int(data["amount"]) <= highest_bid.amount:
             return Response(
                 {"error": "Your bid must be higher than the current highest bid."},
                 status=status.HTTP_400_BAD_REQUEST,

frontend/src/pages/ListingsPage.jsx

@@ -40,7 +40,9 @@ export default function ListingsPage() {
 	const [selectedMinPrice, setSelectedMinPrice] = useState(0);
 	const [selectedMaxPrice, setSelectedMaxPrice] = useState(0);
 	const { fetchData } = useAxios();
-
+	const wsURL = process.env.REACT_APP_NODE_ENV === 'dev'
+		? process.env.REACT_APP_DEV_BACKEND_WS_BASE_URL
+		: process.env.REACT_APP_PROD_BACKEND_WS_BASE_URL
 	const sortByItems = ['All', 'Trucks', 'Equipment', 'Trailers'];
 
 	const updateMinPrice = ({ target: { value } }) => {
@@ -51,6 +53,27 @@ export default function ListingsPage() {
 		}
 	};
 
+	useEffect(() => {
+		const chatSocket = new WebSocket(wsURL);
+
+		chatSocket.onmessage = function(event) {
+		  const message = JSON.parse(event.data);
+
+		  if (message.bid_data) {
+			const bidData = message.bid_data;
+
+			setUnits(prevUnits => 
+			  prevUnits.map(unit => 
+				unit.id === bidData.object_id 
+				  ? { ...unit, current_price: bidData.amount } 
+				  : unit
+			  )
+			);
+		  }
+		};
+
+		return () => chatSocket.close();
+	  }, []);
 	const updateMaxPrice = ({ target: { value } }) => {
 		if (value === '') {
 			setSelectedMaxPrice(0);