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}
  />
  )}