Modal for changing box statuses manually

app/components/Calendar.tsx

@@ -15,6 +15,17 @@ export default function Calendar() {
     const [firstWeekPadding, setFirstWeekPadding] = useState<JSX.Element[]>([]);
     const [showLatestBoxModal, setShowLatestBoxModal] = useState(false);
     const [latestBoxStatus, setLatestBoxStatus] = useState<string>(boxStatuses[0]);
+    const [latestBox, setLatestBox] = useState<Box>({
+        id: "",
+        pickup_date: null,
+        delivery_date: new Date(),
+    });
+    const [showClickedBoxModal, setShowClickedBoxModal] = useState(false);
+    const [clickedBox, setClickedBox] = useState<Box>({
+        id: "",
+        pickup_date: null,
+        delivery_date: new Date(),
+    });
 
     const generateFirstWeekPadding = (month: number) => {
         const firstDay = new Date(new Date().getFullYear(), month, 1).getDay();
@@ -43,45 +54,25 @@ export default function Calendar() {
                         key={index}
                         className={`${styles.calendarCell} ${matchingBox.pickup_date ? styles.pickedUpCell : styles.deliveredCell}`}
                         onClick={() => {
-                            if (matchingBox.pickup_date) {
+                            setClickedBox(matchingBox);
-                                // If the box is already picked up, mark it as delivered
+                            setShowClickedBoxModal(true);
-                                markBoxDelivered(matchingBox.id).then((updatedBox) => {
+                        }
-                                    setCustomerData((prev) => ({
+                        }>
-                                        ...prev,
+                        {
-                                        boxes: prev.boxes.map(box =>
+                            date.toLocaleDateString("fi-FI", {
-                                            box.id === updatedBox.id ? { ...box, pickup_date: null } : box
+                                day: "2-digit",
-                                        ),
+                                month: "2-digit",
-                                    }));
+                            })
-                                }
+                        }
-                                ).catch((error) => {
+                        < br />
-                                    console.error("Error marking box as delivered:", error);
+                        {
-                                });
+                            matchingBox.pickup_date ? (
-                                return;
+                                <span className={styles.statusText}>Haettu</span>
-                            } else {
+                            ) : (
-                                markBoxPickedUp(matchingBox.id).then((updatedBox) => {
+                                <span className={styles.statusText}>Jako</span>
-                                    setCustomerData((prev) => ({
+                            )
-                                        ...prev,
+                        }
-                                        boxes: prev.boxes.map(box =>
+                    </div >
-                                            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",
-                        })}
-                        <br />
-                        {matchingBox.pickup_date ? (
-                            <span className={styles.statusText}>Haettu</span>
-                        ) : (
-                            <span className={styles.statusText}>Jako</span>
-                        )}
-                    </div>
                 );
             }
 
@@ -97,6 +88,36 @@ export default function Calendar() {
         return calendarCells;
     }
 
+    const changeClickedBoxStatus = () => {
+        if (clickedBox.pickup_date) {
+            // If the box is already picked up, mark it as delivered
+            markBoxDelivered(clickedBox.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(clickedBox.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);
+            })
+        }
+    }
+
     const renderLatestBoxButton = () => {
         switch (latestBoxStatus) {
             case "no boxes":
@@ -151,9 +172,6 @@ export default function Calendar() {
     }
 
     const markLatestBoxPickedUp = () => {
-        const deliveredBoxes = customerData.boxes.filter(box => new Date(box.delivery_date).getMonth() === selectedMonth && !box.pickup_date);
-        if (deliveredBoxes.length === 0) return;
-        const latestBox = deliveredBoxes[0];
         markBoxPickedUp(latestBox.id).then((updatedBox) => {
             setCustomerData((prev) => ({
                 ...prev,
@@ -166,6 +184,16 @@ export default function Calendar() {
         });
     }
 
+    useEffect(() => {
+        const deliveredBoxes = customerData.boxes.filter(box => new Date(box.delivery_date).getMonth() === selectedMonth && !box.pickup_date);
+        if (deliveredBoxes.length === 0) return;
+        const latestBox = deliveredBoxes[0];
+
+        if (latestBox) {
+            setLatestBox(latestBox);
+        }
+    }, [customerData.boxes, selectedMonth]);
+
     return (
         <>
             <h2 className={styles.monthTitle}>
@@ -200,7 +228,10 @@ export default function Calendar() {
             >
                 <div className={styles.latestBoxModalContent}>
                     <h2>Viimeisin laatikko</h2>
-                    <p>Oletko varma, että haluat kuitata viimeisimmän laatikon haetuksi?</p>
+                    <p>Oletko varma, että haluat kuitata viimeisimmän laatikon ({new Date(latestBox.delivery_date).toLocaleDateString("fi-FI", {
+                        day: "2-digit",
+                        month: "2-digit",
+                    })}) haetuksi?</p>
                     <button
                         className={styles.latestBoxConfirmButton}
                         onClick={() => {
@@ -218,6 +249,40 @@ export default function Calendar() {
                     </button>
                 </div>
             </Modal>
+            <Modal
+                open={showClickedBoxModal}
+                onClose={() => setShowClickedBoxModal(false)}
+                className={styles.latestBoxModal}
+            >
+                <div className={styles.latestBoxModalContent}>
+                    <h2>Satolaatikko {" "}
+                        {new Date(clickedBox.delivery_date).toLocaleDateString("fi-FI", {
+                            day: "2-digit",
+                            month: "2-digit",
+                        })}
+                    </h2>
+                    <p>Oletko varma, että haluat {clickedBox.pickup_date ? "peruuttaa " : "kuitata "}
+                        {new Date(clickedBox.delivery_date).toLocaleDateString("fi-FI", {
+                            day: "2-digit",
+                            month: "2-digit",
+                        })} päivän laatikon {clickedBox.pickup_date ? "haun" : "haetuksi"}?</p>
+                    <button
+                        className={styles.latestBoxConfirmButton}
+                        onClick={() => {
+                            changeClickedBoxStatus();
+                            setShowClickedBoxModal(false);
+                        }}
+                    >
+                        Kyllä
+                    </button>
+                    <button
+                        className={styles.latestBoxCancelButton}
+                        onClick={() => setShowClickedBoxModal(false)}
+                    >
+                        Peruuta
+                    </button>
+                </div>
+            </Modal >
         </>
     );
 }