Improve attendee display by including names and photos

Refactors the attendee handling logic to store and display attendee names and photo URLs directly, eliminating redundant API calls and ensuring accurate user information.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9b278ad5-3a45-420e-ba83-0847baf9924f
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: cd7c97d3-ebf1-460b-bd16-aa248609e22d
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/04133160-d2cd-42c9-82f0-4e08d800b951/9b278ad5-3a45-420e-ba83-0847baf9924f/szOT2Og
Replit-Helium-Checkpoint-Created: true

Author: marcselman

client/src/components/HeroSection.tsx

@@ -1,7 +1,7 @@
 import { Button } from "@/components/ui/button";
 import { Calendar, Users } from "lucide-react";
 import { useMemo } from "react";
-import { isEmailInList } from "@/lib/email-utils";
+import { isEmailInAttendees } from "@/lib/email-utils";
 import type { ForumEdition, Session } from "@shared/schema";
 
 import backdrop1 from "@assets/backdrops/RL_09185.jpg";
@@ -33,7 +33,7 @@ export function HeroSection({ edition, sessions, userEmail }: HeroSectionProps)
   );
 
   const userRegistrations = userEmail
-    ? sessions.filter((s) => isEmailInList(userEmail, s.attendees)).length
+    ? sessions.filter((s) => isEmailInAttendees(userEmail, s.attendees)).length
     : 0;
 
   const formatDate = (dateStr: string) => {

client/src/components/SessionCard.tsx

@@ -4,7 +4,7 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Clock, MapPin, Users, Check, Utensils } from "lucide-react";
-import { isEmailInList, isSpeaker } from "@/lib/email-utils";
+import { isEmailInAttendees, isSpeaker } from "@/lib/email-utils";
 import { getInitials } from "@/lib/utils";
 import type { Session } from "@shared/schema";
 import foodDrinkBg from "@assets/image_1768474260490.png";
