Display speakers on session item

Author: HugoGresse

src/public/event/PublicEventSchedule.tsx

@@ -69,7 +69,7 @@ export const PublicEventSchedule = ({ eventId, event }: PublicEventScheduleProps
 
             <DayTabs days={sortedDays} selectedDay={selectedDay} onDayChange={handleDayChange} />
 
-            <DaySchedule day={selectedDay} sessions={currentSessions} />
+            <DaySchedule day={selectedDay} sessions={currentSessions} speakersData={event.speakers} />
         </Box>
     )
 }

src/public/event/components/DaySchedule.tsx

@@ -1,22 +1,27 @@
 import * as React from 'react'
 import { Box, Typography, Paper } from '@mui/material'
 import { DateTime } from 'luxon'
-import { JsonSession } from '../../../events/actions/updateWebsiteActions/jsonTypes'
+import { JsonSession, JsonSpeaker } from '../../../events/actions/updateWebsiteActions/jsonTypes'
 import { SessionItem } from './SessionItem'
 
 type DayScheduleProps = {
     day: string
     sessions: JsonSession[]
+    speakersData: JsonSpeaker[]
 }
 
-export const DaySchedule = ({ day, sessions }: DayScheduleProps) => {
+export const DaySchedule = ({ day, sessions, speakersData }: DayScheduleProps) => {
+    const sessionWithSpeakers = sessions.map((session) => ({
+        ...session,
+        speakersData: speakersData.filter((speaker) => session.speakerIds.includes(speaker.id)),
+    }))
     return (
         <Paper elevation={2} sx={{ p: 3 }}>
             <Typography variant="h4" gutterBottom>
                 {DateTime.fromISO(day).toFormat('MMMM d, yyyy')}
             </Typography>
             <Box display="flex" flexDirection="column" gap={2}>
-                {sessions.map((session) => (
+                {sessionWithSpeakers.map((session) => (
                     <SessionItem key={session.id} session={session} />
                 ))}
             </Box>

src/public/event/components/SessionItem.tsx

@@ -1,10 +1,9 @@
-import * as React from 'react'
-import { Box, Typography, Divider } from '@mui/material'
+import { Box, Typography, Divider, Avatar, AvatarGroup } from '@mui/material'
 import { DateTime } from 'luxon'
-import { JsonSession } from '../../../events/actions/updateWebsiteActions/jsonTypes'
+import { JsonSession, JsonSpeaker } from '../../../events/actions/updateWebsiteActions/jsonTypes'
 
 type SessionItemProps = {
-    session: JsonSession
+    session: JsonSession & { speakersData?: JsonSpeaker[] }
 }
 
 export const SessionItem = ({ session }: SessionItemProps) => {
@@ -16,10 +15,22 @@ export const SessionItem = ({ session }: SessionItemProps) => {
                 </Typography>
                 <Typography variant="h6">{session.title}</Typography>
             </Box>
-            {session.abstract && (
-                <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
-                    {session.abstract}
-                </Typography>
+            {session.speakersData && session.speakersData.length > 0 && (
+                <Box display="flex" alignItems="center" gap={1} sx={{ mt: 2 }}>
+                    <AvatarGroup max={4}>
+                        {session.speakersData.map((speaker) => (
+                            <Avatar
+                                key={speaker.id}
+                                alt={speaker.name}
+                                src={speaker.photoUrl || undefined}
+                                sx={{ width: 32, height: 32 }}
+                            />
+                        ))}
+                    </AvatarGroup>
+                    <Typography variant="body2" color="text.secondary">
+                        {session.speakersData.map((speaker) => speaker.name).join(', ')}
+                    </Typography>
+                </Box>
             )}
             <Divider sx={{ mt: 2 }} />
         </Box>