flockstr/containers/EventsTimeline/EventsFromCalendar.tsx
2023-11-02 16:11:46 -04:00

66 lines
1.8 KiB
TypeScript

"use client";
import { useState, useEffect } from "react";
import { NDKEvent } from "@nostr-dev-kit/ndk";
import { getTagsValues } from "@/lib/nostr/utils";
import { groupEventsByDay } from ".";
import { useNDK } from "@/app/_providers/ndk";
import { nip19 } from "nostr-tools";
import CalendarSection, { CalendarSectionLoading } from "./CalendarSection";
import useEvents from "@/lib/hooks/useEvents";
type EventsFromCalendar = {
calendar: NDKEvent;
secondaryFilter?: (event: NDKEvent) => Boolean;
loader?: () => JSX.Element;
empty?: () => JSX.Element;
};
export default function EventsFromCalendar({
calendar,
secondaryFilter,
loader: Loader,
empty: Empty,
}: EventsFromCalendar) {
const calendarEvents = getTagsValues("a", calendar.tags);
const [eventsByDay, setEventsByDay] = useState<NDKEvent[][]>([]);
const calendarEventIdentifiers = calendarEvents
.filter(Boolean)
.map((e) => nip19.decode(e))
.filter(({ type }) => type === "naddr")
.map((e) => e.data as nip19.AddressPointer);
const { events, isLoading } = useEvents({
filter: {
kinds: calendarEventIdentifiers.map((k) => k.kind),
authors: calendarEventIdentifiers.map((k) => k.pubkey),
["#d"]: calendarEventIdentifiers.map((k) => k.identifier),
},
});
useEffect(() => {
if (events) {
if (secondaryFilter) {
const grouped = groupEventsByDay(events.filter(secondaryFilter));
setEventsByDay(grouped);
} else {
const grouped = groupEventsByDay(events);
setEventsByDay(grouped);
}
}
}, [events]);
if (isLoading) {
if (Loader) {
return <Loader />;
}
return <CalendarSectionLoading />;
}
if (Empty && eventsByDay.length === 0) {
return <Empty />;
}
return (
<>
{eventsByDay.map((e) => (
<CalendarSection events={e} />
))}
</>
);
}