Refactor disabled illustrations logic and fix JS errors (#1982)

* JS fixes and small refactor * unused type * remove warnings * render snow behind content
Telefonica · Nov 26, 2024 · 347cbe2 · 347cbe2
1 parent ba8d2e8
commit 347cbe2
Show file tree

Hide file tree

Showing 17 changed files with 90 additions and 166 deletions.
diff --git a/src/pages/advent-calendar-2024/components/calendar-card.jsx b/src/pages/advent-calendar-2024/components/calendar-card.jsx
@@ -22,8 +22,7 @@ const CalendarCard = ({
   content,
   status,
   onEndDay,
-  illustration,
-  illustrationDimmed,
+  Illustration,
   repeatable,
 }) => {
   const [isHovered, setIsHovered] = useState(false);
@@ -84,11 +83,7 @@ const CalendarCard = ({
     }
   }
 
-  const IllustrationWrapper = ({
-    illustration,
-    illustrationDimmed,
-    status,
-  }) => {
+  const IllustrationWrapper = ({ Illustration, status }) => {
     return (
       <div
         style={{
@@ -97,7 +92,7 @@ const CalendarCard = ({
           justifyContent: "center",
         }}
       >
-        {status === CARD_STATES.BLOCKED ? illustrationDimmed : illustration}
+        <Illustration disabled={status === CARD_STATES.BLOCKED} />
       </div>
     );
   };
@@ -213,12 +208,8 @@ const CalendarCard = ({
             <StatusIndicator />
           </Stack>
 
-          {(illustration || illustrationDimmed) && (
-            <IllustrationWrapper
-              illustration={illustration}
-              illustrationDimmed={illustrationDimmed}
-              status={status}
-            />
+          {Illustration && (
+            <IllustrationWrapper Illustration={Illustration} status={status} />
           )}
 
           <Inline space="between" alignItems="center">

diff --git a/src/pages/advent-calendar-2024/components/corner-layout.jsx b/src/pages/advent-calendar-2024/components/corner-layout.jsx
@@ -11,13 +11,9 @@ import {
   useScreenSize,
 } from "@telefonica/mistica";
 import { useEffect, useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
-import { base64Encode } from "../utils/url-encoder";
 import RotatingSVG from "./label-rotate";
 
 const CornerLayout = () => {
-  const navigate = useNavigate();
-  const location = useLocation(); // Get the current location
   const { isLargeDesktop, isTabletOrBigger } = useScreenSize();
   const [isSnackbarOpen, setSnackbarOpen] = useState(false);
   const [showLogo, setShowLogo] = useState(false);

diff --git a/src/pages/advent-calendar-2024/components/navbar.jsx b/src/pages/advent-calendar-2024/components/navbar.jsx
@@ -17,8 +17,7 @@ import {
   useScreenSize,
 } from "@telefonica/mistica";
 import { useEffect, useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
-import { base64Encode } from "../utils/url-encoder";
+import { useLocation } from "react-router-dom";
 import RotatingSVG from "./label-rotate";
 
 const SheetView = ({ isOpen, onClose }) => {
@@ -100,7 +99,6 @@ const SheetView = ({ isOpen, onClose }) => {
 };
 
 const NavBar = () => {
-  const navigate = useNavigate();
   const location = useLocation(); // Get the current location
   const { isMobile, isTabletOrSmaller } = useScreenSize();
   const [isSheetOpen, setIsSheetOpen] = useState(false);

diff --git a/src/pages/advent-calendar-2024/components/progress-grid.jsx b/src/pages/advent-calendar-2024/components/progress-grid.jsx
@@ -16,7 +16,7 @@ import { CARD_STATES } from "../utils/constants"; // Importa CARD_STATES si no l
 import contentByDate from "../utils/content-config"; // Asegúrate de importar tu configuración de contenido
 
 // IllustrationWrapper Component
-const IllustrationWrapper = ({ illustration, illustrationDimmed, status }) => {
+const IllustrationWrapper = ({ Illustration, status }) => {
   return (
     <Align x="center">
       <div
@@ -28,7 +28,7 @@ const IllustrationWrapper = ({ illustration, illustrationDimmed, status }) => {
           height: "100px",
         }}
       >
-        {status === CARD_STATES.BLOCKED ? illustrationDimmed : illustration}
+        <Illustration disabled={status === CARD_STATES.BLOCKED} />
       </div>
     </Align>
   );
@@ -62,7 +62,7 @@ const ProgressGrid = ({ completedDays }) => {
     <Grid columns={isMobile ? 2 : 4} gap={isMobile ? 8 : 24}>
       {calendarDays.map((day) => {
         // Accede a la ilustración para cada día
-        const illustration = contentByDate[day.date]?.illustration;
+        const Illustration = contentByDate[day.date]?.Illustration;
 
         // Determina el estado del día
         const status = isDayCompleted(day.dayNumber)
@@ -88,12 +88,9 @@ const ProgressGrid = ({ completedDays }) => {
                 </div>
 
                 {/* Renderiza la ilustración usando IllustrationWrapper */}
-                {illustration ? (
+                {Illustration ? (
                   <IllustrationWrapper
-                    illustration={illustration}
-                    illustrationDimmed={
-                      contentByDate[day.date]?.illustrationDimmed
-                    }
+                    Illustration={Illustration}
                     status={status}
                   />
                 ) : (

diff --git a/src/pages/advent-calendar-2024/components/score.jsx b/src/pages/advent-calendar-2024/components/score.jsx
@@ -1,6 +1,5 @@
 import {
   IconAlarmClockFilled,
-  Inline,
   skinVars,
   Tag,
   Text4,
@@ -16,7 +15,12 @@ const Score = ({ score, time, timeRunning, movements, isFinal }) => {
           style={{ display: "inline-flex", flexDirection: "column", gap: 8 }}
         >
           <Text5>Your final score is</Text5>
-          <DecorationPatty size={128} text={score} stroke="0.75" color={skinVars.colors.brand} />
+          <DecorationPatty
+            size={128}
+            text={score}
+            stroke="0.75"
+            color={skinVars.colors.brand}
+          />
         </div>
       ) : (
         <div style={{ display: "flex", gap: 24 }}>

diff --git a/src/pages/advent-calendar-2024/components/snow.tsx b/src/pages/advent-calendar-2024/components/snow.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import Snowfall from "react-snowfall";
 import { useEffect, useState } from "react";
 import snowflakeSrc1 from "../assets/decorations/snowflake-1.svg";
@@ -49,31 +48,16 @@ const Snow = () => {
     };
   }, []);
 
-  return isTabletOrSmaller ? (
-    <Snowfall
-      style={{
-        position: "fixed",
-        zIndex: "9999999",
-      }}
-      color="#EEF0FB"
-      radius={[30, 30]}
-      speed={[1.0, 2.0]} // Velocidad de los copos
-      snowflakeCount={8}
-      images={images} // Pasamos las imágenes cargadas al componente
-    />
-  ) : (
-    <Snowfall
-      style={{
-        position: "fixed",
-        zIndex: "9999999",
-      }}
-      color="#EEF0FB"
-      radius={[50, 50]}
-      speed={[1.0, 2.0]} // Velocidad de los copos
-      snowflakeCount={20}
-      images={images} // Pasamos las imágenes cargadas al componente
-    />
-  );
+  return Snowfall({
+    style: {
+      position: "fixed",
+    },
+    color: "#EEF0FB",
+    radius: isTabletOrSmaller ? [30, 30] : [50, 50],
+    speed: [1, 2], // Velocidad de los copos
+    snowflakeCount: isTabletOrSmaller ? 8 : 20,
+    images, // Pasamos las imágenes cargadas al componente
+  });
 };
 
 export default Snow;
diff --git a/src/pages/advent-calendar-2024/components/static-content/christmas-greetings.jsx b/src/pages/advent-calendar-2024/components/static-content/christmas-greetings.jsx
@@ -3,10 +3,11 @@ import ContentWrapper from "../content-wrapper";
 import contentByDate from "../../utils/content-config";
 
 const ChristmasGreetings = () => {
+  const FinalIllustration = contentByDate["2024-12-25"].Illustration;
   return (
     <ContentWrapper textAlign={"center"}>
       <Stack space={52}>
-        <div>{contentByDate["2024-12-25"].illustration}</div>
+        <FinalIllustration />
         <Text5>
           Thanks for joining us these past days.
           <br></br>

diff --git a/src/pages/advent-calendar-2024/components/toast-wrapper.jsx b/src/pages/advent-calendar-2024/components/toast-wrapper.jsx
@@ -1,4 +1,3 @@
-import { useState, useEffect } from "react";
 import Toast from "./toast"; // Assuming your Toast component is already implemented
 import { Stack, useScreenSize } from "@telefonica/mistica";
 
@@ -17,8 +16,6 @@ const ToastWrapper = ({ toasts, removeToast }) => {
     >
       <Stack space={8}>
         {toasts.map((toast, index) => {
-          const scaleValue = 1 - index * 0.2;
-
           return (
             <Toast
               id={toast.id}

diff --git a/src/pages/advent-calendar-2024/components/toast.jsx b/src/pages/advent-calendar-2024/components/toast.jsx
@@ -36,16 +36,16 @@ const Toast = ({
     }
   };
 
-  const startHideTimeout = () => {
-    clearHideTimeout();
-    timeoutRef.current = setTimeout(() => {
-      setFadeOut(true); // Trigger fade-out before setting visible to false
-      onClose?.(); // Trigger onClose callback to remove toast
-    }, duration);
-  };
-
   // Handle visibility change when hovered or not
   useEffect(() => {
+    const startHideTimeout = () => {
+      clearHideTimeout();
+      timeoutRef.current = setTimeout(() => {
+        setFadeOut(true); // Trigger fade-out before setting visible to false
+        onClose?.(); // Trigger onClose callback to remove toast
+      }, duration);
+    };
+
     const handleTimeout = () => {
       if (!isHovered) {
         setTimeout(startHideTimeout, delay); // Delay before auto-dismissing
@@ -57,7 +57,7 @@ const Toast = ({
     handleTimeout();
 
     return () => clearHideTimeout(); // Cleanup timeout on unmount
-  }, [isHovered, delay, duration]);
+  }, [isHovered, delay, duration, onClose]);
 
   useEffect(() => {
     if (fadeOut) {

diff --git a/src/pages/advent-calendar-2024/index.jsx b/src/pages/advent-calendar-2024/index.jsx
@@ -4,9 +4,9 @@ import CalendarView from "./pages/calendar-view";
 
 import { RELEASE_DATE } from "./utils/constants";
 
-const AdventCalendar2024 = () => {
-  const targetDate = new Date(RELEASE_DATE);
+const targetDate = new Date(RELEASE_DATE);
 
+const AdventCalendar2024 = () => {
   const [isReleased, setIsReleased] = useState(false);
 
   useLayoutEffect(() => {
@@ -23,7 +23,7 @@ const AdventCalendar2024 = () => {
     }, timeToRelease);
 
     return () => clearTimeout(timeout);
-  }, [targetDate]);
+  }, []);
 
   if (!isReleased) {
     return <ComingSoonPage targetDate={targetDate.toLocaleString()} />;

diff --git a/src/pages/advent-calendar-2024/pages/calendar-view.jsx b/src/pages/advent-calendar-2024/pages/calendar-view.jsx
@@ -18,8 +18,7 @@ import {
   skinVars,
   useScreenSize,
 } from "@telefonica/mistica";
-import { useMemo, useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useState } from "react";
 import DecorationPatty from "../assets/decorations/decoration-patty.jsx";
 import DecorationSnake from "../assets/decorations/decoration-snake.jsx";
 import CalendarCard from "../components/calendar-card";
@@ -36,7 +35,6 @@ import { calendarDays } from "../utils/calendar-config.jsx";
 import { CARD_STATES } from "../utils/constants";
 import contentByDate from "../utils/content-config";
 import { updateCompletedDays } from "../utils/state-manager";
-import { base64Encode } from "../utils/url-encoder.jsx";
 
 const CalendarView = () => {
   const { isMobile } = useScreenSize();
@@ -123,26 +121,20 @@ const CalendarView = () => {
     }
   };
 
-  const calendarItems = useMemo(() => {
-    return calendarDays.map(({ date, dayOfWeek }) => (
-      <CalendarCard
-        key={date}
-        DateString={date}
-        DayOfWeek={dayOfWeek}
-        eventName={contentByDate[date]?.title}
-        eventDescription={contentByDate[date]?.description}
-        content={contentByDate[date]?.content}
-        status={getDayStatus(date)} // Ensure status is updated based on availability
-        onEndDay={() => markDayAsCompleted(date)}
-        illustration={contentByDate[date]?.illustration}
-        illustrationDimmed={
-          contentByDate[date]?.illustrationDimmed ||
-          contentByDate[date]?.illustration
-        }
-        repeatable={contentByDate[date]?.repeatable}
-      />
-    ));
-  }, [completedDays, availableDays, calendarDays]);
+  const calendarItems = calendarDays.map(({ date, dayOfWeek }) => (
+    <CalendarCard
+      key={date}
+      DateString={date}
+      DayOfWeek={dayOfWeek}
+      eventName={contentByDate[date]?.title}
+      eventDescription={contentByDate[date]?.description}
+      content={contentByDate[date]?.content}
+      status={getDayStatus(date)} // Ensure status is updated based on availability
+      onEndDay={() => markDayAsCompleted(date)}
+      Illustration={contentByDate[date]?.Illustration}
+      repeatable={contentByDate[date]?.repeatable}
+    />
+  ));
   const [isSheetOpen, setIsSheetOpen] = useState(false);
 
   const SheetView = ({ isOpen, onClose }) => {
@@ -228,11 +220,11 @@ const CalendarView = () => {
   };
 
   return (
-    <>
+    <ResponsiveLayout>
       <Snow />
-      <CornerLayout />
-      <NavBar />
-      <ResponsiveLayout>
+      <div style={{ position: "relative", zIndex: 1 }}>
+        <CornerLayout />
+        <NavBar />
         <Box paddingY={42}>
           <Stack space={48}>
             <GridLayout
@@ -277,7 +269,7 @@ const CalendarView = () => {
                       textColor={skinVars.colors.textPrimary}
                       textSize={16}
                       easterEgg={true}
-                    ></DecorationPatty>
+                    />
                   </Inline>
                   <DecorationSnake width={isMobile ? "100%" : 371.84} />
                 </Stack>
@@ -297,7 +289,7 @@ const CalendarView = () => {
                   </Text4>
                 </Stack>
               }
-            ></GridLayout>
+            />
 
             <Carousel
               initialActiveItem={initialActiveDay}
@@ -311,10 +303,10 @@ const CalendarView = () => {
             </ButtonPrimary>
           </Stack>
         </Box>
-      </ResponsiveLayout>
-      <SheetView isOpen={isSheetOpen} onClose={() => setIsSheetOpen(false)} />
-      <ToastWrapper toasts={toasts} removeToast={removeToast} />
-    </>
+        <SheetView isOpen={isSheetOpen} onClose={() => setIsSheetOpen(false)} />
+        <ToastWrapper toasts={toasts} removeToast={removeToast} />
+      </div>
+    </ResponsiveLayout>
   );
 };