@@ -44,7 +44,7 @@ export function SessionCard({
   onUnregister,
   isPending = false,
 }: SessionCardProps) {
-  const isRegistered = userEmail ? isEmailInList(userEmail, session.attendees) : false;
+  const isRegistered = userEmail ? isEmailInAttendees(userEmail, session.attendees) : false;
   const isUserSpeaker = userEmail ? isSpeaker(userEmail, session.speakers) : false;
 
   const formatTime = (dateStr: string) => {

client/src/components/SessionTimeline.tsx

@@ -3,7 +3,7 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Clock, MapPin, Users, Check, Utensils } from "lucide-react";
-import { isEmailInList, isSpeaker } from "@/lib/email-utils";
+import { isEmailInAttendees, isSpeaker } from "@/lib/email-utils";
 import { getInitials } from "@/lib/utils";
 import type { Session } from "@shared/schema";
 import foodDrinkBg from "@assets/image_1768474260490.png";
@@ -81,7 +81,7 @@ export function SessionTimeline({
             <div className="flex-1 space-y-3 pt-1">
               {slotSessions.map((session) => {
                 const isRegistered = userEmail
-                  ? isEmailInList(userEmail, session.attendees)
+                  ? isEmailInAttendees(userEmail, session.attendees)
                   : false;
                 const isUserSpeaker = userEmail
                   ? isSpeaker(userEmail, session.speakers)

client/src/lib/email-utils.ts

@@ -1,13 +1,13 @@
-import type { Speaker } from "@shared/schema";
+import type { Speaker, Attendee } from "@shared/schema";
 
 function getLocalPart(email: string): string {
   const parts = email.toLowerCase().split("@");
   return parts.length === 2 ? parts[0] : email.toLowerCase();
 }
 
-export function isEmailInList(email: string, list: string[]): boolean {
+export function isEmailInAttendees(email: string, attendees: Attendee[]): boolean {
   const userLocalPart = getLocalPart(email);
-  return list.some((listEmail) => getLocalPart(listEmail) === userLocalPart);
+  return attendees.some((attendee) => getLocalPart(attendee.email) === userLocalPart);
 }
 
 export function isSpeaker(email: string, speakers: Speaker[]): boolean {

client/src/pages/Home.tsx

@@ -20,7 +20,7 @@ import {
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { Utensils } from "lucide-react";
-import { isEmailInList } from "@/lib/email-utils";
+import { isEmailInAttendees } from "@/lib/email-utils";
 import { findOverlappingSessions } from "@/lib/session-utils";
 import { OverlapWarningBanner } from "@/components/OverlapWarningBanner";
 import type { ForumData, Session } from "@shared/schema";
@@ -126,7 +126,7 @@ export default function Home() {
     if (!newSession) return null;
 
     const userRegisteredSessions = allSessions.filter(
-      s => s.id !== newSessionId && isEmailInList(userEmail, s.attendees)
+      s => s.id !== newSessionId && isEmailInAttendees(userEmail, s.attendees)
     );
 
     if (userRegisteredSessions.length === 0) return null;
@@ -136,7 +136,7 @@ export default function Home() {
 
     const foodDrinkSessions = allSessions.filter(s => 
       (s.categories || []).some(c => c.toLowerCase() === "eten & drinken") &&
-      !isEmailInList(userEmail, s.attendees) &&
+      !isEmailInAttendees(userEmail, s.attendees) &&
       s.id !== newSessionId
     );
 
@@ -217,7 +217,7 @@ export default function Home() {
 
   const registeredSessions = useMemo(() => {
     if (!sessions || !user?.email) return [];
-    return sessions.filter((s) => isEmailInList(user.email, s.attendees));
+    return sessions.filter((s) => isEmailInAttendees(user.email, s.attendees));
   }, [sessions, user?.email]);
 
   const overlapPairs = useMemo(() => {

client/src/pages/MySessions.tsx

@@ -8,7 +8,7 @@ import { EmptyState } from "@/components/EmptyState";
 import { SessionGridSkeleton } from "@/components/LoadingState";
 import { Button } from "@/components/ui/button";
 import { useToast } from "@/hooks/use-toast";
-import { isEmailInList } from "@/lib/email-utils";
+import { isEmailInAttendees } from "@/lib/email-utils";
 import { findOverlappingSessions } from "@/lib/session-utils";
 import { OverlapWarningBanner } from "@/components/OverlapWarningBanner";
 import { ArrowLeft, Calendar } from "lucide-react";
@@ -50,7 +50,7 @@ export default function MySessions() {
     if (!data?.sessions || !user?.email) return [];
 
     return data.sessions
-      .filter((session) => isEmailInList(user.email, session.attendees))
+      .filter((session) => isEmailInAttendees(user.email, session.attendees))
       .sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime());
   }, [data?.sessions, user?.email]);
 

client/src/pages/SessionDetail.tsx

@@ -11,31 +11,16 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { useToast } from "@/hooks/use-toast";
 import { useUser } from "@/context/UserContext";
 import { apiRequest, queryClient } from "@/lib/queryClient";
-import { isEmailInList, isSpeaker } from "@/lib/email-utils";
+import { isEmailInAttendees, isSpeaker } from "@/lib/email-utils";
 import { findOverlapsWithSession } from "@/lib/session-utils";
 import { formatDisplayName } from "@/lib/name-utils";
 import { getInitials } from "@/lib/utils";
-import type { Session, ForumData } from "@shared/schema";
+import type { Session, ForumData, Attendee } from "@shared/schema";
 
-interface UserInfo {
-  displayName: string;
-  email: string;
-}
-
-function AttendeeItem({ email, index }: { email: string; index: number }) {
-  const { data: userInfo, isLoading } = useQuery<UserInfo>({
-    queryKey: ["/api/users", email],
-    queryFn: async () => {
-      const res = await fetch(`/api/users/${encodeURIComponent(email)}`);
-      if (!res.ok) throw new Error("User not found");
-      return res.json();
-    },
-    staleTime: 1000 * 60 * 60,
-  });
-
-  const displayName = formatDisplayName(userInfo?.displayName || email.split("@")[0]);
-  const initials = displayName.split(/[\s]+/).filter(Boolean).slice(0, 2).map((w: string) => w[0]).join("").toUpperCase() || email.slice(0, 2).toUpperCase();
-  const photoUrl = `/api/users/${encodeURIComponent(email)}/photo`;
+function AttendeeItem({ attendee, index }: { attendee: Attendee; index: number }) {
+  const displayName = formatDisplayName(attendee.name);
+  const initials = displayName.split(/[\s]+/).filter(Boolean).slice(0, 2).map((w: string) => w[0]).join("").toUpperCase() || attendee.email.slice(0, 2).toUpperCase();
+  const photoUrl = attendee.photoUrl || `/api/users/${encodeURIComponent(attendee.email)}/photo`;
 
   return (
     <div className="flex items-center gap-3" data-testid={`attendee-${index}`}>
@@ -45,13 +30,9 @@ function AttendeeItem({ email, index }: { email: string; index: number }) {
           {initials}
         </AvatarFallback>
       </Avatar>
-      {isLoading ? (
-        <Skeleton className="h-4 w-32" />
-      ) : (
-        <span className="text-sm truncate" data-testid={`text-attendee-name-${index}`}>
-          {displayName}
-        </span>
-      )}
+      <span className="text-sm truncate" data-testid={`text-attendee-name-${index}`}>
+        {displayName}
+      </span>
     </div>
   );
 }
@@ -109,7 +90,7 @@ export default function SessionDetail() {
 
   const registeredSessions = useMemo(() => {
     if (!forumData?.sessions || !user?.email) return [];
-    return forumData.sessions.filter((s) => isEmailInList(user.email, s.attendees));
+    return forumData.sessions.filter((s) => isEmailInAttendees(user.email, s.attendees));
   }, [forumData?.sessions, user?.email]);
 
   const overlappingSessions = useMemo(() => {
@@ -222,7 +203,7 @@ export default function SessionDetail() {
     );
   }
 
-  const isRegistered = user?.email ? isEmailInList(user.email, session.attendees) : false;
+  const isRegistered = user?.email ? isEmailInAttendees(user.email, session.attendees) : false;
   const isUserSpeaker = user?.email ? isSpeaker(user.email, session.speakers) : false;
   const isPending = registerMutation.isPending || unregisterMutation.isPending;
 
@@ -416,8 +397,8 @@ export default function SessionDetail() {
                   Deelnemers ({session.capacity ? `${session.attendees.length}/${session.capacity}` : session.attendees.length})
                 </h3>
                 <div className="space-y-3">
-                  {session.attendees.map((email, index) => (
-                    <AttendeeItem key={email} email={email} index={index} />
+                  {session.attendees.map((attendee, index) => (
+                    <AttendeeItem key={attendee.email} attendee={attendee} index={index} />
                   ))}
                 </div>
               </CardContent>

server/microsoft-graph.ts

@@ -595,7 +595,11 @@ export class MicrosoftGraphService {
           a.status.response === "tentativelyAccepted"
         )
         .filter((a) => a.type.toLowerCase() !== "required")
-        .map((a) => a.emailAddress.address);
+        .map((a) => ({
+          name: formatDisplayName(a.emailAddress.name || a.emailAddress.address.split("@")[0]),
+          email: a.emailAddress.address,
+          photoUrl: `/api/users/${encodeURIComponent(a.emailAddress.address)}/photo`,
+        }));
 
       return {
         id: event.id,
@@ -670,7 +674,11 @@ export class MicrosoftGraphService {
           a.status.response === "tentativelyAccepted"
         )
         .filter((a) => a.type.toLowerCase() !== "required")
-        .map((a) => a.emailAddress.address);
+        .map((a) => ({
+          name: formatDisplayName(a.emailAddress.name || a.emailAddress.address.split("@")[0]),
+          email: a.emailAddress.address,
+          photoUrl: `/api/users/${encodeURIComponent(a.emailAddress.address)}/photo`,
+        }));
 
       return {
         id: event.id,

shared/schema.ts

@@ -9,6 +9,15 @@ export const speakerSchema = z.object({
 
 export type Speaker = z.infer<typeof speakerSchema>;
 
+// Attendee schema - includes name from Outlook invitation
+export const attendeeSchema = z.object({
+  name: z.string(),
+  email: z.string(),
+  photoUrl: z.string().optional(),
+});
+
+export type Attendee = z.infer<typeof attendeeSchema>;
+
 // Session schema - categories come directly from Outlook
 export const sessionSchema = z.object({
   id: z.string(),
@@ -21,7 +30,7 @@ export const sessionSchema = z.object({
   endTime: z.string(), // ISO datetime
   room: z.string(),
   speakers: z.array(speakerSchema), // Array of speakers (required attendees)
-  attendees: z.array(z.string()), // Array of email addresses
+  attendees: z.array(attendeeSchema), // Array of attendees with name and email
   capacity: z.number().optional(), // Maximum number of attendees (from back-matter)
 });