feat(PDYE-1162): eventos clickeables (#701)

Author: Jonathangarrido

src/organisms/Calendar/Dropdown/CalendarDropdown.tsx

@@ -10,6 +10,7 @@ export const CalendarDropdown = ({
   loading,
   onlyToCalendar = false,
   m,
+  clickEvent,
 }: ICalendarDropdown): JSX.Element => {
   const date = new Date(now)
   const isoDate = date.toISOString()
@@ -24,6 +25,7 @@ export const CalendarDropdown = ({
       redirectToCalendar={redirectToCalendar}
       text={text}
       onlyToCalendar={onlyToCalendar}
+      clickEvent={clickEvent}
     />
   )
 }

src/organisms/Calendar/Dropdown/CalendarDropdown/CalendarDropdownContainer.tsx

@@ -18,6 +18,7 @@ export const CalendarDropdownContainer = ({
   courseColors,
   onlyToCalendar,
   m,
+  clickEvent,
 }: ICalendarDropdown): JSX.Element => {
   const [isMobile] = useMediaQuery('(max-width: 577px)')
   const { closeAndMarkSeen, empty, hasNew, ...all } = useParseEvents(events, now)
@@ -169,6 +170,7 @@ export const CalendarDropdownContainer = ({
                     text={text}
                     redirecToCalendar={redirectToCalendar}
                     isMobile={isMobile}
+                    clickEvent={clickEvent}
                   />
                 )}
               </Box>

src/organisms/Calendar/Dropdown/CalendarDropdown/Components/Events.tsx

@@ -2,7 +2,7 @@ import { BtnSecondary } from '@/molecules'
 import { Box } from '@chakra-ui/react'
 import { vars } from '@theme'
 
-import { Text, Event } from '../../types'
+import { Text, Event, ICalendarDropdown } from '../../types'
 import { EventsGroup } from './EventsGroup'
 
 interface IEventsProps {
@@ -15,6 +15,7 @@ interface IEventsProps {
   redirecToCalendar: () => void
   isMobile: boolean
   colors?: Record<string, string>
+  clickEvent?: ICalendarDropdown['clickEvent']
 }
 
 export const Events = ({
@@ -23,6 +24,7 @@ export const Events = ({
   redirecToCalendar,
   isMobile,
   colors,
+  clickEvent,
 }: IEventsProps): JSX.Element => {
   const { today, tomorrow, next } = events
   return (
@@ -60,18 +62,21 @@ export const Events = ({
         text={text?.course ?? ''}
         title={text?.events?.today ?? 'Hoy'}
         events={today}
+        clickEvent={clickEvent}
       />
       <EventsGroup
         colors={colors}
         text={text?.course ?? ''}
         title={text?.events?.tomorrow ?? 'Mañana'}
         events={tomorrow}
+        clickEvent={clickEvent}
       />
       <EventsGroup
         colors={colors}
         text={text?.course ?? ''}
         title={text?.events?.next ?? 'Próximos'}
         events={next}
+        clickEvent={clickEvent}
       />
     </Box>
   )

src/organisms/Calendar/Dropdown/CalendarDropdown/Components/EventsGroup.tsx

@@ -1,17 +1,29 @@
-import { EventsList } from '@/organisms/Calendar'
 import { Box, MenuGroup } from '@chakra-ui/react'
+
+import { EventsList } from '@/organisms/Calendar'
 import { vars } from '@theme'
-import { Event } from '../../types'
+import { Event, ICalendarDropdown } from '../../types'
 
 interface IEventsGroupProps {
   title: string
   events: Event[]
   text: string
   colors?: Record<string, string>
+  clickEvent?: ICalendarDropdown['clickEvent']
 }
 
-export const EventsGroup = ({ title, events, text, colors }: IEventsGroupProps): JSX.Element => {
+export const EventsGroup = ({
+  title,
+  events,
+  text,
+  colors,
+  clickEvent,
+}: IEventsGroupProps): JSX.Element => {
   if (!events || (events && events.length === 0)) return <></>
+
+  const handleClick = (event: Event): void => {
+    clickEvent?.(event)
+  }
   return (
     <Box
       className="calendar-events-group"
@@ -57,6 +69,7 @@ export const EventsGroup = ({ title, events, text, colors }: IEventsGroupProps):
                 text={text}
                 hasNotification={event.isNew}
                 isDropdown
+                clickEvent={() => handleClick(event)}
               />
             </Box>
           )

src/organisms/Calendar/Dropdown/types.d.ts

@@ -49,4 +49,5 @@ interface ICalendarDropdown {
   redirectToCalendar: () => void
   text?: Text
   onlyToCalendar?: boolean
+  clickEvent?: (event: Event) => void
 }

src/organisms/Calendar/EventsList/EventsList.tsx

@@ -1,9 +1,10 @@
+import { Box } from '@chakra-ui/react'
+
 import { Calendar } from '@/atoms/Icons/Calendar'
 import { Clock } from '@/atoms/Icons/Clock'
-import { Box } from '@chakra-ui/react'
 import { vars } from '@theme'
-
 import { NotificationIcon } from './NotificationIcon'
+import { Ripples } from '@atoms'
 
 export interface IEventList {
   hasNotification?: boolean
@@ -14,6 +15,7 @@ export interface IEventList {
   text: string
   date: string
   hours: string
+  clickEvent?: () => void
 }
 
 export const EventsList = ({
@@ -25,64 +27,79 @@ export const EventsList = ({
   text,
   date,
   hours,
+  clickEvent,
 }: IEventList): JSX.Element => {
   const border = `1px solid ${vars('colors-neutral-platinum') ?? '#E8E8E8'}`
 
+  const handleClick = (): void => clickEvent?.()
+
   return (
-    <Box className="eventsList" borderTop={border} padding="16px 24px">
-      <Box display="flex" flexDirection="column" gap="8px">
-        <Box
-          lineHeight="21px"
-          display="flex"
-          justifyContent="space-between"
-          alignItems="center"
-          fontSize="16px"
-        >
-          {name} {hasNotification && <NotificationIcon />}
-        </Box>
-        <Box
-          display="flex"
-          lineHeight="19px"
-          fontSize="14px"
-          sx={{
-            svg: {
-              marginRight: '4px',
-            },
-            span: {
-              verticalAlign: 'middle',
-            },
-          }}
-        >
-          <Box paddingRight="8px" borderRight={border}>
-            <Calendar />
-            <span>{date}</span>
+    <Ripples>
+      <Box
+        className="eventsList"
+        borderTop={border}
+        padding="16px 24px"
+        onClick={handleClick}
+        cursor="pointer"
+        bg={vars('colors-neutral-white') ?? '#fff'}
+        _hover={{
+          bg: vars('colors-neutral-cultured2') ?? '#F8F8F8',
+        }}
+      >
+        <Box display="flex" flexDirection="column" gap="8px">
+          <Box
+            lineHeight="21px"
+            display="flex"
+            justifyContent="space-between"
+            alignItems="center"
+            fontSize="16px"
+          >
+            {name} {hasNotification && <NotificationIcon />}
           </Box>
-          <Box paddingLeft="8px">
-            <Clock />
-            <span>{hours}</span>
-          </Box>
-        </Box>
-        {isDropdown && (
-          <Box display="flex" alignItems="center" gap="4px" lineHeight="19px">
-            <Box
-              alignSelf="flex-start"
-              bg={color}
-              borderRadius="50%"
-              display="block"
-              h="10px"
-              mt="4px"
-              maxH="10px"
-              maxW="10px"
-              minH="10px"
-              minW="10px"
-              w="10px"
-            />
-            <Box as="span" color={vars('colors-neutral-gray') ?? '#808080'} fontSize="14px">
-              <strong>{text ?? 'Curso'}:</strong> {courseName}
+          <Box
+            display="flex"
+            lineHeight="19px"
+            fontSize="14px"
+            sx={{
+              svg: {
+                marginRight: '4px',
+              },
+              span: {
+                verticalAlign: 'middle',
+              },
+            }}
+          >
+            <Box paddingRight="8px" borderRight={border}>
+              <Calendar />
+              <span>{date}</span>
+            </Box>
+            <Box paddingLeft="8px">
+              <Clock />
+              <span>{hours}</span>
             </Box>
           </Box>
-        )}
+          {isDropdown && (
+            <Box display="flex" alignItems="center" gap="4px" lineHeight="19px">
+              <Box
+                alignSelf="flex-start"
+                bg={color}
+                borderRadius="50%"
+                display="block"
+                h="10px"
+                mt="4px"
+                maxH="10px"
+                maxW="10px"
+                minH="10px"
+                minW="10px"
+                w="10px"
+              />
+              <Box as="span" color={vars('colors-neutral-gray') ?? '#808080'} fontSize="14px">
+                <strong>{text ?? 'Curso'}:</strong> {courseName}
+              </Box>
+            </Box>
+          )}
+        </Box>
       </Box>
-    </Box>
+    </Ripples>
   )
 }