Skip to content

Commit ab8a1dc

Browse files
anyulledanyulled
committed
refactor(home): optimize layout and improve code readability
1 parent 8b9c82b commit ab8a1dc

File tree

3 files changed

+135
-157
lines changed

3 files changed

+135
-157
lines changed

‎public/images/devBcn-sponsorship.png

723 Bytes
Loading

‎src/views/Home/HomeWrapper.tsx

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,49 @@
1-
import {BIG_BREAKPOINT} from "../../constants/BreakPoints";
2-
import React, {FC} from "react";
1+
import { BIG_BREAKPOINT } from "../../constants/BreakPoints";
2+
import React, { FC } from "react";
33
import Faqs from "./components/Faqs/Faqs";
44
import Home from "./components/Home/Home";
55
import Sponsors from "./components/Sponsors/Sponsors";
66
import styled from "styled-components";
77
import conferenceData from "../../data/2025.json";
8-
import {useLocation} from "react-router";
8+
import { useLocation } from "react-router";
99

1010
import SpeakersCarousel from "../../components/Swiper/SpeakersCarousel";
11-
import {ROUTE_SPEAKERS} from "../../constants/routes";
12-
import {useDocumentTitleUpdater} from "../../hooks/useDocumentTitleUpdate";
11+
import { ROUTE_SPEAKERS } from "../../constants/routes";
12+
import { useDocumentTitleUpdater } from "../../hooks/useDocumentTitleUpdate";
1313

1414
const StyledContainer = styled.div`
15-
padding-bottom: 10rem;
15+
padding-bottom: 10rem;
1616
17-
@media only screen and (max-width: ${BIG_BREAKPOINT}px) {
18-
padding-bottom: 20rem;
19-
}
17+
@media only screen and (max-width: ${BIG_BREAKPOINT}px) {
18+
padding-bottom: 20rem;
19+
}
2020
`;
2121

2222
const HomeWrapper: FC<React.PropsWithChildren<unknown>> = () => {
23-
const {hash} = useLocation();
24-
25-
React.useEffect(() => {
26-
if (hash != null && hash !== "") {
27-
const scroll = document.getElementById(hash.substring(1));
28-
scroll?.scrollIntoView();
29-
}
30-
}, [hash]);
31-
32-
useDocumentTitleUpdater("Home", conferenceData?.edition ?? "2025");
33-
34-
return (
35-
<StyledContainer id="home-wrapper">
36-
<Home/>
37-
<Faqs/>
38-
{conferenceData?.carrousel.enabled && (
39-
<SpeakersCarousel
40-
sessionizeUrl={conferenceData.sessionizeUrl}
41-
speakersLink={ROUTE_SPEAKERS}
42-
/>
43-
)}
44-
<Sponsors/>
45-
</StyledContainer>
46-
);
23+
const { hash } = useLocation();
24+
25+
React.useEffect(() => {
26+
if (hash != null && hash !== "") {
27+
const scroll = document.getElementById(hash.substring(1));
28+
scroll?.scrollIntoView();
29+
}
30+
}, [hash]);
31+
32+
useDocumentTitleUpdater("Home", conferenceData?.edition ?? "2025");
33+
34+
return (
35+
<StyledContainer id="home-wrapper">
36+
<Home />
37+
{conferenceData?.carrousel.enabled && (
38+
<SpeakersCarousel
39+
sessionizeUrl={conferenceData.sessionizeUrl}
40+
speakersLink={ROUTE_SPEAKERS}
41+
/>
42+
)}
43+
<Sponsors />
44+
<Faqs />
45+
</StyledContainer>
46+
);
4747
};
4848

4949
export default HomeWrapper;

‎src/views/Home/components/Home/Home.tsx

