From 7a3a9a63d4091c0b5c042010b5481139a4903a08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Veikko=20Lintuj=C3=A4rvi?= <veikko@lintujarvi.fi>
Date: Tue, 17 Jun 2025 18:15:36 +0300
Subject: [PATCH] Allow unpicking box, fix calendar render

---
 app/api.ts                  | 22 +++++++++++++++++++
 app/components/Calendar.tsx | 43 ++++++++++++++++++++++++-------------
 app/types.ts                |  2 +-
 3 files changed, 51 insertions(+), 16 deletions(-)

diff --git a/app/api.ts b/app/api.ts
index 475017d..277f797 100644
--- a/app/api.ts
+++ b/app/api.ts
@@ -38,4 +38,26 @@ export const markBoxPickedUp = async (id: string) => {
     } catch (error) {
         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;
+    }
 }
\ No newline at end of file
diff --git a/app/components/Calendar.tsx b/app/components/Calendar.tsx
index bab7bf8..cdb4fb3 100644
--- a/app/components/Calendar.tsx
+++ b/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",
diff --git a/app/types.ts b/app/types.ts
index 7313f91..3209e07 100644
--- a/app/types.ts
+++ b/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;
 }
\ No newline at end of file