Skip to content

Commit 2bca8b7

Browse files
beerosebeerose
authored
conf: add day filter (graphql#1566)
1 parent ed6402a commit 2bca8b7

File tree

1 file changed

+95
-78
lines changed

1 file changed

+95
-78
lines changed

‎src/components/Conf/Schedule/ScheduleList.tsx

Lines changed: 95 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -178,94 +178,111 @@ const ScheduleList: FC<Props> = ({
178178
<h3 className="mb-5">No sessions found</h3>
179179
</div>
180180
) : (
181-
Object.entries(sessionsState).map(([date, concurrentSessionsGroup]) => (
182-
<div key={date} className="text-gray-800 text-sm">
183-
<h3 className="mb-5">{format(parseISO(date), "EEEE, MMMM d")}</h3>
184-
{Object.entries(concurrentSessionsGroup).map(
185-
([sessionDate, sessions]) => (
186-
<div key={`concurrent sessions on ${sessionDate}`}>
187-
<div className="lg:flex-row flex flex-col mb-4">
188-
<div className="relative">
189-
<span className="lg:mr-7 mb-5 whitespace-nowrap text-gray-500 lg:mt-0 mt-3 inline-block lg:w-28 w-20">
190-
{format(parseISO(sessionDate), "hh:mmaaaa 'PDT'")}
191-
</span>
192-
<div className="lg:block hidden absolute right-3 top-0 h-full w-0.5 bg-gray-200" />
193-
</div>
194-
<div className="lg:flex-row flex flex-col gap-5 relative lg:items-start items-end w-full lg:pl-0 pl-[28px]">
195-
<div className="block lg:hidden absolute left-3 top-0 h-full w-0.5 bg-gray-200" />
181+
<>
182+
<div className="flex space-x-4">
183+
{Object.keys(sessionsState).map((date, index) => (
184+
<a
185+
href={`#day-${index + 1}`}
186+
key={date}
187+
className={"text-gray-800 text-xs"}
188+
>
189+
Day {index + 1}
190+
</a>
191+
))}
192+
</div>
193+
{Object.entries(sessionsState).map(
194+
([date, concurrentSessionsGroup], index) => (
195+
<div key={date} className="text-gray-800 text-sm">
196+
<h3 className="mb-5" id={`day-${index + 1}`}>
197+
{format(parseISO(date), "EEEE, MMMM d")}
198+
</h3>
199+
{Object.entries(concurrentSessionsGroup).map(
200+
([sessionDate, sessions]) => (
201+
<div key={`concurrent sessions on ${sessionDate}`}>
202+
<div className="lg:flex-row flex flex-col mb-4">
203+
<div className="relative">
204+
<span className="lg:mr-7 mb-5 whitespace-nowrap text-gray-500 lg:mt-0 mt-3 inline-block lg:w-28 w-20">
205+
{format(parseISO(sessionDate), "hh:mmaaaa 'PDT'")}
206+
</span>
207+
<div className="lg:block hidden absolute right-3 top-0 h-full w-0.5 bg-gray-200" />
208+
</div>
209+
<div className="lg:flex-row flex flex-col gap-5 relative lg:items-start items-end w-full lg:pl-0 pl-[28px]">
210+
<div className="block lg:hidden absolute left-3 top-0 h-full w-0.5 bg-gray-200" />
196211

197-
{sessions.map(session => {
198-
const eventType = session.event_type.endsWith("s")
199-
? session.event_type.slice(0, -1)
200-
: session.event_type
212+
{sessions.map(session => {
213+
const eventType = session.event_type.endsWith("s")
214+
? session.event_type.slice(0, -1)
215+
: session.event_type
201216

202-
const speakers = session.speakers?.split(",") || []
203-
const eventTitle = getEventTitle(session, speakers)
217+
const speakers = session.speakers?.split(",") || []
218+
const eventTitle = getEventTitle(session, speakers)
204219

205-
const borderColor = eventsColors[session.event_type]
220+
const borderColor = eventsColors[session.event_type]
206221

207-
return session.event_type === "Breaks" ? (
208-
<div
209-
key={session.id}
210-
style={{
211-
borderLeft: `10px solid ${borderColor}`,
212-
borderRadius: "5px",
213-
backgroundColor: "white",
214-
}}
215-
className="shadow-[-5px_10px_30px_20px_#d0d3da33] font-normal flex items-center py-2 px-4 rounded-md w-full h-full text-black"
216-
>
217-
{showEventType ? eventType + " / " : ""}
218-
{eventTitle}
219-
</div>
220-
) : (
221-
<a
222-
id={`session-${session.id}`}
223-
data-tooltip-id="my-tooltip"
224-
href={`/conf/schedule/${session.id}?name=${session.name}`}
225-
key={session.id}
226-
style={{
227-
borderLeft: `10px solid ${borderColor}`,
228-
borderRadius: "5px",
229-
backgroundColor: "white",
230-
}}
231-
className="group no-underline hover:no-underline shadow-[-5px_10px_30px_20px_#d0d3da33] font-normal relative py-2 px-4 rounded-md w-full h-full text-black"
232-
>
233-
<div className="flex flex-col justify-start h-full py-3 gap-y-2">
234-
{borderColor && (
235-
<span
236-
className="group-hover:no-underline flex py-1 px-3 mb-3 self-start justify-center items-center text-white border rounded-3xl"
237-
style={{
238-
backgroundColor: borderColor,
239-
}}
240-
>
241-
{eventType}
242-
</span>
243-
)}
244-
<div className="group-hover:underline flex flex-col justify-between h-full gap-y-2">
222+
return session.event_type === "Breaks" ? (
223+
<div
224+
key={session.id}
225+
style={{
226+
borderLeft: `10px solid ${borderColor}`,
227+
borderRadius: "5px",
228+
backgroundColor: "white",
229+
}}
230+
className="shadow-[-5px_10px_30px_20px_#d0d3da33] font-normal flex items-center py-2 px-4 rounded-md w-full h-full text-black"
231+
>
245232
{showEventType ? eventType + " / " : ""}
246233
{eventTitle}
247-
<div className="flex flex-col">
248-
{speakers.length > 0 && (
249-
<span className="font-light">
250-
{speakers.join(", ")}
234+
</div>
235+
) : (
236+
<a
237+
id={`session-${session.id}`}
238+
data-tooltip-id="my-tooltip"
239+
href={`/conf/schedule/${session.id}?name=${session.name}`}
240+
key={session.id}
241+
style={{
242+
borderLeft: `10px solid ${borderColor}`,
243+
borderRadius: "5px",
244+
backgroundColor: "white",
245+
}}
246+
className="group no-underline hover:no-underline shadow-[-5px_10px_30px_20px_#d0d3da33] font-normal relative py-2 px-4 rounded-md w-full h-full text-black"
247+
>
248+
<div className="flex flex-col justify-start h-full py-3 gap-y-2">
249+
{borderColor && (
250+
<span
251+
className="group-hover:no-underline flex py-1 px-3 mb-3 self-start justify-center items-center text-white border rounded-3xl"
252+
style={{
253+
backgroundColor: borderColor,
254+
}}
255+
>
256+
{eventType}
251257
</span>
252258
)}
253-
<span className="font-light">
254-
Room: {session.venue}
255-
</span>
259+
<div className="group-hover:underline flex flex-col justify-between h-full gap-y-2">
260+
{showEventType ? eventType + " / " : ""}
261+
{eventTitle}
262+
<div className="flex flex-col">
263+
{speakers.length > 0 && (
264+
<span className="font-light">
265+
{speakers.join(", ")}
266+
</span>
267+
)}
268+
<span className="font-light">
269+
Room: {session.venue}
270+
</span>
271+
</div>
272+
</div>
256273
</div>
257-
</div>
258-
</div>
259-
</a>
260-
)
261-
})}
274+
</a>
275+
)
276+
})}
277+
</div>
278+
</div>
262279
</div>
263-
</div>
264-
</div>
265-
)
266-
)}
267-
</div>
268-
))
280+
)
281+
)}
282+
</div>
283+
)
284+
)}
285+
</>
269286
)}
270287
</>
271288
)

0 commit comments

Comments
 (0)