Add documentation to the ApartmentPage

frontend/src/pages/ApartmentPage.tsx

@@ -109,6 +109,20 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
+/**
+ * ApartmentPage Component
+ *
+ * This component represents a page for viewing and leaving reviews for apartments.
+ * It displays apartment information, reviews, and provides functionality to leave new reviews,
+ * sort reviews, and interact with existing reviews (like/dislike). Additionally, it contains information
+ * about the landloard and other related properties.
+ *
+ * @component
+ * @param props - The props for the ApartmentPage component.
+ * @param user props.user - The current user, null if not logged in.
+ * @param setUser - Function to set the current user.
+ * @returns ApartmentPage The ApartmentPage component.
+ */
 const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
   const { aptId } = useParams<Record<string, string>>();
   const [landlordData, setLandlordData] = useState<Landlord>();
@@ -133,6 +147,7 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
   const [isClicked, setIsClicked] = useState<boolean>(true);
   const [resultsToShow, setResultsToShow] = useState<number>(reviewData.length);
 
+  // Set the number of results to show based on mobile or desktop view.
   useEffect(() => {
     if (isMobile) {
       setResultsToShow(5);
@@ -141,10 +156,12 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
     }
   }, [isMobile, reviewData.length]);
 
+  // Increase the number of results to show when the "Show More" button is clicked.
   const handleShowMore = () => {
     setResultsToShow(resultsToShow + 5);
   };
 
+  // Set 'notFound' to true when a page is not found.
   const handlePageNotFound = () => {
     setNotFound(true);
   };
@@ -162,28 +179,33 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
     horizontalLine,
   } = useStyles();
 
+  // Set the page title based on whether apartment data is loaded.
   useTitle(
     () => (loaded && apt !== undefined ? `${apt.name}` : 'Apartment Reviews'),
     [loaded, apt]
   );
 
+  // Fetch apartment data based on the 'aptId' parameter and handle page not found error.
   useEffect(() => {
     get<ApartmentWithId[]>(`/api/apts/${aptId}`, {
       callback: setAptData,
       errorHandler: handlePageNotFound,
     });
   }, [aptId]);
 
+  // Set the apartment data once it's fetched.
   useEffect(() => {
     setApt(aptData[0]);
   }, [aptData]);
 
+  // Fetch approved reviews for the current apartment.
   useEffect(() => {
     get<ReviewWithId[]>(`/api/review/aptId/${aptId}/APPROVED`, {
       callback: setReviewData,
     });
   }, [aptId, showConfirmation, toggle]);
 
+  // Fetch information about buildings related to the apartment and the landlord's data.
   useEffect(() => {
     get<Apartment[]>(`/api/buildings/${apt?.landlordId}`, {
       callback: setBuildings,
@@ -194,6 +216,7 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
       });
   }, [apt]);
 
+  // Handle resizing of the window depending on mobile and if it is clicked.
   useEffect(() => {
     const handleResize = () => {
       setIsClicked(window.innerWidth <= 600);
@@ -204,10 +227,12 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
     return () => window.removeEventListener('resize', handleResize);
   }, []);
 
+  // Set the average rating after calculating it from the data.
   useEffect(() => {
     setAveRatingInfo(calculateAveRating(reviewData));
   }, [reviewData]);
 
+  // If all the information is there, then setLoaded to be true.
   useEffect(() => {
     if (
       aptData &&
@@ -222,6 +247,7 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
     }
   }, [aptData, apt, landlordData, buildings, reviewData, aveRatingInfo, otherProperties]);
 
+  // Use setLikedReviews to indicate the number of likes.
   useEffect(() => {
     return subscribeLikes(setLikedReviews);
   }, []);