Differentiating landlord reviews

frontend/src/components/Review/Review.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useState } from 'react';
+import React, { useEffect, ReactElement, useState } from 'react';
 import {
   Box,
   Card,
@@ -10,18 +10,21 @@ import {
   Button,
   IconButton,
   Collapse,
+  Link,
 } from '@material-ui/core';
 import HeartRating from '../utils/HeartRating';
 import { format } from 'date-fns';
 import { makeStyles } from '@material-ui/styles';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import clsx from 'clsx';
-import { DetailedRating, ReviewWithId } from '../../../../common/types/db-types';
+import { DetailedRating, ReviewWithId, ApartmentWithId } from '../../../../common/types/db-types';
 import axios from 'axios';
 import { colors } from '../../colors';
 import { RatingInfo } from '../../pages/LandlordPage';
 import ReviewHeader from './ReviewHeader';
+import { Link as RouterLink } from 'react-router-dom';
 import { getUser } from '../../utils/firebase';
+import { get } from '../../utils/call';
 
 type Props = {
   readonly review: ReviewWithId;
@@ -32,12 +35,20 @@ type Props = {
   setToggle: React.Dispatch<React.SetStateAction<boolean>>;
   user: firebase.User | null;
   setUser: React.Dispatch<React.SetStateAction<firebase.User | null>>;
+  readonly isLandlord: boolean;
 };
 
 const useStyles = makeStyles(() => ({
   root: {
     borderRadius: '10px',
   },
+  // styling for apartment indicator text
+  apartmentIndicator: {
+    marginTop: '7px',
+    marginBottom: '10px',
+    fontSize: '21px',
+  },
+
   bottomborder: {
     borderBottom: '1px #E8E8E8 solid',
     marginBottom: '5px',
@@ -86,6 +97,7 @@ const ReviewComponent = ({
   setToggle,
   user,
   setUser,
+  isLandlord,
 }: Props): ReactElement => {
   const { id, detailedRatings, overallRating, date, reviewText, likes, photos } = review;
   const formattedDate = format(new Date(date), 'MMM dd, yyyy').toUpperCase();
@@ -99,13 +111,23 @@ const ReviewComponent = ({
     photoRowStyle,
     bottomborder,
     heartSpacing,
+    apartmentIndicator,
   } = useStyles();
   const [expanded, setExpanded] = useState(false);
   const [expandedText, setExpandedText] = useState(false);
+  const [apt, setApt] = useState<ApartmentWithId[]>([]);
 
   const handleExpandClick = () => {
     setExpanded(!expanded);
   };
+  //Retreieving apartment data
+  useEffect(() => {
+    if (review.aptId !== null) {
+      get<ApartmentWithId[]>(`/api/apts/${review.aptId}`, {
+        callback: setApt,
+      });
+    }
+  }, [review]);
 
   const getRatingInfo = (ratings: DetailedRating): RatingInfo[] => {
     return [
@@ -162,6 +184,7 @@ const ReviewComponent = ({
                       <ExpandMoreIcon />
                     </IconButton>
                   </Grid>
+
                   <Grid item style={{ marginLeft: 'auto' }}>
                     <Typography className={dateText}>{formattedDate}</Typography>
                   </Grid>
@@ -176,6 +199,33 @@ const ReviewComponent = ({
                 </Grid>
               </Grid>
 
+              {/* Checking to see if apt length is greater than 0 and the page is a landlord page */}
+
+              <Grid>
+                <Typography className={apartmentIndicator}>
+                  {apt.length > 0 && isLandlord ? (
+                    <>
+                      <span style={{ fontWeight: 'bold' }}>Property:</span>{' '}
+                      <Link
+                        {...{
+                          to: `/apartment/${review.aptId}`,
+                          style: {
+                            color: 'black',
+                            textDecoration: 'underline',
+                            paddingBottom: '3px',
+                          },
+                          component: RouterLink,
+                        }}
+                      >
+                        {apt[0].name}
+                      </Link>
+                    </>
+                  ) : (
+                    ''
+                  )}
+                </Typography>
+              </Grid>
+
               <Grid item container alignContent="center">
                 <Typography>
                   {expandedText ? reviewText : reviewText.substring(0, 500)}

frontend/src/pages/ApartmentPage.tsx

@@ -624,6 +624,7 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
                       setToggle={setToggle}
                       user={user}
                       setUser={setUser}
+                      isLandlord={false}
                     />
                   </Grid>
                 ))}

frontend/src/pages/LandlordPage.tsx

@@ -503,6 +503,7 @@ const LandlordPage = ({ user, setUser }: Props): ReactElement => {
                       setToggle={setToggle}
                       user={user}
                       setUser={setUser}
+                      isLandlord={true}
                     />
                   </Grid>
                 ))}