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

   1 import { useRef } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { MemoizedIconRow as IconRow } from '@proton/components';
   6 import type { VIEWS } from '@proton/shared/lib/calendar/constants';
   7 import { PARTICIPANTS_INPUT_ID } from '@proton/shared/lib/calendar/constants';
   8 import { getIsProtonUID } from '@proton/shared/lib/calendar/helper';
   9 import type { Address } from '@proton/shared/lib/interfaces';
  10 import type { AttendeeModel, EventModel } from '@proton/shared/lib/interfaces/calendar';
  11
  12 import BusySlotsSpotlight from '../BusySlotsSpotlight';
  13 import { getOrganizerAndSelfAddressModel } from '../eventForm/state';
  14 import ParticipantsInput from '../inputs/ParticipantsInput';
  15
  16 interface Props {
  17     canEditSharedEventData: boolean;
  18     isCreateEvent: boolean;
  19     model: EventModel;
  20     setModel: (value: EventModel) => void;
  21     addresses: Address[];
  22     isMinimal?: boolean;
  23     onDisplayBusySlots?: () => void;
  24     setParticipantError?: (value: boolean) => void;
  25     view: VIEWS;
  26 }
  27
  28 export const RowParticipants = ({
  29     canEditSharedEventData,
  30     isCreateEvent,
  31     model,
  32     setModel,
  33     setParticipantError,
  34     addresses,
  35     isMinimal,
  36     onDisplayBusySlots,
  37     view,
  38 }: Props) => {
  39     const isOrganizerOfInvitationRef = useRef(!isCreateEvent && !!model.isOrganizer);
  40     const isOrganizerOfInvitation = isOrganizerOfInvitationRef.current;
  41
  42     const isImportedEvent = model.uid && !getIsProtonUID(model.uid);
  43     if (!canEditSharedEventData || isImportedEvent) {
  44         return null;
  45     }
  46
  47     const handleChangeAttendees = (value: AttendeeModel[]) => {
  48         const { organizer: newOrganizer, selfAddress: newSelfAddress } = getOrganizerAndSelfAddressModel({
  49             attendees: value,
  50             addressID: model.member.addressID,
  51             addresses,
  52             isAttendee: false,
  53         });
  54
  55         setModel({
  56             ...model,
  57             attendees: value,
  58             isOrganizer: isOrganizerOfInvitation ? true : !!value.length,
  59             organizer: isOrganizerOfInvitation ? model.organizer : newOrganizer,
  60             selfAddress: isOrganizerOfInvitation ? model.selfAddress : newSelfAddress,
  61         });
  62     };
  63
  64     return (
  65         <BusySlotsSpotlight view={view} isDisplayedInPopover={!!isMinimal}>
  66             <IconRow icon="users" title={c('Label').t`Participants`} id={PARTICIPANTS_INPUT_ID}>
  67                 <ParticipantsInput
  68                     placeholder={c('Placeholder').t`Add participants`}
  69                     id={PARTICIPANTS_INPUT_ID}
  70                     value={model.attendees}
  71                     isOwnedCalendar={model.calendar.isOwned}
  72                     onChange={handleChangeAttendees}
  73                     organizer={model.organizer}
  74                     addresses={addresses}
  75                     collapsible={!isMinimal}
  76                     setParticipantError={setParticipantError}
  77                     onDisplayBusySlots={onDisplayBusySlots}
  78                     displayBusySlots={!!isMinimal}
  79                     view={view}
  80                 />
  81             </IconRow>
  82         </BusySlotsSpotlight>
  83     );
  84 };