🔧 Fix photo carousel when accessed from multi-photo review (#318)

* Fix photo carousel when accessed from multi-photo review * Fix photo indices between carousel and lightbox Also closes #266 by simply sorting reviews chronologically. User reviews could be placed first if desired by sorting reviews upstream of reviews, lightbox, and carousel creation. Co-authored-by: ezwelty <[email protected]>
falling-fruit · Dec 26, 2022 · eeb12fe · eeb12fe
1 parent e75599d
commit eeb12fe
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 45 deletions.
diff --git a/src/components/entry/Entry.js b/src/components/entry/Entry.js
@@ -88,20 +88,17 @@ const Entry = ({
   if (!locationData || !reviews) {
     content = <LoadingIndicator cover vertical />
   } else {
-    const allReviewPhotos = reviews.map((review) => review.photos).flat()
+    const reviewsWithPhotos = reviews.filter(
+      (review) => review.photos.length > 0,
+    )
+    const lightboxIndices = reviewsWithPhotos
+      .map((review, ri) => review.photos.map((_, pi) => [ri, pi]))
+      .flat()
+    const allReviewPhotos = reviewsWithPhotos
+      .map((review) => review.photos)
+      .flat()
     const onClickCarousel = (idx) => {
-      const targetId = allReviewPhotos[idx].id
-      const reviewIdx = reviews.findIndex((review) =>
-        review.photos.some((photo) => photo.id === targetId),
-      )
-      if (reviewIdx < 0) {
-        return
-      }
-      const photoIdx = reviews[reviewIdx].photos.findIndex(
-        (photo) => photo.id === targetId,
-      )
-
-      setLightboxIndex([reviewIdx, photoIdx])
+      setLightboxIndex(lightboxIndices[idx])
       setIsLightboxOpen(true)
     }
 

diff --git a/src/components/entry/EntryReviews.js b/src/components/entry/EntryReviews.js
@@ -13,43 +13,45 @@ const EntryReviews = ({ reviews, onImageClick, onReviewSubmit }) => {
   const history = useAppHistory()
   const user = useSelector((state) => state.auth.user)
 
-  const indexedReviews = reviews.map((review, index) => ({ ...review, index }))
-
-  const userReviews = indexedReviews.filter(
-    (review) => review.user_id === user?.id,
-  )
-  const otherReviews = indexedReviews.filter(
-    (review) => review.user_id !== user?.id,
-  )
-
+  const reviewsWithPhotos = reviews.filter((r) => r.photos.length > 0)
   return (
     <TextContent>
       <ReviewSummary reviews={reviews} />
       {!isDesktop && <ReviewButton />}
       <h3>Reviews</h3>
-      {userReviews.map((review) => (
-        <Review
-          key={review.id}
-          review={review}
-          onImageClick={(imageIndex) => onImageClick(review.index, imageIndex)}
-          onEditClick={() =>
-            history.push({
-              pathname: `/review/${review.id}/edit`,
-              state: {
-                fromPage: history.location.pathname,
-              },
-            })
-          }
-          editable
-        />
-      ))}
-      {otherReviews.map((review) => (
-        <Review
-          key={review.id}
-          review={review}
-          onImageClick={(imageIndex) => onImageClick(review.index, imageIndex)}
-        />
-      ))}
+      {reviews.map((review) => {
+        const onReviewImageClick = (imageIndex) =>
+          onImageClick(
+            reviewsWithPhotos.findIndex((r) => r.id === review.id),
+            imageIndex,
+          )
+        if (review.user_id === user?.id) {
+          return (
+            <Review
+              key={review.id}
+              review={review}
+              onImageClick={onReviewImageClick}
+              onEditClick={() =>
+                history.push({
+                  pathname: `/review/${review.id}/edit`,
+                  state: {
+                    fromPage: history.location.pathname,
+                  },
+                })
+              }
+              editable
+            />
+          )
+        } else {
+          return (
+            <Review
+              key={review.id}
+              review={review}
+              onImageClick={onReviewImageClick}
+            />
+          )
+        }
+      })}
       {isDesktop && <ReviewForm onSubmit={onReviewSubmit} />}
     </TextContent>
   )