Skip to content

Commit 6e8fa8e

Browse files
anyulledanyulled
committed
refactor: remove duplication on track information and talk card
1 parent ea04f17 commit 6e8fa8e

15 files changed

Lines changed: 298 additions & 332 deletions

File tree

‎src/2023/TalkDetail/TalkDetailContainer2023.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,8 @@ const TalkDetailContainer2023: FC<React.PropsWithChildren<unknown>> = () => {
2121
const { isLoading, error, data } = useFetchTalksById(id!, "2023");
2222
const { data: speakerData } = useFetchSpeakers("2023");
2323

24-
const getTalkSpeakers = (
25-
data: Session[] | undefined,
26-
): string[] | undefined => {
27-
const speakers = data?.[0]?.speakers;
24+
const getTalkSpeakers = (data: Session | undefined): string[] | undefined => {
25+
const speakers = data?.speakers;
2826
return speakers?.map((speaker) => speaker.id);
2927
};
3028

@@ -33,12 +31,10 @@ const TalkDetailContainer2023: FC<React.PropsWithChildren<unknown>> = () => {
3331
(speaker) => talkSpeakers?.includes(speaker.id),
3432
);
3533

36-
const adaptedMeeting = sessionAdapter(data?.at(0));
34+
const adaptedMeeting = sessionAdapter(data);
3735

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

4440
if (error) {

‎src/2023/Talks/Talks2023.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { Dropdown, DropdownChangeEvent } from "primereact/dropdown";
1818
import "primereact/resources/primereact.min.css";
1919
import "primereact/resources/themes/lara-light-indigo/theme.css";
2020
import "../../styles/theme.css";
21-
import TrackInformation from "../../components/Talk/TrackInformation";
21+
import TrackInformation from "../../components/common/TrackInformation";
2222

2323
interface TrackInfo {
2424
name: string;
@@ -126,7 +126,11 @@ const Talks2023: FC<React.PropsWithChildren<unknown>> = () => {
126126
/>
127127
</div>
128128
{filteredTalks.map((track) => (
129-
<TrackInformation key={track.groupId} track={track} />
129+
<TrackInformation
130+
key={track.groupId}
131+
track={track}
132+
year={conferenceData.edition}
133+
/>
130134
))}
131135
</>
132136
)}

src/2024/TalkDetail/MeetingDetailContainer.tsx renamed to src/2024/TalkDetail/MeetingDetailContainer2024.tsx

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,13 @@ import { sessionAdapter } from "../../services/sessionsAdapter";
1717
const StyledContainer = styled.div`
1818
background-color: ${Color.WHITE};
1919
`;
20-
const MeetingDetailContainer: FC<React.PropsWithChildren<unknown>> = () => {
20+
const MeetingDetailContainer2024: FC<React.PropsWithChildren<unknown>> = () => {
2121
const { id } = useParams<{ id: string }>();
2222
const { isLoading, error, data } = useFetchTalksById(id!, "2024");
2323
const { data: speakerData } = useFetchSpeakers("2024");
2424

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

@@ -34,12 +32,10 @@ const MeetingDetailContainer: FC<React.PropsWithChildren<unknown>> = () => {
3432
(speaker) => talkSpeakers?.includes(speaker.id),
3533
);
3634

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

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

4541
if (error) {
@@ -68,4 +64,4 @@ const MeetingDetailContainer: FC<React.PropsWithChildren<unknown>> = () => {
6864
);
6965
};
7066

71-
export default MeetingDetailContainer;
67+
export default MeetingDetailContainer2024;

‎src/2024/Talks/Talks2024.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import {
1919
StyledTitleIcon,
2020
StyledWaveContainer,
2121
} from "../../views/Talks/Talks.style";
22-
import TrackInformation from "../../components/Talk/TrackInformation";
22+
import TrackInformation from "../../components/common/TrackInformation";
2323

2424
interface TrackInfo {
2525
name: string;
@@ -128,7 +128,11 @@ const Talks2024: FC<React.PropsWithChildren<unknown>> = () => {
128128
/>
129129
</div>
130130
{filteredTalks.map((track) => (
131-
<TrackInformation key={track.groupId} track={track} />
131+
<TrackInformation
132+
key={track.groupId}
133+
track={track}
134+
year={conferenceData.edition}
135+
/>
132136
))}
133137
</>
134138
)

‎src/App.tsx‎

Lines changed: 59 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,52 @@
11
import { Link, Route, Routes } from "react-router";
22
import {
3-
ROUTE_2023_ATTENDEE,
4-
ROUTE_2023_CFP,
5-
ROUTE_2023_COMMUNITIES,
6-
ROUTE_2023_DIVERSITY,
7-
ROUTE_2023_HOME,
8-
ROUTE_2023_JOB_OFFERS,
9-
ROUTE_2023_SCHEDULE,
10-
ROUTE_2023_SESSION_FEEDBACK,
11-
ROUTE_2023_SPEAKER_DETAIL_PLAIN,
12-
ROUTE_2023_SPEAKER_INFO,
13-
ROUTE_2023_SPEAKERS,
14-
ROUTE_2023_TALK_DETAIL_PLAIN,
15-
ROUTE_2023_TALKS,
16-
ROUTE_2023_WORKSHOPS,
17-
ROUTE_2024_ATTENDEE,
18-
ROUTE_2024_CFP,
19-
ROUTE_2024_COMMUNITIES,
20-
ROUTE_2024_DIVERSITY,
21-
ROUTE_2024_HOME,
22-
ROUTE_2024_JOB_OFFERS,
23-
ROUTE_2024_SCHEDULE,
24-
ROUTE_2024_SESSION_FEEDBACK,
25-
ROUTE_2024_SPEAKER_DETAIL_PLAIN,
26-
ROUTE_2024_SPEAKER_INFO,
27-
ROUTE_2024_SPEAKERS,
28-
ROUTE_2024_TALK_DETAIL_PLAIN,
29-
ROUTE_2024_TALKS,
30-
ROUTE_2024_WORKSHOPS,
31-
ROUTE_ABOUT_US,
32-
ROUTE_ACCOMMODATION,
33-
ROUTE_CFP,
34-
ROUTE_CODE_OF_CONDUCT,
35-
ROUTE_CONDITIONS,
36-
ROUTE_COOKIES,
37-
ROUTE_DIVERSITY,
38-
ROUTE_HOME,
39-
ROUTE_JOB_OFFERS,
40-
ROUTE_KCD,
41-
ROUTE_MEETING_DETAIL_PLAIN,
42-
ROUTE_SCHEDULE,
43-
ROUTE_SPEAKER_DETAIL_PLAIN,
44-
ROUTE_SPEAKER_INFO,
45-
ROUTE_SPEAKERS,
46-
ROUTE_SPONSORSHIP,
47-
ROUTE_TALKS,
48-
ROUTE_TRAVEL, ROUTE_WORKSHOPS,
3+
ROUTE_2023_ATTENDEE,
4+
ROUTE_2023_CFP,
5+
ROUTE_2023_COMMUNITIES,
6+
ROUTE_2023_DIVERSITY,
7+
ROUTE_2023_HOME,
8+
ROUTE_2023_JOB_OFFERS,
9+
ROUTE_2023_SCHEDULE,
10+
ROUTE_2023_SESSION_FEEDBACK,
11+
ROUTE_2023_SPEAKER_DETAIL_PLAIN,
12+
ROUTE_2023_SPEAKER_INFO,
13+
ROUTE_2023_SPEAKERS,
14+
ROUTE_2023_TALK_DETAIL_PLAIN,
15+
ROUTE_2023_TALKS,
16+
ROUTE_2023_WORKSHOPS,
17+
ROUTE_2024_ATTENDEE,
18+
ROUTE_2024_CFP,
19+
ROUTE_2024_COMMUNITIES,
20+
ROUTE_2024_DIVERSITY,
21+
ROUTE_2024_HOME,
22+
ROUTE_2024_JOB_OFFERS,
23+
ROUTE_2024_SCHEDULE,
24+
ROUTE_2024_SESSION_FEEDBACK,
25+
ROUTE_2024_SPEAKER_DETAIL_PLAIN,
26+
ROUTE_2024_SPEAKER_INFO,
27+
ROUTE_2024_SPEAKERS,
28+
ROUTE_2024_TALK_DETAIL_PLAIN,
29+
ROUTE_2024_TALKS,
30+
ROUTE_2024_WORKSHOPS,
31+
ROUTE_ABOUT_US,
32+
ROUTE_ACCOMMODATION,
33+
ROUTE_CFP,
34+
ROUTE_CODE_OF_CONDUCT,
35+
ROUTE_CONDITIONS,
36+
ROUTE_COOKIES,
37+
ROUTE_DIVERSITY,
38+
ROUTE_HOME,
39+
ROUTE_JOB_OFFERS,
40+
ROUTE_KCD,
41+
ROUTE_MEETING_DETAIL_PLAIN,
42+
ROUTE_SCHEDULE,
43+
ROUTE_SPEAKER_DETAIL_PLAIN,
44+
ROUTE_SPEAKER_INFO,
45+
ROUTE_SPEAKERS,
46+
ROUTE_SPONSORSHIP,
47+
ROUTE_TALKS,
48+
ROUTE_TRAVEL,
49+
ROUTE_WORKSHOPS,
4950
} from "./constants/routes";
5051

5152
import Footer from "./components/Footer/Footer";
@@ -93,12 +94,13 @@ import JobOffers from "./views/JobOffers/JobOffers";
9394
import { HomeWrapper2024 } from "./2024/HomeWrapper2024";
9495
import Speakers2024 from "./2024/Speakers/Speakers2024";
9596
import Talks2024 from "./2024/Talks/Talks2024";
96-
import TalkDetailContainer2024 from "./views/MeetingDetail/TalkDetailContainer2024";
97+
import TalkDetailContainer from "./views/MeetingDetail/TalkDetailContainer";
9798
import SpeakerDetailContainer2024 from "./2024/SpeakerDetail/SpeakerDetailContainer2024";
9899
import CfpSection2024 from "./2024/Cfp/CfpSection2024";
99100
import Workshops from "./views/Workshops/Workshops";
100101
import Schedule2024 from "./2024/Schedule/Schedule2024";
101102
import JobOffers2024 from "./2024/JobOffers/JobOffers2024";
103+
import MeetingDetailContainer2024 from "./2024/TalkDetail/MeetingDetailContainer2024";
102104

103105
const StyledAppWrapper = styled.div`
104106
position: relative;
@@ -149,14 +151,14 @@ const App: FC<React.PropsWithChildren<unknown>> = () => {
149151
</React.Suspense>
150152
}
151153
/>
152-
<Route
153-
path={ROUTE_WORKSHOPS}
154-
element={
155-
<React.Suspense fallback={<Loading />}>
156-
<Workshops/>
157-
</React.Suspense>
158-
}
159-
/>
154+
<Route
155+
path={ROUTE_WORKSHOPS}
156+
element={
157+
<React.Suspense fallback={<Loading />}>
158+
<Workshops />
159+
</React.Suspense>
160+
}
161+
/>
160162
{/*<Route path={ROUTE_SESSION_FEEDBACK} element={<React.Suspense fallback={<Loading />}>
161163
<SessionFeedback />
162164
</React.Suspense>} />*/}
@@ -279,7 +281,7 @@ const App: FC<React.PropsWithChildren<unknown>> = () => {
279281
path={ROUTE_MEETING_DETAIL_PLAIN}
280282
element={
281283
<React.Suspense fallback={<Loading />}>
282-
<TalkDetailContainer2024 />
284+
<TalkDetailContainer />
283285
</React.Suspense>
284286
}
285287
/>
@@ -432,7 +434,7 @@ const App: FC<React.PropsWithChildren<unknown>> = () => {
432434
path={ROUTE_2024_TALK_DETAIL_PLAIN}
433435
element={
434436
<React.Suspense fallback={<Loading />}>
435-
<TalkDetailContainer2024 />
437+
<MeetingDetailContainer2024 />
436438
</React.Suspense>
437439
}
438440
/>

‎src/components/Talk/TalkCard.tsx‎

Lines changed: 7 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,10 @@
1-
import React, {FC} from "react";
2-
import {Link} from "react-router";
3-
import {Tag} from "../Tag/Tag";
4-
import {
5-
ROUTE_2024_SPEAKER_DETAIL,
6-
ROUTE_2024_TALK_DETAIL,
7-
} from "../../constants/routes";
8-
import {Color} from "../../styles/colors";
9-
import {StyledJobsInfo} from "../JobOffers/JobsCard";
10-
import {
11-
StyledSessionCard,
12-
StyledSessionText,
13-
StyledTagsWrapper,
14-
StyledTalkSpeaker,
15-
StyledTalkTitle
16-
} from "../../views/Talks/Talks.style";
17-
import {StyledVoteTalkLink} from "../../views/MeetingDetail/MeetingDetail";
18-
import {
19-
extractSessionCategoryInfo,
20-
extractSessionTags
21-
} from "../../services/sessionsAdapter";
22-
import {
23-
CategoryItemEnum,
24-
QuestionAnswers,
25-
SessionCategory,
26-
SessionSpeaker
27-
} from "../../types/sessions";
1+
import React from "react";
2+
import CommonTalkCard, { TalkCardProps } from "../common/TalkCard";
283

29-
export interface TalkCardProps {
30-
talk: {
31-
id: number;
32-
title: string;
33-
talkImage?: number;
34-
speakers: SessionSpeaker[];
35-
level?: string;
36-
link?: string;
37-
tags?: string[];
38-
track: string;
39-
categories: SessionCategory[];
40-
questionAnswers: QuestionAnswers[];
41-
};
42-
showTrack?: boolean;
43-
}
4+
export type { TalkCardProps };
445

45-
export const TalkCard: FC<React.PropsWithChildren<TalkCardProps>> = ({
46-
showTrack = false,
47-
talk,
48-
}) => {
49-
return (
50-
<StyledSessionCard>
51-
<StyledJobsInfo>
52-
<StyledTalkTitle to={`${ROUTE_2024_TALK_DETAIL}/${talk.id}`}>
53-
{talk.title}
54-
</StyledTalkTitle>
55-
<StyledSessionText>
56-
{talk.speakers.map((speaker: SessionSpeaker) => (
57-
<StyledTalkSpeaker key={speaker.id}>
58-
<Link
59-
to={`${ROUTE_2024_SPEAKER_DETAIL}/${speaker.id}`}>
60-
{speaker.name}
61-
</Link>
62-
</StyledTalkSpeaker>
63-
))}
64-
</StyledSessionText>
65-
<StyledSessionText>
66-
{`${extractSessionCategoryInfo(
67-
talk.categories,
68-
CategoryItemEnum.Format,
69-
)} `}
70-
{extractSessionCategoryInfo(talk.categories)}{" "}
71-
</StyledSessionText>
72-
{showTrack && (
73-
<StyledSessionText>
74-
<strong>Track: </strong>
75-
{extractSessionCategoryInfo(
76-
talk.categories,
77-
CategoryItemEnum.Track,
78-
)}
79-
</StyledSessionText>
80-
)}
81-
<StyledTagsWrapper>
82-
{extractSessionTags(talk.questionAnswers)?.map((tag) => {
83-
return <Tag key={tag} text={tag}
84-
textColor={Color.WHITE}/>;
85-
})}
86-
</StyledTagsWrapper>
87-
<section style={{display: "none"}}>
88-
<StyledVoteTalkLink
89-
href={`https://openfeedback.io/devbcn24/0/${talk.id}`}
90-
target={"_blank"}
91-
rel="noreferrer noopener"
92-
>
93-
🗳️ <strong>Vote this talk</strong>
94-
</StyledVoteTalkLink>
95-
</section>
96-
</StyledJobsInfo>
97-
</StyledSessionCard>
98-
);
6+
export const TalkCard: React.FC<React.PropsWithChildren<TalkCardProps>> = (
7+
props,
8+
) => {
9+
return <CommonTalkCard {...props} />;
9910
};

0 commit comments

Comments
 (0)