Refactor PhotoCarousel component and add photo carousel functionality

- Refactor the PhotoCarousel component to update the styling to handle large photos. - Add functionality to the PhotoCarousel component to display a carousel with a different start index - The PhotoCarousel component now accepts a start index as a prop. - Clicking on a photo in the Review and AdminReview components triggers the photo carousel with the corresponding photos and start index.
cornell-dti · Oct 24, 2024 · 277b718 · 277b718
1 parent dfe54dd
commit 277b718
Show file tree

Hide file tree

Showing 8 changed files with 215 additions and 12 deletions.
diff --git a/frontend/src/components/Admin/AdminReview.tsx b/frontend/src/components/Admin/AdminReview.tsx
@@ -37,6 +37,8 @@ type Props = {
   readonly setToggle: React.Dispatch<React.SetStateAction<boolean>>;
   /** Indicates if the review is in the declined section. */
   readonly declinedSection: boolean;
+  /** Function to trigger the photo carousel. */
+  readonly triggerPhotoCarousel: (photos: readonly string[], startIndex: number) => void;
 };
 
 /**
@@ -70,14 +72,24 @@ const useStyles = makeStyles(() => ({
     borderRadius: '4px',
     height: '15em',
     width: '15em',
+    cursor: 'pointer',
+    transition: '0.3s ease-in-out',
+    '&:hover': {
+      filter: 'brightness(0.85)',
+      boxShadow: '0 4px 8px rgba(0, 0, 0, 0.5)',
+      transform: 'scale(1.02)',
+    },
   },
   photoRowStyle: {
     overflowX: 'auto',
+    overflowY: 'hidden',
     display: 'flex',
     flexDirection: 'row',
     gap: '1vw',
     paddingTop: '2%',
     paddingLeft: '0.6%',
+    paddingRight: '0.6%',
+    paddingBottom: '2%',
   },
 }));
 
@@ -87,7 +99,12 @@ const useStyles = makeStyles(() => ({
  * @param review review - The review to approve
  * @returns The rendered component.
  */
