feat(PDYE-1116): avance dropdown uikit y prueba con mock data (#662)

Co-authored-by: Daniel Montoya <daniel.montoya@eclass.cl>

Author: JaviMunita

package-lock.json

@@ -65,6 +65,7 @@
     "@types/eclass__api": "git+ssh://git@gitlab.com/eclass/types-eclass-api.git#v3.108.0",
     "@types/eclass__sequelize-models": "git+ssh://git@gitlab.com/eclass/types-sequelize-models.git#v5.40.0",
     "@types/jest": "27.5.2",
+    "@types/node": "^16.11.17",
     "@types/react": "17.0.64",
     "@types/react-dom": "17.0.20",
     "@typescript-eslint/eslint-plugin": "5.17.0",
@@ -108,7 +109,7 @@
     "sort-by": "1.2.0",
     "ts-jest": "27.1.5",
     "ts-patch": "2.0.1",
-    "typescript": "4.6.3",
+    "typescript": "4.9.5",
     "typescript-transform-paths": "3.3.1",
     "vite": "2.9.16",
     "vite-tsconfig-paths": "3.4.1"

package.json

@@ -3,7 +3,7 @@ import { ICalendarDropdown } from './types'
 
 export const CalendarDropdown = ({
   redirectToCalendar,
-  t,
+  text,
   courseColors,
   now,
   events,
@@ -19,7 +19,7 @@ export const CalendarDropdown = ({
       now={isoDate}
       courseColors={courseColors}
       redirectToCalendar={redirectToCalendar}
-      t={t}
+      text={text}
     />
   )
 }

src/organisms/Calendar/Dropdown/CalendarDropdown.tsx

@@ -11,7 +11,7 @@ import { ICalendarDropdown } from '../types'
 export const CalendarDropdownContainer = ({
   events,
   loading,
-  t,
+  text,
   now,
   redirectToCalendar,
   courseColors: colors,
@@ -22,20 +22,6 @@ export const CalendarDropdownContainer = ({
   const [isTooltipDisabled, setTooltipDisabled] = useState(false)
   const [isMenuOpen, setMenuOpen] = useState(false)
 
-  const text = {
-    buttonCalendar: t('CalendarGoto'),
-    course: t('CalendarCourse'),
-    empty: t('CalendarDontEvent'),
-    events: {
-      today: t('CalendarToday'),
-      tomorrow: t('CalendarTomorrow'),
-      next: t('CalendarNext'),
-    },
-    header: t('CalendarNextDates'),
-    loading: t('Cargando'),
-    tooltip: t('Calendar'),
-  }
-
   // Resuelve tooltip que se mantiene visible al cerrar el menu
   useEffect(() => {
     if (isMenuOpen) {
@@ -59,18 +45,23 @@ export const CalendarDropdownContainer = ({
       position="relative"
       sx={{
         '>div': {
-          transform: 'translate3d(-409px, 38px, 0px) !important',
+          position: isMobile ? 'fixed !important' : 'absolute',
+          left: isMobile ? '0 !important' : 'auto',
+          top: isMobile ? '62px !important' : 'auto',
+          transform: isMobile ? 'none !important' : 'translate3d(-409px, 38px, 0px) !important',
         },
+
         '.chakra-menu__menu-list': {
+          position: 'absolute',
+          width: isMobile ? '100vw' : '500px',
+          maxHeight: isMobile ? 'calc(100vh - 62px)' : 'auto',
+          overflowY: isMobile ? 'auto' : 'hidden',
           borderRadius: isMobile ? '0' : '10px',
           boxShadow: isMobile ? 'none' : 'rgba(47, 47, 47, 0.2) -1px 6px 40px 0px',
-          width: isMobile ? '100vw' : '500px',
-          height: isMobile || empty ? 'auto' : '560px',
           animation: 'none !important',
           transition: 'none !important',
           transform: 'none !important',
           opacity: '1 !important',
-          position: 'absolute',
         },
         '.chakra-menu__group__title': {
           fontSize: '18px',
@@ -87,15 +78,18 @@ export const CalendarDropdownContainer = ({
         <>
           <GoToCalendar
             hasNew={hasNew ?? false}
-            text={text.tooltip}
+            text={text?.tooltip || 'Ir a Mi Calendario'}
             tooltipDisabled={isTooltipDisabled}
           />
           <MenuList>
-            <Header text={text.header} isMobile={isMobile} />
+            <Header
+              text={text?.header || 'Próximas fechas importantes de tus cursos'}
+              isMobile={isMobile}
+            />
             {loading ? (
-              <Loading text={text.loading} />
+              <Loading text={text?.loading || 'Cargando'} />
             ) : events.length === 0 || empty ? (
-              <Empty text={text.empty} />
+              <Empty text={text?.empty || 'Aún no tienes eventos en tu calendario'} />
             ) : (
               <Events
                 colors={colors}