Skip to content

Commit 9fcb831

Browse files
anyulledanyulled
committed
refactor: remove duplication on fetch Talks logic
1 parent f697ecd commit 9fcb831

17 files changed

Lines changed: 710 additions & 1203 deletions

‎src/2023/TalkDetail/TalkDetailContainer2023.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
1-
import {Color} from "../../styles/colors";
2-
import React, {FC, useEffect} from "react";
1+
import { Color } from "../../styles/colors";
2+
import React, { FC, useEffect } from "react";
33
import NotFoundError from "../../components/NotFoundError/NotFoundError";
44
import SectionWrapper from "../../components/SectionWrapper/SectionWrapper";
55
import styled from "styled-components";
6-
import {useParams} from "react-router";
6+
import { useParams } from "react-router";
77
import conferenceData from "../../data/2023.json";
8-
import {useFetchTalksById} from "../Talks/UseFetchTalks";
8+
import { useFetchTalksById } from "../../hooks/useFetchTalks";
99
import * as Sentry from "@sentry/react";
10-
import {useFetchSpeakers} from "../../hooks/useFetchSpeakers";
11-
import {Session} from "../../types/sessions";
10+
import { useFetchSpeakers } from "../../hooks/useFetchSpeakers";
11+
import { Session } from "../../types/sessions";
1212
import TalkDetail from "./TalkDetail";
13-
import {ISpeaker} from "../../types/speakers";
14-
import {sessionAdapter} from "../../services/sessionsAdapter";
13+
import { ISpeaker } from "../../types/speakers";
14+
import { sessionAdapter } from "../../services/sessionsAdapter";
1515