Lines changed: 102 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -1,140 +1,118 @@
11
import Countdown from "react-countdown";
2-
import React, {FC} from "react";
2+
import React, { FC } from "react";
33
import LessThanIcon from "../../../../assets/images/MoreThanBlueWhiteIcon.svg";
4-
import SectionWrapper
5-
from "../../../../components/SectionWrapper/SectionWrapper";
6-
import {BIGGER_BREAKPOINT} from "../../../../constants/BreakPoints";
4+
import SectionWrapper from "../../../../components/SectionWrapper/SectionWrapper";
5+
import { BIGGER_BREAKPOINT } from "../../../../constants/BreakPoints";
76
import TimeCountDown from "./components/TimeCountdown";
8-
import {useWindowSize} from "react-use";
7+
import { useWindowSize } from "react-use";
98
import {
10-
StyledBlueSlash,
11-
StyledBottomSlash,
12-
StyledDevBcnLogo,
13-
StyledGreenSlash,
14-
StyledHomeImage,
15-
StyledLessThan,
16-
StyledLogoDiv,
17-
StyledSubtitle,
18-
StyledTitle,
19-
StyledTitleContainer,
20-
StyledTopSlash,
21-
StyleHomeContainer,
9+
StyledBlueSlash,
10+
StyledBottomSlash,
11+
StyledDevBcnLogo,
12+
StyledGreenSlash,
13+
StyledHomeImage,
14+
StyledLessThan,
15+
StyledLogoDiv,
16+
StyledSubtitle,
17+
StyledTitle,
18+
StyledTitleContainer,
19+
StyledTopSlash,
20+
StyleHomeContainer,
2221
} from "./Style.Home";
2322
import ActionButtons from "../ActionButtons/ActionButtons";
24-
import {Color} from "../../../../styles/colors";
23+
import { Color } from "../../../../styles/colors";
2524
import InfoButtons from "../InfoButtons/InfoButtons";
26-
import {formatDateRange} from "./DateUtil";
27-
import {Link} from "react-router";
25+
import { formatDateRange } from "./DateUtil";
26+
import { Link } from "react-router";
2827
import edition from "../../../../data/2025.json";
2928
import CountDownCompleted from "./components/CountDownCompleted";
3029

