Skip to content

Commit 98a3ad4

Browse files
saurabhraghuvanshiisaurabhraghuvanshii
authored
Merge pull request #7621 from AnkitRewar11/fix/event-page-performance
Improve Event page Performance
2 parents 9166fdd + a41a1f1 commit 98a3ad4

3 files changed

Lines changed: 137 additions & 66 deletions

File tree

‎src/components/Card/index.js‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ const Card = ({
1313
fetchpriority = "auto",
1414
}) => {
1515
const { isDark } = useStyledDarkMode();
16-
1716
return (
1817
<CardWrapper fixed={!!frontmatter.abstract}>
1918
<div className="post-block">
@@ -53,21 +52,30 @@ const Card = ({
5352
<div className="readmore-btn-wrapper">
5453
{fields && fields.slug && frontmatter.eurl && (
5554
<>
56-
<Link className="readmore-btn" to={fields.slug}>
55+
<Link
56+
className="readmore-btn"
57+
to={fields.slug}
58+
aria-label={`See more about ${frontmatter.title}`}
59+
>
5760
see more <IoIosArrowRoundForward />
5861
</Link>
5962
<a
6063
className="external-link-btn"
6164
href={frontmatter.eurl}
6265
target="_blank"
63-
rel="noreferrer oopener"
66+
rel="noreferrer noopener"
67+
aria-label={`Visit external link for ${frontmatter.title}`}
6468
>
6569
<BiLinkExternal />
6670
</a>
6771
</>
6872
)}
6973
{fields && fields.slug && !frontmatter.eurl && (
70-
<Link className="readmore-btn" to={fields.slug}>
74+
<Link
75+
className="readmore-btn"
76+
to={fields.slug}
77+
aria-label={`See more about ${frontmatter.title}`}
78+
>
7179
see more <IoIosArrowRoundForward />
7280
</Link>
7381
)}
@@ -76,7 +84,8 @@ const Card = ({
7684
className="external-link-btn"
7785
href={frontmatter.eurl}
7886
target="_blank"
79-
rel="noreferrer"
87+
rel="noreferrer noopener"
88+
aria-label={`Visit external link for ${frontmatter.title}`}
8089
>
8190
<BiLinkExternal />
8291
</a>
@@ -88,4 +97,4 @@ const Card = ({
8897
);
8998
};
9099

91-
export default Card;
100+
export default Card;

‎src/components/UpcomingEventCard/index.js‎

Lines changed: 30 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,43 +8,60 @@ import "swiper/css/bundle";
88
import Button from "../../reusecore/Button";
99
import slugify from "../../utils/slugify";
1010

11-
1211
const UpcomingEvents = ({ data }) => {
1312
return (
1413
<UpcomingEventsWrapper>
1514
<div className="blog-slider swiper">
16-
<div style={{
17-
display: "block"
18-
}} className="blog-slider__wrp swiper-wrapper"
15+
<div
16+
style={{ display: "block" }}
17+
className="blog-slider__wrp swiper-wrapper"
1918
>
20-
2119
<Swiper
2220
spaceBetween={50}
2321
slidesPerView={1}
2422
modules={[Mousewheel, Pagination]}
2523
pagination={{ clickable: true }}
2624
>
27-
{data.nodes.map(item => {
25+
{data.nodes.map((item) => {
2826
return (
2927
<SwiperSlide key={item.id}>
3028
<div className="blog-slider_item swiper-slide">
3129
<div className="blog-slider_img">
32-
<Link to={`/community/events/${slugify(item.frontmatter.title)}`}>
33-
<Image {...item.frontmatter.thumbnail} alt={item.frontmatter.title} />
30+
<Link
31+
to={`/community/events/${slugify(item.frontmatter.title)}`}
32+
aria-label={`View event: ${item.frontmatter.title}`}
33+
>
34+
<Image
35+
{...item.frontmatter.thumbnail}
36+
alt={item.frontmatter.title}
37+
width={480}
38+
height={270}
39+
/>
3440
</Link>
3541
</div>
3642
<div className="blog-slider_content">
37-
<h3 className="blog-slider_title">{item.frontmatter.title}</h3>
38-
<p className="blog-slider_date">{item.frontmatter.date}</p>
39-
<p className="blog-slider_description">{item.frontmatter.abstract}</p>
40-
<Button $secondary className="blog-slider_button" $url={item.frontmatter.eurl} title="Join Now" $external={true} />
43+
<h3 className="blog-slider_title">
44+
{item.frontmatter.title}
45+
</h3>
46+
<p className="blog-slider_date">
47+
{item.frontmatter.date}
48+
</p>
49+
<p className="blog-slider_description">
50+
{item.frontmatter.abstract}
51+
</p>
52+
<Button
53+
$secondary
54+
className="blog-slider_button"
55+
$url={item.frontmatter.eurl}
56+
title="Join Now"
57+
$external={true}
58+
/>
4159
</div>
4260
</div>
4361
</SwiperSlide>
4462
);
4563
})}
4664
</Swiper>
47-
4865
</div>
4966
</div>
5067
</UpcomingEventsWrapper>

‎src/sections/Events/index.js‎

Lines changed: 92 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -10,59 +10,104 @@ import RssFeedIcon from "../../assets/images/socialIcons/rss-sign.svg";
1010

1111
const Meetups = ({ data, pageContext }) => {
1212
const [active, setActive] = useState("all");
13+
1314
const sortEvents = (nodes) => {
14-
return nodes.slice().sort((first, second) => new Date(second.frontmatter.date.replace(/(st|nd|rd|th),/g, "")) - new Date(first.frontmatter.date.replace(/(st|nd|rd|th),/g, "")));
15+
return nodes
16+
.slice()
17+
.sort(
18+
(first, second) =>
19+
new Date(second.frontmatter.date.replace(/(st|nd|rd|th),/g, "")) -
20+
new Date(first.frontmatter.date.replace(/(st|nd|rd|th),/g, "")),
21+
);
1522
};
1623

1724
return (
1825
<MeetupStyle>
19-
<PageHeader title="Events" path="Community/Events" img={RssFeedIcon} feedlink="/events/feed.xml" />
20-
<h2 className="event-subhead">Join Layer5 at these events</h2>
21-
<UpcomingEvents data={data.allUpcoming} />
22-
<Container>
23-
<div className="filterBtns">
24-
<Button className={active == "all" ? "active" : ""} onClick={() => setActive("all")} title="All" />
25-
<Button className={active == "events" ? "active" : ""} onClick={() => setActive("events")} title="Events" />
26-
<Button className={active == "workshops" ? "active" : ""} onClick={() => setActive("workshops")} title="Workshops" />
27-
<Button className={active == "meetups" ? "active" : ""} onClick={() => setActive("meetups")} title="MeetUps" />
28-
</div>
29-
<div>
30-
<Row style={{
31-
flexWrap: "wrap"
32-
}}
26+
<main>
27+
<PageHeader
28+
title="Events"
29+
path="Community/Events"
30+
img={RssFeedIcon}
31+
feedlink="/events/feed.xml"
32+
/>
33+
<h2 className="event-subhead">Join Layer5 at these events</h2>
34+
<UpcomingEvents data={data.allUpcoming} />
35+
<Container>
36+
<div
37+
className="filterBtns"
38+
role="group"
39+
aria-label="Filter events by type"
3340
>
34-
{active == "all" ? sortEvents(data.allCategories.nodes).map(category => {
35-
return (
36-
<Col $xs={12} $sm={6} $lg={4} key={category.id}>
37-
<Card frontmatter={category.frontmatter} fields={category.fields} />
38-
</Col>
39-
);
40-
}) : <></>}
41-
{active == "events" ? sortEvents(data.allEvents.nodes).map(event => {
42-
return (
43-
<Col $xs={12} $sm={6} $lg={4} key={event.id}>
44-
<Card frontmatter={event.frontmatter} fields={event.fields} />
45-
</Col>
46-
);
47-
}) : <></>}
48-
{active == "workshops" ? sortEvents(data.allWorkshops.nodes).map(workshop => {
49-
return (
50-
<Col $xs={12} $sm={6} $lg={4} key={workshop.id}>
51-
<Card frontmatter={workshop.frontmatter} fields={workshop.fields} />
52-
</Col>
53-
);
54-
}) : <></>}
55-
{active == "meetups" ? sortEvents(data.allMeetups.nodes).map(meetup => {
56-
return (
57-
<Col $xs={12} $sm={6} $lg={4} key={meetup.id}>
58-
<Card frontmatter={meetup.frontmatter} fields={meetup.fields} />
59-
</Col>
60-
);
61-
}) : <></>}
62-
</Row>
63-
</div>
64-
{active == "all" ? <Pager pageContext={pageContext} text={"Events"} /> : <></>}
65-
</Container>
41+
<Button
42+
className={active === "all" ? "active" : ""}
43+
onClick={() => setActive("all")}
44+
title="All"
45+
aria-pressed={active === "all"}
46+
/>
47+
<Button
48+
className={active === "events" ? "active" : ""}
49+
onClick={() => setActive("events")}
50+
title="Events"
51+
aria-pressed={active === "events"}
52+
/>
53+
<Button
54+
className={active === "workshops" ? "active" : ""}
55+
onClick={() => setActive("workshops")}
56+
title="Workshops"
57+
aria-pressed={active === "workshops"}
58+
/>
59+
<Button
60+
className={active === "meetups" ? "active" : ""}
61+
onClick={() => setActive("meetups")}
62+
title="MeetUps"
63+
aria-pressed={active === "meetups"}
64+
/>
65+
</div>
66+
<div>
67+
<Row style={{ flexWrap: "wrap" }}>
68+
{active === "all" &&
69+
sortEvents(data.allCategories.nodes).map((category) => (
70+
<Col $xs={12} $sm={6} $lg={4} key={category.id}>
71+
<Card
72+
frontmatter={category.frontmatter}
73+
fields={category.fields}
74+
/>
75+
</Col>
76+
))}
77+
{active === "events" &&
78+
sortEvents(data.allEvents.nodes).map((event) => (
79+
<Col $xs={12} $sm={6} $lg={4} key={event.id}>
80+
<Card
81+
frontmatter={event.frontmatter}
82+
fields={event.fields}
83+
/>
84+
</Col>
85+
))}
86+
{active === "workshops" &&
87+
sortEvents(data.allWorkshops.nodes).map((workshop) => (
88+
<Col $xs={12} $sm={6} $lg={4} key={workshop.id}>
89+
<Card
90+
frontmatter={workshop.frontmatter}
91+
fields={workshop.fields}
92+
/>
93+
</Col>
94+
))}
95+
{active === "meetups" &&
96+
sortEvents(data.allMeetups.nodes).map((meetup) => (
97+
<Col $xs={12} $sm={6} $lg={4} key={meetup.id}>
98+
<Card
99+
frontmatter={meetup.frontmatter}
100+
fields={meetup.fields}
101+
/>
102+
</Col>
103+
))}
104+
</Row>
105+
</div>
106+
{active === "all" && (
107+
<Pager pageContext={pageContext} text={"Events"} />
108+
)}
109+
</Container>
110+
</main>
66111
</MeetupStyle>
67112
);
68113
};

0 commit comments

Comments
 (0)