1616
const StyledContainer = styled.div`
1717
background-color: ${Color.WHITE};
1818
`;
1919
const TalkDetailContainer2023: FC<React.PropsWithChildren<unknown>> = () => {
2020
const { id } = useParams<{ id: string }>();
21-
const { isLoading, error, data } = useFetchTalksById(id!);
21+
const { isLoading, error, data } = useFetchTalksById(id!, "2023");
2222
const { data: speakerData } = useFetchSpeakers("2023");
2323

2424
const getTalkSpeakers = (

‎src/2023/Talks/Talks2023.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
StyledTitleIcon,
1313
StyledWaveContainer,
1414
} from "./Talks.style";
15-
import { useFetchTalks } from "./UseFetchTalks";
15+
import { useFetchTalks } from "../../hooks/useFetchTalks";
1616
import * as Sentry from "@sentry/react";
1717
import { Dropdown, DropdownChangeEvent } from "primereact/dropdown";
1818
import "primereact/resources/primereact.min.css";
@@ -27,9 +27,9 @@ interface TrackInfo {
2727

2828
const Talks2023: FC<React.PropsWithChildren<unknown>> = () => {
2929
const [selectedGroupId, setSelectedGroupId] = useState<TrackInfo | null>(
30-
null
30+
null,
3131
);
32-
const { isLoading, error, data } = useFetchTalks();
32+
const { isLoading, error, data } = useFetchTalks("2023");
3333

3434
useEffect(() => {
3535
const sessionSelectedGroupCode =

‎src/2023/Talks/UseFetchTalks.ts‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎src/2023/Workshops/Workshops2023.tsx‎

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -11,32 +11,32 @@ import {
1111
import LessThanDarkBlueIcon from "../../assets/images/LessThanDarkBlueIcon.svg";
1212
import TitleSection from "../../components/SectionTitle/TitleSection";
1313
import MoreThanBlueIcon from "../../assets/images/MoreThanBlueIcon.svg";
14-
import { useFetchTalks } from "../Talks/UseFetchTalks";
14+
import { useFetchTalks } from "../../hooks/useFetchTalks";
1515
import * as Sentry from "@sentry/react";
1616
import conferenceData from "../../data/2023.json";
1717
import styled from "styled-components";
1818
import { BIG_BREAKPOINT } from "../../constants/BreakPoints";
19-
import {TalkCard} from "../../components/Talk/TalkCard";
19+
import { TalkCard } from "../../components/Talk/TalkCard";
2020

2121
const StyledSection = styled.section`
22-
{
22+
{
2323
display: flex;
2424
padding: 0 10rem;
2525
flex-wrap: wrap;
26-
}
26+
}
2727
28-
@media (max-width: ${BIG_BREAKPOINT}px) {
29-
padding: 1rem;
30-
flex-direction: column;
31-
}
28+
@media (max-width: ${BIG_BREAKPOINT}px) {
29+
padding: 1rem;
30+
flex-direction: column;
31+
}
3232
33-
& > div {
34-
margin: 1rem;
35-
min-width: 14%;
36-
}
33+
& > div {
34+
margin: 1rem;
35+
min-width: 14%;
36+
}
3737
`;
3838
const Workshops2023: FC<React.PropsWithChildren<unknown>> = () => {
39-
const { isLoading, data, error } = useFetchTalks();
39+
const { isLoading, data, error } = useFetchTalks("2023");
4040
useEffect(() => {
4141
document.title = `Workshops - DevBcn - ${conferenceData.edition}`;
4242
}, []);
@@ -49,8 +49,8 @@ const Workshops2023: FC<React.PropsWithChildren<unknown>> = () => {
4949
?.flatMap((group) => group.sessions)
5050
.filter((session) =>
5151
session.categories.some((category) =>
52-
category.categoryItems.some((item) => categoryItemIds.has(item.id))
53-
)
52+
category.categoryItems.some((item) => categoryItemIds.has(item.id)),
53+
),
5454
);
5555
//endregion
5656

@@ -98,11 +98,7 @@ const Workshops2023: FC<React.PropsWithChildren<unknown>> = () => {
9898
</p>
9999
)}
100100
{workshops?.map((track) => (
101-
<TalkCard
102-
talk={track}
103-
key={track.id}
104-
showTrack={true}
105-
/>
101+
<TalkCard talk={track} key={track.id} showTrack={true} />
106102
))}
107103
</StyledSection>
108104
<StyledMarginBottom />

‎src/2024/TalkDetail/MeetingDetailContainer.tsx‎

Lines changed: 51 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,71 @@
1-
import {Color} from "../../styles/colors";
2-
import React, {FC, useEffect} from "react";
1+
import { Color } from "../../styles/colors";
2+
import React, { FC, useEffect } from "react";
33
import NotFoundError from "../../components/NotFoundError/NotFoundError";
44
import SectionWrapper from "../../components/SectionWrapper/SectionWrapper";
55
import styled from "styled-components";
6-
import {useParams} from "react-router";
6+
import { useParams } from "react-router";
77
import conferenceData from "../../data/2024.json";
8-
import {useFetchTalksById} from "../Talks/UseFetchTalks";
8+
import { useFetchTalksById } from "../../hooks/useFetchTalks";
99
import * as Sentry from "@sentry/react";
10-
import {useFetchSpeakers} from "../../hooks/useFetchSpeakers";
10+
import { useFetchSpeakers } from "../../hooks/useFetchSpeakers";
1111
import MeetingDetail from "./MeetingDetail";
1212

13-
import {ISpeaker} from "../../types/speakers";
14-
import {Session} from "../../types/sessions";
15-
import {sessionAdapter} from "../../services/sessionsAdapter";
13+
import { ISpeaker } from "../../types/speakers";
14+
import { Session } from "../../types/sessions";
15+
import { sessionAdapter } from "../../services/sessionsAdapter";
1616

1717
const StyledContainer = styled.div`
18-
background-color: ${Color.WHITE};
18+
background-color: ${Color.WHITE};
1919
`;
2020
const MeetingDetailContainer: FC<React.PropsWithChildren<unknown>> = () => {
21-
const {id} = useParams<{ id: string }>();
22-
const {isLoading, error, data} = useFetchTalksById(id!);
23-
const {data: speakerData} = useFetchSpeakers("2024");
21+
const { id } = useParams<{ id: string }>();
22+
const { isLoading, error, data } = useFetchTalksById(id!, "2024");
23+
const { data: speakerData } = useFetchSpeakers("2024");
2424

25-
const getTalkSpeakers = (
26-
data: Session[] | undefined,
27-
): string[] | undefined => {
28-
const speakers = data?.[0]?.speakers;
29-
return speakers?.map((speaker) => speaker.id);
30-
};
25+
const getTalkSpeakers = (
26+
data: Session[] | undefined,
27+
): string[] | undefined => {
28+
const speakers = data?.[0]?.speakers;
29+
return speakers?.map((speaker) => speaker.id);
30+
};
3131

32-
const talkSpeakers: string[] | undefined = getTalkSpeakers(data);
33-
const sessionSpeakers: ISpeaker[] | undefined = speakerData?.filter(
34-
(speaker) => talkSpeakers?.includes(speaker.id),
35-
);
32+
const talkSpeakers: string[] | undefined = getTalkSpeakers(data);
33+
const sessionSpeakers: ISpeaker[] | undefined = speakerData?.filter(
34+
(speaker) => talkSpeakers?.includes(speaker.id),
35+
);
3636

37-
const adaptedMeeting = sessionAdapter(data?.at(0));
37+
const adaptedMeeting = sessionAdapter(data?.at(0));
3838

39-
useEffect(() => {
40-
document.title = `${data?.at(0)?.title} - DevBcn - ${
41-
conferenceData.edition
42-
}`;
43-
}, [data]);
39+
useEffect(() => {
40+
document.title = `${data?.at(0)?.title} - DevBcn - ${
41+
conferenceData.edition
42+
}`;
43+
}, [data]);
4444

45-
if (error) {
46-
Sentry.captureException(error);
47-
}
45+
if (error) {
46+
Sentry.captureException(error);
47+
}
4848

49-
return (
50-
<StyledContainer>
51-
<SectionWrapper color={Color.WHITE} marginTop={4}>
52-
{isLoading && <h2>Loading</h2>}
53-
{!isLoading &&
54-
sessionSpeakers !== undefined &&
55-
sessionSpeakers.length > 0 &&
56-
adaptedMeeting !== undefined && (
57-
<MeetingDetail
58-
speakers={sessionSpeakers}
59-
meeting={adaptedMeeting}
60-
/>
61-
)}
62-
{!isLoading &&
63-
(!sessionSpeakers ||
64-
sessionSpeakers.length === 0 ||
65-
!adaptedMeeting) && <NotFoundError message="Session"/>}
66-
</SectionWrapper>
67-
</StyledContainer>
68-
);
49+
return (
50+
<StyledContainer>
51+
<SectionWrapper color={Color.WHITE} marginTop={4}>
52+
{isLoading && <h2>Loading</h2>}
53+
{!isLoading &&
54+
sessionSpeakers !== undefined &&
55+
sessionSpeakers.length > 0 &&
56+
adaptedMeeting !== undefined && (
57+
<MeetingDetail
58+
speakers={sessionSpeakers}
59+
meeting={adaptedMeeting}
60+
/>
61+
)}
62+
{!isLoading &&
63+
(!sessionSpeakers ||
64+
sessionSpeakers.length === 0 ||
65+
!adaptedMeeting) && <NotFoundError message="Session" />}
66+
</SectionWrapper>
67+
</StyledContainer>
68+
);
6969
};
7070

7171
export default MeetingDetailContainer;

‎src/2024/Talks/LiveView.tsx‎

Lines changed: 50 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,65 @@
1-
import React, {FC, useCallback, useEffect, useMemo} from "react";
2-
import {useFetchLiveView} from "./UseFetchTalks";
1+
import React, { FC, useCallback, useEffect, useMemo } from "react";
2+
import { useFetchLiveView } from "../../hooks/useFetchTalks";
33
import Loading from "../../components/Loading/Loading";
44
import conference from "../../data/2024.json";
55
import * as Sentry from "@sentry/react";
6-
import {UngroupedSession} from "../../views/Talks/liveView.types";
7-
import {TalkCard} from "../../views/Talks/components/TalkCard";
8-
import {talkCardAdapter} from "../../views/Talks/TalkCardAdapter";
9-
import {StyledMain} from "../../views/Talks/Talks.style";
6+
import { UngroupedSession } from "../../views/Talks/liveView.types";
7+
import { TalkCard } from "../../views/Talks/components/TalkCard";
8+
import { talkCardAdapter } from "../../views/Talks/TalkCardAdapter";
9+
import { StyledMain } from "../../views/Talks/Talks.style";
1010

1111
const LiveView: FC<React.PropsWithChildren<unknown>> = () => {
12-
const {isLoading, error, data} = useFetchLiveView();
13-
const today = useMemo(() => new Date(), []);
12+
const { isLoading, error, data } = useFetchLiveView("2024");
13+
const today = useMemo(() => new Date(), []);
1414

15-
const isBetween = useCallback(
16-
(today: Date, startDate: string, endDate: string): boolean => {
17-
return today >= new Date(startDate) && today <= new Date(endDate);
18-
},
19-
[],
20-
);
15+
const isBetween = useCallback(
16+
(today: Date, startDate: string, endDate: string): boolean => {
17+
return today >= new Date(startDate) && today <= new Date(endDate);
18+
},
19+
[],
20+
);
2121

22-
const getPredicate = useCallback(
23-
() => (session: UngroupedSession) =>
24-
isBetween(today, session.startsAt, session.endsAt),
25-
[today, isBetween],
26-
);
22+
const getPredicate = useCallback(
23+
() => (session: UngroupedSession) =>
24+
isBetween(today, session.startsAt, session.endsAt),
25+
[today, isBetween],
26+
);
2727

28-
const filteredTalks = useMemo(() => {
29-
return data?.sessions?.filter(getPredicate());
30-
}, [data, getPredicate]);
28+
const filteredTalks = useMemo(() => {
29+
return data?.sessions?.filter(getPredicate());
30+
}, [data, getPredicate]);
3131

32-
useEffect(() => {
33-
document.title = `Live view - ${conference.title} - ${conference.edition} Edition`;
34-
}, []);
32+
useEffect(() => {
33+
document.title = `Live view - ${conference.title} - ${conference.edition} Edition`;
34+
}, []);
3535

36-
useEffect(() => {
37-
if (error) {
38-
Sentry.captureException(error);
39-
}
40-
}, [error]);
36+
useEffect(() => {
37+
if (error) {
38+
Sentry.captureException(error);
39+
}
40+
}, [error]);
4141

42-
return (
43-
<StyledMain>
44-
<img
45-
src="/images/logo.png"
46-
alt={conference.title}
47-
style={{width: "25%"}}
48-
/>
49-
<h1 style={{marginTop: "1rem"}}>
50-
{conference.title} - {conference.edition} Edition
51-
</h1>
42+
return (
43+
<StyledMain>
44+
<img
45+
src="/images/logo.png"
46+
alt={conference.title}
47+
style={{ width: "25%" }}
48+
/>
49+
<h1 style={{ marginTop: "1rem" }}>
50+
{conference.title} - {conference.edition} Edition
51+
</h1>
5252

53-
{isLoading && <Loading/>}
54-
<article>Live Schedule</article>
55-
{!isBetween(today, conference.startDay, conference.endDay) && (
56-
<h4>The live schedule is not ready yet</h4>
57-
)}
58-
{filteredTalks?.map((session) => (
59-
<TalkCard key={session.id} {...talkCardAdapter(session)} />
60-
))}
61-
</StyledMain>
62-
);
53+
{isLoading && <Loading />}
54+
<article>Live Schedule</article>
55+
{!isBetween(today, conference.startDay, conference.endDay) && (
56+
<h4>The live schedule is not ready yet</h4>
57+
)}
58+
{filteredTalks?.map((session) => (
59+
<TalkCard key={session.id} {...talkCardAdapter(session)} />
60+
))}
61+
</StyledMain>
62+
);
6363
};
6464

6565
export default LiveView;

0 commit comments

Comments
 (0)