Skip to content

Commit fde7c2f

Browse files
anyulledanyulled
authored
unifying the logic for fetching and setting the document title across the application (#670)
1 parent a89039c commit fde7c2f

File tree

70 files changed

+21599
-27833
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+21599
-27833
lines changed

‎.output.txt

+4,538
Large diffs are not rendered by default.

‎package-lock.json

+15,298-26,210
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

-1
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,6 @@
9696
"@types/jest": "^29.5.13",
9797
"@types/react-router-dom": "^5.3.3",
9898
"@types/styled-components": "^5.1.34",
99-
"eslint": "^8.57.1",
10099
"gh-pages": "^6.3.0",
101100
"prettier": "^3.5.1",
102101
"react-ga": "^3.3.1",

‎src/2023/Cfp/CfpSection2023.test.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ describe("CfpSection2023", () => {
9898
render(<CfpSection2023 />);
9999
await waitFor(() => {
100100
expect(document.title).toBe(
101-
`CFP Committee - DevBcn - ${conferenceData.edition}`,
101+
`CFP Committee — DevBcn - Barcelona Developers Conference — ${conferenceData.edition}`,
102102
);
103103
});
104104
});

‎src/2023/Cfp/CfpSection2023.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
StyledAboutImage,
2222
StyledSocialIconsWrapper,
2323
} from "../../views/About/components/Style.AboutCard";
24+
import { useDocumentTitleUpdater } from "../../hooks/useDocumentTitleUpdate";
2425

2526
const TrackName = styled.h2`
2627
padding-top: 1.2rem;
@@ -75,9 +76,8 @@ const CfpTrackComponent: FC<React.PropsWithChildren<CfpTrackProps>> = ({
7576

7677
const CfpSection2023: FC<React.PropsWithChildren<unknown>> = () => {
7778
const { width } = useWindowSize();
78-
React.useEffect(() => {
79-
document.title = `CFP Committee - DevBcn - ${conferenceData.edition}`;
80-
}, []);
79+
80+
useDocumentTitleUpdater("CFP Committee", conferenceData.edition);
8181
return (
8282
<>
8383
<SectionWrapper color={Color.WHITE} marginTop={5}>

‎src/2023/Communities/Communities2023.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import styled from "styled-components";
33
import TwitterIcon from "../../components/Icons/Twitter";
44
import { Color } from "../../styles/colors";
55
import WebsiteIcon from "../../components/Icons/website";
6+
import { useDocumentTitleUpdater } from "../../hooks/useDocumentTitleUpdate";
67

78
const Heading = styled.h1`
89
padding-top: 10rem;
@@ -29,9 +30,7 @@ const FoSS = styled.div`
2930
`;
3031

