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";
 
@@ -15,3 +17,25 @@ export const fetchCustomerData = async (id: string) => {
         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,8 +4,20 @@ import { getMonthName, daysInMonth } from "../utils/dateUtils";
 import { customerState } from "../store";
 import { Box } from "../types";
 import { useAtom } from "jotai";
+import { markBoxPickedUp } from "../api";
 
-const generateFirstWeekPadding = (month: number) => {
+export default function Calendar() {
+    const [customerData, setCustomerData] = useAtom(customerState);
+    const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth());
+    const [calendarCells, setCalendarCells] = useState<JSX.Element[]>([]);
+    const [firstWeekPadding, setFirstWeekPadding] = useState<JSX.Element[]>([]);
+
+    useEffect(() => {
+        setCalendarCells(generateCalendarCells(selectedMonth, customerData.boxes));
+        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}`}>
@@ -13,22 +25,40 @@ const generateFirstWeekPadding = (month: number) => {
             </div>
         ));
         return padding;
-}
+    }
 
-const generateCalendarCells = (month: number, boxes: Box[]) => {
+    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 matchingBox = boxes.find(box => {
                 const boxDate = new Date(box.delivery_date);
                 return boxDate.getDate() === day && boxDate.getMonth() === month && boxDate.getFullYear() === date.getFullYear();
             });
 
-        if (isDeliveryDate) {
+            if (matchingBox) {
                 return (
-                <div key={index} className={`${styles.calendarCell} ${styles.deliveryDateCell}`}>
+                    <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",
@@ -47,18 +77,7 @@ const generateCalendarCells = (month: number, boxes: Box[]) => {
             );
         });
         return calendarCells;
-}
-
-export default function Calendar() {
-    const [customerData, setCustomerData] = useAtom(customerState);
-    const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth());
-    const [calendarCells, setCalendarCells] = useState<JSX.Element[]>([]);
-    const [firstWeekPadding, setFirstWeekPadding] = useState<JSX.Element[]>([]);
-
-    useEffect(() => {
-        setCalendarCells(generateCalendarCells(selectedMonth, customerData.boxes));
-        setFirstWeekPadding(generateFirstWeekPadding(selectedMonth));
-    }, [selectedMonth]);
+    }
 
     return (
         <>