refactor: remove duplicated code. Home wrapper

Author: anyulled

package.json

@@ -24,6 +24,7 @@
     "react-cookie-consent": "^9.0.0",
     "react-countdown": "^2.3.6",
     "react-dom": "^18.3.1",
+    "react-error-boundary": "^5.0.0",
     "react-query": "^3.39.2",
     "react-router-dom": "^7.3.0",
     "react-scripts": "5.0.1",

src/2023/Home/Home2023Wrapper.tsx

@@ -2,12 +2,13 @@ import { BIG_BREAKPOINT } from "../../constants/BreakPoints";
 import React, { FC } from "react";
 import Faqs from "./components/Faqs/Faqs";
 import Home from "./components/Home/Home";
-import SpeakersCarousel from "./components/SpeakersCarousel/SpeakersCarousel";
 import Sponsors from "./components/Sponsors/Sponsors";
 import styled from "styled-components";
 import data from "../../data/2023.json";
 import { useLocation } from "react-router";
 import { useDocumentTitleUpdater } from "../../services/useDocumentTitleUpdate";
+import SpeakersCarousel from "../../components/Swiper/SpeakersCarousel";
+import {ROUTE_2023_SPEAKERS} from "../../constants/routes";
 
 const StyledContainer = styled.div`
   padding-bottom: 10rem;
@@ -32,7 +33,7 @@ export const Home2023Wrapper: FC<React.PropsWithChildren<unknown>> = () => {
     <StyledContainer id="home-wrapper">
       <Home />
       <Faqs />
-      <SpeakersCarousel />
+      <SpeakersCarousel speakersLink={ROUTE_2023_SPEAKERS} sessionizeUrl={data.sessionizeUrl} />
       <Sponsors />
     </StyledContainer>
   );

src/2024/HomeWrapper2024.tsx

@@ -1,18 +1,16 @@
-import React, { FC, useState } from "react";
+import React, { FC } from "react";
 import styled from "styled-components";
 
 import { useLocation } from "react-router";
 import { BIG_BREAKPOINT } from "../constants/BreakPoints";
-
-import { useEventEdition } from "../views/Home/UseEventEdition";
+import conferenceData from "../data/2024.json";
 import Faqs from "../views/Home/components/Faqs/Faqs";
 
 import Home from "./Home/Home";
-import SpeakersCarousel from "./SpeakersCarousel/SpeakersCarousel";
 import Sponsors from "./Sponsors/Sponsors";
-
-import { Edition } from "../types/types";
 import { useDocumentTitleUpdater } from "../services/useDocumentTitleUpdate";
+import SpeakersCarousel from "../components/Swiper/SpeakersCarousel";
+import { ROUTE_2024_SPEAKERS } from "../constants/routes";
 
 const StyledContainer = styled.div`
   padding-bottom: 10rem;
@@ -24,23 +22,24 @@ const StyledContainer = styled.div`
 
 export const HomeWrapper2024: FC<React.PropsWithChildren<unknown>> = () => {
   const { hash } = useLocation();
-  const [edition, setEdition] = useState<Edition>();
 
-  useEventEdition(setEdition);
   React.useEffect(() => {
     if (hash != null && hash !== "") {
       const scroll = document.getElementById(hash.substring(1));
       scroll?.scrollIntoView();
     }
-  }, [hash, edition]);
+  }, [hash]);
 
-  useDocumentTitleUpdater("Home", edition?.edition ?? "2024");
+  useDocumentTitleUpdater("Home", conferenceData.edition);
 
   return (
     <StyledContainer id="home-wrapper">
       <Home />
       <Faqs />
-      <SpeakersCarousel />
+      <SpeakersCarousel
+        speakersLink={ROUTE_2024_SPEAKERS}
+        sessionizeUrl={conferenceData.sessionizeUrl}
+      />
       <Sponsors />
     </StyledContainer>
   );

src/2024/SpeakersCarousel/SpeakersCarousel.scss

@@ -1,15 +1,13 @@
-import { Color } from "../../../../styles/colors";
-
 import { FC } from "react";
 import { Link } from "react-router";
-import LessThanBlueWhiteIcon from ".././../../../assets/images/MoreThanBlueIcon.svg";
-import SectionWrapper from "../../../../components/SectionWrapper/SectionWrapper";
-import { TABLET_BREAKPOINT } from "../../../../constants/BreakPoints";
-import TitleSection from "../../../../components/SectionTitle/TitleSection";
+import LessThanBlueWhiteIcon from "../../assets/images/LessThanBlueIcon.svg";
 import { motion } from "framer-motion";
 import styled from "styled-components";
-import { ROUTE_2023_SPEAKERS } from "../../../../constants/routes";
 import SpeakerSwiper from "./SpeakerSwiper";
+import { Color } from "../../styles/colors";
+import { TABLET_BREAKPOINT } from "../../constants/BreakPoints";
+import SectionWrapper from "../SectionWrapper/SectionWrapper";
+import TitleSection from "../SectionTitle/TitleSection";
 
 const StyledSpeakersContainer = styled.section`
   background-color: ${Color.LIGHT_BLUE};
