Allow unpicking box, fix calendar render

app/api.ts

@@ -39,3 +39,25 @@ export const markBoxPickedUp = async (id: string) => {
         throw error;
     }
 }
+
+export const markBoxDelivered = 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: null }),
+        });
+        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.tsx

@@ -4,7 +4,7 @@ import { getMonthName, daysInMonth } from "../utils/dateUtils";
 import { customerState } from "../store";
 import { Box } from "../types";
 import { useAtom } from "jotai";
-import { markBoxPickedUp } from "../api";
+import { markBoxDelivered, markBoxPickedUp } from "../api";
 
 export default function Calendar() {
     const [customerData, setCustomerData] = useAtom(customerState);
@@ -15,7 +15,7 @@ export default function Calendar() {
     useEffect(() => {
         setCalendarCells(generateCalendarCells(selectedMonth, customerData.boxes));
         setFirstWeekPadding(generateFirstWeekPadding(selectedMonth));
-    }, [selectedMonth]);
+    }, [selectedMonth, customerData.boxes]);
 
     const generateFirstWeekPadding = (month: number) => {
         const firstDay = new Date(new Date().getFullYear(), month, 1).getDay();
@@ -44,20 +44,33 @@ export default function Calendar() {
                         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
-                                    ),
-                                }));
+                            if (matchingBox.pickup_date) {
+                                // If the box is already picked up, mark it as delivered
+                                markBoxDelivered(matchingBox.id).then((updatedBox) => {
+                                    setCustomerData((prev) => ({
+                                        ...prev,
+                                        boxes: prev.boxes.map(box =>
+                                            box.id === updatedBox.id ? { ...box, pickup_date: null } : box
+                                        ),
+                                    }));
+                                }
+                                ).catch((error) => {
+                                    console.error("Error marking box as delivered:", error);
+                                });
+                                return;
+                            } else {
+                                markBoxPickedUp(matchingBox.id).then((updatedBox) => {
+                                    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);
+                                })
                             }
-                            ).catch((error) => {
-                                console.error("Error marking box as picked up:", error);
-                            })
                         }}>
                         {date.toLocaleDateString("fi-FI", {
                             day: "2-digit",

app/types.ts

@@ -7,5 +7,5 @@ export type CustomerData = {
 export type Box = {
     id: string;
     delivery_date: Date;
-    pickup_date: Date;
+    pickup_date: Date | null;
 }