From 7394b6773a74fd0b35cd32cd5c344637e208b950 Mon Sep 17 00:00:00 2001 From: "(Grace) Gunyasorn Sawatyanon" <125820523+ggsawatyanon@users.noreply.github.com> Date: Sun, 8 Oct 2023 21:46:45 -0400 Subject: [PATCH 1/3] Update index.tsx (#304) --- frontend/src/components/utils/NavBar/index.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) 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); From af80a9593910fd946bc5e953fff0592a8cddde39 Mon Sep 17 00:00:00 2001 From: "(Grace) Gunyasorn Sawatyanon" <125820523+ggsawatyanon@users.noreply.github.com> Date: Thu, 12 Oct 2023 11:28:00 -0400 Subject: [PATCH 2/3] Update ApartmentPage.tsx (#303) Co-authored-by: Thuy Pham <62644357+thuypham03@users.noreply.github.com> --- frontend/src/pages/ApartmentPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/pages/ApartmentPage.tsx b/frontend/src/pages/ApartmentPage.tsx index c863b2e4..c2fd5775 100644 --- a/frontend/src/pages/ApartmentPage.tsx +++ b/frontend/src/pages/ApartmentPage.tsx @@ -572,7 +572,7 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => { )} From 462069d3967e4ef86f1030ffe704123de46bc32e Mon Sep 17 00:00:00 2001 From: ankit <32402949+AnkitLakkapragada@users.noreply.github.com> Date: Thu, 12 Oct 2023 11:32:50 -0400 Subject: [PATCH 3/3] Add documentation to the ApartmentPage (#301) Co-authored-by: Thuy Pham <62644357+thuypham03@users.noreply.github.com> --- frontend/src/pages/ApartmentPage.tsx | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/frontend/src/pages/ApartmentPage.tsx b/frontend/src/pages/ApartmentPage.tsx index c2fd5775..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); }, []);