3130
const Home: FC<React.PropsWithChildren<unknown>> = () => {
32-
const {width} = useWindowSize();
31+
const { width } = useWindowSize();
3332

34-
return (
35-
<StyledHomeImage>
36-
<SectionWrapper color="transparent">
37-
<StyleHomeContainer>
38-
<StyledLogoDiv>
39-
<StyledDevBcnLogo src="images/logo.png"
40-
alt="DevBcn logo"/>
41-
</StyledLogoDiv>
42-
<StyledTitleContainer>
43-
<StyledTitle>
44-
The Barcelona Developers
45-
Conference {edition?.edition}
46-
</StyledTitle>
47-
<StyledSubtitle>
48-
Former{" "}
49-
<a
50-
href="https://www.jbcnconf.com/2022/"
51-
target="_blank"
52-
rel="noreferrer"
53-
>
54-
JBCNConf
55-
</a>{" "}
56-
</StyledSubtitle>
57-
<StyledSubtitle>
58-
Multidisciplinary conference made for Developers and
59-
by
60-
Developers, to learn and share on the different
61-
modern software
62-
technologies used across the companies
63-
</StyledSubtitle>
64-
<StyledSubtitle>
65-
<small>
66-
Past events: <Link to="/2024">2024
67-
edition</Link>{" "}| <Link to="/2023">2023
68-
edition</Link>
69-
</small>
70-
</StyledSubtitle>
71-
</StyledTitleContainer>
72-
<StyledTitleContainer color={Color.LIGHT_BLUE}>
73-
<StyledSubtitle color={Color.DARK_BLUE}>
74-
{edition?.startDay &&
75-
edition.endDay &&
76-
formatDateRange(
77-
new Date(edition.startDay),
78-
new Date(edition.endDay),
79-
)}
80-
</StyledSubtitle>
81-
<StyledSubtitle color={Color.DARK_BLUE}>
82-
La Farga, Hospitalet, Barcelona
83-
</StyledSubtitle>
84-
</StyledTitleContainer>
85-
<img src="/images/devBcn-sponsorship.png"
86-
alt="DevBcn sponsorship value" width="657"
87-
height="155" style={{aspectRatio:"657:155", maxWidth:"100%"}}/>
88-
<StyledTitleContainer color={Color.DARK_BLUE}>
89-
<StyledSubtitle>
90-
{edition?.trackNumber} tracks with the following
91-
topics: <br/>
92-
{edition?.tracks}
93-
</StyledSubtitle>
94-
</StyledTitleContainer>
95-
<Countdown date={edition?.startDay}
96-
onComplete={CountDownCompleted}
97-
renderer={TimeCountDown}/>
98-
{edition?.actionButtons && <ActionButtons/>}
99-
{edition?.showInfoButtons && <InfoButtons/>}
33+
return (
34+
<StyledHomeImage>
35+
<SectionWrapper color="transparent">
36+
<StyleHomeContainer>
37+
<StyledLogoDiv>
38+
<StyledDevBcnLogo src="images/logo.png" alt="DevBcn logo" />
39+
</StyledLogoDiv>
40+
<StyledTitleContainer>
41+
<StyledTitle>
42+
The Barcelona Developers Conference {edition?.edition}
43+
</StyledTitle>
44+
<StyledSubtitle>
45+
{edition?.trackNumber} tracks with the following topics: <br />
46+
{edition?.tracks}
47+
</StyledSubtitle>
48+
<StyledSubtitle>
49+
<small>
50+
Past events: <Link to="/2024">2024 edition</Link> |{" "}
51+
<Link to="/2023">2023 edition</Link>
52+
</small>
53+
</StyledSubtitle>
54+
</StyledTitleContainer>
55+
<img
56+
src="/images/devBcn-sponsorship.png"
57+
alt="DevBcn sponsorship value"
58+
width="635"
59+
height="125"
60+
style={{ aspectRatio: "127:25", maxWidth: "100%" }}
61+
/>
62+
<StyledTitleContainer color={Color.LIGHT_BLUE}>
63+
<StyledSubtitle color={Color.DARK_BLUE}>
64+
{edition?.startDay &&
65+
edition.endDay &&
66+
formatDateRange(
67+
new Date(edition.startDay),
68+
new Date(edition.endDay),
69+
)}
70+
</StyledSubtitle>
71+
<StyledSubtitle color={Color.DARK_BLUE}>
72+
La Farga, Hospitalet, Barcelona
73+
</StyledSubtitle>
74+
</StyledTitleContainer>
75+
<Countdown
76+
date={edition?.startDay}
77+
onComplete={CountDownCompleted}
78+
renderer={TimeCountDown}
79+
/>
80+
{edition?.actionButtons && <ActionButtons />}
81+
{edition?.showInfoButtons && <InfoButtons />}
10082

101-
{width > BIGGER_BREAKPOINT && (
102-
<StyledLessThan alt="Icon" src={LessThanIcon}/>
103-
)}
104-
{width > BIGGER_BREAKPOINT && (
105-
<StyledTopSlash
106-
initial={{x: "100%"}}
107-
animate={{x: 0}}
108-
transition={{duration: 4}}
109-
>
110-
<StyledGreenSlash>
111-
/ / / / / / / / / / / / / / / / / / / / / / / /
112-
/ / / / / / / /
113-
/ / / / / / / / / / / / / / / / / / / / / / / /
114-
/ / / / / / / /
115-
/ /{" "}
116-
</StyledGreenSlash>
117-
</StyledTopSlash>
118-
)}
119-
<StyledBottomSlash
120-
initial={{x: "-100%"}}
121-
animate={{x: 0}}
122-
transition={{duration: 6}}
123-
>
124-
{width > BIGGER_BREAKPOINT && (
125-
<StyledBlueSlash>
126-
/ / / / / / / / / / / / / / / / / / / / / / / /
127-
/ / / / / / / /
128-
/ / / / / / / / / / / / / / / / / / / / / / / /
129-
/ / / / / / / /
130-
/ /{" "}
131-
</StyledBlueSlash>
132-
)}
133-
</StyledBottomSlash>
134-
</StyleHomeContainer>
135-
</SectionWrapper>
136-
</StyledHomeImage>
137-
);
83+
{width > BIGGER_BREAKPOINT && (
84+
<StyledLessThan alt="Icon" src={LessThanIcon} />
85+
)}
86+
{width > BIGGER_BREAKPOINT && (
87+
<StyledTopSlash
88+
initial={{ x: "100%" }}
89+
animate={{ x: 0 }}
90+
transition={{ duration: 4 }}
91+
>
92+
<StyledGreenSlash>
93+
/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /
94+
/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /
95+
/ /{" "}
96+
</StyledGreenSlash>
97+
</StyledTopSlash>
98+
)}
99+
<StyledBottomSlash
100+
initial={{ x: "-100%" }}
101+
animate={{ x: 0 }}
102+
transition={{ duration: 6 }}
103+
>
104+
{width > BIGGER_BREAKPOINT && (
105+
<StyledBlueSlash>
106+
/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /
107+
/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /
108+
/ /{" "}
109+
</StyledBlueSlash>
110+
)}
111+
</StyledBottomSlash>
112+
</StyleHomeContainer>
113+
</SectionWrapper>
114+
</StyledHomeImage>
115+
);
138116
};
139117

140118
export default Home;

0 commit comments

Comments
 (0)