Skip to content

Commit 5c6150d

Browse files
grevicocgrevicoc
authored
Merge pull request #40 from KATITB22/fix/for-loop-when-create-childrens
fix: heavy iteration on render
2 parents 29762d1 + 4c6722f commit 5c6150d

8 files changed

Lines changed: 54 additions & 18 deletions

File tree

‎.env.production‎

100755100644
File mode changed.

‎src/components/Carousel.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const Carousel: React.FC<CarouselProps> = (props) => {
1717
for (let i = 0; i < totalItems; i += 1) {
1818
retval.push(
1919
<div
20+
key={i}
2021
className={`w-7 h-full rounded-sm ${
2122
currentIndex === i ? 'bg-white' : 'bg-slate-400'
2223
} opacity-75`}

‎src/layout/BaseLayout.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,10 @@ const BaseLayout: React.FC<BaseProps> = (props) => {
122122
fontSize={{ lg: 'xl', md: 'md' }}
123123
>
124124
{links.map((link) => (
125-
<Navbar key={`navlink${links.indexOf(link)}`} to={link.to}>
125+
<Navbar
126+
key={`navlink${links.indexOf(link)}`}
127+
to={link.to}
128+
>
126129
{link.name}
127130
</Navbar>
128131
))}
@@ -144,7 +147,10 @@ const BaseLayout: React.FC<BaseProps> = (props) => {
144147
>
145148
<Stack as="nav" spacing={4}>
146149
{links.map((link) => (
147-
<Navbar key={`navlink${links.indexOf(link)}`} to={link.to}>
150+
<Navbar
151+
key={`navlink${links.indexOf(link)}`}
152+
to={link.to}
153+
>
148154
<Flex alignItems="center" gap="2">
149155
{link.icon}
150156
<span>{link.name}</span>

‎src/pages/About/About.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,12 @@ const About: React.FC<{}> = () => {
2929
alt=""
3030
/>
3131
{aboutContents.map((content: string) => (
32-
<p key={`aboutcontent${aboutContents.indexOf(content)}`} className="text-h6 md:text-[40px] lg:text-h3">
32+
<p
33+
key={`aboutcontent${aboutContents.indexOf(
34+
content
35+
)}`}
36+
className="text-h6 md:text-[40px] lg:text-h3"
37+
>
3338
{content}
3439
</p>
3540
))}

‎src/pages/About/AboutDetail.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,16 @@ const AboutDetail: React.FC<AboutProps> = ({ toggle }) => {
1919
alt=""
2020
/>
2121
{aboutDetailContents.map((content: string) => (
22-
<div key={`aboutdetailcontent${aboutDetailContents.indexOf(content)}`}>
22+
<div
23+
key={`aboutdetailcontent${aboutDetailContents.indexOf(
24+
content
25+
)}`}
26+
>
2327
<p>{content}</p>
24-
<br/>
28+
<br />
2529
</div>
2630
))}
27-
<button
31+
<button
2832
type="button"
2933
onClick={toggle}
3034
className="bg-MediumOrange text-white px-4 py-3 mt-8 rounded-[15px] drop-shadow-lg hover:drop-shadow-xl"

‎src/pages/Detailpage/Render.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,9 @@ const Render = {
6565
),
6666
OL: (id: number, node: NodeExtended) => {
6767
const listItems: JSX.Element[] = [];
68-
for (const innerNode of node.childNodes) {
68+
node.childNodes.forEach((innerNode) => {
6969
listItems.push(<li>{innerNode.text}</li>);
70-
}
70+
});
7171
return (
7272
<div
7373
key={id}
@@ -79,9 +79,9 @@ const Render = {
7979
},
8080
UL: (id: number, node: NodeExtended) => {
8181
const listItems: JSX.Element[] = [];
82-
for (const innerNode of node.childNodes) {
82+
node.childNodes.forEach((innerNode) => {
8383
listItems.push(<li>{innerNode.text}</li>);
84-
}
84+
});
8585
return (
8686
<div
8787
key={id}
@@ -262,13 +262,13 @@ const Render = {
262262
}
263263
if (node.attrs.class.includes('kg-gallery-card')) {
264264
const srcItems: string[] = [];
265-
for (const innerNode of node.childNodes[0].childNodes) {
266-
for (const extraInnerNode of innerNode.childNodes) {
265+
node.childNodes[0].childNodes.forEach((innerNode) => {
266+
innerNode.childNodes.forEach((extraInnerNode) => {
267267
srcItems.push(
268268
formatUrl(extraInnerNode.childNodes[0].attrs.src)
269269
);
270-
}
271-
}
270+
});
271+
});
272272
return <Carousel key={id} items={srcItems} />;
273273
}
274274
return null;

‎src/pages/Homepage/Homepage.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,12 @@ const Homepage: React.FC<{}> = () => {
7373
</h2>
7474
<div className="grid justify-items-center gap-4 p-2 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
7575
{sponsorMD.map((image: imgPartner) => (
76-
<a href={image.link} key={`sponsorimg${sponsorMD.indexOf(image)}`}>
76+
<a
77+
href={image.link}
78+
key={`sponsorimg${sponsorMD.indexOf(
79+
image
80+
)}`}
81+
>
7782
<img
7883
alt={image.title}
7984
src={image.imageUrl}
@@ -89,7 +94,12 @@ const Homepage: React.FC<{}> = () => {
8994
</h2>
9095
<div className="grid justify-items-center gap-4 p-2 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
9196
{listOfMedpar.map((image: imgPartner) => (
92-
<a href={image.link} key={`medparimg${listOfMedpar.indexOf(image)}`}>
97+
<a
98+
href={image.link}
99+
key={`medparimg${listOfMedpar.indexOf(
100+
image
101+
)}`}
102+
>
93103
<img
94104
alt={image.title}
95105
src={image.imageUrl}

‎src/pages/Partnerpage/PartnerPage.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,12 @@ const PartnerPage: React.FC<{}> = () => (
148148
<div className="min-h-[200px] py-8 p-4 bg-LightBrown flex justify-center items-center rounded-md ">
149149
<div className="image flex flex-wrap place-content-center gap-3">
150150
{sponsorLG.map((image: imgPartner) => (
151-
<a href={image.link} key={`sponsorimg${sponsorLG.indexOf(image)}`}>
151+
<a
152+
href={image.link}
153+
key={`sponsorimg${sponsorLG.indexOf(
154+
image
155+
)}`}
156+
>
152157
<img
153158
alt={image.title}
154159
src={image.imageUrl}
@@ -168,7 +173,12 @@ const PartnerPage: React.FC<{}> = () => (
168173
<div className="min-h-[200px] py-8 p-4 bg-LightBrown flex justify-center items-center rounded-md">
169174
<div className="image flex flex-wrap place-content-center gap-3">
170175
{listOfMedpar.map((image: imgPartner) => (
171-
<a href={image.link} key={`medparimg${listOfMedpar.indexOf(image)}`}>
176+
<a
177+
href={image.link}
178+
key={`medparimg${listOfMedpar.indexOf(
179+
image
180+
)}`}
181+
>
172182
<img
173183
alt={image.title}
174184
src={image.imageUrl}

0 commit comments

Comments
 (0)