69 lines
2.3 KiB
TypeScript
69 lines
2.3 KiB
TypeScript
import { CAL_URL } from "@calcom/lib/constants";
|
|
import { SchedulingType } from "@calcom/prisma/enums";
|
|
import { AvatarGroup } from "@calcom/ui";
|
|
|
|
import type { PublicEvent } from "../../types";
|
|
|
|
export interface EventMembersProps {
|
|
/**
|
|
* Used to determine whether all members should be shown or not.
|
|
* In case of Round Robin type, members aren't shown.
|
|
*/
|
|
schedulingType: PublicEvent["schedulingType"];
|
|
users: PublicEvent["users"];
|
|
profile: PublicEvent["profile"];
|
|
}
|
|
|
|
type Avatar = {
|
|
title: string;
|
|
image: string | undefined;
|
|
alt: string | undefined;
|
|
href: string | undefined;
|
|
};
|
|
|
|
type AvatarWithRequiredImage = Avatar & { image: string };
|
|
|
|
export const EventMembers = ({ schedulingType, users, profile }: EventMembersProps) => {
|
|
const showMembers = schedulingType !== SchedulingType.ROUND_ROBIN;
|
|
const shownUsers = showMembers ? users : [];
|
|
|
|
// In some cases we don't show the user's names, but only show the profile name.
|
|
const showOnlyProfileName =
|
|
(profile.name && schedulingType === SchedulingType.ROUND_ROBIN) ||
|
|
!users.length ||
|
|
(profile.name !== users[0].name && schedulingType === SchedulingType.COLLECTIVE);
|
|
|
|
const avatars: Avatar[] = shownUsers.map((user) => ({
|
|
title: `${user.name}`,
|
|
image: "image" in user ? `${user.image}` : `${CAL_URL}/${user.username}/avatar.png`,
|
|
alt: user.name || undefined,
|
|
href: user.username ? `${CAL_URL}/${user.username}` : undefined,
|
|
}));
|
|
|
|
// Add profile later since we don't want to force creating an avatar for this if it doesn't exist.
|
|
avatars.unshift({
|
|
title: `${profile.name}`,
|
|
image: "logo" in profile && profile.logo ? `${profile.logo}` : undefined,
|
|
alt: profile.name || undefined,
|
|
href: profile.username ? `${CAL_URL}/${profile.username}` : undefined,
|
|
});
|
|
|
|
const uniqueAvatars = avatars
|
|
.filter((item): item is AvatarWithRequiredImage => !!item.image)
|
|
.filter((item, index, self) => self.findIndex((t) => t.image === item.image) === index);
|
|
|
|
return (
|
|
<>
|
|
<AvatarGroup size="sm" className="border-muted" items={uniqueAvatars} />
|
|
<p className="text-subtle text-sm font-semibold">
|
|
{showOnlyProfileName
|
|
? profile.name
|
|
: shownUsers
|
|
.map((user) => user.name)
|
|
.filter((name) => name)
|
|
.join(", ")}
|
|
</p>
|
|
</>
|
|
);
|
|
};
|