unifying the logic for fetching and setting the document title across the application

package.json

@@ -96,7 +96,6 @@
     "@types/jest": "^29.5.13",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.34",
-    "eslint": "^8.57.1",
     "gh-pages": "^6.3.0",
     "prettier": "^3.5.1",
     "react-ga": "^3.3.1",

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 "../../hooks/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 "../../hooks/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,6 +8,7 @@ import {
   ROUTE_CODE_OF_CONDUCT,
   ROUTE_CONDITIONS,
 } from "../../constants/routes";
+import { useDocumentTitleUpdater } from "../../hooks/useDocumentTitleUpdate";
 
 const StyledSection = 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

@@ -2,11 +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 SpeakersCarousel from "../../components/Swiper/SpeakersCarousel";
+import { ROUTE_2023_SPEAKERS } from "../../constants/routes";
+import { useDocumentTitleUpdater } from "../../hooks/useDocumentTitleUpdate";
 
 const StyledContainer = styled.div`
   padding-bottom: 10rem;
@@ -20,17 +22,21 @@ 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 />
       <Faqs />
-      <SpeakersCarousel />
+      <SpeakersCarousel
+        speakersLink={ROUTE_2023_SPEAKERS}
+        sessionizeUrl={data.sessionizeUrl}
+      />
       <Sponsors />
     </StyledContainer>
   );

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

@@ -8,7 +8,7 @@ import "./SpeakersCarousel.scss";
 import { Link } from "react-router";
 import { ROUTE_SPEAKER_DETAIL } from "../../../../constants/routes";
 import { useFetchSpeakers } from "../../../../hooks/useFetchSpeakers";
-import * as Sentry from "@sentry/react";
+import { useSentryErrorReport } from "../../../../hooks/useSentryErrorReport";
 
 const StyledSlideImage = styled.img`
   display: block;
