Merge pull request #15 from Diebbo/calendario-build

Calendario build

client/app/(app)/calendar/page.tsx

@@ -2,15 +2,17 @@ import React from "react";
 import CalendarPage from "@/components/calendar/calendar";
 import { getEvents } from "@/actions/events";
 import { getCurrentTime } from "@/actions/setTime";
-import { SelfieEvent } from "@/helpers/types";
+import { People, SelfieEvent } from "@/helpers/types";
+import { getFriends } from "@/actions/friends";
 
 const Page = async () => {
   try {
-    const [events, dbDate]: [SelfieEvent[], Date] = await Promise.all([
+    const [events, dbDate, friends]: [SelfieEvent[], Date, People] = await Promise.all([
       getEvents(),
       getCurrentTime(),
+      getFriends(),
     ]);
-    return <CalendarPage initialEvents={events} dbdate={new Date(dbDate)} />;
+    return <CalendarPage initialEvents={events} dbdate={new Date(dbDate)} friends={friends} />;
   } catch (error) {
     console.log(error);
   }

client/components/calendar/calendar.tsx

@@ -1,14 +1,15 @@
 "use client";
-import { Calendar, Chip, Button, Tooltip } from "@nextui-org/react";
+import { Chip, Button, Tooltip } from "@nextui-org/react";
 import React, { useState, useEffect } from "react";
 import EventAdder from "@/components/calendar/eventAdder";
 import CalendarCell from "@/components/calendar/calendarCell";
-import { SelfieEvent } from "@/helpers/types";
+import { SelfieEvent, People } from "@/helpers/types";
 import { reloadContext, mobileContext } from "./reloadContext"
 
 interface CalendarPageProps {
   initialEvents: SelfieEvent[];
   dbdate: Date;
+  friends: People;
 }
 
 const CalendarPage = (props: CalendarPageProps) => {
@@ -79,8 +80,8 @@ const CalendarPage = (props: CalendarPageProps) => {
 
   useEffect(() => {
     if (reloadEvents) {
-      console.log("sto fetchando");
-      setCurrentTime();
+      console.log("sto fetchando gli eventi");
+      //setCurrentTime();
       setAllEvents();
       setReloadEvents(false);
     }
@@ -190,6 +191,7 @@ const CalendarPage = (props: CalendarPageProps) => {
                   <
                 </button>
                 <EventAdder
+                  friends={props.friends}
                   aria-label="Event Adder Button"
                 />
                 <Tooltip
@@ -199,19 +201,26 @@ const CalendarPage = (props: CalendarPageProps) => {
                   delay={0}
                   closeDelay={0}
                   placement="top"
-                  className="text-white border-2 border-purple-600 bg-violet-400 text-black"
-                >
+                  classNames={{
+                    base: [
+                      "before:bg-neutral-400 dark:before:bg-white",
+                    ],
+                    content: [
+                      "py-2 px-4 shadow-xl",
+                      "text-black bg-gradient-to-br from-white to-neutral-400",
+                    ],
+                  }}>
                   <Chip
                     variant="solid"
-                    className="text-base rounded-xl py-5 bg-violet-600"
+                    className="text-base rounded-xl py-5 bg-default"
                   >
                     {monthNames[currentDate.getMonth()]} {currentDate.getFullYear()}
                   </Chip>
                 </Tooltip>
                 <Button
                   variant="solid"
                   onClick={handleToday}
-                  className="text-white text-base rounded-xl bg-warning border-transparent border-2 hover:border-white"
+                  className="text-white text-base rounded-xl bg-primary border-transparent border-2 hover:border-white"
                 >
                   Oggi
                 </Button>
@@ -230,7 +239,7 @@ const CalendarPage = (props: CalendarPageProps) => {
                         (day) => (
                           <th
                             key={day}
-                            className="h-10 border border-black dark:border-white text-center bg-slate-400 dark:bg-black text-white dark:text-white text-xs md:text-sm w-1/7 h-1/9"
+                            className="h-1 border border-black dark:border-white text-center bg-slate-400 dark:bg-black text-white dark:text-white text-xs md:text-sm w-1/7 h-1/9"
                           >
                             {day}
                           </th>

client/components/calendar/calendarCell.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import React, { useState } from "react";
-import { Card, CardBody } from "@nextui-org/react";
+import React, { useState, useEffect } from "react";
+import { Card, CardBody, Modal, ModalContent, ModalHeader, ModalBody, Button } from "@nextui-org/react";
 import ShowEvent from './showEvent'
 import { SelfieEvent } from "@/helpers/types";
 
@@ -13,37 +13,118 @@ const areSameDay = (date1: Date, date2: Date): boolean => {
   );
 };
 
+const isAM = (date: Date): boolean => {
+  return date.getHours() < 12;
+};
+
 const getEventsByDay = (
   events: SelfieEvent[] | undefined,
   date: Date,
 ): SelfieEvent[] => {
   if (!Array.isArray(events)) {
-    return []; // Restituisci un array vuoto invece di lanciare un errore
+    return [];
   }
 
-  return events.filter((event) => {
-    const eventDate = new Date(event.dtstart);
-    return areSameDay(eventDate, date);
+  const filteredEvents = events.filter((event) => {
+    const eventDateStart = new Date(event.dtstart);
+    const eventDateEnd = new Date(event.dtend);
+    return (
+      (date.getTime() <= eventDateEnd.getTime() && date.getTime() >= eventDateStart.getTime()
+      ) || (
+        areSameDay(date, eventDateStart)))
+      ?
+      true : false;
+  });
+
+  // Sort events by AM/PM first, then by time
+  return filteredEvents.sort((a, b) => {
+    const dateA = new Date(a.dtstart);
+    const dateB = new Date(b.dtstart);
+
+    // Compare AM/PM first
+    const aIsAM = isAM(dateA);
+    const bIsAM = isAM(dateB);
+
+    if (aIsAM && !bIsAM) return -1;
+    if (!aIsAM && bIsAM) return 1;
+
+    // If both are AM or both are PM, sort by time
+    return dateA.getTime() - dateB.getTime();
+  });
+};
+
+const formatDate = (date: Date): string => {
+  return date.toLocaleDateString('it-IT', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
   });
 };
 
+const useIsMobile = () => {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const checkIsMobile = () => {
+      setIsMobile(window.innerWidth < 768); // 768px is typical mobile breakpoint
+    };
+
+    checkIsMobile();
+    window.addEventListener('resize', checkIsMobile);
+
+    return () => {
+      window.removeEventListener('resize', checkIsMobile);
+    };
+  }, []);
+
+  return isMobile;
+};
+
 const showEvents = (
   events: SelfieEvent[] | undefined,
   date: Date,
   handleOpen: (event: SelfieEvent) => void,
+  isMobile: boolean
 ): JSX.Element[] => {
   const todayEvents = getEventsByDay(events, date);
-  return todayEvents.map((event, index) => (
+  const eventsToShow = todayEvents.slice(0, 2);
+
+  return eventsToShow.map((event, index) => (
     <button
       onClick={() => handleOpen(event)}
       key={index}
-      className="rounded-[100px] py-2 px-4 border-1 border-black bg-slate-700 text-left text-white w-full overflow-hidden truncate dark:hover:border-1 dark:hover:border-white"
+      className="rounded-[100px] p-1 px-2 border-1 border-black bg-slate-700 text-left text-white w-full overflow-hidden truncate dark:hover:border-1 dark:hover:border-white"
     >
+      {!isMobile && (
+        <>
+          <span className="font-medium">
+            {new Date(event.dtstart).toLocaleTimeString('it-IT', { hour: '2-digit', minute: '2-digit' })}
+          </span>
+          {" - "}
+        </>
+      )}
       {event.title}
     </button>
   ));
 };
 
+const monthNames = [
+  "Gennaio",
+  "Febbraio",
+  "Marzo",
+  "Aprile",
+  "Maggio",
+  "Giugno",
+  "Luglio",
+  "Agosto",
+  "Settembre",
+  "Ottobre",
+  "Novembre",
+  "Dicembre",
+];
+
 interface CalendarCellProps {
   day: number;
   date: Date;
@@ -55,43 +136,96 @@ const CalendarCell: React.FC<CalendarCellProps> = ({
   day,
   date,
   isToday,
-  events = [], // Questo già fornisce un default, ma assicuriamoci che sia un array
+  events = [],
 }) => {
+  const [selectedEvents, setSelectedEvents] = useState<SelfieEvent | null>(null);
+  const [isOpenSE, setIsOpenSE] = useState(false);
+  const [isAllEventsOpen, setIsAllEventsOpen] = useState(false);
+  const isMobile = useIsMobile();
   const cellDate = new Date(date.getFullYear(), date.getMonth(), day);
   const safeEvents = Array.isArray(events) ? events : [];
-  const [selectedEvents, setSelectedEvents] = useState<SelfieEvent | null>(null)
-  const [isOpen, setIsOpen] = useState(false);
+  const todayEvents = getEventsByDay(safeEvents, cellDate);
+  const hasMoreEvents = todayEvents.length > 2;
 
   const handleClose = () => {
     setSelectedEvents(null);
-    setIsOpen(false);
+    setIsOpenSE(false);
   };
 
   const handleOpen = (e: SelfieEvent) => {
     setSelectedEvents(e);
-    setIsOpen(true);
+    setIsOpenSE(true);
+  };
+
+  const formatEventTime = (event: SelfieEvent) => {
+    const eventDate = new Date(event.dtstart);
+    const timeString = eventDate.toLocaleTimeString('it-IT', { hour: '2-digit', minute: '2-digit' });
+    return `${timeString}`;
   };
 
   return (
     <Card>
       <CardBody className="p-0 flex flex-col bg-white dark:bg-black">
-        <div
-          className={`p-2 px-4 text-right rounded-[100px] bg-slate-800 text-sm font-bold ${isToday ? "text-slate-700 bg-sky-500 border-2 border-slate-300" : "text-white dark:text-white"}`}
+        <Button
+          onClick={() => setIsAllEventsOpen(true)}
+          className={`justify-end rounded-[100px] text-sm font-bold ${isToday ? "text-slate-200 bg-[#9353d3] border-2 border-slate-300" : "bg-slate-800 text-white dark:text-white"}`}
         >
           {day}
-        </div>
-        <div className="mt-1 space-y-1 overflow-hidden ">
-          {showEvents(safeEvents, cellDate, handleOpen)}
+        </Button>
+        <div className="mt-1 space-y-1 text-xs overflow-hidden">
+          {showEvents(safeEvents, cellDate, handleOpen, isMobile)}
+          {hasMoreEvents && (
+            <Button
+              className="h-fit w-full rounded-[100px] bg-primary text-white border-2 border-transparent hover:border-white"
+              onClick={() => setIsAllEventsOpen(true)}
+            >
+              ...
+            </Button>
+          )}
         </div>
       </CardBody>
+
       <ShowEvent
-        isOpen={isOpen}
+        isOpen={isOpenSE}
         onClose={handleClose}
         selectedEvent={selectedEvents}
       />
-    </Card>
-
 
+      <Modal
+        isOpen={isAllEventsOpen}
+        onClose={() => setIsAllEventsOpen(false)}
+        size="md"
+      >
+        <ModalContent>
+          <ModalHeader>Eventi del {day} {monthNames[date.getMonth()]} </ModalHeader>
+          <ModalBody className="p-4">
+            <div className="space-y-3">
+              {todayEvents.map((event, index) => (
+                <div
+                  key={index}
+                  className="p-3 border rounded-lg border-2 hover:border-secondary cursor-pointer"
+                  onClick={() => {
+                    handleOpen(event);
+                    setIsAllEventsOpen(false);
+                  }}
+                >
+                  <p className="font-medium">
+                    <span className="text-primary">
+                      {formatEventTime(event)}
+                    </span>
+                    {" - "}
+                    {event.title.toString()}
+                  </p>
+                  <p className="text-sm text-gray-500">
+                    {formatDate(new Date(event.dtstart))}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </Card>
   );
 };