update calendar ui

acmuta · Oct 4, 2024 · 7ecfa12 · 7ecfa12
1 parent 231fb9b
commit 7ecfa12
Show file tree

Hide file tree

Showing 4 changed files with 177 additions and 165 deletions.
diff --git a/src/app/events/page.tsx b/src/app/events/page.tsx
@@ -1,8 +1,20 @@
-import React from "react";
-
+"use client"
+import React, { useState } from "react";
+import Calendar from "@/components/events/Calendar"; // Adjust the import path if needed
 
 const EventPage = () => {
-  return <div>Events</div>;
+  // Get the current date to set default month and year
+  const today = new Date();
+  const [month, setMonth] = useState(today.getMonth());
+  const [year, setYear] = useState(today.getFullYear());
+
+  return (
+    <div className="h-fit w-full bg-[url(/assets/apply/apply-bg.png)] bg-cover bg-center py-20">
+      <div className="flex justify-between pt-16 md:mx-20">
+        <Calendar month={month} year={year} />
+      </div>
+    </div>
+  );
 };
 
 export default EventPage;
diff --git a/src/components/events/Calendar.tsx b/src/components/events/Calendar.tsx
@@ -1,93 +1,93 @@
-// "use client";
+"use client";
 
-// import Link from "next/link";
-// import CalendarBody from "./CalendarBody";
-// import { useEffect, useState } from "react";
-// import type { Event } from "@/lib/types";
+import Link from "next/link";
+import CalendarBody from "./CalendarBody";
+import { useEffect, useState } from "react";
+import type { Event } from "@/lib/types";
 
-// type Props = {
-//   month: number;
-//   year: number;
-// };
+type Props = {
+  month: number;
+  year: number;
+};
 
-// const monthNames = [
-//   "January", "February", "March", "April", "May", "June", 
-//   "July", "August", "September", "October", "November", "December",
-// ];
+const monthNames = [
+  "January", "February", "March", "April", "May", "June", 
+  "July", "August", "September", "October", "November", "December",
+];
 
-// function changeMonth(amt: "inc" | "dec", { month, year }: { month: number; year: number }) {
-//   if (amt === "inc") {
-//     if (month === 11) return { month: 0, year: year + 1 };
-//     return { month: month + 1, year };
-//   }
-//   if (month === 0) return { month: 11, year: year - 1 };
-//   return { month: month - 1, year };
-// }
+function changeMonth(amt: "inc" | "dec", { month, year }: { month: number; year: number }) {
+  if (amt === "inc") {
+    if (month === 11) return { month: 0, year: year + 1 };
+    return { month: month + 1, year };
+  }
+  if (month === 0) return { month: 11, year: year - 1 };
+  return { month: month - 1, year };
+}
 
