export const InteractiveCallParticipantListExample:()

in packages/storybook8/stories/Components/ParticipantList/snippets/InteractiveCall.snippet.tsx [42:103]
54 lines of code
8 McCabe index (conditional complexity)

export const InteractiveCallParticipantListExample: () => JSX.Element = () => {
  const [participants, setParticpants] = useState<any[]>(mockParticipants);

  const mockMyUserId = 'user1';

  const onRenderParticipant = (participant: ParticipantListParticipant): JSX.Element => {
    const participantIndex = participants.map((p) => p.userId).indexOf(participant.userId);

    const callingParticipant = participants[participantIndex] as CallParticipantListParticipant;

    let presence: PersonaPresence | undefined = undefined;
    if (callingParticipant) {
      if (callingParticipant.state === 'Connected') {
        presence = PersonaPresence.online;
      } else if (callingParticipant.state === 'Idle') {
        presence = PersonaPresence.away;
      } else if (callingParticipant.state === 'Connecting') {
        presence = PersonaPresence.offline;
      }
    }

    const menuItems: IContextualMenuItem[] = [
      {
        key: 'mute',
        text: callingParticipant.isMuted ? 'Unmute' : 'Mute',
        onClick: () => {
          const newParticipants = [...participants];
          newParticipants[participantIndex].isMuted = !participants[participantIndex].isMuted;
          setParticpants(newParticipants);
        }
      }
    ];

    const onRenderIcon = callingParticipant?.isMuted ? () => <Icon iconName="MicOff2" /> : () => <></>;

    if (participant.displayName) {
      return (
        <ParticipantItem
          displayName={participant.displayName}
          me={participant.userId === mockMyUserId}
          menuItems={menuItems}
          presence={presence}
          onRenderIcon={onRenderIcon}
        />
      );
    }
    return <></>;
  };

  return (
    <FluentThemeProvider>
      <Stack>
        <div style={{ fontSize: '1.5rem', marginBottom: '1rem', fontFamily: 'Segoe UI' }}>Participants</div>
        <ParticipantList
          participants={participants}
          myUserId={mockMyUserId}
          onRenderParticipant={onRenderParticipant}
        />
      </Stack>
    </FluentThemeProvider>
  );
};