fix: carrousel swiper was showing the same speakers every year.

src/2023/Home/Home2023Wrapper.tsx

@@ -1,14 +1,14 @@
-import { BIG_BREAKPOINT } from "../../constants/BreakPoints";
+import { BIG_BREAKPOINT } from "@constants/BreakPoints";
 import React, { FC } from "react";
 import Faqs from "./components/Faqs/Faqs";
 import Home from "./components/Home/Home";
 import Sponsors from "./components/Sponsors/Sponsors";
 import { styled } from "styled-components";
-import data from "../../data/2023.json";
+import data from "@data/2023.json";
 import { useLocation } from "react-router";
-import SpeakersCarousel from "../../components/Swiper/SpeakersCarousel";
-import { ROUTE_2023_SPEAKERS } from "../../constants/routes";
-import { useDocumentTitleUpdater } from "../../hooks/useDocumentTitleUpdate";
+import SpeakersCarousel from "@components/Swiper/SpeakersCarousel";
+import { ROUTE_2023_SPEAKERS } from "@constants/routes";
+import { useDocumentTitleUpdater } from "@hooks/useDocumentTitleUpdate";
 
 const StyledContainer = styled.div`
   padding-bottom: 10rem;
@@ -35,7 +35,8 @@ export const Home2023Wrapper: FC<React.PropsWithChildren<unknown>> = () => {
       <Faqs />
       <SpeakersCarousel
         speakersLink={ROUTE_2023_SPEAKERS}
-        sessionizeUrl={data.sessionizeUrl}
+        sessionizeUrl={data.edition}
+        isEnabled={data.carrousel.enabled}
       />
       <Sponsors />
     </StyledContainer>

src/2024/HomeWrapper2024.tsx

@@ -2,15 +2,15 @@ import React, { FC } from "react";
 import { styled } from "styled-components";
 
 import { useLocation } from "react-router";
-import { BIG_BREAKPOINT } from "../constants/BreakPoints";
-import conferenceData from "../data/2024.json";
+import { BIG_BREAKPOINT } from "@constants/BreakPoints";
+import conferenceData from "@data/2024.json";
 import Faqs from "../views/Home/components/Faqs/Faqs";
 
 import Home from "./Home/Home";
 import Sponsors from "./Sponsors/Sponsors";
 import SpeakersCarousel from "../components/Swiper/SpeakersCarousel";
-import { ROUTE_2024_SPEAKERS } from "../constants/routes";
-import { useDocumentTitleUpdater } from "../hooks/useDocumentTitleUpdate";
+import { ROUTE_2024_SPEAKERS } from "@constants/routes";
+import { useDocumentTitleUpdater } from "@hooks/useDocumentTitleUpdate";
 
 const StyledContainer = styled.div`
   padding-bottom: 10rem;
