applications/calendar/src/app/components/eventModal/rows/ParticipantRows.tsx

   1 import React, { useCallback, useRef } from 'react';
   2
   3 import debounce from 'lodash/debounce';
   4
   5 import type { SimpleMap } from '@proton/shared/lib/interfaces';
   6 import type { AttendeeModel } from '@proton/shared/lib/interfaces/calendar';
   7 import type { ContactEmail } from '@proton/shared/lib/interfaces/contacts';
   8
   9 import { busySlotsActions } from '../../../store/busySlots/busySlotsSlice';
  10 import { useCalendarDispatch } from '../../../store/hooks';
  11 import BusyParticipantRow from './BusyParticipantRow';
  12 import ParticipantRow from './ParticipantRow';
  13
  14 interface Props {
  15     attendeeModel: AttendeeModel[];
  16     contactEmailsMap: SimpleMap<ContactEmail>;
  17     isBusySlotsAvailable: boolean;
  18     onDelete: (attendee: AttendeeModel) => void;
  19     toggleIsOptional: (attendee: AttendeeModel) => void;
  20 }
  21
  22 const ParticipantRows = ({
  23     attendeeModel,
  24     contactEmailsMap,
  25     isBusySlotsAvailable,
  26     onDelete,
  27     toggleIsOptional,
  28 }: Props) => {
  29     const dispatch = useCalendarDispatch();
  30     const busyAttendeeHighlighted = useRef<string | undefined>(undefined);
  31
  32     const onChangeHighlight = useCallback(
  33         debounce(() => {
  34             dispatch(busySlotsActions.setHighlightedAttendee(busyAttendeeHighlighted.current));
  35         }, 150),
  36         []
  37     );
  38
  39     return (
  40         <div className="pt-1 border-bottom border-weak mb-1">
  41             {attendeeModel.map((participant) => {
  42                 return isBusySlotsAvailable ? (
  43                     <BusyParticipantRow
  44                         key={participant.email}
  45                         attendee={participant}
  46                         contactEmailsMap={contactEmailsMap}
  47                         onToggleOptional={toggleIsOptional}
  48                         onDelete={onDelete}
  49                         onHighlight={(email, highlighted) => {
  50                             busyAttendeeHighlighted.current = highlighted ? email : undefined;
  51                             onChangeHighlight();
  52                         }}
  53                     />
  54                 ) : (
  55                     <ParticipantRow
  56                         key={participant.email}
  57                         attendee={participant}
  58                         contactEmailsMap={contactEmailsMap}
  59                         onToggleOptional={toggleIsOptional}
  60                         onDelete={onDelete}
  61                     />
  62                 );
  63             })}
  64         </div>
  65     );
  66 };
  67
  68 export default ParticipantRows;