fix: fix 2024 diversity route

Author: anyulled

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

@@ -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/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(
@@ -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/TalkDetail/TalkDetail.tsx

@@ -4,7 +4,7 @@ import {
   MOBILE_BREAKPOINT,
 } from "../../constants/BreakPoints";
 import {Color} from "../../styles/colors";
-import React, {FC, Suspense, useEffect} from "react";
+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";
@@ -33,8 +33,9 @@ import {
   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 "../../services/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,

src/2024/Cfp/CfpSection.test.tsx

@@ -9,7 +9,7 @@ describe("CfpSection", () => {
   it("sets document title on mount", () => {
     render(<CfpSection2024 />);
     expect(document.title).toBe(
-      `CFP Committee — ${conferenceData.title}— ${conferenceData.edition}`,
+      `CFP Committee — DevBcn - Barcelona Developers Conference — ${conferenceData.edition}`,
     );
   });