@@ -39,6 +39,7 @@ export const HomeWrapper2024: FC<React.PropsWithChildren<unknown>> = () => {
       <SpeakersCarousel
         speakersLink={ROUTE_2024_SPEAKERS}
         sessionizeUrl={conferenceData.sessionizeUrl}
+        isEnabled={conferenceData.carrousel.enabled}
       />
       <Sponsors />
     </StyledContainer>

src/components/Swiper/SpeakerSwiper.tsx

@@ -2,15 +2,15 @@ import React, { FC } from "react";
 import { Autoplay, Parallax } from "swiper";
 import { Swiper, SwiperSlide } from "swiper/react";
 import { styled } from "styled-components";
-import { Color } from "../../styles/colors";
+import { Color } from "@styles/colors";
 import "swiper/swiper-bundle.min.css";
 import "../../components/Swiper/SpeakersCarousel.scss";
-import conferenceData from "../../data/2025.json";
-import { useFetchSpeakers } from "../../hooks/useFetchSpeakers";
-import { ISpeaker } from "../../types/speakers";
-import { ROUTE_SPEAKER_DETAIL } from "../../constants/routes";
+import { useFetchSpeakers } from "@hooks/useFetchSpeakers";
+// @ts-expect-error some weird error when importing types
+import { ISpeaker } from "@types/speakers";
+import { ROUTE_SPEAKER_DETAIL } from "@constants/routes";
 import { Link } from "react-router";
-import { useSentryErrorReport } from "../../hooks/useSentryErrorReport";
+import { useSentryErrorReport } from "@hooks/useSentryErrorReport";
 
 const StyledSlideImage = styled.img`
   display: block;
@@ -36,8 +36,17 @@ const StyledSlideText = styled.p`
   font-size: 0.875rem;
   color: white;
 `;
-const SpeakerSwiper: FC<React.PropsWithChildren<unknown>> = () => {
-  const { isLoading, data, error } = useFetchSpeakers();
+
+interface Props {
+  isEnabled: boolean;
+  url: string;
+}
+
+const SpeakerSwiper: FC<React.PropsWithChildren<Props>> = ({
+  isEnabled,
+  url,
+}) => {
+  const { isLoading, data, error } = useFetchSpeakers(url);
 
   const cachedSpeakers = React.useMemo(() => {
     return data?.toSorted(() => 0.5 - Math.random()).slice(0, 20);
@@ -48,7 +57,7 @@ const SpeakerSwiper: FC<React.PropsWithChildren<unknown>> = () => {
   return (
     <>
       {isLoading && <p>Loading</p>}
-      {conferenceData.carrousel.enabled && cachedSpeakers && (
+      {isEnabled && cachedSpeakers && (
         <Swiper
           autoplay={{
             delay: 500,

src/components/Swiper/SpeakersCarousel.tsx

@@ -4,8 +4,8 @@ import LessThanBlueWhiteIcon from "../../assets/images/LessThanBlueIcon.svg";
 import { motion } from "framer-motion";
 import { styled } from "styled-components";
 import SpeakerSwiper from "./SpeakerSwiper";
-import { Color } from "../../styles/colors";
-import { TABLET_BREAKPOINT } from "../../constants/BreakPoints";
+import { Color } from "@styles/colors";
+import { TABLET_BREAKPOINT } from "@constants/BreakPoints";
 import SectionWrapper from "../SectionWrapper/SectionWrapper";
 import TitleSection from "../SectionTitle/TitleSection";
 
@@ -59,11 +59,13 @@ const StyledBlueSlash = styled(motion.p)`
 interface Props {
   speakersLink: string;
   sessionizeUrl: string;
+  isEnabled: boolean;
 }
 
 const SpeakersCarousel: FC<React.PropsWithChildren<Props>> = ({
   speakersLink,
   sessionizeUrl,
+  isEnabled,
 }) => {
   return (
     <SectionWrapper color={Color.LIGHT_BLUE}>
@@ -78,7 +80,7 @@ const SpeakersCarousel: FC<React.PropsWithChildren<Props>> = ({
             color={Color.WHITE}
           />
         </StyledTitleWrapper>
-        <SpeakerSwiper sessionizeUrl={sessionizeUrl} />
+        <SpeakerSwiper url={sessionizeUrl} isEnabled={isEnabled} />
         <StyledLink>
           <Link to={speakersLink} className="link--text">
             <StyledSubtitle> View all speakers</StyledSubtitle>

src/data/2023.json

@@ -1,7 +1,7 @@
 {
   "actionButtons": false,
   "carrousel": {
-    "enabled": false
+    "enabled": true
   },
   "cfp": {
     "startDay": "2022-11-01T00:00:00",

src/hooks/useFetchSpeakers.ts

@@ -1,7 +1,8 @@
 import { useQuery, UseQueryResult } from "react-query";
 import axios from "axios";
-import { speakerAdapter } from "../services/speakerAdapter";
-import { IResponse, ISpeaker } from "../types/speakers";
+import { speakerAdapter } from "@services/speakerAdapter";
+// @ts-expect-error some weird error when importing types
+import { IResponse, ISpeaker } from "@types/speakers";
 
 const URLS = {
   default: "https://sessionize.com/api/v2/xhudniix/view/Speakers",

src/views/Home/HomeWrapper.tsx

@@ -1,15 +1,15 @@
-import { BIG_BREAKPOINT } from "../../constants/BreakPoints";
+import { BIG_BREAKPOINT } from "@constants/BreakPoints";
 import React, { FC } from "react";
 import Faqs from "./components/Faqs/Faqs";
 import Home from "./components/Home/Home";
 import Sponsors from "./components/Sponsors/Sponsors";
 import { styled } from "styled-components";
-import conferenceData from "../../data/2025.json";
+import conferenceData from "@data/2025.json";
 import { useLocation } from "react-router";
 
-import SpeakersCarousel from "../../components/Swiper/SpeakersCarousel";
-import { ROUTE_SPEAKERS } from "../../constants/routes";
-import { useDocumentTitleUpdater } from "../../hooks/useDocumentTitleUpdate";
+import SpeakersCarousel from "@components/Swiper/SpeakersCarousel";
+import { ROUTE_SPEAKERS } from "@constants/routes";
+import { useDocumentTitleUpdater } from "@hooks/useDocumentTitleUpdate";
 
 const StyledContainer = styled.div`
   padding-bottom: 10rem;
@@ -38,6 +38,7 @@ const HomeWrapper: FC<React.PropsWithChildren<unknown>> = () => {
         <SpeakersCarousel
           sessionizeUrl={conferenceData.sessionizeUrl}
           speakersLink={ROUTE_SPEAKERS}
+          isEnabled={conferenceData.carrousel.enabled}
         />
       )}
       <Sponsors />