Merge branch 'main' into fix-auto-scroll

frontend/src/components/utils/NavBar/index.tsx

@@ -141,6 +141,17 @@ function GetButtonColor(lab: string) {
     : 'primary';
 }
 
+/**
+ * NavBar Component
+ *
+ * This component is the navigation bar that is used on all pages throughout the CUApts website. It provides routing to the Home and FAQ pages
+ * and the Login/Sign Out buttons.
+ * @param headersData: An array of objects representing navigation links. Each object should have label (string) and href (string) properties.
+ * @param user: (firebase.User | null) The current user object, can be null if the user is not authenticated.
+ * @param setUser: function to set user.
+ * @returns the NavBar component.
+ */
+
 const NavBar = ({ headersData, user, setUser }: Props): ReactElement => {
   const initialUserState = !user ? 'Sign In' : 'Sign Out';
   const [buttonText, setButtonText] = useState(initialUserState);

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);
   }, []);
@@ -572,7 +598,7 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
               <Toast
                 isOpen={showConfirmation}
                 severity="success"
-                message="Review successfully submitted!"
+                message="Review submitted! Your review is awaiting approval from the admin."
                 time={toastTime}
               />
             )}