applications/calendar/src/app/components/events/PartDayRegularEvent.tsx

   1 import { useMemo } from 'react';
   2
   3 import { useUser } from '@proton/account/user/hooks';
   4 import { Icon } from '@proton/components';
   5 import { MINUTE } from '@proton/shared/lib/constants';
   6 import clsx from '@proton/utils/clsx';
   7
   8 import type { CalendarViewEvent, CalendarViewEventTemporaryEvent } from '../../containers/calendar/interface';
   9 import { getEventStyle } from '../../helpers/color';
  10 import { getEventStatusTraits } from '../../helpers/event';
  11 import type { PartDayEventProps } from './PartDayEvent';
  12 import { PartDayEventView } from './PartDayEvent';
  13 import { getEventErrorMessage, getEventLoadingMessage } from './error';
  14 import getEventInformation from './getEventInformation';
  15 import useReadEvent from './useReadEvent';
  16
  17 interface PartDayRegularEventProps extends PartDayEventProps {
  18     event: CalendarViewEvent | CalendarViewEventTemporaryEvent;
  19 }
  20
  21 const PartDayRegularEvent = ({
  22     size,
  23     style,
  24     formatTime,
  25     event,
  26     isSelected,
  27     isBeforeNow,
  28     eventRef,
  29     tzid,
  30     eventPartDuration,
  31 }: PartDayRegularEventProps) => {
  32     const [{ hasPaidMail }] = useUser();
  33     const { start, end, data: targetEventData } = event;
  34     const model = useReadEvent(targetEventData, tzid);
  35
  36     const { isEventReadLoading, color, eventReadError, eventTitleSafe } = getEventInformation(
  37         event,
  38         model,
  39         hasPaidMail
  40     );
  41     const { isUnanswered, isCancelled } = getEventStatusTraits(model);
  42
  43     const eventStyle = useMemo(() => {
  44         return getEventStyle(color, style);
  45     }, [color, style]);
  46
  47     const titleString = (() => {
  48         if (eventReadError) {
  49             return '';
  50         }
  51         if (isEventReadLoading) {
  52             return '…';
  53         }
  54         return eventTitleSafe;
  55     })();
  56
  57     const expandableTitleString = (() => {
  58         if (eventReadError) {
  59             return getEventErrorMessage(eventReadError);
  60         }
  61         if (isEventReadLoading) {
  62             return getEventLoadingMessage();
  63         }
  64         return titleString;
  65     })();
  66
  67     const timeString = useMemo(() => {
  68         const timeStart = formatTime(start);
  69         const timeEnd = formatTime(end);
  70         return `${timeStart} - ${timeEnd}`;
  71     }, [start, end]);
  72     const shouldHideTime = isEventReadLoading || (eventPartDuration < 50 * MINUTE && titleString);
  73
  74     return (
  75         <PartDayEventView
  76             size={size}
  77             style={eventStyle}
  78             isLoaded={!isEventReadLoading}
  79             isPast={isBeforeNow}
  80             isSelected={isSelected}
  81             isUnanswered={isUnanswered}
  82             isCancelled={isCancelled}
  83             ref={eventRef}
  84             title={expandableTitleString}
  85             eventPartDuration={eventPartDuration}
  86         >
  87             {eventReadError ? (
  88                 <div className="flex flex-nowrap items-center">
  89                     <Icon name="lock-filled" className="calendar-eventcell-lock-icon" />
  90                     <span className="flex-1 text-ellipsis">&nbsp;</span>
  91                 </div>
  92             ) : (
  93                 <>
  94                     <div data-testid="calendar-day-week-view:part-day-event" className="calendar-eventcell-title">
  95                         {titleString}
  96                     </div>
  97                     <div className={clsx(['text-ellipsis calendar-eventcell-timestring', shouldHideTime && 'sr-only'])}>
  98                         {timeString}
  99                     </div>
 100                 </>
 101             )}
 102         </PartDayEventView>
 103     );
 104 };
 105
 106 export default PartDayRegularEvent;