Test/unify fetch speaker logic

src/2023/Cfp/CfpSection2023.test.tsx

@@ -98,7 +98,7 @@ describe("CfpSection2023", () => {
     render(<CfpSection2023 />);
     await waitFor(() => {
       expect(document.title).toBe(
-        `CFP Committee - DevBcn - ${conferenceData.edition}`,
+        `CFP Committee — DevBcn - Barcelona Developers Conference — ${conferenceData.edition}`,
       );
     });
   });

src/2023/Cfp/CfpSection2023.tsx

@@ -21,6 +21,7 @@ import {
   StyledAboutImage,
   StyledSocialIconsWrapper,
 } from "../../views/About/components/Style.AboutCard";
+import { useDocumentTitleUpdater } from "../../services/useDocumentTitleUpdate";
 
 const TrackName = styled.h2`
   padding-top: 1.2rem;
@@ -75,9 +76,8 @@ const CfpTrackComponent: FC<React.PropsWithChildren<CfpTrackProps>> = ({
 
 const CfpSection2023: FC<React.PropsWithChildren<unknown>> = () => {
   const { width } = useWindowSize();
-  React.useEffect(() => {
-    document.title = `CFP Committee - DevBcn - ${conferenceData.edition}`;
-  }, []);
+
+  useDocumentTitleUpdater("CFP Committee", conferenceData.edition);
   return (
     <>
       <SectionWrapper color={Color.WHITE} marginTop={5}>

src/2023/Communities/Communities2023.tsx

@@ -3,6 +3,7 @@ import styled from "styled-components";
 import TwitterIcon from "../../components/Icons/Twitter";
 import { Color } from "../../styles/colors";
 import WebsiteIcon from "../../components/Icons/website";
+import { useDocumentTitleUpdater } from "../../services/useDocumentTitleUpdate";
 
 const Heading = styled.h1`
   padding-top: 10rem;
@@ -29,9 +30,7 @@ const FoSS = styled.div`
 `;
 
 const Communities2023: FC<React.PropsWithChildren<unknown>> = () => {
-  React.useEffect(() => {
-    document.title = "Communities";
-  });
+  useDocumentTitleUpdater("Communities", "2023");
   return (
     <>
       <Heading>FOSS & Diversity Communities</Heading>

src/2023/Diversity/Diversity2023.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect } from "react";
+import { FC } from "react";
 import { Color } from "../../styles/colors";
 import data from "../../data/2023.json";
 import styled from "styled-components";
@@ -8,25 +8,26 @@ import {
   ROUTE_CODE_OF_CONDUCT,
   ROUTE_CONDITIONS,
 } from "../../constants/routes";
+import { useDocumentTitleUpdater } from "../../services/useDocumentTitleUpdate";
 
 const StyledSection = styled.section`
-   {
+{
     padding-top: 48px;
-  }
+}
 
-  .top {
-    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 50px));
-    height: 51px;
-    background-color: ${Color.DARK_BLUE};
-    border-top: 1px solid ${Color.DARK_BLUE};
-  }
+    .top {
+        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 50px));
+        height: 51px;
+        background-color: ${Color.DARK_BLUE};
+        border-top: 1px solid ${Color.DARK_BLUE};
+    }
 
-  .bottom {
-    clip-path: polygon(0 0, 100% 50px, 100% 100%, 0 100%);
-    margin-top: -50px;
-    height: 50px;
-    background-color: ${Color.WHITE};
-  }
+    .bottom {
+        clip-path: polygon(0 0, 100% 50px, 100% 100%, 0 100%);
+        margin-top: -50px;
+        height: 50px;
+        background-color: ${Color.WHITE};
+    }
 `;
 
 const StyledWave = styled.section`
@@ -36,15 +37,15 @@ const StyledWave = styled.section`
 `;
 
 const StyledLogo = styled.img`
-   {
+{
     max-width: 30vw;
     flex: 2 1 auto;
     padding-bottom: 50px;
-  }
-  @media only screen and (max-width: ${BIG_BREAKPOINT}px) {
-    padding-bottom: 20px;
-    max-width: 65vw;
-  }
+}
+    @media only screen and (max-width: ${BIG_BREAKPOINT}px) {
+        padding-bottom: 20px;
+        max-width: 65vw;
+    }
 `;
 
 const Heading = styled.h1`
@@ -68,17 +69,17 @@ const StyledP = styled.p`
 `;
 
 const FlexDiv = styled.div`
-   {
+{
     display: flex;
     width: 20%;
     margin: 0 auto;
     flex-direction: column;
     padding-bottom: 20px;
-  }
-  @media only screen and (max-width: ${BIG_BREAKPOINT}px) {
-    width: 60%;
-    padding-bottom: 0.5rem;
-  }
+}
+    @media only screen and (max-width: ${BIG_BREAKPOINT}px) {
+        width: 60%;
+        padding-bottom: 0.5rem;
+    }
 `;
 
 const StyledParagraph = styled.section`
@@ -96,9 +97,7 @@ const StyledParagraph = styled.section`
   }
 `;
 const Diversity2023: FC<React.PropsWithChildren<unknown>> = () => {
-  useEffect(() => {
-    document.title = `Diversity - DevBcn ${data.edition}`;
-  });
+  useDocumentTitleUpdater("Diversity", data.edition);
 
   return (
     <StyledSection className="styled-section">

src/2023/Home/Home2023Wrapper.tsx

@@ -7,6 +7,7 @@ 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";
 
 const StyledContainer = styled.div`
   padding-bottom: 10rem;
