events now clickable (But are not being loaded correctly)

Author: Juliankser

nextjs-calendar/src/app/components/CalendarGrid.tsx

@@ -1,28 +1,40 @@
-// src/app/components/CalendarGrid.tsx
-"use client";
+'use client'
+
 import React from "react";
 import { format, startOfMonth, endOfMonth, addDays } from "date-fns";
+import Link from "next/link";
 import EventCard from "./EventCard";
 
 interface CalendarGridProps {
   currentDate: Date;
+  events: { id: string; title: string; date: string; description: string }[];
 }
 
-export default function CalendarGrid({ currentDate }: CalendarGridProps) {
+export default function CalendarGrid({ currentDate, events }: CalendarGridProps) {
   const start = startOfMonth(currentDate);
   const end = endOfMonth(currentDate);
 
   const days = [];
   for (let day = start; day <= end; day = addDays(day, 1)) {
+    // Filter events that match the current day
+    const dayEvents = events.filter(
+      (event) => event.date === format(day, "yyyy-MM-dd")
+    );
+
+    // Create day grid elements
     days.push(
       <div
         key={day.toString()}
         className="flex flex-col items-center justify-center p-4 border border-gray-300 rounded-lg bg-white shadow-sm hover:shadow-lg transition-all duration-200"
       >
         <div className="text-lg font-medium text-gray-800">{format(day, "d")}</div>
-        {/* Event cards will be displayed here */}
         <div className="mt-2 text-sm text-gray-600">
-          <EventCard event={{ id: "1", title: "Sample Event", date: day.toISOString() }} />
+          {dayEvents.map((event) => (
+            // Create a link for each event with dynamic routing to event/[id]
+            <Link key={event.id} href={`/event/${event.id}`}>
+              <EventCard id={event.id} title={event.title} date={event.date} />
+            </Link>
+          ))}
         </div>
       </div>
     );

nextjs-calendar/src/app/components/EventCard.tsx

@@ -1,22 +1,21 @@
 // src/app/components/EventCard.tsx
-import React from "react";
+'use client'
 
-interface Event {
+import Link from "next/link";
+
+interface EventCardProps {
   id: string;
   title: string;
   date: string;
-  description?: string;
-}
-
-interface EventCardProps {
-  event: Event;
 }
 
-export default function EventCard({ event }: EventCardProps) {
+export default function EventCard({ id, title, date }: EventCardProps) {
   return (
-    <div className="p-2 bg-blue-100 rounded-md shadow-md">
-      <h3 className="text-sm font-semibold text-blue-800">{event.title}</h3>
-      <p className="text-xs text-gray-700">{event.description || "No description"}</p>
-    </div>
+    <Link href={`/event/${id}`} passHref>
+      <div className="p-2 bg-blue-100 rounded-md hover:bg-blue-200 transition cursor-pointer">
+        <h3 className="font-semibold">{title}</h3>
+        <p className="text-sm text-gray-600">{date}</p>
+      </div>
+    </Link>
   );
 }

nextjs-calendar/src/app/event/[id]/page.tsx

@@ -0,0 +1,32 @@
+// src/app/event/[id]/page.tsx
+'use client'
+
+import { useParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+export default function EventPage() {
+  const { id } = useParams(); // Extract the event ID from the URL
+  const [event, setEvent] = useState<{ id: string; title: string; date: string; description: string } | null>(null);
+
+  useEffect(() => {
+    // Fetch the events from localStorage when the component loads
+    const savedEvents = localStorage.getItem('events');
+    if (savedEvents) {
+      const events = JSON.parse(savedEvents);
+      const currentEvent = events.find((event: { id: string }) => event.id === id);
+      setEvent(currentEvent || null); // Set the event or null if not found
+    }
+  }, [id]); // Run the effect whenever the `id` changes
+
+  if (!event) {
+    return <div className="p-6 bg-gray-100 min-h-screen">Event not found</div>; // If event not found, display a message
+  }
+
+  return (
+    <div className="p-6 bg-gray-100 min-h-screen">
+      <h1 className="text-2xl font-semibold">{event.title}</h1>
+      <p className="text-gray-600">{event.date}</p>
+      <p className="mt-4">{event.description}</p>
+    </div>
+  );
+}

nextjs-calendar/src/app/page.tsx

@@ -1,12 +1,23 @@
-"use client";
-import React, { useState } from "react";
-import { format, startOfMonth, endOfMonth, addMonths, subMonths, addDays } from "date-fns";
+// src/app/page.tsx
+'use client'
+
+import React, { useState, useEffect } from "react";
+import { format, addMonths, subMonths } from "date-fns";
 import CalendarGrid from "./components/CalendarGrid";
 import EventForm from "./components/EventForm";
 
 export default function CalendarPage() {
   const [currentDate, setCurrentDate] = useState(new Date());
   const [showEventForm, setShowEventForm] = useState(false);
+  const [events, setEvents] = useState<{ id: string; title: string; date: string; description: string }[]>([]);
+
+  // Load events from localStorage when the component mounts
+  useEffect(() => {
+    const savedEvents = localStorage.getItem("events");
+    if (savedEvents) {
+      setEvents(JSON.parse(savedEvents));
+    }
+  }, []);
 
   const handlePrevMonth = () => setCurrentDate(subMonths(currentDate, 1));
   const handleNextMonth = () => setCurrentDate(addMonths(currentDate, 1));
@@ -16,9 +27,14 @@ export default function CalendarPage() {
   };
 
   const handleSaveEvent = (event: { title: string; date: string; description: string }) => {
-    console.log("Event saved:", event);
+    const newEvent = {
+      ...event,
+      id: new Date().toISOString(), // Generate a unique id using the current timestamp
+    };
+    const updatedEvents = [...events, newEvent];
+    setEvents(updatedEvents); // Add the new event to the events array
+    localStorage.setItem("events", JSON.stringify(updatedEvents)); // Persist events in localStorage
     setShowEventForm(false);
-    // Here you can add logic to save the event to the calendar
   };
 
   return (
@@ -39,7 +55,7 @@ export default function CalendarPage() {
         </button>
       </header>
 
-      <CalendarGrid currentDate={currentDate} />
+      <CalendarGrid currentDate={currentDate} events={events} />
 
       <button
         onClick={handleAddEvent}