Revert "Merge branch 'main' into map-backend"

This reverts commit ddeacc0, reversing
changes made to bbb2930.

README.md

@@ -24,17 +24,6 @@ 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
@@ -45,7 +34,7 @@ on its own, run `yarn frontend-dev` or `yarn backend-dev`.
 - **Cyrus Irani** - Developer
 - **Ankit Lakkapragada** - Developer
 - **Jessica Han** - Developer
-- **Gunyasorn (Grace) Sawatyanon** - Developer
+- **Grace Sawatyanon** - Developer
 - **Miranda Luo** - Developer
 - **Kea-Roy Ong** - Developer
 - **Casper Liao** - Developer
@@ -62,7 +51,7 @@ on its own, run `yarn frontend-dev` or `yarn backend-dev`.
 - **Daniel Jin** - Developer
 - **Ankit Lakkapragada** - Developer
 - **Jessica Han** - Developer
-- **Gunyasorn (Grace) Sawatyanon** - Developer
+- **Grace Sawatyanon** - Developer
 
 ### 2021-2022
 

backend/src/app.ts

@@ -156,48 +156,28 @@ app.get('/api/review/:status', async (req, res) => {
 });
 
 /**
- * review/like/:userId – Fetches reviews liked by a user.
- *
- * @remarks
- * This endpoint retrieves reviews that a user has marked as helpful (liked). It can also filter by review status by passing in a query parameter. If no parameter is provided, no additional filter is applied.
- *
- * @route GET /api/review/like/:userId
- *
- * @status
- * - 200: Successfully retrieved the liked reviews.
- * - 401: Error due to unauthorized access or authentication issues.
+ * Return list of reviews that user marked as helpful (like)
  */
