[Event] display profile image on participants list

src/api/events.js

@@ -26,7 +26,8 @@ export const getEventAttendees = async (id, page) => {
     lastName: attendee.last_name,
     phone: attendee.phone,
     postalCode: attendee.postal_code,
-    subscriptionDate: attendee?.subscription_date,
+    subscriptionDate: attendee.created_at,
+    imageUrl: attendee.image_url,
     tags: attendee.tags,
     type: attendee.type,
   }))

src/components/Activists/ActivistList.tsx

@@ -74,7 +74,7 @@ const ActivistColumnDefinition: CustomTableColumnModel<ActivistModel & { id: str
   {
     title: '',
     minWidth: 50,
-    render: line => <Avatar src={line.image_url} initials={getInitials(line)} />,
+    render: line => <Avatar imageUrl={line.image_url} initials={getInitials(line)} />,
   },
   {
     title: 'Militants',

src/components/Events/pages/detail/components/Attendees/Attendees.tsx

@@ -4,23 +4,18 @@ import { getNextPageParam, PaginatedResult, usePaginatedData } from '~/api/pagin
 import { useParams } from 'react-router'
 import { useErrorHandler } from '~/components/shared/error/hooks'
 import { Box, Stack } from '@mui/system'
-import {
-  Avatar,
-  Button,
-  Card,
-  CardHeader,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-  Typography,
-} from '@mui/material'
+import { Button, Card, CardHeader, Table, TableBody, TableCell, TableHead, TableRow, Typography } from '@mui/material'
 import pluralize from '~/components/shared/pluralize/pluralize'
 import Iconify from '~/mui/iconify'
 import Label from '~/mui/label'
 import { InfiniteData } from '@tanstack/react-query'
 import { useCallback } from 'react'
+import { getInitials } from '~/utils/names'
+import Avatar from '~/mui/avatar/Avatar'
+
+type Tag = {
+  label: string
+}
 
 type Attendee = {
   uuid: string
@@ -29,7 +24,8 @@ type Attendee = {
   emailAddress: string
   phone: string
   subscriptionDate: string
-  tags: string[]
+  imageUrl: string | null
+  tags: Tag[]
 }
 
 const Attendees = () => {
@@ -108,15 +104,9 @@ const Attendees = () => {
                 <TableCell>
                   <Stack direction="row" spacing={2} alignItems="center">
                     <Avatar
-                      sx={{
-                        bgcolor: 'info.lighter',
-                      }}
-                    >
-                      <Typography color="grey.600" fontWeight="600">
-                        {`${attendee.firstName[0]}`.toUpperCase()}
-                      </Typography>
-                    </Avatar>
-
+                      imageUrl={attendee.imageUrl}
+                      initials={getInitials({ first_name: attendee.firstName, last_name: attendee.lastName })}
+                    />
                     <Stack direction="column">
                       <Typography variant="body2">{`${attendee.firstName} ${attendee.lastName}`.trim()}</Typography>
                       {attendee.emailAddress && (
@@ -129,9 +119,9 @@ const Attendees = () => {
                 </TableCell>
                 <TableCell>
                   <Stack direction="row" spacing={2}>
-                    {attendee?.tags?.map((label, i) => (
+                    {attendee?.tags?.map((tag, i) => (
                       <Label key={i} color={'success'}>
-                        {label}
+                        {tag?.label}
                       </Label>
                     ))}
                   </Stack>

src/components/Procurations/Components/PersonWithAvatar/PersonWithAvatar.tsx

@@ -16,7 +16,7 @@ export default function PersonWithAvatar({ src, firstName, lastName, id, onPerso
   return (
     <Grid container sx={{ alignItems: 'center' }} spacing={MuiSpacing.normal}>
       <Grid item>
-        <Avatar src={src} initials={getInitials({ first_name: firstName, last_name: lastName })} />
+        <Avatar imageUrl={src} initials={getInitials({ first_name: firstName, last_name: lastName })} />
       </Grid>
       <Grid item xs>
         <div>

src/mui/avatar/Avatar.tsx

@@ -4,14 +4,14 @@ import { Avatar as MUIAvatar } from '@mui/material'
 
 interface Props {
   initials?: string
-  src?: string | null
+  imageUrl?: string | null
 }
 
-export default function Avatar({ initials, src }: Props) {
+export default function Avatar({ initials, imageUrl }: Props) {
   return (
     <MUIAvatar
       sx={{ bgcolor: grey[200], color: grey[600], fontSize: pxToRem(12), fontWeight: 'bold' }}
-      {...(src && { src })}
+      src={imageUrl || undefined}
     >
       {initials}
     </MUIAvatar>