reduce code duplication of photocarousel

cornell-dti · Oct 26, 2024 · a84e11f · a84e11f
1 parent a8401da
commit a84e11f
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 114 deletions.
diff --git a/frontend/src/components/PhotoCarousel/usePhotoCarousel.ts b/frontend/src/components/PhotoCarousel/usePhotoCarousel.ts
@@ -0,0 +1,39 @@
+// src/hooks/usePhotoCarousel.ts
+import { useState } from 'react';
+
+const usePhotoCarousel = (defaultPhotos: readonly string[] = []) => {
+  const [carouselPhotos, setCarouselPhotos] = useState<readonly string[]>(defaultPhotos);
+  const [carouselStartIndex, setCarouselStartIndex] = useState<number>(0);
+  const [carouselOpen, setCarouselOpen] = useState<boolean>(false);
+
+  /**
+   * 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 [defaultPhotos].
+   *
+   * @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[] = defaultPhotos, startIndex: number = 0) => {
+    setCarouselPhotos(photos);
+    setCarouselStartIndex(startIndex);
+    setCarouselOpen(true);
+  };
+
+  const closePhotoCarousel = () => {
+    setCarouselOpen(false);
+  };
+
+  return {
+    carouselPhotos,
+    carouselStartIndex,
+    carouselOpen,
+    showPhotoCarousel,
+    closePhotoCarousel,
+  };
+};
+
+export default usePhotoCarousel;
diff --git a/frontend/src/pages/AdminPage.tsx b/frontend/src/pages/AdminPage.tsx
@@ -19,6 +19,7 @@ import { useTitle } from '../utils';
 import { Chart } from 'react-google-charts';
 import { sortReviews } from '../utils/sortReviews';
 import PhotoCarousel from '../components/PhotoCarousel/PhotoCarousel';
+import usePhotoCarousel from '../components/PhotoCarousel/usePhotoCarousel';
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -52,9 +53,13 @@ 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 {
+    carouselPhotos,
+    carouselStartIndex,
+    carouselOpen,
+    showPhotoCarousel,
+    closePhotoCarousel,
+  } = usePhotoCarousel([]);
 
   const { container } = useStyles();
 
@@ -120,29 +125,12 @@ 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)}
+        onClose={closePhotoCarousel}
         startIndex={carouselStartIndex}
       />
     </>

diff --git a/frontend/src/pages/ApartmentPage.tsx b/frontend/src/pages/ApartmentPage.tsx
@@ -13,6 +13,7 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 
 import ReviewModal from '../components/LeaveReview/ReviewModal';
 import PhotoCarousel from '../components/PhotoCarousel/PhotoCarousel';
+import usePhotoCarousel from '../components/PhotoCarousel/usePhotoCarousel';
 import ReviewComponent from '../components/Review/Review';
 import ReviewHeader from '../components/Review/ReviewHeader';
 import { useTitle } from '../utils';
@@ -130,14 +131,18 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
   const [likeStatuses, setLikeStatuses] = useState<Likes>({});
   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[]>([]);
   const [aptData, setAptData] = useState<ApartmentWithId[]>([]);
   const [apt, setApt] = useState<ApartmentWithId | undefined>(undefined);
+  const {
+    carouselPhotos,
+    carouselStartIndex,
+    carouselOpen,
+    showPhotoCarousel,
+    closePhotoCarousel,
+  } = usePhotoCarousel(apt ? apt.photos : []);
   const [loaded, setLoaded] = useState(false);
   const [showSignInError, setShowSignInError] = useState(false);
   const [sortBy, setSortBy] = useState<Fields>('date');
@@ -374,26 +379,6 @@ 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
@@ -422,7 +407,7 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
         photos={carouselPhotos}
         open={carouselOpen}
         startIndex={carouselStartIndex}
-        onClose={() => setCarouselOpen(false)}
+        onClose={closePhotoCarousel}
       />
     </>
   );

diff --git a/frontend/src/pages/BookmarksPage.tsx b/frontend/src/pages/BookmarksPage.tsx
@@ -17,6 +17,7 @@ import DropDownWithLabel from '../components/utils/DropDownWithLabel';
 import { AptSortFields, sortApartments } from '../utils/sortApartments';
 import Toast from '../components/utils/Toast';
 import PhotoCarousel from '../components/PhotoCarousel/PhotoCarousel';
+import usePhotoCarousel from '../components/PhotoCarousel/usePhotoCarousel';
 
 type Props = {
   user: firebase.User | null;
@@ -109,9 +110,13 @@ const BookmarksPage = ({ user, setUser }: Props): ReactElement => {
   const [showMoreLessState, setShowMoreLessState] = useState<string>('Show More');
   const [isMobile, setIsMobile] = useState<boolean>(false);
   const [showEditSuccessConfirmation, setShowEditSuccessConfirmation] = useState(false);
-  const [carouselOpen, setCarouselOpen] = useState(false);
-  const [carouselPhotos, setCarouselPhotos] = useState<readonly string[]>([]);
-  const [carouselStartIndex, setCarouselStartIndex] = useState<number>(0);
+  const {
+    carouselPhotos,
+    carouselStartIndex,
+    carouselOpen,
+    showPhotoCarousel,
+    closePhotoCarousel,
+  } = usePhotoCarousel([]);
 
   useEffect(() => {
     const handleResize = () => setIsMobile(window.innerWidth <= 600);
@@ -207,29 +212,12 @@ const BookmarksPage = ({ user, setUser }: Props): ReactElement => {
   const addLike = likeHelper(false);
   const removeLike = likeHelper(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 showing 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)}
+        onClose={closePhotoCarousel}
         startIndex={carouselStartIndex}
       />
     </>

diff --git a/frontend/src/pages/LandlordPage.tsx b/frontend/src/pages/LandlordPage.tsx
@@ -12,6 +12,7 @@ import React, { ReactElement, useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import ReviewModal from '../components/LeaveReview/ReviewModal';
 import PhotoCarousel from '../components/PhotoCarousel/PhotoCarousel';
+import usePhotoCarousel from '../components/PhotoCarousel/usePhotoCarousel';
 import InfoFeatures from '../components/Review/InfoFeatures';
 import ReviewComponent from '../components/Review/Review';
 import ReviewHeader from '../components/Review/ReviewHeader';
@@ -92,9 +93,13 @@ const LandlordPage = ({ user, setUser }: Props): ReactElement => {
   const [likedReviews, setLikedReviews] = useState<Likes>({});
   const [likeStatuses, setLikeStatuses] = useState<Likes>({});
   const [reviewOpen, setReviewOpen] = useState(false);
-  const [carouselOpen, setCarouselOpen] = useState(false);
-  const [carouselPhotos, setCarouselPhotos] = useState<readonly string[]>([]);
-  const [carouselStartIndex, setCarouselStartIndex] = useState<number>(0);
+  const {
+    carouselPhotos,
+    carouselStartIndex,
+    carouselOpen,
+    showPhotoCarousel,
+    closePhotoCarousel,
+  } = usePhotoCarousel(landlordData ? landlordData.photos : []);
   const [showConfirmation, setShowConfirmation] = useState(false);
   const [showEditSuccessConfirmation, setShowEditSuccessConfirmation] = useState(false);
   const [buildings, setBuildings] = useState<CardData[]>([]);
@@ -289,26 +294,6 @@ const LandlordPage = ({ 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 landlord'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[] = landlordData ? landlordData.photos : [],
-    startIndex: number = 0
-  ) => {
-    setCarouselPhotos(photos);
-    setCarouselStartIndex(startIndex);
-    setCarouselOpen(true);
-  };
-
   // Define a component 'Modals' conditionally based on landlordData existence
   const Modals = landlordData && (
     <>
@@ -327,7 +312,7 @@ const LandlordPage = ({ user, setUser }: Props): ReactElement => {
         photos={carouselPhotos}
         open={carouselOpen}
         startIndex={carouselStartIndex}
-        onClose={() => setCarouselOpen(false)}
+        onClose={closePhotoCarousel}
       />
     </>
   );
@@ -365,7 +350,7 @@ const LandlordPage = ({ user, setUser }: Props): ReactElement => {
             color="secondary"
             variant="contained"
             disableElevation
-            onClick={() => setCarouselOpen(true)}
+            onClick={() => showPhotoCarousel()}
           >
             Show all photos
           </Button>
@@ -463,7 +448,7 @@ const LandlordPage = ({ user, setUser }: Props): ReactElement => {
               color="secondary"
               variant="contained"
               disableElevation
-              onClick={() => setCarouselOpen(true)}
+              onClick={() => showPhotoCarousel()}
             >
               Show all photos
             </Button>
@@ -523,7 +508,7 @@ const LandlordPage = ({ user, setUser }: Props): ReactElement => {
     <>
       {landlordData && (
         <Container>
-          <LandlordHeader landlord={landlordData} handleClick={() => setCarouselOpen(true)} />
+          <LandlordHeader landlord={landlordData} handleClick={() => showPhotoCarousel()} />
         </Container>
       )}
 

diff --git a/frontend/src/pages/ProfilePage.tsx b/frontend/src/pages/ProfilePage.tsx
@@ -22,6 +22,7 @@ import defaultProfilePic from '../assets/cuapts-bear.png';
 import { useTitle } from '../utils';
 import { sortReviews } from '../utils/sortReviews';
 import PhotoCarousel from '../components/PhotoCarousel/PhotoCarousel';
+import usePhotoCarousel from '../components/PhotoCarousel/usePhotoCarousel';
 
 type Props = {
   user: firebase.User | null;
@@ -167,9 +168,13 @@ const ProfilePage = ({ user, setUser }: Props): ReactElement => {
   const [toggle, setToggle] = useState(false);
   const [showEditSuccessConfirmation, setShowEditSuccessConfirmation] = useState(false);
   const toastTime = 3500;
-  const [carouselOpen, setCarouselOpen] = useState(false);
-  const [carouselPhotos, setCarouselPhotos] = useState<readonly string[]>([]);
-  const [carouselStartIndex, setCarouselStartIndex] = useState<number>(0);
+  const {
+    carouselPhotos,
+    carouselStartIndex,
+    carouselOpen,
+    showPhotoCarousel,
+    closePhotoCarousel,
+  } = usePhotoCarousel([]);
 
   useTitle('Profile');
 
@@ -260,29 +265,12 @@ const ProfilePage = ({ user, setUser }: Props): ReactElement => {
     };
   }, [isModalOpen, setIsModalOpen]);
 
-  /**
-   * 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 showing 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)}
+        onClose={closePhotoCarousel}
         startIndex={carouselStartIndex}
       />
     </>