Skip to content

Commit 1b22a71

Browse files
anyulledanyulled
committed
fix: fix hardcoded CFP
1 parent 6f7c70b commit 1b22a71

File tree

8 files changed

+445
-214
lines changed

8 files changed

+445
-214
lines changed

‎src/2024/Cfp/Cfp.style.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import styled from "styled-components";
2+
import { Color } from "../../styles/colors";
3+
4+
export const TrackName = styled.h2`
5+
padding-top: 1.2rem;
6+
padding-bottom: 0.8rem;
7+
font-size: 1.5rem;
8+
color: ${Color.DARK_BLUE};
9+
`;
10+
export const MemberName = styled.h5`
11+
font-size: 0.8rem;
12+
color: ${Color.DARK_BLUE};
13+
text-align: left;
14+
`;

‎src/2024/Cfp/CfpData.ts‎

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
interface CFpTrack {
2+
id: string;
3+
name: string;
4+
members: CfpMember[];
5+
}
6+
7+
interface CfpMember {
8+
name: string;
9+
photo?: string;
10+
linkedIn?: string;
11+
twitter?: string;
12+
}
13+
14+
export const data: CFpTrack[] = [
15+
{
16+
name: "Java & JVM",
17+
id: "656fece2-9447-4dbe-8a78-8dc6aa7124f2",
18+
members: [
19+
{
20+
name: "Ana Maria Mihalceanu",
21+
photo:
22+
"https://sessionize.com/image/076f-400o400o2-Lawur2AKGny32MmkpG69jQ.JPG",
23+
twitter: "https://twitter.com/ammbra1508",
24+
linkedIn: "https://www.linkedin.com/in/ana-maria-mihalceanu-1508",
25+
},
26+
{
27+
name: "David Gomez G.",
28+
photo:
29+
"https://sessionize.com/image/0c32-400o400o2-DP6mds9ahD7Qz7P5zWwcjy.jpg",
30+
twitter: "https://twitter.com/dgomezg",
31+
linkedIn: "https://www.linkedin.com/in/dgomezg",
32+
},
33+
{
34+
name: "Grace Jansen",
35+
photo: "images/cfp/grace.png",
36+
twitter: "https://twitter.com/gracejansen27",
37+
linkedIn: "https://www.linkedin.com/in/grace-jansen",
38+
},
39+
{
40+
name: "Ixchel Ruiz",
41+
photo: "images/cfp/ixchel.png",
42+
twitter: "https://twitter.com/ixchelruiz",
43+
linkedIn: "https://www.linkedin.com/in/ixchelruiz",
44+
},
45+
],
46+
},
47+
{
48+
name: "Frontend",
49+
id: "2684b568-2836-4713-99af-643f8a4d7972",
50+
members: [
51+
{
52+
name: "Iago Lastra",
53+
photo: "images/cfp/iago.png",
54+
twitter: "https://twitter.com/iagolast",
55+
linkedIn: "https://www.linkedin.com/in/iagolast/",
56+
},
57+
{
58+
name: "Laura Rodriguez Castillo",
59+
photo: "images/cfp/laura.jpeg",
60+
twitter: "https://twitter.com/superpensando",
61+
linkedIn: "https://linkedin.com/in/laurarodriguezcastillo",
62+
},
63+
{
64+
name: "Carles Nuñez",
65+
twitter: "https://twitter.com/carlesnunez",
66+
linkedIn: "https://www.linkedin.com/in/carles-nunez-tomeo/",
67+
photo: "images/cfp/carles_nunez.jpg",
68+
},
69+
{
70+
name: "Phil Nash",
71+
linkedIn: "https://www.linkedin.com/in/philnash/",
72+
},
73+
],
74+
},
75+
{
76+
name: "AI, ML, Python",
77+
id: "c1ec728d-03c1-4d8d-9f56-637bc97f5a5b",
78+
members: [
79+
{
80+
name: "Carmen Herrero",
81+
linkedIn: "https://www.linkedin.com/in/carherrero/",
82+
photo: "images/cfp/carmen_herrero.jpg",
83+
},
84+
{
85+
name: "Elena Tajadura",
86+
photo: "images/cfp/elena_tajadura.jpeg",
87+
linkedIn:
88+
"https://www.linkedin.com/in/elena-tajadura-jim%C3%A9nez-9300a943/",
89+
},
90+
{
91+
name: "Javier Menendez",
92+
linkedIn: "https://www.linkedin.com/in/jamepa/",
93+
},
94+
],
95+
},
96+
{
97+
name: "DevOps, Cloud, Kubernetes",
98+
id: "504cf03b-130d-4b70-a98c-c4faeb553b5e",
99+
members: [
100+
{
101+
name: "Almudena Vivanco",
102+
linkedIn: "https://www.linkedin.com/in/almudenavivanco/",
103+
},
104+
{
105+
name: "Ana Carmona",
106+
photo: "images/cfp/ana_carmona.jpg",
107+
twitter: "https://twitter.com/nhan_bcn",
108+
linkedIn:
109+
"https://www.linkedin.com/in/ana-carmona-ag?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app",
110+
},
111+
{
112+
name: "Christian Polanco",
113+
linkedIn: "https://www.linkedin.com/in/chrsalx/",
114+
twitter: "https://twitter.com/chrsalx",
115+
photo: "images/cfp/christian-polanco.jpg",
116+
},
117+
{
118+
name: "David Ricordel",
119+
linkedIn: "https://www.linkedin.com/in/davidricordel/",
120+
},
121+
{
122+
name: "Jose Adan Ortiz",
123+
photo: "images/cfp/jose-adan-ortiz-k8s-2024.JPG",
124+
twitter: "https://twitter.com/joseadanof",
125+
linkedIn: "https://www.linkedin.com/in/joseadan/",
126+
},
127+
{
128+
name: "Pablo Chacin",
129+
photo: "images/cfp/pablo_chacin.jpeg",
130+
twitter: "https://twitter.com/pablochacin",
131+
linkedIn: "https://www.linkedin.com/in/pablochacin/",
132+
},
133+
{
134+
name: "Rael Garcia",
135+
linkedIn: "https://www.linkedin.com/in/rael/",
136+
},
137+
{
138+
name: "Imma Valls",
139+
photo: "images/cfp/imma-valls.jpg",
140+
twitter: "https://twitter.com/eyeveebee",
141+
linkedIn: "https://www.linkedin.com/in/imma-valls",
142+
},
143+
],
144+
},
145+
{
146+
name: "Agile, Leadership, Diversity",
147+
id: "1d04d5bf-4b94-4e56-b0c6-ee93b3bb8c1f",
148+
members: [
149+
{
150+
name: "Elena Navarro",
151+
linkedIn: "https://www.linkedin.com/in/elena-navarro-molina",
152+
},
153+
{
154+
name: "Jaume Jornet",
155+
linkedIn: "https://www.linkedin.com/in/jaumejornet/",
156+
photo: "images/cfp/jaume-jornet.jpg",
157+
twitter: "https://twitter.com/jaumejornet",
158+
},
159+
{
160+
name: "Julio César Pérez",
161+
photo: "images/cfp/julio_cesar.jpg",
162+
linkedIn: "https://www.linkedin.com/in/juliocesarperezarques/",
163+
twitter: "https://twitter.com/jcesarperez",
164+
},
165+
{
166+
name: "Toni Tassani",
167+
photo: "images/cfp/toni.jpg",
168+
twitter: "https://twitter.com/atassani",
169+
linkedIn: "https://www.linkedin.com/in/tonitassani/en",
170+
},
171+
],
172+
},
173+
];
174+
175+
export interface CfpTrackProps {
176+
track: CFpTrack;
177+
}

