applications/calendar/src/app/components/events/eventPopoverButtons/EventPopoverButtons.tsx

   1 import { getUnixTime } from 'date-fns';
   2 import { c } from 'ttag';
   3
   4 import { ButtonLike } from '@proton/atoms';
   5 import { AppLink, Icon, ReloadSpinner, Tooltip } from '@proton/components';
   6 import { getLinkToCalendarEvent } from '@proton/shared/lib/calendar/helper';
   7 import { fromUTCDate, toLocalDate } from '@proton/shared/lib/date/timezone';
   8 import type { CalendarEvent, CalendarEventSharedData } from '@proton/shared/lib/interfaces/calendar';
   9 import noop from '@proton/utils/noop';
  10
  11 interface BaseProps {
  12     showButton: boolean;
  13 }
  14
  15 interface EditButtonProps extends BaseProps {
  16     onEdit: () => void;
  17     loading: boolean;
  18 }
  19 export const PopoverEditButton = ({ showButton, loading, onEdit }: EditButtonProps) => {
  20     if (!showButton) {
  21         return null;
  22     }
  23
  24     return (
  25         <Tooltip title={c('Edit event button tooltip').t`Edit event`}>
  26             <ButtonLike
  27                 data-testid="event-popover:edit"
  28                 shape="ghost"
  29                 onClick={onEdit}
  30                 disabled={loading}
  31                 icon
  32                 size="small"
  33             >
  34                 <Icon name="pen" alt={c('Edit event button tooltip').t`Edit event`} />
  35             </ButtonLike>
  36         </Tooltip>
  37     );
  38 };
  39
  40 interface DeleteButtonProps extends BaseProps {
  41     onDelete: () => void;
  42     loading: boolean;
  43 }
  44 export const PopoverDeleteButton = ({ showButton, loading, onDelete }: DeleteButtonProps) => {
  45     if (!showButton) {
  46         return null;
  47     }
  48
  49     return (
  50         <Tooltip title={c('Delete event button tooltip').t`Delete event`}>
  51             <ButtonLike
  52                 data-testid="event-popover:delete"
  53                 shape="ghost"
  54                 onClick={loading ? noop : onDelete}
  55                 loading={loading}
  56                 icon
  57                 size="small"
  58             >
  59                 <Icon name="trash" alt={c('Delete event button tooltip').t`Delete event`} />
  60             </ButtonLike>
  61         </Tooltip>
  62     );
  63 };
  64
  65 interface DuplicateButtonProps extends BaseProps {
  66     onDuplicate?: () => void;
  67     loading: boolean;
  68 }
  69 export const PopoverDuplicateButton = ({ showButton, loading, onDuplicate }: DuplicateButtonProps) => {
  70     if (!showButton) {
  71         return null;
  72     }
  73
  74     return (
  75         <Tooltip title={c('Duplicate event button tooltip').t`Duplicate event`}>
  76             <ButtonLike
  77                 data-testid="event-popover:duplicate"
  78                 shape="ghost"
  79                 onClick={onDuplicate}
  80                 disabled={loading}
  81                 icon
  82                 size="small"
  83             >
  84                 <Icon name="squares" alt={c('Duplicate event button tooltip').t`Duplicate event`} />
  85             </ButtonLike>
  86         </Tooltip>
  87     );
  88 };
  89
  90 interface ReloadButtonProps extends BaseProps {
  91     onRefresh: () => void;
  92     loading: boolean;
  93 }
  94 const PopoverRefreshButton = ({ showButton, loading, onRefresh }: ReloadButtonProps) => {
  95     if (!showButton) {
  96         return null;
  97     }
  98
  99     return (
 100         <Tooltip title={c('Reload event button tooltip').t`Reload event`}>
 101             <ButtonLike
 102                 data-testid="event-popover:refresh"
 103                 shape="ghost"
 104                 onClick={loading ? noop : onRefresh}
 105                 icon
 106                 size="small"
 107             >
 108                 <ReloadSpinner refreshing={loading} alt={c('Reload event button tooltip').t`Reload event`} />
 109             </ButtonLike>
 110         </Tooltip>
 111     );
 112 };
 113
 114 interface PopoverViewButtonProps extends BaseProps {
 115     isSearchView: boolean;
 116     start: Date;
 117     eventData?: CalendarEvent | CalendarEventSharedData;
 118     onViewClick: () => void;
 119 }
 120 export const PopoverViewButton = ({
 121     showButton,
 122     start,
 123     isSearchView,
 124     eventData,
 125     onViewClick,
 126 }: PopoverViewButtonProps) => {
 127     if (!showButton) {
 128         return null;
 129     }
 130
 131     const linkTo =
 132         eventData &&
 133         getLinkToCalendarEvent({
 134             calendarID: eventData.CalendarID,
 135             eventID: eventData.ID,
 136             recurrenceID: getUnixTime(toLocalDate(fromUTCDate(start))),
 137         });
 138
 139     const viewText = isSearchView
 140         ? c('View event button tooltip').t`Navigate to event`
 141         : c('View event button tooltip').t`Open in a new tab`;
 142
 143     return (
 144         <Tooltip title={viewText}>
 145             {isSearchView ? (
 146                 <ButtonLike data-testid="event-popover:open" shape="ghost" onClick={onViewClick} icon size="small">
 147                     <Icon name="arrow-out-square" size={3.5} alt={viewText} />
 148                 </ButtonLike>
 149             ) : (
 150                 <AppLink
 151                     data-testid="event-popover:open-in-new-tab"
 152                     to={linkTo || '/'}
 153                     reloadDocument
 154                     className="mr-2 button button-small button-ghost-weak button-for-icon"
 155                 >
 156                     <Icon name="arrow-out-square" size={3.5} alt={viewText} />
 157                 </AppLink>
 158             )}
 159         </Tooltip>
 160     );
 161 };
 162
 163 interface EventReloadErrorActionProps {
 164     showDeleteButton: boolean;
 165     showReloadButton: boolean;
 166     loadingDelete: boolean;
 167     loadingRefresh: boolean;
 168     onDelete: () => void;
 169     onRefresh: () => Promise<void>;
 170 }
 171 export const EventReloadErrorAction = ({
 172     showDeleteButton,
 173     showReloadButton,
 174     loadingDelete,
 175     loadingRefresh,
 176     onDelete,
 177     onRefresh,
 178 }: EventReloadErrorActionProps) => {
 179     return (
 180         <>
 181             {showReloadButton && (
 182                 <div className="flex flex-nowrap justify-end">
 183                     <PopoverRefreshButton
 184                         loading={loadingRefresh}
 185                         showButton={showReloadButton}
 186                         onRefresh={onRefresh}
 187                     />
 188                 </div>
 189             )}
 190             {showDeleteButton && (
 191                 <div className="flex flex-nowrap justify-end">
 192                     <PopoverDeleteButton showButton={showDeleteButton} loading={loadingDelete} onDelete={onDelete} />
 193                 </div>
 194             )}
 195         </>
 196     );
 197 };