pleb/flockstr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better upcoming events filtering

Browse Source
This commit is contained in:
zmeyer44 2023-11-02 10:58:29 -04:00
parent 1e57afb1ac
commit a57caf034a
1 changed files with 23 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
app/(app)/explore/_sections/UpcomingEvents.tsx
View File

@ -13,12 +13,10 @@ import CalendarEventCard, {
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import Link from "next/link"; import Link from "next/link";
import useEvents from "@/lib/hooks/useEvents"; import useEvents from "@/lib/hooks/useEvents";
import { Event } from "nostr-tools";
import KindLoading from "@/components/KindCard/loading";
import { nip19 } from "nostr-tools";
import { getTagValues, getTagsValues } from "@/lib/nostr/utils"; import { getTagValues, getTagsValues } from "@/lib/nostr/utils";
import { type NDKKind } from "@nostr-dev-kit/ndk"; import { type NDKKind } from "@nostr-dev-kit/ndk";
import { uniqBy } from "ramda"; import { uniqBy } from "ramda";
import { unixTimeNowInSeconds } from "@/lib/nostr/dates";
export default function UpcomingEventsSection() { export default function UpcomingEventsSection() {
const { events } = useEvents({ const { events } = useEvents({
@ -49,24 +47,33 @@ export default function UpcomingEventsSection() {
<div className="center gap-x-2 max-sm:px-5"> <div className="center gap-x-2 max-sm:px-5">
<SectionTitle>Upcoming Events</SectionTitle> <SectionTitle>Upcoming Events</SectionTitle>
</div> </div>
<Button variant={"ghost"}> <Link href="/events">
View all <RiArrowRightLine className="ml-1 h-4 w-4" /> <Button variant={"ghost"}>
</Button> View all <RiArrowRightLine className="ml-1 h-4 w-4" />
</Button>
</Link>
</SectionHeader> </SectionHeader>
<SectionContent className="relative"> <SectionContent className="relative">
<ScrollArea> <ScrollArea>
<div className="flex space-x-2 pb-4 max-sm:px-5"> <div className="flex space-x-2 pb-4 max-sm:px-5">
{processedEvents?.length ? ( {processedEvents?.length ? (
processedEvents.slice(0, 6).map((e, idx) => { processedEvents
return ( .filter(
<Link key={e.id} href={`/event/${e.encode()}`}> (e) =>
<CalendarEventCard parseInt(getTagValues("start", e.tags) ?? "0") >
event={e.rawEvent()} unixTimeNowInSeconds(),
className="min-w-[250px] max-w-[350px]" )
/> .slice(0, 8)
</Link> .map((e, idx) => {
); return (
}) <Link key={e.id} href={`/event/${e.encode()}`}>
<CalendarEventCard
event={e.rawEvent()}
className="min-w-[250px] max-w-[350px]"
/>
</Link>
);
})
) : ( ) : (
<> <>
<CardLoading className="min-w-[250px] max-w-[350px]" /> <CardLoading className="min-w-[250px] max-w-[350px]" />