‎src/2024/Cfp/CfpSection.test.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from "react";
2+
import { render, screen } from "@testing-library/react";
3+
import "@testing-library/jest-dom";
4+
import CfpSection2024 from "./CfpSection2024";
5+
import conferenceData from "../../data/2024.json";
6+
import { data } from "./CfpData";
7+
8+
describe("CfpSection", () => {
9+
it("sets document title on mount", () => {
10+
render(<CfpSection2024 />);
11+
expect(document.title).toBe(
12+
`CFP Committee — ${conferenceData.title}— ${conferenceData.edition}`,
13+
);
14+
});
15+
16+
it("renders TitleSection with correct props", () => {
17+
render(<CfpSection2024 />);
18+
expect(screen.getByText(/CFP Committee/)).toBeInTheDocument();
19+
expect(screen.getByText(/We're excited to announce/)).toBeInTheDocument();
20+
});
21+
22+
it("renders a CfpTrackComponent for each track in data", () => {
23+
render(<CfpSection2024 />);
24+
data.forEach((track) => {
25+
expect(screen.getByText(track.name)).toBeInTheDocument();
26+
});
27+
});
28+
});

‎src/2024/Cfp/CfpSection2024.tsx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import React, { FC } from "react";
2+
import SectionWrapper from "../../components/SectionWrapper/SectionWrapper";
3+
import { Color } from "../../styles/colors";
4+
import {
5+
StyledLessIcon,
6+
StyledMoreIcon,
7+
StyledSpeakersSection,
8+
} from "../Speakers/Speakers.style";
9+
import TitleSection from "../../components/SectionTitle/TitleSection";
10+
import { MOBILE_BREAKPOINT } from "../../constants/BreakPoints";
11+
import MoreThanBlueWhiteIcon from "../../assets/images/MoreThanBlueWhiteIcon.svg";
12+
import LessThanBlueWhiteIcon from "../../assets/images/LessThanBlueWhiteIcon.svg";
13+
import { useWindowSize } from "react-use";
14+
import TwitterIcon from "../../components/Icons/Twitter";
15+
import LinkedinIcon from "../../components/Icons/Linkedin";
16+
17+
import conferenceData from "../../data/2024.json";
18+
import { CfpTrackProps, data } from "./CfpData";
19+
import { MemberName, TrackName } from "./Cfp.style";
20+
import {
21+
StyledAboutImage,
22+
StyledSocialIconsWrapper
23+
} from "../../views/About/components/Style.AboutCard";
24+
25+
export const CfpTrackComponent: FC<React.PropsWithChildren<CfpTrackProps>> = ({
26+
track,
27+
}) => (
28+
<>
29+
<section>
30+
<TrackName>{track.name}</TrackName>
31+
</section>
32+
<div style={{ display: "flex", margin: "1rem auto", maxWidth: "80%" }}>
33+
{track.members.map((member) => {
34+
return (
35+
<article key={member.name} data-testid={member.name}>
36+
{member.photo && (
37+
<div>
38+
<StyledAboutImage src={member.photo} alt={member.name} />
39+
<MemberName>{member.name}</MemberName>
40+
<StyledSocialIconsWrapper>
41+
{member.twitter && (
42+
<TwitterIcon
43+
color={Color.BLUE}
44+
twitterUrl={member.twitter}
45+
/>
46+
)}
47+
{member.linkedIn && (
48+
<LinkedinIcon
49+
color={Color.BLUE}
50+
linkedinUrl={member.linkedIn}
51+
/>
52+
)}
53+
</StyledSocialIconsWrapper>
54+
</div>
55+
)}
56+
</article>
57+
);
58+
})}
59+
</div>
60+
</>
61+
);
62+
63+
const CfpSection2024: FC<React.PropsWithChildren<unknown>> = () => {
64+
const { width } = useWindowSize();
65+
React.useEffect(() => {
66+
document.title = `CFP Committee — ${conferenceData.title} — ${conferenceData.edition}`;
67+
}, []);
68+
return (
69+
<>
70+
<SectionWrapper color={Color.WHITE} marginTop={5}>
71+
<StyledSpeakersSection>
72+
<TitleSection
73+
title="CFP Committee"
74+
subtitle="We're excited to announce the members of the Call for Papers committee
75+
for the next DevBcn conference! These experienced professionals will
76+
be reviewing and selecting the best talks and workshops for the
77+
upcoming event."
78+
color={Color.BLUE}
79+
/>
80+
{width > MOBILE_BREAKPOINT && (
81+
<>
82+
<StyledLessIcon src={MoreThanBlueWhiteIcon} />
83+
<StyledMoreIcon src={LessThanBlueWhiteIcon} />
84+
</>
85+
)}
86+
</StyledSpeakersSection>
87+
{data.map((track) => (
88+
<CfpTrackComponent key={track.id} track={track} />
89+
))}
90+
</SectionWrapper>
91+
<div style={{ height: "350px" }}>&nbsp;</div>
92+
</>
93+
);
94+
};
95+
96+
export default CfpSection2024;

‎src/2024/Cfp/TrackComponent.test.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from "react";
2+
import { render, screen } from "@testing-library/react";
3+
import "@testing-library/jest-dom";
4+
import { CfpTrackComponent } from "./CfpSection2024";
5+
import { data } from "./CfpData";
6+
7+
data.forEach((track, index) => {
8+
describe(`CfpTrackComponent with track ${index}`, () => {
9+
it("renders track name", () => {
10+
render(<CfpTrackComponent track={track} />);
11+
expect(screen.getByText(track.name)).toBeInTheDocument();
12+
});
13+
14+
track.members.forEach((member) => {
15+
if (member.photo) {
16+
it(`renders member ${member.name} with photo and social icons`, () => {
17+
render(<CfpTrackComponent track={track} />);
18+
expect(screen.getByAltText(member.name)).toHaveAttribute(
19+
"src",
20+
member.photo,
21+
);
22+
expect(screen.getByText(member.name)).toBeInTheDocument();
23+
24+
const section = screen.getByTestId(member.name);
25+
if (member.twitter) {
26+
expect(
27+
section.querySelector("[data-icon='twitter-icon']"),
28+
).toBeInTheDocument();
29+
}
30+
if (member.linkedIn) {
31+
expect(
32+
section.querySelector("[data-icon='linkedin-icon']"),
33+
).toBeInTheDocument();
34+
}
35+
});
36+
}
37+
});
38+
});
39+
});

‎src/App.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ import TalkDetailContainer2024
9999
from "./views/MeetingDetail/TalkDetailContainer2024";
100100
import SpeakerDetailContainer2024
101101
from "./2024/SpeakerDetail/SpeakerDetailContainer2024";
102+
import CfpSection2024 from "./2024/Cfp/CfpSection2024";
102103

103104
const StyledAppWrapper = styled.div`
104105
position: relative;
@@ -373,7 +374,7 @@ const App: FC<React.PropsWithChildren<unknown>> = () => {
373374
path={ROUTE_2024_CFP}
374375
element={
375376
<React.Suspense fallback={<Loading/>}>
376-
<CfpSection2023/>
377+
<CfpSection2024/>
377378
</React.Suspense>
378379
}
379380
/>

0 commit comments

Comments
 (0)