-app.get('/api/review/like/:userId', authenticate, async (req, res) => {
-  if (!req.user) {
-    throw new Error('not authenticated');
-  }
-  const realUserId = req.user.uid;
-  const { userId } = req.params;
-  const statusType = req.query.status;
-  if (userId !== realUserId) {
-    res.status(401).send("Error: user is not authorized to access another user's likes");
-    return;
-  }
-  const likesDoc = await likesCollection.doc(realUserId).get();
+// TODO: uid param is unused here but when remove it encounter 304 status and req.user is null
+app.get('/api/review/like/:uid', authenticate, async (req, res) => {
+  if (!req.user) throw new Error('not authenticated');
+  const { uid } = req.user;
+  const likesDoc = await likesCollection.doc(uid).get();
 
   if (likesDoc.exists) {
     const data = likesDoc.data();
     if (data) {
       const reviewIds = Object.keys(data);
       const matchingReviews: ReviewWithId[] = [];
-      if (reviewIds.length > 0) {
-        let query = reviewCollection.where(FieldPath.documentId(), 'in', reviewIds);
-        if (statusType) {
-          // filter by status if provided
-          query = query.where('status', '==', statusType);
-        }
-        const querySnapshot = await query.get();
-        querySnapshot.forEach((doc) => {
-          const data = doc.data();
-          const reviewData = { ...data, date: data.date.toDate() };
-          matchingReviews.push({ ...reviewData, id: doc.id } as ReviewWithId);
-        });
-      }
+      const querySnapshot = await reviewCollection
+        .where(FieldPath.documentId(), 'in', reviewIds)
+        .where('status', '==', 'APPROVED')
+        .get();
+      querySnapshot.forEach((doc) => {
+        const data = doc.data();
+        const reviewData = { ...data, date: data.date.toDate() };
+        matchingReviews.push({ ...reviewData, id: doc.id } as ReviewWithId);
+      });
       res.status(200).send(JSON.stringify(matchingReviews));
       return;
     }

frontend/src/components/Admin/AdminReview.tsx

@@ -37,8 +37,6 @@ type Props = {
   readonly setToggle: React.Dispatch<React.SetStateAction<boolean>>;
   /** Indicates if the review is in the declined section. */
   readonly declinedSection: boolean;
-  /** Function to trigger the photo carousel. */
-  readonly triggerPhotoCarousel: (photos: readonly string[], startIndex: number) => void;
 };
 
 /**
@@ -72,24 +70,14 @@ const useStyles = makeStyles(() => ({
     borderRadius: '4px',
     height: '15em',
     width: '15em',
-    cursor: 'pointer',
-    transition: '0.3s ease-in-out',
-    '&:hover': {
-      filter: 'brightness(0.85)',
-      boxShadow: '0 4px 4px rgba(0, 0, 0, 0.1)',
-      transform: 'scale(1.02)',
-    },
   },
   photoRowStyle: {
     overflowX: 'auto',
-    overflowY: 'hidden',
     display: 'flex',
     flexDirection: 'row',
     gap: '1vw',
     paddingTop: '2%',
     paddingLeft: '0.6%',
-    paddingRight: '0.6%',
-    paddingBottom: '2%',
   },
 }));
 
@@ -99,12 +87,7 @@ const useStyles = makeStyles(() => ({
  * @param review review - The review to approve
  * @returns The rendered component.
  */
-const AdminReviewComponent = ({
-  review,
-  setToggle,
-  declinedSection,
-  triggerPhotoCarousel,
-}: Props): ReactElement => {
+const AdminReviewComponent = ({ review, setToggle, declinedSection }: Props): ReactElement => {
   const { detailedRatings, overallRating, bedrooms, price, date, reviewText, photos } = review;
   const formattedDate = format(new Date(date), 'MMM dd, yyyy').toUpperCase();
   const { root, dateText, bedroomsPriceText, ratingInfo, photoStyle, photoRowStyle } = useStyles();
@@ -219,16 +202,14 @@ const AdminReviewComponent = ({
               {photos.length > 0 && (
                 <Grid container>
                   <Grid item className={photoRowStyle}>
-                    {photos.map((photo, i) => {
+                    {photos.map((photo) => {
                       return (
                         <CardMedia
                           component="img"
                           alt="Apt image"
                           image={photo}
                           title="Apt image"
                           className={photoStyle}
-                          onClick={() => triggerPhotoCarousel(photos, i)}
-                          loading="lazy"
                         />
                       );
                     })}

frontend/src/components/Apartment/Header.tsx

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

frontend/src/components/Apartment/MapModal.tsx

@@ -1,11 +1,12 @@
-import React, { Dispatch, SetStateAction, useRef } from 'react';
+import React, { Dispatch, SetStateAction, useRef, useState, useEffect } from 'react';
 import {
   Box,
   Grid,
   Typography,
   Dialog,
   DialogTitle,
   DialogContent,
+  DialogActions,
   makeStyles,
   IconButton,
   useTheme,

frontend/src/components/Landlord/Header.tsx

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

frontend/src/components/PhotoCarousel/PhotoCarousel.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
-import { Box, styled, Container, CardMedia, Dialog, makeStyles } from '@material-ui/core';
+import { Modal, Box, styled, Container, CardMedia, Dialog, makeStyles } from '@material-ui/core';
 import Carousel from 'react-material-ui-carousel';
 
 interface Props {
   photos: readonly string[];
   open: boolean;
   onClose?: () => void;
-  startIndex: number;
 }
 
 const useStyles = makeStyles((theme) => ({
@@ -19,91 +18,33 @@ const useStyles = makeStyles((theme) => ({
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
     opacity: 1,
   },
-  indicatorContainer: {
-    position: 'absolute',
-    bottom: '-10px',
-    width: '100%',
-    textAlign: 'center',
-  },
-  carouselContainer: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexDirection: 'column',
-    overflow: 'visible',
-    height: '80vh',
-    [theme.breakpoints.down('md')]: {
-      height: '60dvw',
-    },
-    cursor: 'pointer',
-  },
 }));
 const ImageBox = styled(Box)({
+  width: 'fit-content',
+  margin: 'auto',
   borderRadius: '10px',
-  maxHeight: '80dvh',
-  backgroundColor: 'transparent',
-  '& img': {
-    borderRadius: '10px',
-    maxHeight: '80dvh',
-    objectFit: 'contain',
-    width: 'calc(69dvw - 96px)',
-    margin: 'auto',
-    cursor: 'default',
-  },
+  overflow: 'hidden',
 });
 
-/**
- * PhotoCarousel - this component displays a modal with a carousel of photos.
- *
- * @remarks
- * This component is used to display a modal with a carousel of photos.
- * It dynamically adjusts to different screen sizes and can be navigated using the arrow buttons.
- *
- * @component
- * @param {readonly string[]} props.photos - An array of photo URLs to display in the carousel.
- * @param {boolean} props.open - A boolean indicating whether the modal is open.
- * @param {() => void} [props.onClose] - An optional callback function to handle closing the modal.
- * @param {number} props.startIndex - The starting index of the carousel.
- *
- * @returns {JSX.Element} The rendered PhotoCarousel component.
- */
-const PhotoCarousel = ({ photos, open, onClose, startIndex }: Props) => {
-  const { modalBackground, navButton, indicatorContainer, carouselContainer } = useStyles();
+const PhotoCarousel = ({ photos, open, onClose }: Props) => {
+  const { modalBackground, navButton } = useStyles();
   return (
     <Dialog
       open={open}
       onClose={onClose}
       fullWidth
-      maxWidth={false}
-      style={{ cursor: 'pointer' }}
+      maxWidth="md"
       PaperProps={{ className: modalBackground }}
     >
-      <Container
-        onClick={(e) => {
-          const target = e.target as HTMLElement;
-          if (
-            target.tagName !== 'IMG' &&
-            target.tagName !== 'BUTTON' &&
-            target.tagName !== 'svg' &&
-            target.tagName !== 'circle'
-          ) {
-            console.log(target.tagName);
-            onClose?.();
-          }
-        }}
-      >
+      <Container>
         <Carousel
           autoPlay={false}
-          className={carouselContainer}
           navButtonsAlwaysVisible={true}
           navButtonsProps={{ className: navButton }}
-          indicatorContainerProps={{ className: indicatorContainer }}
-          index={startIndex}
-          animation="fade"
         >
           {photos.map((src, index) => {
             return (
-              <ImageBox key={index} style={{ backgroundColor: 'rgba(0, 0, 0, 0.05)' }}>
+              <ImageBox key={index}>
                 <CardMedia component="img" src={src} />
               </ImageBox>
             );