@@ -39,9 +39,7 @@ const SpeakerSwiper: FC<React.PropsWithChildren<unknown>> = () => {
 
   const swiperSpeakers = data?.sort(() => 0.5 - Math.random()).slice(0, 20);
 
-  if (error) {
-    Sentry.captureException(error);
-  }
+  useSentryErrorReport(error);
 
   return (
     <>

src/2023/JobOffers/JobOffers2023.tsx

@@ -10,28 +10,30 @@ import TitleSection from "../../components/SectionTitle/TitleSection";
 import { useWindowSize } from "react-use";
 import data from "../../data/2023.json";
 import {
-  Companies, CompanyNameLink, StyledLessIcon, StyledMoreIcon,
-  StyledTitleContainer
+  Companies,
+  CompanyNameLink,
+  StyledLessIcon,
+  StyledMoreIcon,
+  StyledTitleContainer,
 } from "../../styles/JobOffers/JobOffers.Style";
 import CompanyOffers from "../../components/JobOffers/CompanyOffers";
+import { useDocumentTitleUpdater } from "../../hooks/useDocumentTitleUpdate";
 
 const NoOffersAvailable = () => (
-      <h4 style={{ color: Color.DARK_BLUE }}>No job offers available yet</h4>
+  <h4 style={{ color: Color.DARK_BLUE }}>No job offers available yet</h4>
 );
 
-const MoreThanLessThan = (props: { width: number }) => (
-<>
-        <StyledLessIcon src={LessThanBlueIcon} />
-        <StyledMoreIcon src={MoreThanBlueIcon} />
+const MoreThanLessThan = () => (
+  <>
+    <StyledLessIcon src={LessThanBlueIcon} />
+    <StyledMoreIcon src={MoreThanBlueIcon} />
   </>
 );
 
 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}>
@@ -43,7 +45,7 @@ const JobOffers2023: FC<React.PropsWithChildren<unknown>> = () => {
             color={Color.BLACK_BLUE}
           />
         </StyledTitleContainer>
-        {width > MOBILE_BREAKPOINT && <MoreThanLessThan width={width} />}
+        {width > MOBILE_BREAKPOINT && <MoreThanLessThan />}
         {!data.jobOffers.enabled && <NoOffersAvailable />}
         {data.jobOffers.enabled && (
           <div id="job-offers">

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 "../../hooks/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 "../../hooks/useDocumentTitleUpdate";
 
 const SessionFeedback2023: FC<React.PropsWithChildren<unknown>> = () => {
   const bodyTemplate = React.useCallback(
@@ -65,9 +66,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

@@ -7,16 +7,14 @@ import { useParams } from "react-router";
 import { StyledContainer, StyledWaveContainer } from "./Speaker.style";
 import conferenceData from "../../data/2023.json";
 import { useFetchSpeakers } from "../../hooks/useFetchSpeakers";
-import * as Sentry from "@sentry/react";
+import { useSentryErrorReport } from "../../hooks/useSentryErrorReport";
 
 const SpeakerDetailContainer2023: FC<React.PropsWithChildren<unknown>> = () => {
   const { id } = useParams<{ id: string }>();
 
   const { isLoading, error, data } = useFetchSpeakers("2023", id);
 
-  if (error) {
-    Sentry.captureException(error);
-  }
+  useSentryErrorReport(error);
   React.useEffect(() => {
     if (data) {
       document.title = `${data[0]?.fullName} - DevBcn - ${conferenceData.edition}`;

src/2023/Speakers/Speakers2023.tsx

@@ -20,18 +20,14 @@ import webData from "../../data/2023.json";
 import Button from "../../components/UI/Button";
 import { gaEventTracker } from "../../components/analytics/Analytics";
 import { useFetchSpeakers } from "../../hooks/useFetchSpeakers";
-import * as Sentry from "@sentry/react";
 import { ISpeaker } from "../../types/speakers";
 import { SpeakerCard } from "../../views/Speakers/components/SpeakersCard";
+import { useSentryErrorReport } from "../../hooks/useSentryErrorReport";
 
-const LessThanGreaterThan = (props: { width: number }) => (
+const LessThanGreaterThan = () => (
   <>
-    {props.width > MOBILE_BREAKPOINT && (
-      <>
-        <StyledLessIcon src={LessThanBlueIcon} />
-        <StyledMoreIcon src={MoreThanBlueIcon} />
-      </>
-    )}
+    <StyledLessIcon src={LessThanBlueIcon} />
+    <StyledMoreIcon src={MoreThanBlueIcon} />
   </>
 );
 
@@ -43,9 +39,7 @@ const Speakers2023: FC<React.PropsWithChildren<unknown>> = () => {
 
   const { error, data, isLoading } = useFetchSpeakers("2023");
 
-  if (error) {
-    Sentry.captureException(error);
-  }
+  useSentryErrorReport(error);
 
   const trackCFP = useCallback(() => {
     gaEventTracker("CFP", "CFP");
@@ -69,7 +63,7 @@ const Speakers2023: FC<React.PropsWithChildren<unknown>> = () => {
             Technologies and in the JCP."
             color={Color.WHITE}
           />
-          <LessThanGreaterThan width={width} />
+          {width > MOBILE_BREAKPOINT && <LessThanGreaterThan/>}
           <SpeakersCardsContainer>
             {isLoading && <p>Loading...</p>}
             {isBetween(CFPStartDay, CFPEndDay) && (

src/2023/TalkDetail/TalkDetail.tsx

@@ -3,13 +3,13 @@ import {
   LARGE_BREAKPOINT,
   MOBILE_BREAKPOINT,
 } from "../../constants/BreakPoints";
-import {Color} from "../../styles/colors";
-import React, {FC, Suspense, useEffect} from "react";
+import { Color } from "../../styles/colors";
+import React, { FC, Suspense } from "react";
 import LessThanIconWhite from "../../assets/images/LessThanIconWhite.svg";
 import LessThanIcon from "../../assets/images/LessThanBlueIcon.svg";
 import MoreThanIcon from "../../assets/images/MoreThanBlueIcon.svg";
 import SectionWrapper from "../../components/SectionWrapper/SectionWrapper";
-import {useWindowSize} from "react-use";
+import { useWindowSize } from "react-use";
 import {
   StyledContainer,
   StyledDescription,
@@ -27,14 +27,15 @@ import {
   StyledVideoContainer,
   StyledVideoTagsContainer,
 } from "./Style.MeetingDetail";
-import {Link} from "react-router";
+import { Link } from "react-router";
 import {
   ROUTE_2023_SPEAKER_DETAIL,
   ROUTE_2023_TALKS,
 } from "../../constants/routes";
 import conferenceData from "../../data/2023.json";
-import {Tag} from "../../components/Tag/Tag";
-import {IMeetingDetailProps, MyType} from "../../types/sessions";
+import { Tag } from "../../components/Tag/Tag";
+import { IMeetingDetailProps, MyType } from "../../types/sessions";
+import { useDocumentTitleUpdater } from "../../hooks/useDocumentTitleUpdate";
 
 const getVideoHeight = (windowWidth: number) => {
   let videoHeight;
@@ -102,9 +103,7 @@ const TalkDetail: FC<React.PropsWithChildren<IMeetingDetailProps>> = ({
 }) => {
   const { width } = useWindowSize();
 
-  useEffect(() => {
-    document.title = `${meeting.title} - DevBcn ${conferenceData.edition}`;
-  }, [meeting.title]);
+  useDocumentTitleUpdater(meeting.title, conferenceData.edition);
 
   const finalMeetingInfo: MyType = {
     ...meeting,
@@ -135,12 +134,20 @@ const TalkDetail: FC<React.PropsWithChildren<IMeetingDetailProps>> = ({
               {meeting.track}
 
               {meeting.slidesURL !== "" && (
-                <p style={{ textAlign: "left", marginTop: "0.6rem" }}>
+                <p
+                  style={{
+                    textAlign: "left",
+                    marginTop: "0.6rem",
+                  }}
+                >
                   <a
                     href={meeting.slidesURL}
                     target="_blank"
                     rel="noreferrer"
-                    style={{ textDecoration: "none", color: Color.DARK_BLUE }}
+                    style={{
+                      textDecoration: "none",
+                      color: Color.DARK_BLUE,
+                    }}
                   >
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
@@ -185,9 +192,7 @@ const TalkDetail: FC<React.PropsWithChildren<IMeetingDetailProps>> = ({
             ></iframe>
           )}
           <StyledVideoTagsContainer>
-            {meeting.videoTags?.map((tag) => (
-              <Tag text={tag} key={tag} />
-            ))}
+            {meeting.videoTags?.map((tag) => <Tag text={tag} key={tag} />)}
           </StyledVideoTagsContainer>
           <div style={{ width: "100%", textAlign: "center" }}>
             <Link

src/2023/TalkDetail/TalkDetailContainer2023.tsx

@@ -6,12 +6,12 @@ import styled from "styled-components";
 import { useParams } from "react-router";
 import conferenceData from "../../data/2023.json";
 import { useFetchTalksById } from "../../hooks/useFetchTalks";
-import * as Sentry from "@sentry/react";
 import { useFetchSpeakers } from "../../hooks/useFetchSpeakers";
 import { Session } from "../../types/sessions";
 import TalkDetail from "./TalkDetail";
 import { ISpeaker } from "../../types/speakers";
 import { sessionAdapter } from "../../services/sessionsAdapter";
+import { useSentryErrorReport } from "../../hooks/useSentryErrorReport";
 
 const StyledContainer = styled.div`
   background-color: ${Color.WHITE};
@@ -37,9 +37,7 @@ const TalkDetailContainer2023: FC<React.PropsWithChildren<unknown>> = () => {
     document.title = `${data?.title} - DevBcn - ${conferenceData.edition}`;
   }, [data]);
 
-  if (error) {
-    Sentry.captureException(error);
-  }
+  useSentryErrorReport(error);
 
   return (
     <StyledContainer>