-// const Calendar = ({ month, year }: Props) => {
-//   const [events, setEvents] = useState<Event[]>([]);
-//   const [loading, setLoading] = useState(true);
-//   const [error, setError] = useState<string | null>(null);
+const Calendar = ({ month, year }: Props) => {
+  const [events, setEvents] = useState<Event[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
-//   useEffect(() => {
-//     const fetchEvents = async (month: number, year: number) => {
-//       const url = `/api/events?month=${month}&year=${year}`; // Use a relative URL
-//       const res = await fetch(url, {
-//         cache: "no-store", // Ensure fresh data
-//       });
+  useEffect(() => {
+    const fetchEvents = async (month: number, year: number) => {
+      const url = `/api/events?month=${month}&year=${year}`; // Use a relative URL
+      const res = await fetch(url, {
+        cache: "no-store", // Ensure fresh data
+      });
 
-//       if (!res.ok) {
-//         throw new Error("Failed to fetch events");
-//       }
+      if (!res.ok) {
+        throw new Error("Failed to fetch events");
+      }
 
-//       return res.json();
-//     };
+      return res.json();
+    };
 
-//     const getEvents = async () => {
-//       try {
-//         const events = await fetchEvents(month, year);
-//         setEvents(events);
-//       } catch (err) {
-//         setError("Failed to fetch events");
-//       } finally {
-//         setLoading(false);
-//       }
-//     };
+    const getEvents = async () => {
+      try {
+        const events = await fetchEvents(month, year);
+        setEvents(events);
+      } catch (err) {
+        setError("Failed to fetch events");
+      } finally {
+        setLoading(false);
+      }
+    };
 
-//     getEvents();
-//   }, [month, year]);
+    getEvents();
+  }, [month, year]);
 
-//   const nextParams = changeMonth("inc", { month, year });
-//   const prevParams = changeMonth("dec", { month, year });
+  const nextParams = changeMonth("inc", { month, year });
+  const prevParams = changeMonth("dec", { month, year });
 
-//   if (loading) return <p className="text-white">Loading...</p>;
-//   if (error) return <p className="text-red-500">{error}</p>;
+  if (loading) return <p className="text-white">Loading...</p>;
+  if (error) return <p className="text-red-500">{error}</p>;
 
-//   return (
-//     <div className="w-full rounded-3xl border border-[#ffffff82] bg-gradient-to-tr from-[#ffffff1f] from-[3.07%] to-[#ffffff08] to-[96.39%] p-5 shadow-md backdrop-blur-xl">
-//       <div className="mb-5 flex items-center justify-between text-white flex-wrap">
-//         <Link
-//           className="w-10 text-lg md:text-xl"
-//           href={{
-//             pathname: "/events",
-//             query: { month: prevParams.month, year: prevParams.year },
-//           }}
-//         >{`<`}</Link>
-//         <span className="w-32 text-center text-xl font-semibold md:text-2xl">
-//           {monthNames[month]}
-//         </span>
-//         <Link
-//           className="w-10 text-lg md:text-xl"
-//           href={{
-//             pathname: "/events",
-//             query: { month: nextParams.month, year: nextParams.year },
-//           }}
-//         >{`>`}</Link>
-//       </div>
-//       <CalendarBody month={month} year={year} events={events} />
-//     </div>
-//   );
-// };
+  return (
+    <div className="w-full rounded-3xl border border-[#ffffff82] bg-gradient-to-tr from-[#ffffff1f] from-[3.07%] to-[#ffffff08] to-[96.39%] p-5 shadow-md backdrop-blur-xl">
+      <div className="mb-5 flex items-center justify-between text-white flex-wrap">
+        <Link
+          className="w-10 text-lg md:text-xl"
+          href={{
+            pathname: "/events",
+            query: { month: prevParams.month, year: prevParams.year },
+          }}
+        >{`<`}</Link>
+        <span className="w-32 text-center text-xl font-semibold md:text-2xl">
+          {monthNames[month]}
+        </span>
+        <Link
+          className="w-10 text-lg md:text-xl"
+          href={{
+            pathname: "/events",
+            query: { month: nextParams.month, year: nextParams.year },
+          }}
+        >{`>`}</Link>
+      </div>
+      <CalendarBody month={month} year={year} events={events} />
+    </div>
+  );
+};
 
-// export default Calendar;
+export default Calendar;
 
diff --git a/src/components/events/CalendarBody.tsx b/src/components/events/CalendarBody.tsx
@@ -1,60 +1,60 @@
-// import EventComponent from "@/components/events/EventDays";
-// import type { Event } from "@/lib/types.d.ts";
+import EventComponent from "@/components/events/EventDays";
+import type { Event } from "@/lib/types.d.ts";
 
-// const daysOfWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+const daysOfWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 
-// type Props = {
-//   year: number;
-//   month: number;
-//   events: Event[];
-// };
+type Props = {
+  year: number;
+  month: number;
+  events: Event[];
+};
 
-// export default function CalendarBody({ year, month, events }: Props) {
-//   const firstDayOfMonth = new Date(year, month, 1);
-//   const lastDayOfMonth = new Date(year, month + 1, 0);
+export default function CalendarBody({ year, month, events }: Props) {
+  const firstDayOfMonth = new Date(year, month, 1);
+  const lastDayOfMonth = new Date(year, month + 1, 0);
 
-//   const firstDayIndex = firstDayOfMonth.getDay();
-//   const lastDayIndex = lastDayOfMonth.getDay();
-//   const lastDay = lastDayOfMonth.getDate();
+  const firstDayIndex = firstDayOfMonth.getDay();
+  const lastDayIndex = lastDayOfMonth.getDay();
+  const lastDay = lastDayOfMonth.getDate();
 
-//   const daysInMonth = Array.from({ length: lastDay }, (_, i) => i + 1);
+  const daysInMonth = Array.from({ length: lastDay }, (_, i) => i + 1);
 
-//   return (
-//     <div className="grid grid-cols-7 gap-1">
-//       {daysOfWeek.map((day) => (
-//         <div
-//           key={day}
-//           className="text-center text-xs font-semibold uppercase text-white md:text-sm"
-//         >
-//           {day}
-//         </div>
-//       ))}
-//       {Array.from({ length: firstDayIndex }).map((_, i) => (
-//         <div key={i} className="rounded-lg bg-white/10" />
-//       ))}
-//       {daysInMonth.map((day) => (
-//         <div
-//           key={day}
-//           className="relative rounded-lg bg-white/25 p-2 text-center text-white shadow transition-all hover:bg-white/30 md:h-24"
-//         >
-//           <p className="absolute right-2 top-2 text-xs font-bold md:text-sm">
-//             {day}
-//           </p>
-//           <div className="mt-4">
-//             {events.map((event) => (
-//               <EventComponent
-//                 key={event.id}
-//                 event={event}
-//                 day={day}
-//                 month={month}
-//               />
-//             ))}
-//           </div>
-//         </div>
-//       ))}
-//       {Array.from({ length: 6 - lastDayIndex }).map((_, i) => (
-//         <div key={i + lastDay} className="rounded-lg bg-white/10 md:h-24" />
-//       ))}
-//     </div>
-//   );
-// }
+  return (
+    <div className="grid grid-cols-7 gap-1">
+      {daysOfWeek.map((day) => (
+        <div
+          key={day}
+          className="text-center text-xs font-semibold uppercase text-white md:text-sm"
+        >
+          {day}
+        </div>
+      ))}
+      {Array.from({ length: firstDayIndex }).map((_, i) => (
+        <div key={i} className="rounded-lg bg-white/10" />
+      ))}
+      {daysInMonth.map((day) => (
+        <div
+          key={day}
+          className="relative rounded-lg bg-white/25 p-2 text-center text-white shadow transition-all hover:bg-white/30 md:h-24"
+        >
+          <p className="absolute right-2 top-2 text-xs font-bold md:text-sm">
+            {day}
+          </p>
+          <div className="mt-4">
+            {events.map((event) => (
+              <EventComponent
+                key={event.id}
+                event={event}
+                day={day}
+                month={month}
+              />
+            ))}
+          </div>
+        </div>
+      ))}
+      {Array.from({ length: 6 - lastDayIndex }).map((_, i) => (
+        <div key={i + lastDay} className="rounded-lg bg-white/10 md:h-24" />
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/events/EventDays.tsx b/src/components/events/EventDays.tsx
@@ -1,37 +1,37 @@
-// "use client";
+"use client";
 
-// import { useEffect, useState } from "react";
-// import type { Event } from "@/lib/types.d.ts";
+import { useEffect, useState } from "react";
+import type { Event } from "@/lib/types.d.ts";
 
-// type Props = {
-//   event: Event;
-//   day: number;
-//   month: number;
-// };
+type Props = {
+  event: Event;
+  day: number;
+  month: number;
+};
 
-// const EventComponent = ({ event, day, month }: Props) => {
-//   const [localStartDate, setLocalStartDate] = useState<Date | null>(null);
+const EventComponent = ({ event, day, month }: Props) => {
+  const [localStartDate, setLocalStartDate] = useState<Date | null>(null);
 
-//   useEffect(() => {
-//     if (event.start) {
-//       const localDate = new Date(event.start);
-//       setLocalStartDate(localDate);
-//     }
-//   }, [event]);
+  useEffect(() => {
+    if (event.start) {
+      const localDate = new Date(event.start);
+      setLocalStartDate(localDate);
+    }
+  }, [event]);
 
-//   if (
-//     !localStartDate ||
-//     localStartDate.getDate() !== day ||
-//     localStartDate.getMonth() !== month
-//   ) {
-//     return null;
-//   }
+  if (
+    !localStartDate ||
+    localStartDate.getDate() !== day ||
+    localStartDate.getMonth() !== month
+  ) {
+    return null;
+  }
 
-//   return (
-//     <div className="mt-2 truncate rounded bg-gradient-to-r from-red-700 to-red-900 p-1 text-xs font-medium text-white">
-//       {event.title}
-//     </div>
-//   );
-// };
+  return (
+    <div className="mt-2 truncate rounded bg-gradient-to-r from-red-700 to-red-900 p-1 text-xs font-medium text-white">
+      {event.title}
+    </div>
+  );
+};
 
-// export default EventComponent;
+export default EventComponent;