move calendar day into its own component
This commit is contained in:
@ -5,6 +5,7 @@ import { EventItem } from "./EventItem";
|
||||
import { EventFilter } from "./EventFilter";
|
||||
import {
|
||||
EventFragment,
|
||||
SingularEvent,
|
||||
getSingularEvents,
|
||||
organizeEventsByDate,
|
||||
} from "@/lib/event";
|
||||
@ -13,8 +14,6 @@ import styles from "./eventContainer.module.scss";
|
||||
import { formatDate, formatYearMonth } from "@/lib/date";
|
||||
import { getYear, parse } from "date-fns";
|
||||
|
||||
type EventContainerMode = "list" | "calendar";
|
||||
|
||||
export const EventContainer = ({ events }: { events: EventFragment[] }) => {
|
||||
const [mode, setMode] = useQueryState(
|
||||
"mode",
|
||||
@ -45,6 +44,25 @@ const EventList = ({ events }: { events: EventFragment[] }) => {
|
||||
);
|
||||
};
|
||||
|
||||
const CalendarDay = ({
|
||||
day,
|
||||
events,
|
||||
}: {
|
||||
day: string;
|
||||
events: SingularEvent[];
|
||||
}) => (
|
||||
<div
|
||||
className={`${styles.calendarDay} ${events.length === 0 && styles.empty}`}
|
||||
>
|
||||
<h3>{formatDate(parse(day, "yyyy-MM-dd", new Date()), "eeee dd.MM.")}</h3>
|
||||
<ul>
|
||||
{events.map((event) => (
|
||||
<EventItem key={event.id} event={event} mode="calendar" size="small" />
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
|
||||
const EventCalendar = ({ events }: { events: EventFragment[] }) => {
|
||||
const futureSingularEvents = getSingularEvents(events).filter(
|
||||
(x) => x.occurrence?.start && isTodayOrFuture(x.occurrence.start)
|
||||
@ -60,31 +78,12 @@ const EventCalendar = ({ events }: { events: EventFragment[] }) => {
|
||||
{Object.keys(eventsByDate[yearMonth]).map((week) => (
|
||||
<div key={week} className={styles.calendarWeek}>
|
||||
{Object.keys(eventsByDate[yearMonth][week]).map((day) => (
|
||||
<div
|
||||
<CalendarDay
|
||||
key={day}
|
||||
className={`${styles.calendarDay} ${
|
||||
eventsByDate[yearMonth][week][day].length === 0 &&
|
||||
styles.empty
|
||||
}`}
|
||||
>
|
||||
<h3>
|
||||
{formatDate(
|
||||
parse(day, "yyyy-MM-dd", new Date()),
|
||||
"eeee dd.MM."
|
||||
)}
|
||||
</h3>
|
||||
<ul>
|
||||
{eventsByDate[yearMonth][week][day].map((event) => (
|
||||
<EventItem
|
||||
key={event.id}
|
||||
event={event}
|
||||
mode="calendar"
|
||||
size="small"
|
||||
day={day}
|
||||
events={eventsByDate[yearMonth][week][day]}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
Reference in New Issue
Block a user