@@ -58,7 +56,15 @@ const StyledBlueSlash = styled(motion.p)`
   height: 100%;
 `;
 
-const SpeakersCarousel: FC<React.PropsWithChildren<unknown>> = () => {
+interface Props {
+  speakersLink: string;
+  sessionizeUrl: string;
+}
+
+const SpeakersCarousel: FC<React.PropsWithChildren<Props>> = ({
+  speakersLink,
+  sessionizeUrl,
+}) => {
   return (
     <SectionWrapper color={Color.LIGHT_BLUE}>
       <StyledSpeakersContainer>
@@ -72,9 +78,9 @@ const SpeakersCarousel: FC<React.PropsWithChildren<unknown>> = () => {
             color={Color.WHITE}
           />
         </StyledTitleWrapper>
-        <SpeakerSwiper />
+        <SpeakerSwiper sessionizeUrl={sessionizeUrl} />
         <StyledLink>
-          <Link to={ROUTE_2023_SPEAKERS} className="link--text">
+          <Link to={speakersLink} className="link--text">
             <StyledSubtitle> View all speakers</StyledSubtitle>
             <StyledLessThanRed src={LessThanBlueWhiteIcon} />
           </Link>

src/2024/SpeakersCarousel/SpeakersCarousel.tsx

@@ -0,0 +1,17 @@
+/** Fisher-Yates shuffle algorithm using window.crypto.getRandomValues() */
+export const shuffleArray = <T, >(array: T[]): T[] => {
+    if (!array) {
+        return [];
+    }
+    const shuffledArray = [...array]; // Create a copy to avoid modifying the original array
+    for (let i = shuffledArray.length - 1; i > 0; i--) {
+        let j;
+        const max = (i + 1) * (2 ** 32 / (i + 1));
+        do {
+            j = window.crypto.getRandomValues(new Uint32Array(1))[0];
+        } while (j >= max);
+        j = j % (i + 1);
+        [shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];
+    }
+    return shuffledArray;
+};

…s/SpeakersCarousel/SpeakersCarousel.scss …/components/Swiper/SpeakersCarousel.scsssrc/2023/Home/components/SpeakersCarousel/SpeakersCarousel.scss renamed to src/components/Swiper/SpeakersCarousel.scss src/2023/Home/components/SpeakersCarousel/SpeakersCarousel.scss renamed to src/components/Swiper/SpeakersCarousel.scss

@@ -1,15 +1,16 @@
-import {BIG_BREAKPOINT} from "../../constants/BreakPoints";
-import React, {FC, useState} from "react";
+import { BIG_BREAKPOINT } from "../../constants/BreakPoints";
+import React, { FC } from "react";
 import Faqs from "./components/Faqs/Faqs";
 import Home from "./components/Home/Home";
-import SpeakersCarousel from "./components/SpeakersCarousel/SpeakersCarousel";
 import Sponsors from "./components/Sponsors/Sponsors";
 import styled from "styled-components";
+import conferenceData from "../../data/2025.json";
+import { useLocation } from "react-router";
 
-import {useLocation} from "react-router";
-import {useEventEdition} from "./UseEventEdition";
-import {Edition} from "../../types/types";
 import { useDocumentTitleUpdater } from "../../services/useDocumentTitleUpdate";
+import SpeakersCarousel from "../../components/Swiper/SpeakersCarousel";
+import { ROUTE_SPEAKERS } from "../../constants/routes";
+import { ErrorBoundary } from "react-error-boundary";
 
 const StyledContainer = styled.div`
   padding-bottom: 10rem;
@@ -21,26 +22,31 @@ const StyledContainer = styled.div`
 
 const HomeWrapper: FC<React.PropsWithChildren<unknown>> = () => {
   const { hash } = useLocation();
-  const [edition, setEdition] = useState<Edition>();
 
-  useEventEdition(setEdition);
   React.useEffect(() => {
     if (hash != null && hash !== "") {
       const scroll = document.getElementById(hash.substring(1));
       scroll?.scrollIntoView();
     }
-  }, [hash, edition]);
+  }, [hash]);
 
-  useDocumentTitleUpdater("Home", edition?.edition ?? "2025");
+  useDocumentTitleUpdater("Home", conferenceData?.edition ?? "2025");
 
   return (
     <StyledContainer id="home-wrapper">
-      <Home />
+      <ErrorBoundary fallback={<div>Something went wrong</div>}>
+        <Home />
+      </ErrorBoundary>
       <Faqs />
-      {edition?.carrousel.enabled && <SpeakersCarousel/>}
+      {conferenceData?.carrousel.enabled && (
+        <SpeakersCarousel
+          sessionizeUrl={conferenceData.sessionizeUrl}
+          speakersLink={ROUTE_SPEAKERS}
+        />
+      )}
       <Sponsors />
     </StyledContainer>
   );
 };
 
-export default HomeWrapper;
+export default HomeWrapper;