Merge pull request #379 from cornell-dti/codebase-cleanup-&-documenta…

…tion

Code base cleanup + Documentation + README update

README.md

@@ -24,6 +24,17 @@ on its own, run `yarn frontend-dev` or `yarn backend-dev`.
 
 ## Contributors
 
+### 2024-2025
+
+- **Ella Krechmer** - Product Manager
+- **Janet Luo** - Associate Product Manager
+- **Jacob Green** - Product Marketing Manager
+- **Gunyasorn (Grace) Sawatyanon** - Technical Product Manager
+- **David Martinez Lopez** - Designer
+- **Vicky Wang** - Designer
+- **Kea-Roy Ong** - Developer
+- **Casper Liao** - Developer
+
 ### 2023-2024
 
 - **Tina Ou** - Product Manager
@@ -34,7 +45,7 @@ on its own, run `yarn frontend-dev` or `yarn backend-dev`.
 - **Cyrus Irani** - Developer
 - **Ankit Lakkapragada** - Developer
 - **Jessica Han** - Developer
-- **Grace Sawatyanon** - Developer
+- **Gunyasorn (Grace) Sawatyanon** - Developer
 - **Miranda Luo** - Developer
 - **Kea-Roy Ong** - Developer
 - **Casper Liao** - Developer
@@ -51,7 +62,7 @@ on its own, run `yarn frontend-dev` or `yarn backend-dev`.
 - **Daniel Jin** - Developer
 - **Ankit Lakkapragada** - Developer
 - **Jessica Han** - Developer
-- **Grace Sawatyanon** - Developer
+- **Gunyasorn (Grace) Sawatyanon** - Developer
 
 ### 2021-2022
 

frontend/src/components/Apartment/Header.tsx

@@ -1,14 +1,5 @@
 import React, { ReactElement, useState, useEffect } from 'react';
-import {
-  CardHeader,
-  CardMedia,
-  Grid,
-  Button,
-  withStyles,
-  makeStyles,
-  Avatar,
-  ButtonBase,
-} from '@material-ui/core';
+import { CardHeader, CardMedia, Grid, withStyles, makeStyles, ButtonBase } from '@material-ui/core';
 import styles from './Header.module.scss';
 import { ApartmentWithId } from '../../../../common/types/db-types';
 import defaultHeader from '../../assets/default_header.svg';