3132
const Communities2023: FC<React.PropsWithChildren<unknown>> = () => {
32-
React.useEffect(() => {
33-
document.title = "Communities";
34-
});
33+
useDocumentTitleUpdater("Communities", "2023");
3534
return (
3635
<>
3736
<Heading>FOSS & Diversity Communities</Heading>

‎src/2023/Diversity/Diversity2023.tsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { FC, useEffect } from "react";
1+
import { FC } from "react";
22
import { Color } from "../../styles/colors";
33
import data from "../../data/2023.json";
44
import styled from "styled-components";
@@ -8,6 +8,7 @@ import {
88
ROUTE_CODE_OF_CONDUCT,
99
ROUTE_CONDITIONS,
1010
} from "../../constants/routes";
11+
import { useDocumentTitleUpdater } from "../../hooks/useDocumentTitleUpdate";
1112

1213
const StyledSection = styled.section`
1314
{
@@ -96,9 +97,7 @@ const StyledParagraph = styled.section`
9697
}
9798
`;
9899
const Diversity2023: FC<React.PropsWithChildren<unknown>> = () => {
99-
useEffect(() => {
100-
document.title = `Diversity - DevBcn ${data.edition}`;
101-
});
100+
useDocumentTitleUpdater("Diversity", data.edition);
102101

103102
return (
104103
<StyledSection className="styled-section">

‎src/2023/Home/Home2023Wrapper.tsx

+9-3
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@ import { BIG_BREAKPOINT } from "../../constants/BreakPoints";
22
import React, { FC } from "react";
33
import Faqs from "./components/Faqs/Faqs";
44
import Home from "./components/Home/Home";
5-
import SpeakersCarousel from "./components/SpeakersCarousel/SpeakersCarousel";
65
import Sponsors from "./components/Sponsors/Sponsors";
76
import styled from "styled-components";
87
import data from "../../data/2023.json";
98
import { useLocation } from "react-router";
9+
import SpeakersCarousel from "../../components/Swiper/SpeakersCarousel";
10+
import { ROUTE_2023_SPEAKERS } from "../../constants/routes";
11+
import { useDocumentTitleUpdater } from "../../hooks/useDocumentTitleUpdate";
1012

1113
const StyledContainer = styled.div`
1214
padding-bottom: 10rem;
@@ -20,17 +22,21 @@ export const Home2023Wrapper: FC<React.PropsWithChildren<unknown>> = () => {
2022
const { hash } = useLocation();
2123

2224
React.useEffect(() => {
23-
document.title = `Home - DevBcn - ${data.edition}`;
2425
if (hash != null && hash !== "") {
2526
const scroll = document.getElementById(hash.substring(1));
2627
scroll?.scrollIntoView();
2728
}
2829
}, [hash]);
30+
31+
useDocumentTitleUpdater("Home", data.edition);
2932
return (
3033
<StyledContainer id="home-wrapper">
3134
<Home />
3235
<Faqs />
33-
<SpeakersCarousel />
36+
<SpeakersCarousel
37+
speakersLink={ROUTE_2023_SPEAKERS}
38+
sessionizeUrl={data.sessionizeUrl}
39+
/>
3440
<Sponsors />
3541
</StyledContainer>
3642
);

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

+2-4
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import "./SpeakersCarousel.scss";
88
import { Link } from "react-router";
99
import { ROUTE_SPEAKER_DETAIL } from "../../../../constants/routes";
1010
import { useFetchSpeakers } from "../../../../hooks/useFetchSpeakers";
11-
import * as Sentry from "@sentry/react";
11+
import { useSentryErrorReport } from "../../../../hooks/useSentryErrorReport";
1212

1313
const StyledSlideImage = styled.img`
1414
display: block;
@@ -39,9 +39,7 @@ const SpeakerSwiper: FC<React.PropsWithChildren<unknown>> = () => {
3939

4040
const swiperSpeakers = data?.sort(() => 0.5 - Math.random()).slice(0, 20);
4141

42-
if (error) {
43-
Sentry.captureException(error);
44-
}
42+
useSentryErrorReport(error);
4543

4644
return (
4745
<>

‎src/2023/JobOffers/JobOffers2023.tsx

+13-11
Original file line numberDiff line numberDiff line change
@@ -10,28 +10,30 @@ import TitleSection from "../../components/SectionTitle/TitleSection";
1010
import { useWindowSize } from "react-use";
1111
import data from "../../data/2023.json";
1212
import {
13-
Companies, CompanyNameLink, StyledLessIcon, StyledMoreIcon,
14-
StyledTitleContainer
13+
Companies,
14+
CompanyNameLink,
15+
StyledLessIcon,
16+
StyledMoreIcon,
17+
StyledTitleContainer,
1518
} from "../../styles/JobOffers/JobOffers.Style";
1619
import CompanyOffers from "../../components/JobOffers/CompanyOffers";
20+
import { useDocumentTitleUpdater } from "../../hooks/useDocumentTitleUpdate";
1721

1822
const NoOffersAvailable = () => (
19-
<h4 style={{ color: Color.DARK_BLUE }}>No job offers available yet</h4>
23+
<h4 style={{ color: Color.DARK_BLUE }}>No job offers available yet</h4>
2024
);
2125

22-
const MoreThanLessThan = (props: { width: number }) => (
23-
<>
24-
<StyledLessIcon src={LessThanBlueIcon} />
25-
<StyledMoreIcon src={MoreThanBlueIcon} />
26+
const MoreThanLessThan = () => (
27+
<>
28+
<StyledLessIcon src={LessThanBlueIcon} />
29+
<StyledMoreIcon src={MoreThanBlueIcon} />
2630
</>
2731
);
2832

2933
const JobOffers2023: FC<React.PropsWithChildren<unknown>> = () => {
3034
const { width } = useWindowSize();
3135

32-
React.useEffect(() => {
33-
document.title = `Job Offers - DevBcn - ${data.edition}`;
34-
}, []);
36+
useDocumentTitleUpdater("Job Offers", data.edition);
3537

3638
return (
3739
<SectionWrapper color={Color.WHITE} marginTop={6} paddingBottom={100}>
@@ -43,7 +45,7 @@ const JobOffers2023: FC<React.PropsWithChildren<unknown>> = () => {
4345
color={Color.BLACK_BLUE}
4446
/>
4547
</StyledTitleContainer>
46-
{width > MOBILE_BREAKPOINT && <MoreThanLessThan width={width} />}
48+
{width > MOBILE_BREAKPOINT && <MoreThanLessThan />}
4749
{!data.jobOffers.enabled && <NoOffersAvailable />}
4850
{data.jobOffers.enabled && (
4951
<div id="job-offers">

‎src/2023/Schedule/Schedule2023.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,14 @@ import {
1313
StyledScheduleSection,
1414
} from "../../styles/Schedule/Schedule.style";
1515
import * as Sentry from "@sentry/react";
16+
import { useDocumentTitleUpdater } from "../../hooks/useDocumentTitleUpdate";
1617

1718
const Schedule2023: FC<React.PropsWithChildren<unknown>> = () => {
1819
const { width } = useWindowSize();
1920

20-
React.useEffect(() => {
21-
document.title = `Schedule - DevBcn - ${data.edition}`;
21+
useDocumentTitleUpdater("Schedule", data.edition);
2222

23+
React.useEffect(() => {
2324
fetch("https://sessionize.com/api/v2/a2sw0wks/view/GridSmart")
2425
.then((value) => value.text())
2526
.then((value) => {

‎src/2023/SessionFeedback/SessionFeedback2023.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { FilterMatchMode } from "primereact/api";
1515
import { Color } from "../../styles/colors";
1616
import { Link } from "react-router";
1717
import { ROUTE_TALK_DETAIL } from "../../constants/routes";
18+
import { useDocumentTitleUpdater } from "../../hooks/useDocumentTitleUpdate";
1819

1920
const SessionFeedback2023: FC<React.PropsWithChildren<unknown>> = () => {
2021
const bodyTemplate = React.useCallback(
@@ -65,9 +66,7 @@ const SessionFeedback2023: FC<React.PropsWithChildren<unknown>> = () => {
6566
</div>
6667
);
6768

68-
React.useEffect(() => {
69-
document.title = "DevBcn 2023 - Session Feedback";
70-
});
69+
useDocumentTitleUpdater("Session Feedback", "2023");
7170

7271
const header = renderHeader();
7372

‎src/2023/SpeakerDetail/SpeakerDetailContainer2023.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,14 @@ import { useParams } from "react-router";
77
import { StyledContainer, StyledWaveContainer } from "./Speaker.style";
88
import conferenceData from "../../data/2023.json";
99
import { useFetchSpeakers } from "../../hooks/useFetchSpeakers";
10-
import * as Sentry from "@sentry/react";
10+
import { useSentryErrorReport } from "../../hooks/useSentryErrorReport";
1111

1212
const SpeakerDetailContainer2023: FC<React.PropsWithChildren<unknown>> = () => {
1313
const { id } = useParams<{ id: string }>();
1414

1515
const { isLoading, error, data } = useFetchSpeakers("2023", id);
1616

17-
if (error) {
18-
Sentry.captureException(error);
19-
}
17+
useSentryErrorReport(error);
2018
React.useEffect(() => {
2119
if (data) {
2220
document.title = `${data[0]?.fullName} - DevBcn - ${conferenceData.edition}`;

‎src/2023/Speakers/Speakers2023.tsx

+6-12
Original file line numberDiff line numberDiff line change
@@ -20,18 +20,14 @@ import webData from "../../data/2023.json";
2020
import Button from "../../components/UI/Button";
2121
import { gaEventTracker } from "../../components/analytics/Analytics";
2222
import { useFetchSpeakers } from "../../hooks/useFetchSpeakers";
23-
import * as Sentry from "@sentry/react";
2423
import { ISpeaker } from "../../types/speakers";
2524
import { SpeakerCard } from "../../views/Speakers/components/SpeakersCard";
25+
import { useSentryErrorReport } from "../../hooks/useSentryErrorReport";
2626

27-
const LessThanGreaterThan = (props: { width: number }) => (
27+
const LessThanGreaterThan = () => (
2828
<>
29-
{props.width > MOBILE_BREAKPOINT && (
30-
<>
31-
<StyledLessIcon src={LessThanBlueIcon} />
32-
<StyledMoreIcon src={MoreThanBlueIcon} />
33-
</>
34-
)}
29+
<StyledLessIcon src={LessThanBlueIcon} />
30+
<StyledMoreIcon src={MoreThanBlueIcon} />
3531
</>
3632
);
3733

@@ -43,9 +39,7 @@ const Speakers2023: FC<React.PropsWithChildren<unknown>> = () => {
4339

4440
const { error, data, isLoading } = useFetchSpeakers("2023");
4541

46-
if (error) {
47-
Sentry.captureException(error);
48-
}
42+
useSentryErrorReport(error);
4943

5044
const trackCFP = useCallback(() => {
5145
gaEventTracker("CFP", "CFP");
@@ -69,7 +63,7 @@ const Speakers2023: FC<React.PropsWithChildren<unknown>> = () => {
6963
Technologies and in the JCP."
7064
color={Color.WHITE}
7165
/>
72-
<LessThanGreaterThan width={width} />
66+
{width > MOBILE_BREAKPOINT && <LessThanGreaterThan/>}
7367
<SpeakersCardsContainer>
7468
{isLoading && <p>Loading...</p>}
7569
{isBetween(CFPStartDay, CFPEndDay) && (

‎src/2023/TalkDetail/TalkDetail.tsx

+19-14
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import {
33
LARGE_BREAKPOINT,
44
MOBILE_BREAKPOINT,
55
} from "../../constants/BreakPoints";
6-
import {Color} from "../../styles/colors";
7-
import React, {FC, Suspense, useEffect} from "react";
6+
import { Color } from "../../styles/colors";
7+
import React, { FC, Suspense } from "react";
88
import LessThanIconWhite from "../../assets/images/LessThanIconWhite.svg";
99
import LessThanIcon from "../../assets/images/LessThanBlueIcon.svg";
1010
import MoreThanIcon from "../../assets/images/MoreThanBlueIcon.svg";
1111
import SectionWrapper from "../../components/SectionWrapper/SectionWrapper";
12-
import {useWindowSize} from "react-use";
12+
import { useWindowSize } from "react-use";
1313
import {
1414
StyledContainer,
1515
StyledDescription,
@@ -27,14 +27,15 @@ import {
2727
StyledVideoContainer,
2828
StyledVideoTagsContainer,
2929
} from "./Style.MeetingDetail";
30-
import {Link} from "react-router";
30+
import { Link } from "react-router";
3131
import {
3232
ROUTE_2023_SPEAKER_DETAIL,
3333
ROUTE_2023_TALKS,
3434
} from "../../constants/routes";
3535
import conferenceData from "../../data/2023.json";
36-
import {Tag} from "../../components/Tag/Tag";
37-
import {IMeetingDetailProps, MyType} from "../../types/sessions";
36+
import { Tag } from "../../components/Tag/Tag";
37+
import { IMeetingDetailProps, MyType } from "../../types/sessions";
38+
import { useDocumentTitleUpdater } from "../../hooks/useDocumentTitleUpdate";
3839

3940
const getVideoHeight = (windowWidth: number) => {
4041
let videoHeight;
@@ -102,9 +103,7 @@ const TalkDetail: FC<React.PropsWithChildren<IMeetingDetailProps>> = ({
102103
}) => {
103104
const { width } = useWindowSize();
104105

105-
useEffect(() => {
106-
document.title = `${meeting.title} - DevBcn ${conferenceData.edition}`;
107-
}, [meeting.title]);
106+
useDocumentTitleUpdater(meeting.title, conferenceData.edition);
108107

109108
const finalMeetingInfo: MyType = {
110109
...meeting,
@@ -135,12 +134,20 @@ const TalkDetail: FC<React.PropsWithChildren<IMeetingDetailProps>> = ({
135134
{meeting.track}
136135

137136
{meeting.slidesURL !== "" && (
138-
<p style={{ textAlign: "left", marginTop: "0.6rem" }}>
137+
<p
138+
style={{
139+
textAlign: "left",
140+
marginTop: "0.6rem",
141+
}}
142+
>
139143
<a
140144
href={meeting.slidesURL}
141145
target="_blank"
142146
rel="noreferrer"
143-
style={{ textDecoration: "none", color: Color.DARK_BLUE }}
147+
style={{
148+
textDecoration: "none",
149+
color: Color.DARK_BLUE,
150+
}}
144151
>
145152
<svg
146153
xmlns="http://www.w3.org/2000/svg"
@@ -185,9 +192,7 @@ const TalkDetail: FC<React.PropsWithChildren<IMeetingDetailProps>> = ({
185192
></iframe>
186193
)}
187194
<StyledVideoTagsContainer>
188-
{meeting.videoTags?.map((tag) => (
189-
<Tag text={tag} key={tag} />
190-
))}
195+
{meeting.videoTags?.map((tag) => <Tag text={tag} key={tag} />)}
191196
</StyledVideoTagsContainer>
192197
<div style={{ width: "100%", textAlign: "center" }}>
193198
<Link

‎src/2023/TalkDetail/TalkDetailContainer2023.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ import styled from "styled-components";
66
import { useParams } from "react-router";
77
import conferenceData from "../../data/2023.json";
88
import { useFetchTalksById } from "../../hooks/useFetchTalks";
9-
import * as Sentry from "@sentry/react";
109
import { useFetchSpeakers } from "../../hooks/useFetchSpeakers";
1110
import { Session } from "../../types/sessions";
1211
import TalkDetail from "./TalkDetail";
1312
import { ISpeaker } from "../../types/speakers";
1413
import { sessionAdapter } from "../../services/sessionsAdapter";
14+
import { useSentryErrorReport } from "../../hooks/useSentryErrorReport";
1515

1616
const StyledContainer = styled.div`
1717
background-color: ${Color.WHITE};
@@ -37,9 +37,7 @@ const TalkDetailContainer2023: FC<React.PropsWithChildren<unknown>> = () => {
3737
document.title = `${data?.title} - DevBcn - ${conferenceData.edition}`;
3838
}, [data]);
3939

40-
if (error) {
41-
Sentry.captureException(error);
42-
}
40+
useSentryErrorReport(error);
4341

4442
return (
4543
<StyledContainer>

0 commit comments

Comments
 (0)