-
Notifications
You must be signed in to change notification settings - Fork 32
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
167 additions
and
167 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| // ); | ||
| // } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |