diff --git a/frontend/src/components/utils/NavBar/index.tsx b/frontend/src/components/utils/NavBar/index.tsx index 695addff..e383835d 100644 --- a/frontend/src/components/utils/NavBar/index.tsx +++ b/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); diff --git a/frontend/src/pages/ApartmentPage.tsx b/frontend/src/pages/ApartmentPage.tsx index c863b2e4..cef77917 100644 --- a/frontend/src/pages/ApartmentPage.tsx +++ b/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>(); const [landlordData, setLandlordData] = useState(); @@ -133,6 +147,7 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => { const [isClicked, setIsClicked] = useState(true); const [resultsToShow, setResultsToShow] = useState(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,11 +179,13 @@ 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(`/api/apts/${aptId}`, { callback: setAptData, @@ -174,16 +193,19 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => { }); }, [aptId]); + // Set the apartment data once it's fetched. useEffect(() => { setApt(aptData[0]); }, [aptData]); + // Fetch approved reviews for the current apartment. useEffect(() => { get(`/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(`/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 => { )}