Logic to change box as picked up

app/api.ts

@@ -1,3 +1,5 @@
+import { Box, CustomerData } from "./types";
+
 export const fetchCustomerData = async (id: string) => {
     const baseUrl = "http://localhost:9090";
 
@@ -14,4 +16,26 @@ export const fetchCustomerData = async (id: string) => {
     } catch (error) {
         throw error;
     }
+}
+
+export const markBoxPickedUp = async (id: string) => {
+    const baseUrl = "http://localhost:9090";
+
+    try {
+        const response = await fetch(`${baseUrl}/loota/`, {
+            method: 'POST',
+            mode: "cors",
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ id: id, pickup_date: new Date().toISOString().split('.')[0] }),
+        });
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const updatedBox = await response.json();
+        return updatedBox;
+    } catch (error) {
+        throw error;
+    }
 }

app/components/Calendar.module.css

@@ -35,10 +35,14 @@
     border-radius: 0.5rem;
 }
 
-.deliveryDateCell {
+.deliveredCell {
     background-color: #62ed8e;
 }
 
+.pickedUpCell {
+    background-color: #6287ed;
+}
+
 .firstWeekPaddingCell {
     height: 3rem;
     width: 3rem;

app/components/Calendar.tsx

@@ -4,50 +4,7 @@ import { getMonthName, daysInMonth } from "../utils/dateUtils";
 import { customerState } from "../store";
 import { Box } from "../types";
 import { useAtom } from "jotai";
-
-const generateFirstWeekPadding = (month: number) => {
-    const firstDay = new Date(new Date().getFullYear(), month, 1).getDay();
-    const padding = Array.from({ length: firstDay === 0 ? 6 : firstDay - 1 }, (_, index) => (
-        <div key={index} className={`${styles.firstWeekPaddingCell}`}>
-            &nbsp;
-        </div>
-    ));
-    return padding;
-}
-
-const generateCalendarCells = (month: number, boxes: Box[]) => {
-    const monthDays = daysInMonth[month];
-
-    const calendarCells = Array.from({ length: monthDays }, (_, index) => {
-        const day = index + 1;
-        const date = new Date(new Date().getFullYear(), month, day);
-        const isDeliveryDate = boxes.find(box => {
-            const boxDate = new Date(box.delivery_date);
-            return boxDate.getDate() === day && boxDate.getMonth() === month && boxDate.getFullYear() === date.getFullYear();
-        });
-
-        if (isDeliveryDate) {
-            return (
-                <div key={index} className={`${styles.calendarCell} ${styles.deliveryDateCell}`}>
-                    {date.toLocaleDateString("fi-FI", {
-                        day: "2-digit",
-                        month: "2-digit",
-                    })}
-                </div>
-            );
-        }
-
-        return (
-            <div key={index} className={`${styles.calendarCell}`}>
-                {date.toLocaleDateString("fi-FI", {
-                    day: "2-digit",
-                    month: "2-digit",
-                })}
-            </div>
-        );
-    });
-    return calendarCells;
-}
+import { markBoxPickedUp } from "../api";
 
 export default function Calendar() {
     const [customerData, setCustomerData] = useAtom(customerState);
@@ -60,6 +17,68 @@ export default function Calendar() {
         setFirstWeekPadding(generateFirstWeekPadding(selectedMonth));
     }, [selectedMonth]);
 
+    const generateFirstWeekPadding = (month: number) => {
+        const firstDay = new Date(new Date().getFullYear(), month, 1).getDay();
+        const padding = Array.from({ length: firstDay === 0 ? 6 : firstDay - 1 }, (_, index) => (
+            <div key={index} className={`${styles.firstWeekPaddingCell}`}>
+                &nbsp;
+            </div>
+        ));
+        return padding;
+    }
+
+    const generateCalendarCells = (month: number, boxes: Box[]) => {
+        const monthDays = daysInMonth[month];
+
+        const calendarCells = Array.from({ length: monthDays }, (_, index) => {
+            const day = index + 1;
+            const date = new Date(new Date().getFullYear(), month, day);
+            const matchingBox = boxes.find(box => {
+                const boxDate = new Date(box.delivery_date);
+                return boxDate.getDate() === day && boxDate.getMonth() === month && boxDate.getFullYear() === date.getFullYear();
+            });
+
+            if (matchingBox) {
+                return (
+                    <div
+                        key={index}
+                        className={`${styles.calendarCell} ${matchingBox.pickup_date ? styles.pickedUpCell : styles.deliveredCell}`}
+                        onClick={() => {
+                            console.log(`Box picked up for date: ${date.toLocaleDateString("fi-FI")}`);
+
+                            markBoxPickedUp(matchingBox.id).then((updatedBox) => {
+                                console.log(`Box with ID ${updatedBox.id} marked as picked up.`);
+                                setCustomerData((prev) => ({
+                                    ...prev,
+                                    boxes: prev.boxes.map(box =>
+                                        box.id === updatedBox.id ? { ...box, pickup_date: updatedBox.pickup_date } : box
+                                    ),
+                                }));
+                            }
+                            ).catch((error) => {
+                                console.error("Error marking box as picked up:", error);
+                            })
+                        }}>
+                        {date.toLocaleDateString("fi-FI", {
+                            day: "2-digit",
+                            month: "2-digit",
+                        })}
+                    </div>
+                );
+            }
+
+            return (
+                <div key={index} className={`${styles.calendarCell}`}>
+                    {date.toLocaleDateString("fi-FI", {
+                        day: "2-digit",
+                        month: "2-digit",
+                    })}
+                </div>
+            );
+        });
+        return calendarCells;
+    }
+
     return (
         <>
             <h2 className={styles.monthTitle}>