+
- {links.map(link => (
-
- {link.text}
-
- ))}
- (arr: T[], getKey: (entity: T) => any) {
+ return Array.from<[string, T[]]>(
+ arr.reduce(
+ (entryMap, e) =>
+ entryMap.set(getKey(e) as keyof T, [
+ ...(entryMap.get(getKey(e) as keyof T) || []),
+ e,
+ ]),
+ new Map()
+ )
+ )
+}
+
+export interface ScheduleSession {
+ id: string
+ audience: string
+ description: string
+ event_end: string
+ event_start: string
+ event_subtype: string
+ event_type: string
+ name: string
+ speakers?: string
+}
+
+type Date = string
+type ConcurrentSessionsGroups = [Date, ScheduleSession[]][]
+type SessionsGroupByDay = [Date, ConcurrentSessionsGroups][]
+
+interface Props {
+ showEventType?: boolean
+ scheduleData: ScheduleSession[]
+ filterSchedule?: (sessions: ScheduleSession[]) => ScheduleSession[]
+}
+const ScheduleList: FC = ({
+ showEventType,
+ filterSchedule,
+ scheduleData,
+}) => {
+ const [groupedSessionsByDay, setGroupedSessionsByDay] =
+ useState([])
+ const [hoveredSession, setHoveredSession] = useState(
+ null
+ )
+ const [isOpen, setIsOpen] = useState(false)
+ const [hoveredSessionId, setHoveredSessionId] = useState(null)
+
+ useEffect(() => {
+ const filteredSortedSchedule = (
+ filterSchedule ? filterSchedule(scheduleData) : scheduleData
+ ).sort((a, b) =>
+ compareAsc(new Date(a.event_start), new Date(b.event_start))
+ )
+
+ const groupedConcurrentSessions = groupByKey(
+ filteredSortedSchedule,
+ e => e.event_start
+ )
+
+ const groupedSessionsByDay = groupByKey(
+ groupedConcurrentSessions,
+ // e[0] is the event date `yyyy/mm/dd hh:mm` and we split it by empty space to only get the day date excluding time.
+ e => e[0].split(" ")[0]
+ )
+
+ setGroupedSessionsByDay(groupedSessionsByDay)
+ }, [])
+
+ return (
+ <>
+ {
+ setIsOpen(value)
+ }}
+ >
+
+
+ {groupedSessionsByDay.map(([date, concurrentSessionsGroup]) => (
+ = ({ avatar, name, className, href }) => {
+ const nameInitialsAvatarFallback = name
+ .split(" ")
+ .map(e => e[0])
+ .join("")
+ .toUpperCase()
+
+ const Component = () =>
+ avatar ? (
+ 
+ ) : (
+ = ({
+ name,
+ company,
+ position,
+ avatar,
+ url,
+ username,
+ socialurls,
+}) => {
+ return (
+
+
+ )
+}
+
+export default EventTemplate
+
+export function Head() {
+ return > = ({
+ pageContext: { schedule },
+}) => {
+ return (
+
+
+ )
+}
+
+export function Head() {
+ return
+
+ )
+}
+
+export default SpeakersTemplate
+
+export function Head() {
+ return > = ({
+ pageContext: { speakers: speakersData },
+}) => {
+ const [speakers, setSpeakers] = useState([])
+
+ useEffect(() => {
+ const keynoteNames = keynoteSpeakers.map(speaker => speaker.name)
+
+ // create an array for keynote speakers in fetched data maintaining the order in keynoteSpeakers
+ const keynoteSpeakersData = keynoteNames
+ .map(name => {
+ return speakersData.find(
+ (speaker: any) =>
+ speaker.name === name && speaker.role.includes("speaker")
+ )
+ })
+ .filter(Boolean) as SchedSpeaker[]
+
+ const otherSpeakersData = speakersData.filter(
+ (speaker: any) =>
+ speaker.role.includes("speaker") && !keynoteNames.includes(speaker.name)
+ )
+
+ // Sort other speakers by last name alphabetically
+ otherSpeakersData.sort((a: any, b: any) => {
+ const aLastName = a.name.split(" ").slice(-1)[0].toLowerCase()
+ const bLastName = b.name.split(" ").slice(-1)[0].toLowerCase()
+
+ return aLastName.localeCompare(bLastName)
+ })
+
+ setSpeakers([...keynoteSpeakersData, ...otherSpeakersData])
+ }, [])
+
+ return (
+
+
+ )
+}
+
+export function Head() {
+ return
- {links.map(link => (
-
- {link.text}
-
- ))}
-
- Buy a Ticket!
-
+
+ Buy a Ticket!
+
+
+
+
+
+
+ {hoveredSession && (
+
+
+ {hoveredSession.name}
+
+ )}
+ + {hoveredSession?.description + ? hoveredSession?.description.slice(0, 350) + "..." + : "No Description"} +
+
+
+ ))}
+
+ )
+}
+
+export default ScheduleList
+
+function getSessionColor(sessionType: string) {
+ return (
+ eventsColors
+ .find(e => sessionType.includes(e[0].toLowerCase()))
+ ?.slice(1) || []
+ )
+}
diff --git a/src/components/Conf/Speakers/Avatar.tsx b/src/components/Conf/Speakers/Avatar.tsx
new file mode 100644
index 000000000..eed1115e9
--- /dev/null
+++ b/src/components/Conf/Speakers/Avatar.tsx
@@ -0,0 +1,41 @@
+import React, { FC } from "react"
+
+interface Props {
+ avatar?: string
+ name: string
+ className: string
+ href?: string
+}
+export const Avatar: FC+ {format(parseISO(date), "EEEE, MMMM d")} +
+ {concurrentSessionsGroup.map(([sharedStartDate, sessions]) => ( +
+
+ ))}
+
+
+
+
+ {format(parseISO(sharedStartDate), "hh:mmaaaa 'PDT'")}
+
+
+
+
+
+
+ {sessions.map(session => {
+ const singularEventType = (
+ session.event_type as string
+ ).substring(0, session.event_type.length - 1)
+
+ const [backgroundColor, textColor] = getSessionColor(
+ session.event_type.toLowerCase()
+ )
+
+ return session.event_type === "Breaks" ? (
+
+
+ {showEventType ? singularEventType + " / " : ""}
+ {session.name}
+
+ ) : (
+ {
+ setHoveredSession(session)
+ setHoveredSessionId(`session-${session.id}`)
+ }}
+ >
+ {showEventType ? singularEventType + " / " : ""}
+ {session.name}
+
+ )
+ })}
+
+
+ {nameInitialsAvatarFallback}
+
+
+ )
+
+ if (href)
+ return (
+
+
+
+ )
+}
+
+export default Speaker
diff --git a/src/components/Conf/Speakers/index.tsx b/src/components/Conf/Speakers/index.tsx
index e28141bdd..2b8946fa1 100644
--- a/src/components/Conf/Speakers/index.tsx
+++ b/src/components/Conf/Speakers/index.tsx
@@ -100,3 +100,5 @@ const SpeakersConf = () => {
}
export default SpeakersConf
+
+export { speakers as keynoteSpeakers }
diff --git a/src/pages/conf/schedule.tsx b/src/pages/conf/sched.tsx
similarity index 100%
rename from src/pages/conf/schedule.tsx
rename to src/pages/conf/sched.tsx
diff --git a/src/templates/event.tsx b/src/templates/event.tsx
new file mode 100644
index 000000000..fb8f36955
--- /dev/null
+++ b/src/templates/event.tsx
@@ -0,0 +1,230 @@
+import React, { FC } from "react"
+import { PageProps } from "gatsby"
+import FooterConf from "../components/Conf/Footer"
+import HeaderConf from "../components/Conf/Header"
+import LayoutConf from "../components/Conf/Layout"
+import SeoConf from "../components/Conf/Seo"
+import { SchedSpeaker } from "../components/Conf/Speakers/Speaker"
+import { ScheduleSession } from "../components/Conf/Schedule/ScheduleList"
+import { format, parseISO } from "date-fns"
+import { ReactComponent as TwitterIcon } from "../../static/img/logos/twitter.svg"
+import { ReactComponent as FacebookIcon } from "../../static/img/logos/facebook.svg"
+import { ReactComponent as InstagramIcon } from "../../static/img/logos/instagram.svg"
+import { ReactComponent as SnapChatIcon } from "../../static/img/logos/snapchat.svg"
+import { ReactComponent as LinkedinIcon } from "../../static/img/logos/linkedin.svg"
+import { Avatar } from "../components/Conf/Speakers/Avatar"
+
+type SocialMediaIconServiceType =
+ | "twitter"
+ | "linkedin"
+ | "facebook"
+ | "instagram"
+ | "snapchat"
+
+const SocialMediaIcon = ({
+ service,
+}: {
+ service: SocialMediaIconServiceType
+}) => {
+ switch (service) {
+ case "twitter":
+ return
+
+ {name || "-"}
+
+
+ + {company ? ( + url ? ( + + {company} + + ) : ( + company + ) + ) : ( + "-" + )} +
+{position || "-"}
+
+ {socialurls?.map((e, index) => {
+ const isLastOne = socialurls.length - 1 === index
+ return (
+
+
+
+
+
+
+ )
+}
+
+const EventTemplate: FC<
+ PageProps<{}, { event: ScheduleSession; speakers: SchedSpeaker[] }>
+> = ({ pageContext }) => {
+ return (
+
+ {!hideBackButton && (
+
+
+ ←
+
+ Back to Schedule
+
+ )}
+
+
+
+
+
+
+
+ {format(parseISO(event.event_start), "EEEE, MMM d")}
+
+
+
+
+ {format(parseISO(event.event_start), "hh:mmaaaa 'PDT'")}
+
+
+ + {/* Event name without speaker's name and company */} + {event.name} +
+
+
+ + {event.description} +
+ +
+ {speakers?.map(speaker => (
+
+
+
+ ))}
+
+
+ {speaker.name}
+
+
+
+ {renderPositionAndCompany(speaker)}
+
+ {!!speaker.socialurls?.length && (
+
+
+
+ )}
+
+ {speaker.socialurls.map(social => (
+
+
+
+
+
+
+
+
+ GraphQLConf 2023 Schedule
+September 19-21, 2023 I San Francisco Bay Area, CA
++ Please note: All session times are in Pacific Daylight Time (UTC + -7). To view the schedule in your preferred timezone, + please select from the drop-down menu to the right, above “Filter + by Date.” +
++ IMPORTANT NOTE: Timing of sessions and room locations are{" "} + subject to change. +
+ +
+
+ Event Types:
+
+
+
+ {eventsColors.map(([event, color]) => (
+
+
+
+ {event}
+
+ ))}
+
+
+ <>
+
+
+
+
+
+
+ ←
+
+ Back to Speakers
+
+
+
+
+
+
+
+
+
+ + {speaker.name} +
+ + {!!speaker.socialurls?.length && ( +
+
+ )}
+
+ {speaker.socialurls.map(social => (
+
+
+
+ {renderPositionAndCompany(speaker)}
+
+
+
+
+ sessions.filter(session =>
+ session.speakers?.includes(speaker?.name)
+ )
+ }
+ />
+ )}
+
+
+ + My Speakers Sessions: +
+ {speaker && ( +
+
+ {speakers.length ? (
+ speakers.map((speaker: any) => (
+
+
+
+
+ GraphQLConf 2023 Speakers
++ Meet the unique lineup of insightful speakers we've carefully + chosen, who are primed to share their groundbreaking ideas and + innovative practices in the realm of GraphQL at the conference. +
++ Loading Speakers... +
+ )} +