#809 extract event actions component (#831)

Co-authored-by: lethemanh <lethemanh@lethemanhs-MacBook-Pro.local>

src/features/Events/EventActions.tsx

@@ -0,0 +1,55 @@
+import { useScreenSizeDetection } from '@/useScreenSizeDetection'
+import { Box, Button } from '@linagora/twake-mui'
+import AddIcon from '@mui/icons-material/Add'
+import { useI18n } from 'twake-i18n'
+
+interface EventActionsProps {
+  showExpandedBtn: boolean
+  isEdit?: boolean
+  onExpanded: () => void
+  onClose: () => void
+  onSave: () => Promise<void>
+}
+
+export const EventActions: React.FC<EventActionsProps> = ({
+  showExpandedBtn,
+  isEdit,
+  onExpanded,
+  onClose,
+  onSave
+}) => {
+  const { t } = useI18n()
+  const { isTooSmall: isMobile } = useScreenSizeDetection()
+
+  return (
+    <Box display="flex" justifyContent="space-between" width="100%" px={2}>
+      {showExpandedBtn && (
+        <Button
+          size={isMobile ? 'small' : 'medium'}
+          startIcon={<AddIcon />}
+          onClick={onExpanded}
+        >
+          {t('common.moreOptions')}
+        </Button>
+      )}
+      <Box display="flex" gap={1} ml={!showExpandedBtn ? 'auto' : 0}>
+        {(!showExpandedBtn || isEdit) && (
+          <Button
+            size={isMobile ? 'small' : 'medium'}
+            variant="outlined"
+            onClick={onClose}
+          >
+            {t('common.cancel')}
+          </Button>
+        )}
+        <Button
+          size={isMobile ? 'small' : 'medium'}
+          variant="contained"
+          onClick={() => void onSave()}
+        >
+          {t('actions.save')}
+        </Button>
+      </Box>
+    </Box>
+  )
+}

src/features/Events/EventModal.tsx

@@ -26,8 +26,6 @@ import {
 import { TIMEZONES } from '@/utils/timezone-data'
 import { addVideoConferenceToDescription } from '@/utils/videoConferenceUtils'
 import { CalendarApi, DateSelectArg } from '@fullcalendar/core'
-import { Box, Button } from '@linagora/twake-mui'
-import AddIcon from '@mui/icons-material/Add'
 import React, {
   startTransition,
   useCallback,
@@ -44,6 +42,7 @@ import { CalendarEvent, RepetitionObject } from './EventsTypes'
 import { useEventOrganizer } from './useEventOrganizer'
 import { buildDelegatedEventURL } from './utils/buildDelegatedEventURL'
 import { Resource } from '@/components/Attendees/ResourceSearch'
+import { EventActions } from './EventActions'
 
 function EventPopover({
   open,
@@ -158,7 +157,9 @@ function EventPopover({
       : []
   )
   const [alarm, setAlarm] = useState(event?.alarm?.trigger ?? '')
-  const [eventClass, setEventClass] = useState<string>(event?.class ?? 'PUBLIC')
+  const [eventClass, setEventClass] = useState<
+    'PUBLIC' | 'PRIVATE' | 'CONFIDENTIAL'
+  >(event?.class ?? 'PUBLIC')
   const [busy, setBusy] = useState(event?.transp ?? 'OPAQUE')
   const [timezone, setTimezone] = useState(
     event?.timezone ? resolveTimezone(event.timezone) : resolvedCalendarTimezone
@@ -789,7 +790,7 @@ function EventPopover({
       uid: newEventUID,
       description,
       location,
-      class: eventClass as 'PUBLIC' | 'PRIVATE' | 'CONFIDENTIAL',
+      class: eventClass,
       repetition,
       organizer,
       timezone,
@@ -916,26 +917,6 @@ function EventPopover({
     }
   }
 
-  const dialogActions = (
-    <Box display="flex" justifyContent="space-between" width="100%" px={2}>
-      {!showMore && (
-        <Button startIcon={<AddIcon />} onClick={() => setShowMore(!showMore)}>
-          {t('common.moreOptions')}
-        </Button>
-      )}
-      <Box display="flex" gap={1} ml={showMore ? 'auto' : 0}>
-        {showMore && (
-          <Button variant="outlined" onClick={handleClose}>
-            {t('common.cancel')}
-          </Button>
-        )}
-        <Button variant="contained" onClick={handleSave}>
-          {t('actions.save')}
-        </Button>
-      </Box>
-    </Box>
-  )
-
   return (
     <ResponsiveDialog
       open={open}
@@ -947,7 +928,14 @@ function EventPopover({
       }
       isExpanded={showMore}
       onExpandToggle={() => setShowMore(!showMore)}
-      actions={dialogActions}
+      actions={
+        <EventActions
+          showExpandedBtn={!showMore}
+          onClose={handleClose}
+          onSave={handleSave}
+          onExpanded={() => setShowMore(!showMore)}
+        />
+      }
     >
       <EventFormFields
         title={title}

src/features/Events/EventUpdateModal.tsx

@@ -29,8 +29,6 @@ import {
 } from '@/utils/timezone'
 import { TIMEZONES } from '@/utils/timezone-data'
 import { addVideoConferenceToDescription } from '@/utils/videoConferenceUtils'
-import { Box, Button } from '@linagora/twake-mui'
-import AddIcon from '@mui/icons-material/Add'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useI18n } from 'twake-i18n'
 import {
@@ -46,6 +44,7 @@ import { moveEventBetweenCalendars } from './updateEventHelpers/moveEventBetween
 import { detectRecurringEventChanges } from './utils/detectRecurringEventChanges'
 import { Resource } from '@/components/Attendees/ResourceSearch'
 import { useScreenSizeDetection } from '@/useScreenSizeDetection'
+import { EventActions } from './EventActions'
 
 const EventUpdateModal: React.FC<{
   eventId: string
@@ -1057,41 +1056,6 @@ const EventUpdateModal: React.FC<{
     }
   }
 
-  const dialogActions = (
-    <Box
-      display="flex"
-      justifyContent="space-between"
-      width="100%"
-      px={isMobile ? 0 : 2}
-    >
-      {!showMore && (
-        <Button
-          size={isMobile ? 'small' : 'medium'}
-          startIcon={<AddIcon />}
-          onClick={() => setShowMore(!showMore)}
-        >
-          {t('common.moreOptions')}
-        </Button>
-      )}
-      <Box display="flex" gap={1} ml={showMore ? 'auto' : 0}>
-        <Button
-          size={isMobile ? 'small' : 'medium'}
-          variant="outlined"
-          onClick={handleClose}
-        >
-          {t('common.cancel')}
-        </Button>
-        <Button
-          size={isMobile ? 'small' : 'medium'}
-          variant="contained"
-          onClick={() => void handleSave()}
-        >
-          {t('actions.save')}
-        </Button>
-      </Box>
-    </Box>
-  )
-
   if (!event) return null
 
   return (
@@ -1101,7 +1065,15 @@ const EventUpdateModal: React.FC<{
       title={t('event.updateEvent')}
       isExpanded={showMore}
       onExpandToggle={() => setShowMore(!showMore)}
-      actions={dialogActions}
+      actions={
+        <EventActions
+          showExpandedBtn={!showMore}
+          isEdit
+          onClose={handleClose}
+          onSave={handleSave}
+          onExpanded={() => setShowMore(!showMore)}
+        />
+      }
       sx={{
         '& .MuiDialogActions-root': {
           paddingLeft: isMobile ? 2 : 4,