Submitting identifier and fetching customer data

app/api.ts

@@ -0,0 +1,17 @@
+export const fetchCustomerData = async (id: string) => {
+    const baseUrl = "http://localhost:9090";
+
+    try {
+        const response = await fetch(`${baseUrl}/loota/${id}`, {
+            method: 'GET',
+            mode: "cors",
+        });
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const data = await response.json();
+        return data;
+    } catch (error) {
+        throw error;
+    }
+}

app/components/Calendar.module.css

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

app/components/Calendar.tsx

@@ -1,6 +1,9 @@
 import { JSX, useEffect, useState } from "react";
 import styles from "./Calendar.module.css";
 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();
@@ -12,12 +15,27 @@ const generateFirstWeekPadding = (month: number) => {
     return padding;
 }
 
-const generateCalendarCells = (month: number) => {
+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}`}>
@@ -32,12 +50,13 @@ const generateCalendarCells = (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));
+        setCalendarCells(generateCalendarCells(selectedMonth, customerData.boxes));
         setFirstWeekPadding(generateFirstWeekPadding(selectedMonth));
     }, [selectedMonth]);
 

app/components/Landing.module.css

@@ -0,0 +1,27 @@
+.identifierForm {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+}
+
+.identifierInput {
+    padding: 0.5rem;
+    border: 1px solid #ccc;
+    border-radius: 0.5rem;
+    width: 100%;
+    max-width: 300px;
+}
+
+.identifierLabel {
+    font-weight: bold;
+}
+
+.submitButton {
+    background-color: #4caf50;
+    color: white;
+    padding: 0.5rem 1rem;
+    border: none;
+    border-radius: 0.5rem;
+    cursor: pointer;
+}

app/components/Landing.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import styles from "./Landing.module.css";
+import { customerState } from "../store";
+import Calendar from "./Calendar";
+import { fetchCustomerData } from "../api";
+import { useAtom } from "jotai";
+
+export default function Landing() {
+    const [customerData, setCustomerData] = useAtom(customerState);
+
+    const submitIdentifier = (formData: FormData) => {
+        const identifier = formData.get("identifier") as string;
+        if (identifier) {
+            fetchCustomerData(identifier)
+                .then((data) => {
+                    setCustomerData(data);
+                }).catch((error) => {
+                    console.error("Error fetching customer data:", error);
+                });
+        }
+    }
+
+    return (
+        customerData.identifier === 'Tuntematon' ? (
+            <form action={submitIdentifier} className={styles.identifierForm}>
+                <label htmlFor="identifier" className={styles.identifierLabel}>Tunnus</label>
+                <input name="identifier" className={styles.identifierInput} />
+                <button type="submit" className={styles.submitButton} >Login</button>
+            </form>) : (
+            <Calendar />
+        )
+    );
+}

app/page.tsx

@@ -1,6 +1,5 @@
 'use client'
-import { use } from "react";
-import Calendar from "./components/Calendar";
+import Landing from "./components/Landing";
 import styles from "./page.module.css";
 
 export default function Home() {
@@ -8,7 +7,7 @@ export default function Home() {
     <div className={styles.page}>
       <span className={styles.companyName}>Livonsaaren Osuuspuutarhan</span>
       <h1 className={styles.title}>Satolaatikko kalenteri</h1>
-      <Calendar />
+      <Landing />
     </div>
   );
 }

app/store.ts

@@ -0,0 +1,12 @@
+import { atom } from "jotai";
+import { CustomerData } from "./types";
+
+export const customerState = atom<CustomerData>({
+    identifier: 'Tuntematon',
+    location: 'Tuntematon',
+    boxes: [{
+        id: 'Tuntematon',
+        delivery_date: new Date(),
+        pickup_date: new Date(),
+    }],
+});

app/types.ts

@@ -0,0 +1,11 @@
+export type CustomerData = {
+    identifier: string;
+    location: string;
+    boxes: Box[];
+}
+
+export type Box = {
+    id: string;
+    delivery_date: Date;
+    pickup_date: Date;
+}