@@ -20,12 +21,13 @@ export const Home2023Wrapper: FC<React.PropsWithChildren<unknown>> = () => {
   const { hash } = useLocation();
 
   React.useEffect(() => {
-    document.title = `Home - DevBcn - ${data.edition}`;
     if (hash != null && hash !== "") {
       const scroll = document.getElementById(hash.substring(1));
       scroll?.scrollIntoView();
     }
   }, [hash]);
+
+  useDocumentTitleUpdater("Home", data.edition);
   return (
     <StyledContainer id="home-wrapper">
       <Home />

src/2023/Home/components/SpeakersCarousel/SpeakerSwiper.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import React, { FC } from "react";
 import { Autoplay, Parallax } from "swiper";
 import { Swiper, SwiperSlide } from "swiper/react";
 import styled from "styled-components";
@@ -7,8 +7,11 @@ import "swiper/swiper-bundle.min.css";
 import "./SpeakersCarousel.scss";
 import { Link } from "react-router";
 import { ROUTE_SPEAKER_DETAIL } from "../../../../constants/routes";
-import { useFetchSpeakers } from "../../../Speakers/UseFetchSpeakers";
-import * as Sentry from "@sentry/react";
+
+import conferenceData from "../../../../data/2023.json";
+import { useFetchSpeakers } from "../../../../views/Speakers/UseFetchSpeakers";
+import { useSentryErrorReport } from "../../../../services/useSentryErrorReport";
+import { ISpeaker } from "../../../../types/speakers";
 
 const StyledSlideImage = styled.img`
   display: block;
@@ -34,14 +37,35 @@ const StyledSlideText = styled.p`
   font-size: 0.875rem;
   color: white;
 `;
+
+/** 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;
+};
+
 const SpeakerSwiper: FC<React.PropsWithChildren<unknown>> = () => {
-  const { isLoading, data, error } = useFetchSpeakers();
+  const { isLoading, data, error } = useFetchSpeakers(
+    conferenceData.sessionizeUrl,
+  );
 
-  const swiperSpeakers = data?.sort(() => 0.5 - Math.random()).slice(0, 20);
+  const swiperSpeakers: ISpeaker[] = React.useMemo(() => data
+      ? shuffleArray(data).slice(0, 20)
+      : [], [data]);
 
-  if (error) {
-    Sentry.captureException(error);
-  }
+  useSentryErrorReport(error);
 
   return (
     <>

src/2023/JobOffers/JobOffers2023.tsx

@@ -14,6 +14,7 @@ import {
   StyledTitleContainer
 } from "../../styles/JobOffers/JobOffers.Style";
 import CompanyOffers from "../../components/JobOffers/CompanyOffers";
+import { useDocumentTitleUpdater } from "../../services/useDocumentTitleUpdate";
 
 const NoOffersAvailable = () => (
       <h4 style={{ color: Color.DARK_BLUE }}>No job offers available yet</h4>
@@ -29,9 +30,7 @@ const MoreThanLessThan = (props: { width: number }) => (
 const JobOffers2023: FC<React.PropsWithChildren<unknown>> = () => {
   const { width } = useWindowSize();
 
-  React.useEffect(() => {
-    document.title = `Job Offers - DevBcn - ${data.edition}`;
-  }, []);
+  useDocumentTitleUpdater("Job Offers", data.edition);
 
   return (
     <SectionWrapper color={Color.WHITE} marginTop={6} paddingBottom={100}>

src/2023/Schedule/Schedule2023.tsx

@@ -13,13 +13,14 @@ import {
   StyledScheduleSection,
 } from "../../styles/Schedule/Schedule.style";
 import * as Sentry from "@sentry/react";
+import { useDocumentTitleUpdater } from "../../services/useDocumentTitleUpdate";
 
 const Schedule2023: FC<React.PropsWithChildren<unknown>> = () => {
   const { width } = useWindowSize();
 
-  React.useEffect(() => {
-    document.title = `Schedule - DevBcn - ${data.edition}`;
+  useDocumentTitleUpdater("Schedule", data.edition);
 
+  React.useEffect(() => {
     fetch("https://sessionize.com/api/v2/a2sw0wks/view/GridSmart")
       .then((value) => value.text())
       .then((value) => {

src/2023/SessionFeedback/SessionFeedback2023.tsx

@@ -15,6 +15,7 @@ import { FilterMatchMode } from "primereact/api";
 import { Color } from "../../styles/colors";
 import { Link } from "react-router";
 import { ROUTE_TALK_DETAIL } from "../../constants/routes";
+import { useDocumentTitleUpdater } from "../../services/useDocumentTitleUpdate";
 
 const SessionFeedback2023: FC<React.PropsWithChildren<unknown>> = () => {
   const bodyTemplate = React.useCallback(
@@ -64,9 +65,7 @@ const SessionFeedback2023: FC<React.PropsWithChildren<unknown>> = () => {
     </div>
   );
 
-  React.useEffect(() => {
-    document.title = "DevBcn 2023 - Session Feedback";
-  });
+  useDocumentTitleUpdater("Session Feedback", "2023");
 
   const header = renderHeader();
 

src/2023/SpeakerDetail/SpeakerDetailContainer2023.tsx

@@ -6,22 +6,22 @@ import SpeakerDetail2023 from "./SpeakerDetail2023";
 import { useParams } from "react-router";
 import { StyledContainer, StyledWaveContainer } from "./Speaker.style";
 import conferenceData from "../../data/2023.json";
-import { useFetchSpeakers } from "../Speakers/UseFetchSpeakers";
-import * as Sentry from "@sentry/react";
+import { useFetchSpeakers } from "../../views/Speakers/UseFetchSpeakers";
+import { useSentryErrorReport } from "../../services/useSentryErrorReport";
+import { useDocumentTitleUpdater } from "../../services/useDocumentTitleUpdate";
 
 const SpeakerDetailContainer2023: FC<React.PropsWithChildren<unknown>> = () => {
   const { id } = useParams<{ id: string }>();
 
-  const { isLoading, error, data } = useFetchSpeakers(id);
+  const { isLoading, error, data } = useFetchSpeakers(
+    conferenceData.sessionizeUrl,
+    id,
+  );
+
+  useSentryErrorReport(error);
+
+  useDocumentTitleUpdater(data?.[0]?.fullName ?? "", conferenceData.edition);
 
-  if (error) {
-    Sentry.captureException(error);
-  }
-  React.useEffect(() => {
-    if (data) {
-      document.title = `${data[0]?.fullName} - DevBcn - ${conferenceData.edition}`;
-    }
-  }, [id, data]);
   return (
     <StyledContainer>
       <SectionWrapper color={Color.BLUE} marginTop={4}>