update : events view in a popup modal

page/src/components/Calendar/Calendar.jsx

@@ -1,34 +1,34 @@
 import Day from 'components/Day/Day';
 import Week from 'components/Week/Week';
 import {useMemo} from 'react';
-import {useNavigate, useSearchParams, useParams} from 'react-router-dom';
+import {useParams} from 'react-router-dom';
 
+import {useMonthEvents, useYearEvents} from 'app.hooks';
 import 'styles/Calendar.css';
-import {daysToWeeks} from './Calendar.utils';
-import {useYearEvents, useMonthEvents} from 'app.hooks';
 import {getMonthName} from 'utils';
+import {daysToWeeks} from './Calendar.utils';
 
 const DaysName = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
 
-const Calendar = ({month, days}) => {
-  const yearEvents = useYearEvents()
-  const monthEvents = useMonthEvents(yearEvents, month)
-  const navigate = useNavigate();
+const Calendar = ({month, days, openModal}) => {
+  const yearEvents = useYearEvents();
+  const monthEvents = useMonthEvents(yearEvents, month);
   const {year} = useParams();
-  const [searchParams] = useSearchParams();
 
   const weeks = useMemo(() => daysToWeeks(days), [days]);
-  const weeksAndDays = useMemo(() => weeks.map((week, w) => {
-      return {id: w, days: week.map((day, d) => ({day: day, id: d}))}
-  }), [weeks]);
+  const weeksAndDays = useMemo(
+    () =>
+      weeks.map((week, w) => {
+        return {id: w, days: week.map((day, d) => ({day: day, id: d}))};
+      }),
+    [weeks]
+  );
 
   return (
     <div>
       <div
         className="header"
-        onClick={() =>
-          navigate(`/${year}/calendar/${month}/0?${searchParams.toString()}`)
-        }
+        onClick={() => openModal(getMonthName(month) + ' ' + year, monthEvents)}
       >
         <span>{getMonthName(month)}</span>
       </div>
@@ -38,10 +38,17 @@ const Calendar = ({month, days}) => {
         ))}
       </div>
       <div className="weeks">
-        {weeksAndDays.map((week) => (
-            <Week key={`week_${week.id}`}>
-                {week.days.map((day) => (<Day key={`day_${day.id}`} date={day.day} events={monthEvents}/>))}
-            </Week>
+        {weeksAndDays.map(week => (
+          <Week key={`week_${week.id}`}>
+            {week.days.map(day => (
+              <Day
+                key={`day_${day.id}`}
+                date={day.day}
+                events={monthEvents}
+                openModal={openModal}
+              />
+            ))}
+          </Week>
         ))}
       </div>
     </div>

page/src/components/CalendarGrid/CalendarGrid.jsx

@@ -1,10 +1,8 @@
 import {useMemo} from 'react';
-
 import Calendar from 'components/Calendar/Calendar';
-
 import 'styles/CalendarGrid.css';
 
-const CalendarGrid = ({year}) => {
+const CalendarGrid = ({year, openModal}) => {
   const months = useMemo(() => {
     // Iterate month
     let months = [];
@@ -19,9 +17,21 @@ const CalendarGrid = ({year}) => {
     return months;
   }, [year]);
 
+  // Function to handle day click
+  const handleDayClick = (day, events) => {
+    openModal(day, events);
+  };
+
   return (
     <div className="calendarGrid">
-      {months.map((m) => <Calendar key={`month_${m.month}`} month={m.month} days={m.days} />)}
+      {months.map(m => (
+        <Calendar
+          key={`month_${m.month}`}
+          month={m.month}
+          days={m.days}
+          openModal={handleDayClick}
+        />
+      ))}
     </div>
   );
 };

page/src/components/Day/Day.jsx

@@ -1,21 +1,15 @@
 import {useDayEvents} from 'app.hooks';
-import {useNavigate, useSearchParams, useParams} from 'react-router-dom';
+import { formatDate } from 'utils';
 
-const Day = ({date, events}) => {
-  const dayEvents = useDayEvents(events, date)
-  const navigate = useNavigate();
-  const {year} = useParams();
-  const [searchParams] = useSearchParams();
+const Day = ({date, events, openModal}) => {
+  const dayEvents = useDayEvents(events, date);
 
   let intensity = '';
   let invisible = 'invisible';
 
   if (date) {
     if (dayEvents.length > 0) {
-      intensity = ` intensity-${Math.min(
-        dayEvents.length,
-        7
-      )}`;
+      intensity = ` intensity-${Math.min(dayEvents.length, 7)}`;
     }
     invisible = '';
   } else {
@@ -25,10 +19,8 @@ const Day = ({date, events}) => {
 
   return (
     <div
-      className={'date' + invisible + intensity}
-      onClick={() =>
-        navigate(`/${year}/calendar/-1/${date.getTime()}?${searchParams.toString()}`)
-      }
+      className={`date ${invisible} ${intensity}`}
+      onClick={() => openModal(formatDate(date), dayEvents)} 
     >
       {date?.getDate() || ''}
     </div>

page/src/components/Modal/EventModal.jsx

@@ -0,0 +1,44 @@
+import EventCount from 'components/EventCount/EventCount';
+import EventDisplay from 'components/EventDisplay/EventDisplay';
+import {useEffect} from 'react';
+import ReactModal from 'react-modal';
+import 'styles/EventModal.css';
+
+ReactModal.setAppElement('#root');
+
+const EventModal = ({isOpen, closeModal, events, selectedDateOrMonth}) => {
+  useEffect(() => {
+    if (isOpen) {
+      document.body.classList.add('overflow-hidden');
+    } else {
+      document.body.classList.remove('overflow-hidden');
+    }
+  }, [isOpen]);
+
+  return (
+    <ReactModal
+      isOpen={isOpen}
+      onRequestClose={closeModal}
+      className={`modal-container ${isOpen && 'scale-full'}`}
+    >
+      <div className="modal-header">
+        <div>
+          <h2>{selectedDateOrMonth && `${selectedDateOrMonth}`}</h2>
+          <EventCount events={events} />
+        </div>
+        <button onClick={closeModal} className="close-button">
+          X
+        </button>
+      </div>
+      <div className="modal-body">
+        {events.length ? (
+          events.map(event => <EventDisplay key={event.date[0] * Math.random() * 100} {...event} />)
+        ) : (
+          <p>No events found</p>
+        )}
+      </div>
+    </ReactModal>
+  );
+};
+
+export default EventModal;

page/src/components/SelectedEvents/SelectedEvents.jsx

@@ -1,108 +1,55 @@
-import {useRef, useEffect} from 'react';
-import {useNavigate, useSearchParams, useParams} from 'react-router-dom';
-
+import {useDayEvents, useMonthEvents, useYearEvents} from 'app.hooks';
+import {useParams} from 'react-router-dom';
 import 'styles/SelectedEvents.css';
-import EventDisplay from '../EventDisplay/EventDisplay';
-import EventCount from '../EventCount/EventCount'
 import {formatDate, getMonthName} from '../../utils';
-import {useMonthEvents, useDayEvents, useYearEvents} from 'app.hooks';
-import { ArrowLeftCircle, ArrowRightCircle } from 'lucide-react';
+import EventCount from '../EventCount/EventCount';
+import EventDisplay from '../EventDisplay/EventDisplay';
 
-const SelectedEvents = () => {
-  const navigate = useNavigate();
-  const [searchParams] = useSearchParams();
-  const {year, month, date} = useParams();
+const SelectedEvents = ({onClose}) => {
+  const {month, date} = useParams();
 
   let currentMonth = parseInt(month, 10);
-  if (Number.isNaN(month)) {
-      currentMonth = -1
+  if (Number.isNaN(currentMonth)) {
+    currentMonth = -1;
   }
 
-  let currentDate
+  let currentDate;
   if (date !== undefined) {
-      currentDate = new Date(parseInt(date, 10));
+    currentDate = new Date(parseInt(date, 10));
   }
 
-  const scrollToRef = useRef();
-
-  const yearEvents = useYearEvents()
-  const monthEvents = useMonthEvents(yearEvents, currentMonth != -1 ? currentMonth : currentDate.getMonth())
-  const dayEvents = useDayEvents(monthEvents, currentDate)
-  const events = currentMonth != -1 ?  monthEvents : dayEvents;
-
-  useEffect(() => {
-    setTimeout(() => {
-      scrollToRef.current?.scrollIntoView({behavior: 'smooth'});
-    }, 100);
-  }, [date, month, year]);
-
-  let previous = '',
-    next = '';
-  if (currentMonth !== -1 && year) {
-    if (currentMonth > 0)
-      previous = (
-        <ArrowLeftCircle
-          onClick={() =>
-            navigate(`/${year}/calendar/${currentMonth - 1}/0?${searchParams.toString()}`)
-          }
-        />
-      );
-    if (currentMonth < 11)
-      next = (
-        <ArrowRightCircle
-          onClick={() =>
-            navigate(`/${year}/calendar/${currentMonth + 1}/0?${searchParams.toString()}`)
-          }
-        />
-      );
-  } else if (currentDate) {
-    const dateYear = currentDate.getFullYear();
-    const firstDay = new Date(dateYear, 0, 1).getTime();
-    const lastDay = new Date(dateYear, 12, 0).getTime();
-    const today = currentDate.getTime();
-    const day = 24 * 60 * 60 * 1000;
-    if (today !== firstDay) {
-      previous = (
-        <ArrowLeftCircle
-          onClick={() =>
-            navigate(`/${year}/calendar/${currentMonth}/${today - day}?${searchParams.toString()}`)
-          }
-        />
-      );
-    }
-    if (today !== lastDay) {
-      next = (
-        <ArrowRightCircle
-          onClick={() =>
-            navigate(`/${year}/calendar/${currentMonth}/${today + day}?${searchParams.toString()}`)
-          }
-        />
-      );
-    }
-  }
+  const yearEvents = useYearEvents();
+  const monthEvents = useMonthEvents(
+    yearEvents,
+    currentMonth !== -1 ? currentMonth : currentDate.getMonth()
+  );
+  const dayEvents = useDayEvents(monthEvents, currentDate);
+  const events = currentMonth !== -1 ? monthEvents : dayEvents;
 
   return (
-    <>
-      {currentDate ? (
-        <>
-          <h3 className="eventDateDisplay" ref={scrollToRef}>
-            {previous}
-            <span>{getMonthName(currentMonth) || formatDate(currentDate)}</span>
-            {next}
-            </h3>
-            <EventCount events={events} />
-            <div className="eventsGridDisplay">
-              {events.length ? (
-                events.map((e, i) => <EventDisplay key={`ev_${i}`} {...e} />)
-              ) : (
-                <p>No event found for that day</p>
-              )}
-          </div>
-        </>
-      ) : (
-        ''
-      )}
-    </>
+    <div className="modal-content">
+      <div className="modal-header">
+        <h3 className="modal-title">{getMonthName(currentMonth) || formatDate(currentDate)}</h3>
+        <button className="close-button" onClick={onClose}>
+          X
+        </button>
+      </div>
+
+      <EventCount events={events} />
+      <div className="eventsGridDisplay">
+        {events.length ? (
+          events.map((e, i) => (
+            <EventDisplay
+              key={`ev_${i}`}
+              {...e}
+              ref={i === events.length - 1 ? lastEventElementRef : null} // Last element for infinite scroll
+            />
+          ))
+        ) : (
+          <p>No events found for this day</p>
+        )}
+      </div>
+    </div>
   );
 };