-const AdminReviewComponent = ({ review, setToggle, declinedSection }: Props): ReactElement => {
+const AdminReviewComponent = ({
+  review,
+  setToggle,
+  declinedSection,
+  triggerPhotoCarousel,
+}: Props): ReactElement => {
   const { detailedRatings, overallRating, bedrooms, price, date, reviewText, photos } = review;
   const formattedDate = format(new Date(date), 'MMM dd, yyyy').toUpperCase();
   const { root, dateText, bedroomsPriceText, ratingInfo, photoStyle, photoRowStyle } = useStyles();
@@ -202,14 +219,15 @@ const AdminReviewComponent = ({ review, setToggle, declinedSection }: Props): Re
               {photos.length > 0 && (
                 <Grid container>
                   <Grid item className={photoRowStyle}>
-                    {photos.map((photo) => {
+                    {photos.map((photo, i) => {
                       return (
                         <CardMedia
                           component="img"
                           alt="Apt image"
                           image={photo}
                           title="Apt image"
                           className={photoStyle}
+                          onClick={() => triggerPhotoCarousel(photos, i)}
                         />
                       );
                     })}

diff --git a/frontend/src/components/PhotoCarousel/PhotoCarousel.tsx b/frontend/src/components/PhotoCarousel/PhotoCarousel.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
-import { Modal, Box, styled, Container, CardMedia, Dialog, makeStyles } from '@material-ui/core';
+import { Box, styled, Container, CardMedia, Dialog, makeStyles } from '@material-ui/core';
 import Carousel from 'react-material-ui-carousel';
 
 interface Props {
   photos: readonly string[];
   open: boolean;
   onClose?: () => void;
+  startIndex: number;
 }
 
 const useStyles = makeStyles((theme) => ({
@@ -24,9 +25,26 @@ const ImageBox = styled(Box)({
   margin: 'auto',
   borderRadius: '10px',
   overflow: 'hidden',
+  maxHeight: '80dvh',
+  objectFit: 'contain',
 });
 
-const PhotoCarousel = ({ photos, open, onClose }: Props) => {
+/**
+ * PhotoCarousel - this component displays a modal with a carousel of photos.
+ *
+ * @remarks
+ * This component is used to display a modal with a carousel of photos.
+ * It dynamically adjusts to different screen sizes and can be navigated using the arrow buttons.
+ *
+ * @component
+ * @param {readonly string[]} props.photos - An array of photo URLs to display in the carousel.
+ * @param {boolean} props.open - A boolean indicating whether the modal is open.
+ * @param {() => void} [props.onClose] - An optional callback function to handle closing the modal.
+ * @param {number} props.startIndex - The starting index of the carousel.
+ *
+ * @returns {JSX.Element} The rendered PhotoCarousel component.
+ */
+const PhotoCarousel = ({ photos, open, onClose, startIndex }: Props) => {
   const { modalBackground, navButton } = useStyles();
   return (
     <Dialog
@@ -41,6 +59,7 @@ const PhotoCarousel = ({ photos, open, onClose }: Props) => {
           autoPlay={false}
           navButtonsAlwaysVisible={true}
           navButtonsProps={{ className: navButton }}
+          index={startIndex}
         >
           {photos.map((src, index) => {
             return (

diff --git a/frontend/src/components/Review/Review.tsx b/frontend/src/components/Review/Review.tsx
@@ -44,7 +44,8 @@ type Props = {
   readonly addLike: (reviewId: string) => Promise<void>;
   readonly removeLike: (reviewId: string) => Promise<void>;
   setToggle: React.Dispatch<React.SetStateAction<boolean>>;
-  readonly triggerEditToast?: () => void;
+  readonly triggerEditToast: () => void;
+  readonly triggerPhotoCarousel: (photos: readonly string[], startIndex: number) => void;
   user: firebase.User | null;
   setUser: React.Dispatch<React.SetStateAction<firebase.User | null>>;
   readonly showLabel: boolean;
@@ -91,14 +92,24 @@ const useStyles = makeStyles(() => ({
     borderRadius: '4px',
     height: '15em',
     width: '15em',
+    cursor: 'pointer',
+    transition: '0.3s ease-in-out',
+    '&:hover': {
+      filter: 'brightness(0.85)',
+      boxShadow: '0 4px 8px rgba(0, 0, 0, 0.5)',
+      transform: 'scale(1.02)',
+    },
   },
   photoRowStyle: {
     overflowX: 'auto',
     display: 'flex',
-    lexDirection: 'row',
+    flexDirection: 'row',
     gap: '1vw',
     paddingTop: '2%',
     paddingLeft: '0.6%',
+    overflowY: 'hidden',
+    paddingRight: '0.6%',
+    paddingBottom: '2%',
   },
   bedroomsPrice: {
     display: 'flex',
@@ -122,6 +133,7 @@ const ReviewComponent = ({
   removeLike,
   setToggle,
   triggerEditToast,
+  triggerPhotoCarousel,
   user,
   setUser,
   showLabel,
@@ -374,14 +386,15 @@ const ReviewComponent = ({
               {reviewData.photos.length > 0 && (
                 <Grid container>
                   <Grid item className={photoRowStyle}>
-                    {reviewData.photos.map((photo) => {
+                    {reviewData.photos.map((photo, i) => {
                       return (
                         <CardMedia
                           component="img"
                           alt="Apt image"
                           image={photo}
                           title="Apt image"
                           className={photoStyle}
+                          onClick={() => triggerPhotoCarousel(reviewData.photos, i)}
                         />
                       );
                     })}

diff --git a/frontend/src/pages/AdminPage.tsx b/frontend/src/pages/AdminPage.tsx
@@ -18,6 +18,7 @@ import AdminReviewComponent from '../components/Admin/AdminReview';
 import { useTitle } from '../utils';
 import { Chart } from 'react-google-charts';
 import { sortReviews } from '../utils/sortReviews';
+import PhotoCarousel from '../components/PhotoCarousel/PhotoCarousel';
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -51,6 +52,10 @@ const AdminPage = (): ReactElement => {
   const [pendingApartment, setPendingApartmentData] = useState<CantFindApartmentForm[]>([]);
   const [pendingContactQuestions, setPendingContactQuestions] = useState<QuestionForm[]>([]);
 
+  const [carouselOpen, setCarouselOpen] = useState(false);
+  const [carouselPhotos, setCarouselPhotos] = useState<readonly string[]>([]);
+  const [carouselStartIndex, setCarouselStartIndex] = useState<number>(0);
+
   const { container } = useStyles();
 
   useTitle('Admin');
@@ -115,6 +120,34 @@ const AdminPage = (): ReactElement => {
     });
   }, [toggle]);
 
+  /**
+   * showPhotoCarousel – Opens the photo carousel modal with the provided photos and start index.
+   *
+   * @remarks
+   * This function sets the photos and start index for the photo carousel and then opens the carousel modal.
+   * If no photos are provided, it defaults to no photos.
+   *
+   * @param {readonly string[]} [photos] – The array of photo URLs to display in the carousel.
+   * @param {number} [startIndex] – The index of the photo to start the carousel from.
+   * @return {void} – This function does not return anything.
+   */
+  const showPhotoCarousel = (photos: readonly string[] = [], startIndex: number = 0) => {
+    setCarouselPhotos(photos);
+    setCarouselStartIndex(startIndex);
+    setCarouselOpen(true);
+  };
+
+  const Modals = (
+    <>
+      <PhotoCarousel
+        photos={carouselPhotos}
+        open={carouselOpen}
+        onClose={() => setCarouselOpen(false)}
+        startIndex={carouselStartIndex}
+      />
+    </>
+  );
+
   //  Reviews tab
   const reviews = (
     <Container className={container}>
@@ -157,6 +190,7 @@ const AdminPage = (): ReactElement => {
                   review={review}
                   setToggle={setToggle}
                   declinedSection={false}
+                  triggerPhotoCarousel={showPhotoCarousel}
                 />
               </Grid>
             ))}
@@ -175,6 +209,7 @@ const AdminPage = (): ReactElement => {
                     review={review}
                     setToggle={setToggle}
                     declinedSection={true}
+                    triggerPhotoCarousel={showPhotoCarousel}
                   />
                 </Grid>
               ))}
@@ -246,6 +281,7 @@ const AdminPage = (): ReactElement => {
 
       {selectedTab === 'Reviews' && reviews}
       {selectedTab === 'Contact' && contact}
+      {Modals}
     </div>
   );
 };

diff --git a/frontend/src/pages/ApartmentPage.tsx b/frontend/src/pages/ApartmentPage.tsx
@@ -131,6 +131,8 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
   const [reviewOpen, setReviewOpen] = useState(false);
   const [mapOpen, setMapOpen] = useState(false);
   const [carouselOpen, setCarouselOpen] = useState(false);
+  const [carouselPhotos, setCarouselPhotos] = useState<readonly string[]>([]);
+  const [carouselStartIndex, setCarouselStartIndex] = useState<number>(0);
   const [showConfirmation, setShowConfirmation] = useState(false);
   const [showEditSuccessConfirmation, setShowEditSuccessConfirmation] = useState(false);
   const [buildings, setBuildings] = useState<Apartment[]>([]);
@@ -372,6 +374,26 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
     setReviewOpen(true);
   };
 
+  /**
+   * showPhotoCarousel – Opens the photo carousel modal with the provided photos and start index.
+   *
+   * @remarks
+   * This function sets the photos and start index for the photo carousel and then opens the carousel modal.
+   * If no photos are provided, it defaults to the apartment's photos.
+   *
+   * @param {readonly string[]} [photos] – The array of photo URLs to display in the carousel.
+   * @param {number} [startIndex] – The index of the photo to start the carousel from.
+   * @return {void} – This function does not return anything.
+   */
+  const showPhotoCarousel = (
+    photos: readonly string[] = apt ? apt.photos : [],
+    startIndex: number = 0
+  ) => {
+    setCarouselPhotos(photos);
+    setCarouselStartIndex(startIndex);
+    setCarouselOpen(true);
+  };
+
   const Modals = landlordData && apt && (
     <>
       <MapModal
@@ -397,8 +419,9 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
         user={user}
       />
       <PhotoCarousel
-        photos={apt.photos}
+        photos={carouselPhotos}
         open={carouselOpen}
+        startIndex={carouselStartIndex}
         onClose={() => setCarouselOpen(false)}
       />
     </>
@@ -464,7 +487,7 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
             color="secondary"
             variant="contained"
             disableElevation
-            onClick={() => setCarouselOpen(true)}
+            onClick={() => showPhotoCarousel()}
           >
             Show all photos
           </Button>
@@ -538,7 +561,7 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
               color="secondary"
               variant="contained"
               disableElevation
-              onClick={() => setCarouselOpen(true)}
+              onClick={() => showPhotoCarousel()}
             >
               Show all photos
             </Button>
@@ -632,7 +655,7 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
             averageRating={getAverageRating(reviewData)}
             apartment={apt!}
             numReviews={reviewData.length}
-            handleClick={() => setCarouselOpen(true)}
+            handleClick={() => showPhotoCarousel()}
           />
         </Container>
       )}
@@ -715,6 +738,7 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
                             removeLike={removeLike}
                             setToggle={setToggle}
                             triggerEditToast={showEditSuccessConfirmationToast}
+                            triggerPhotoCarousel={showPhotoCarousel}
                             user={user}
                             setUser={setUser}
                           />