Skip to content

Commit 59794fd

Browse files
hasparushasparus
committed
Fix event filters
1 parent 0248958 commit 59794fd

File tree

2 files changed

+78
-66
lines changed

2 files changed

+78
-66
lines changed

‎src/app/(main)/community/events/event-card.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,8 @@ export interface EventCardProps {
5555
city: ReactNode
5656
name: ReactNode
5757
meta?: ReactNode
58-
official?: boolean
5958
kind: "meetup" | "conference" | "working-group"
59+
className?: string
6060
}
6161

6262
export function EventCard({
@@ -65,8 +65,8 @@ export function EventCard({
6565
city,
6666
name,
6767
meta,
68-
official,
6968
kind,
69+
className,
7070
}: EventCardProps) {
7171
const dateLabel = formatDateLabel(date)
7272
const parsedDate = normaliseDate(date)
@@ -76,14 +76,14 @@ export function EventCard({
7676
className={clsx(
7777
"gql-focus-visible group flex min-h-[214px] min-w-[260px] flex-col overflow-hidden border border-neu-200 text-left text-current no-underline ring-neu-400 hover:ring-1 hover:ring-offset-1 hover:ring-offset-neu-0 dark:border-neu-50 dark:ring-neu-100 xs:min-w-[352px] lg:w-[408px]",
7878
"[--bg-opacity:0.05] hover:[--bg-opacity:0.07] dark:[--bg-opacity:0.03] hover:dark:[--bg-opacity:0.06]",
79-
8079
"z-[4]",
8180
kind === "meetup" &&
8281
"bg-[hsl(var(--color-sec-base)/var(--bg-opacity))]",
8382
kind === "conference" &&
8483
"bg-[hsl(var(--color-pri-base)/var(--bg-opacity))] dark:bg-white/5",
8584
kind === "working-group" &&
8685
"bg-[hsl(229deg_100%_70.4%_/_var(--bg-opacity))]",
86+
className,
8787
)}
8888
target="_blank"
8989
rel="noreferrer"
@@ -98,7 +98,7 @@ export function EventCard({
9898
)}
9999
>
100100
<Tag color={eventTagColors[kind]}>{kind.replace("-", " ")}</Tag>
101-
{meta ? (
101+
{!!meta && (
102102
<span
103103
className={clsx(
104104
String(meta).length < 22
@@ -109,8 +109,6 @@ export function EventCard({
109109
>
110110
{meta}
111111
</span>
112-
) : (
113-
<span className="sr-only">Official GraphQL Local</span>
114112
)}
115113
</div>
116114

‎src/app/(main)/community/events/events-list.tsx‎

Lines changed: 74 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,12 @@
33
import { useState, type ComponentPropsWithoutRef } from "react"
44
import { clsx } from "clsx"
55

6+
import type { WorkingGroupMeeting } from "@/../scripts/sync-working-groups/sync-working-groups"
7+
68
import { EventCard } from "./event-card"
79
import { EventsScrollview } from "./events-scrollview"
810
import type { Event, Meetup } from "./events"
911
import { EventFilterTag, EventKind } from "./event-filter-tag"
10-
import { WorkingGroupMeeting } from "../../../../../scripts/sync-working-groups/sync-working-groups"
1112

1213
interface FilterChipProps extends ComponentPropsWithoutRef<"button"> {
1314
active?: boolean
@@ -71,75 +72,88 @@ export function EventsList({
7172
}) {
7273
const [kindFilters, setKindFilters] = useState(ALL_SHOWN)
7374

74-
if (events.length === 0) return null
75-
7675
const tags: Set<EventKind> = new Set()
7776
events.forEach(event => {
7877
if ("start" in event) tags.add("working-group")
7978
if ("node" in event) tags.add("meetup")
8079
else tags.add("conference")
8180
})
8281

82+
events = events.filter(event => {
83+
if ("node" in event) {
84+
return kindFilters.meetup
85+
}
86+
if ("start" in event) {
87+
return kindFilters["working-group"]
88+
}
89+
if ("slug" in event) {
90+
return kindFilters.conference
91+
}
92+
})
93+
94+
// we filter out all working groups further in the future than 30 days
95+
const FUTURE_DAYS_TO_SHOW = 30
96+
const DAY_IN_MS = 24 * 60 * 60 * 1000
97+
const thirtyDaysFromNow = Date.now() + FUTURE_DAYS_TO_SHOW * DAY_IN_MS
98+
events = events.filter(event => {
99+
if ("start" in event) {
100+
return new Date(event.start).getTime() <= thirtyDaysFromNow
101+
}
102+
return true
103+
})
104+
83105
return (
84106
<div className={className}>
85-
{tags.size > 1 && events.length > 4 ? (
86-
<fieldset className="mb-8">
87-
<legend className="typography-menu mt-2">Event type</legend>
88-
<div className="mt-4 flex gap-3">
89-
{Array.from(tags).map(tag => (
90-
<EventFilterTag
91-
key={tag}
92-
kind={tag}
93-
checked={kindFilters[tag]}
94-
onChange={event => {
95-
setKindFilters(prev => ({
96-
...prev,
97-
[tag]: event.target.checked,
98-
}))
99-
}}
100-
/>
101-
))}
102-
</div>
103-
</fieldset>
104-
) : null}
107+
<fieldset className="mb-8">
108+
<legend className="typography-menu mt-2">Event type</legend>
109+
<div className="mt-4 flex gap-3">
110+
{Array.from(tags).map(tag => (
111+
<EventFilterTag
112+
key={tag}
113+
kind={tag}
114+
checked={kindFilters[tag]}
115+
onChange={event => {
116+
setKindFilters(prev => ({
117+
...prev,
118+
[tag]: event.target.checked,
119+
}))
120+
}}
121+
/>
122+
))}
123+
</div>
124+
</fieldset>
105125
<EventsScrollview>
106-
{events
107-
.filter(event => {
108-
if ("node" in event) return kindFilters["meetup"]
109-
else return kindFilters["conference"]
110-
})
111-
.map(event =>
112-
"node" in event ? (
113-
<EventCard
114-
key={event.node.id}
115-
name={event.node.name}
116-
href={event.node.link}
117-
city={event.node.city + ", " + event.node.country}
118-
official={event.node.official}
119-
date={event.node.next || event.node.prev}
120-
kind="meetup"
121-
/>
122-
) : "start" in event ? (
123-
<EventCard
124-
key={event.id}
125-
href={event.htmlLink}
126-
date={new Date(event.start)}
127-
name={event.summary ?? "Working Group"}
128-
city="Online" // event.location is a zoom link, we could potentially use but we'd have to refactor the event-card to avoid nested anchors
129-
kind="working-group"
130-
/>
131-
) : (
132-
<EventCard
133-
key={event.slug}
134-
href={event.eventLink}
135-
date={new Date(event.date)}
136-
meta={event.host}
137-
name={event.name}
138-
city={event.location}
139-
kind="conference"
140-
/>
141-
),
142-
)}
126+
{events.map(event =>
127+
"node" in event ? (
128+
<EventCard
129+
key={event.node.id}
130+
name={event.node.name}
131+
href={event.node.link}
132+
city={event.node.city + ", " + event.node.country}
133+
date={event.node.next || event.node.prev}
134+
kind="meetup"
135+
/>
136+
) : "start" in event ? (
137+
<EventCard
138+
key={event.id}
139+
href={event.htmlLink}
140+
date={new Date(event.start)}
141+
name={event.summary ?? "Working Group"}
142+
city="Online" // event.location is a zoom link, we could potentially use but we'd have to refactor the event-card to avoid nested anchors
143+
kind="working-group"
144+
/>
145+
) : (
146+
<EventCard
147+
key={event.slug}
148+
href={event.eventLink}
149+
date={new Date(event.date)}
150+
meta={event.host}
151+
name={event.name}
152+
city={event.location}
153+
kind="conference"
154+
/>
155+
),
156+
)}
143157
</EventsScrollview>
144158
</div>
145159
)

0 commit comments

Comments
 (0)