@@ -138,12 +129,6 @@ const useStyles = makeStyles((theme) => ({
     flexDirection: 'column',
     justifyContent: 'center',
   },
-  btnSection: {
-    height: '94%',
-    [theme.breakpoints.down('sm')]: {
-      height: '97%',
-    },
-  },
   logoGrid: {
     marginRight: '1em',
     flex: '0 0 auto',
@@ -189,7 +174,6 @@ const ApartmentHeader = ({ apartment, handleClick }: Props): ReactElement => {
     aptAddress,
     headerSection,
     mobileHeaderSection,
-    btnSection,
     logoGrid,
     logoGridMobile,
     mobileAptName,

frontend/src/components/Apartment/MapModal.tsx

@@ -1,12 +1,11 @@
-import React, { Dispatch, SetStateAction, useRef, useState, useEffect } from 'react';
+import React, { Dispatch, SetStateAction, useRef } from 'react';
 import {
   Box,
   Grid,
   Typography,
   Dialog,
   DialogTitle,
   DialogContent,
-  DialogActions,
   makeStyles,
   IconButton,
   useTheme,
@@ -124,7 +123,6 @@ const MapModal = ({
   const classes = useStyles();
   const theme = useTheme();
   const mapRef = useRef<google.maps.Map | null>(null);
-  const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
   const isMediumScreen = useMediaQuery(theme.breakpoints.up('lg'));
 
   const handleApiLoaded = ({ map, maps }: { map: google.maps.Map; maps: typeof google.maps }) => {

frontend/src/components/Landlord/Header.tsx

@@ -1,14 +1,6 @@
 import React, { ReactElement, useState, useEffect } from 'react';
 
-import {
-  CardHeader,
-  CardMedia,
-  Grid,
-  Button,
-  withStyles,
-  makeStyles,
-  Avatar,
-} from '@material-ui/core';
+import { CardHeader, CardMedia, Grid, Button, withStyles, makeStyles } from '@material-ui/core';
 import styles from './Header.module.scss';
 import { Landlord } from '../../../../common/types/db-types';
 import defaultHeader from '../../assets/default_header.svg';
@@ -146,8 +138,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 const LandlordHeader = ({ landlord, handleClick }: Props): ReactElement => {
-  const { name, profilePhoto, photos } = landlord;
-  const icon = profilePhoto ? profilePhoto : DefaultIcon;
+  const { name, photos } = landlord;
   const photoLink = photos.length ? photos[0] : defaultHeader;
   const [isMobile, setIsMobile] = useState<boolean>(false);
 

frontend/src/components/PhotoCarousel/PhotoCarousel.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal, Box, styled, Container, CardMedia, Dialog, makeStyles } from '@material-ui/core';
+import { Box, styled, Container, CardMedia, Dialog, makeStyles } from '@material-ui/core';
 import Carousel from 'react-material-ui-carousel';
 
 interface Props {

frontend/src/components/utils/Footer/ContactModal.tsx

@@ -670,7 +670,7 @@ const ContactModal = ({ user }: Props) => {
         {currModal === 'apartment' && cantFindApartmentModal}
         {currModal === 'question' && questionModal}
 
-        {currModal != 'contact' && (
+        {currModal !== 'contact' && (
           <DialogActions
             style={{
               display: 'flex',

frontend/src/pages/HomePage.tsx

@@ -40,6 +40,21 @@ type Props = {
   setUser: React.Dispatch<React.SetStateAction<firebase.User | null>>;
 };
 
+/**
+ * HomePage Component – This component represents CUAPTS' home page.
+ *
+ * @remarks
+ * This page displays a search bar (autocomplete), featured properties, and adjusts its layout
+ * responsively for desktop and mobile views.
+ *
+ * @param {firebase.User | null} props.user – The currently logged-in Firebase user or null
+ * if no user is logged in.
+ * @param {React.Dispatch<React.SetStateAction<firebase.User | null>>} props.setUser - A
+ * function to update the `user` state.
+ *
+ * @return {ReactElement} The JSX structure of the HomePage component.
+ */
+
 const HomePage = ({ user, setUser }: Props): ReactElement => {
   const classes = useStyles();
   const [data, setData] = useState<returnData>({ buildingData: [], isEnded: false });

frontend/src/pages/LocationPage.tsx

@@ -19,6 +19,23 @@ type Props = {
   setUser: React.Dispatch<React.SetStateAction<firebase.User | null>>;
 };
 
+/**
+ * LocationPage Component – Displays information and apartments for a specific location
+ * (i.e. Collegetown, West, North, Downtown).
+ *
+ * @remarks
+ * The LocationPage displays the name and description of the location. It also fetches and
+ * displays apartment cards that are located in the specific location (e.g. all apartments
+ * in Collegetown).
+ *
+ * @param {firebase.User | null} props.user – The currently logged-in Firebase user or null
+ * if no user is logged in.
+ * @param {React.Dispatch<React.SetStateAction<firebase.User | null>>} props.setUser - A
+ * function to update the `user` state.
+ *
+ * @return {ReactElement} The JSX structure of the LocationPage component.
+ */
+
 const LocationPage = ({ user, setUser }: Props): ReactElement => {
   const [isMobile, setIsMobile] = useState<boolean>(false);
   const [data, setData] = useState<CardData[]>([]);

frontend/src/pages/NotFoundPage.tsx

@@ -3,6 +3,15 @@ import React, { ReactElement } from 'react';
 import NotFoundIcon from '../assets/not-found.svg';
 import styles from './NotFoundPage.module.css';
 
+/**
+ * NotFoundPage Component – Displays a 404 error page when a requested route is not found.
+ *
+ * @remarks
+ * The NotFoundPage displays a message and an icon to indicate that the requested page does not exist.
+ *
+ * @return {ReactElement} – The JSX structure of the NotFoundPage.
+ */
+
 const NotFoundPage = (): ReactElement => {
   return (
     <Container maxWidth="md">

frontend/src/pages/Policies.tsx

@@ -41,6 +41,16 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
+/**
+ * Policies Component – Displays the privacy policy for CUAPTS.
+ *
+ * @remarks
+ * This component displays the privacy policy, describing data collection, usage, user rights etc.
+ * It adapts content styling based on the screen size.
+ *
+ * @return {ReactElement} – The rendered JSX structure of the Policies page.
+ */
+
 const Policies = (): ReactElement => {
   const { h2, h3, h4, body, link } = useStyles();
 

frontend/src/pages/SearchResultsPage.tsx

@@ -19,6 +19,21 @@ type Props = {
   setUser: React.Dispatch<React.SetStateAction<firebase.User | null>>;
 };
 
+/**
+ * SearchResultsPage Component – Displays search results with apartment cards based on a user's query.
+ *
+ * @remarks
+ * The page fetches the search results by calling a backend API. The resulting apartments and landlords
+ * are then listed and displayed. The page adjusts for mobile and desktop versions.
+ *
+ * @param {firebase.User | null} props.user – The currently logged-in Firebase user or null
+ * if no user is logged in.
+ * @param {React.Dispatch<React.SetStateAction<firebase.User | null>>} props.setUser - A
+ * function to update the `user` state.
+ *
+ * @return {ReactElement} – The rendered JSX structure of the SearchResultsPage.
+ */
+
 const SearchResultsPage = ({ user, setUser }: Props): ReactElement => {
   const { searchText } = useStyles();
   const location = useLocation();