Skip to content

Commit c8814ca

Browse files
dawidolkodawidolko
committed
Fix ProductPage null checks - resolve array access errors
1 parent feae3d8 commit c8814ca

1 file changed

Lines changed: 56 additions & 28 deletions

File tree

‎frontend/src/components/ProductSection/ProductPage.jsx‎

Lines changed: 56 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,9 @@ const ProductPage = () => {
137137
);
138138
setProduct(response.data);
139139
setFavorite(isFavorite(response.data.id));
140-
sendInteraction("view");
140+
if (!config.useMockData) {
141+
sendInteraction("view");
142+
}
141143
}
142144
} catch (error) {
143145
console.error(error);
@@ -253,12 +255,14 @@ const ProductPage = () => {
253255
};
254256

255257
const handlePrevImage = () => {
258+
if (!product.photos || product.photos.length === 0) return;
256259
setCurrentIndex((prev) =>
257260
prev === 0 ? product.photos.length - 1 : prev - 1,
258261
);
259262
};
260263

261264
const handleNextImage = () => {
265+
if (!product.photos || product.photos.length === 0) return;
262266
setCurrentIndex((prev) =>
263267
prev === product.photos.length - 1 ? 0 : prev + 1,
264268
);
@@ -353,7 +357,7 @@ const ProductPage = () => {
353357
case "specifications":
354358
return (
355359
<div className="productPage__tab-content">
356-
{product.specifications.length > 0 ? (
360+
{product.specifications && product.specifications.length > 0 ? (
357361
<table className="productPage__specs-table">
358362
<tbody>
359363
{product.specifications.map((spec, index) => (
@@ -379,7 +383,7 @@ const ProductPage = () => {
379383
case "reviews":
380384
return (
381385
<div className="productPage__tab-content">
382-
{product.opinions.length > 0 ? (
386+
{product.opinions && product.opinions.length > 0 ? (
383387
product.opinions.map((review) => (
384388
<div key={review.id} className="productPage__review">
385389
<div className="productPage__review-header">
@@ -436,7 +440,11 @@ const ProductPage = () => {
436440
<AiOutlineLeft />
437441
</button>
438442
<img
439-
src={`${config.apiUrl}/media/${product.photos[currentIndex]?.path}`}
443+
src={
444+
product.photos && product.photos[currentIndex]
445+
? `${config.apiUrl}/media/${product.photos[currentIndex].path}`
446+
: "/placeholder.jpg"
447+
}
440448
alt={product.name}
441449
className="productPage__main-img productPage__main-img--clickable"
442450
onClick={handleImageEnlarge}
@@ -449,22 +457,28 @@ const ProductPage = () => {
449457
</button>
450458
</div>
451459
<div className="productPage__thumbnails">
452-
<Slider {...thumbnailSliderSettings}>
453-
{product.photos.map((photo, idx) => (
454-
<div key={`thumb-${photo?.id ?? photo?.path ?? idx}`}>
455-
<img
456-
src={`${config.apiUrl}/media/${photo.path}`}
457-
alt={`Thumbnail ${idx + 1}`}
458-
className={`productPage__thumbnail ${
459-
idx === currentIndex
460-
? "productPage__thumbnail--active"
461-
: ""
462-
}`}
463-
onClick={() => setCurrentIndex(idx)}
464-
/>
465-
</div>
466-
))}
467-
</Slider>
460+
{product.photos && product.photos.length > 0 && (
461+
<Slider {...thumbnailSliderSettings}>
462+
{product.photos.map((photo, idx) => (
463+
<div key={`thumb-${photo?.id ?? photo?.path ?? idx}`}>
464+
<img
465+
src={
466+
photo?.path
467+
? `${config.apiUrl}/media/${photo.path}`
468+
: "/placeholder.jpg"
469+
}
470+
alt={`Thumbnail ${idx + 1}`}
471+
className={`productPage__thumbnail ${
472+
idx === currentIndex
473+
? "productPage__thumbnail--active"
474+
: ""
475+
}`}
476+
onClick={() => setCurrentIndex(idx)}
477+
/>
478+
</div>
479+
))}
480+
</Slider>
481+
)}
468482
</div>
469483
</div>
470484

@@ -479,7 +493,11 @@ const ProductPage = () => {
479493
</button>
480494
<img
481495
className="common-image-overlay__image"
482-
src={`${config.apiUrl}/media/${product.photos[currentIndex]?.path}`}
496+
src={
497+
product.photos && product.photos[currentIndex]
498+
? `${config.apiUrl}/media/${product.photos[currentIndex].path}`
499+
: "/placeholder.jpg"
500+
}
483501
alt={product.name}
484502
/>
485503
</div>
@@ -488,13 +506,15 @@ const ProductPage = () => {
488506

489507
<div className="productPage__info">
490508
<div className="productPage__category">
491-
{product.categories
492-
.map((category) => category.replace(/\./g, " › "))
493-
.join(", ")}
509+
{product.categories && product.categories.length > 0
510+
? product.categories
511+
.map((category) => category.replace(/\./g, " › "))
512+
.join(", ")
513+
: "Uncategorized"}
494514
</div>
495515
<h1 className="productPage__title">{product.name}</h1>
496516

497-
{product.tags.length > 0 && (
517+
{product.tags && product.tags.length > 0 && (
498518
<div className="productPage__tags">
499519
{product.tags.map((tag, index) => (
500520
<span
@@ -533,7 +553,11 @@ const ProductPage = () => {
533553
className="productPage__quick-rec-card"
534554
onClick={() => navigate(`/product/${recProduct.id}`)}>
535555
<img
536-
src={`${config.apiUrl}/media/${recProduct.photos[0]?.path}`}
556+
src={
557+
recProduct.photos && recProduct.photos[0]
558+
? `${config.apiUrl}/media/${recProduct.photos[0].path}`
559+
: "/placeholder.jpg"
560+
}
537561
alt={recProduct.name}
538562
className="productPage__quick-rec-img"
539563
/>
@@ -574,7 +598,7 @@ const ProductPage = () => {
574598
activeTab === "reviews" ? "productPage__tab--active" : ""
575599
}`}
576600
onClick={() => setActiveTab("reviews")}>
577-
Reviews ({product.opinions.length})
601+
Reviews ({product.opinions ? product.opinions.length : 0})
578602
</button>
579603
</div>
580604
{renderTabContent()}
@@ -598,7 +622,11 @@ const ProductPage = () => {
598622
className="productPage__similar-product-inner"
599623
onClick={() => navigate(`/product/${similarProduct.id}`)}>
600624
<img
601-
src={`${config.apiUrl}/media/${similarProduct.photos[0]?.path}`}
625+
src={
626+
similarProduct.photos && similarProduct.photos[0]
627+
? `${config.apiUrl}/media/${similarProduct.photos[0].path}`
628+
: "/placeholder.jpg"
629+
}
602630
alt={similarProduct.name}
603631
className="productPage__similar-product-img"
604632
/>

0 commit comments

Comments
 (0)