Merge branch 'main' into add-sorting-on-home-and-locations-part-two. …

…Adjusted dropdown temporarily to be compatible with reviewmodal.

backend/scripts/add_price_and_bedroom_attributes.ts

@@ -1,14 +1,15 @@
-import { Review } from '@common/types/db-types';
 import { db } from '../src/firebase-config';
 
-// This script will add the price and bedrooms attributes to all the reviews that do not have them
+/*
+ This script will add the price and bedrooms attributes to all the reviews that do not have them
+*/
 
 const reviewCollection = db.collection('reviews');
 
 reviewCollection.get().then((querySnapshot) => {
  querySnapshot.forEach((doc) => {
  console.log('Review Before Changes: ', doc.data());
- // Version 1: Using Update?
+ // Update the review with price and bedrooms attributes using update method
  reviewCollection.doc(doc.id).update({
  price: 0,
  bedrooms: 0,

backend/scripts/add_reviews.ts

@@ -19,6 +19,8 @@ const formatReview = (data: any): Review => ({
  aptId: data.aptId.toString(),
  reviewText: data.reviewText,
  overallRating: data.overallRating,
+ bedrooms: data.bedrooms,
+ price: data.price,
  detailedRatings: {
  location: data['detailedRatings.location'],
  safety: data['detailedRatings.safety'],

backend/scripts/add_reviews_nodups.ts

@@ -19,6 +19,8 @@ const formatReview = (data: any): Review => ({
  aptId: data.aptId === null ? null : data.aptId.toString(),
  reviewText: data.reviewText,
  overallRating: data.overallRating,
+ bedrooms: data.bedrooms,
+ price: data.price,
  detailedRatings: {
  location: data['detailedRatings.location'],
  safety: data['detailedRatings.safety'],

common/types/db-types.ts

@@ -19,13 +19,13 @@ export type Review = {
  readonly date: Date;
  readonly detailedRatings: DetailedRating;
  readonly landlordId: string;
+ readonly bedrooms: number;
+ readonly price: number;
  readonly overallRating: number;
  readonly photos: readonly string[];
  readonly reviewText: string;
  readonly status?: 'PENDING' | 'APPROVED' | 'DECLINED' | 'DELETED';
  readonly userId?: string | null;
- readonly price?: number;
- readonly bedrooms?: number;
 };
 
 export type ReviewWithId = Review & Id;

frontend/src/App.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement, useEffect, useState } from 'react';
 import './App.scss';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { Route, Switch, useLocation } from 'react-router-dom';
 import HomePage from './pages/HomePage';
 import FAQPage from './pages/FAQPage';
 import ReviewPage from './pages/ReviewPage';
@@ -95,7 +95,7 @@ hotjar.initialize(HJID, HJSV);
 
 const App = (): ReactElement => {
  const [user, setUser] = useState<firebase.User | null>(null);
-
+ const { pathname } = useLocation();
  useEffect(() => {
  const setData = async () => {
  await axios.post('/api/set-data');
@@ -105,50 +105,45 @@ const App = (): ReactElement => {
 
  return (
  <ThemeProvider theme={theme}>
- <Router>
- <NavBar headersData={headersData} user={user} setUser={setUser} />
- <div className="root">
- <Switch>
- <Route exact path="/" component={() => <HomePage user={user} setUser={setUser} />} />
+ <NavBar headersData={headersData} user={user} setUser={setUser} />
+ <div className="root">
+ <Switch>
+ <Route exact path="/" component={() => <HomePage user={user} setUser={setUser} />} />
 
-  <Route exact path="/faq" component={FAQPage} />
-  <Route
-  exact
-  path="/reviews"
-  component={() => <ReviewPage user={user} setUser={setUser} />}
-  />
+ <Route exact path="/faq" component={FAQPage} />
+ <Route
+ exact
+ path="/reviews"
+ component={() => <ReviewPage user={user} setUser={setUser} />}
+ />
 
- <Route exact path="/policies" component={Policies} />
- <Route
- path="/location/:location"
- component={() => <LocationPage user={user} setUser={setUser} />}
- />
- <Route
- path="/landlord/:landlordId"
- component={() => <LandlordPage user={user} setUser={setUser} />}
- />
- <Route
- path="/profile"
- component={() => <ProfilePage user={user} setUser={setUser} />}
- />
- <Route
- path="/bookmarks"
- component={() => <BookmarksPage user={user} setUser={setUser} />}
- />
- <Route
- path="/apartment/:aptId"
- component={() => <ApartmentPage user={user} setUser={setUser} />}
- />
- <Route exact path="/notfound" component={NotFoundPage} />
- <Route
- path="/search"
- component={() => <SearchResultsPage user={user} setUser={setUser} />}
- />
- {isAdmin(user) && <Route exact path="/admin" component={AdminPage} />}
- </Switch>
- </div>
- <Footer />
- </Router>
+ <Route exact path="/policies" component={Policies} />
+ <Route
+ path="/location/:location"
+ component={() => <LocationPage user={user} setUser={setUser} />}
+ />
+ <Route
+ path="/landlord/:landlordId"
+ component={() => <LandlordPage user={user} setUser={setUser} />}
+ />
+ <Route path="/profile" component={() => <ProfilePage user={user} setUser={setUser} />} />
+ <Route
+ path="/bookmarks"
+ component={() => <BookmarksPage user={user} setUser={setUser} />}
+ />
+ <Route
+ path="/apartment/:aptId"
+ component={() => <ApartmentPage user={user} setUser={setUser} />}
+ />
+ <Route exact path="/notfound" component={NotFoundPage} />
+ <Route
+ path="/search"
+ component={() => <SearchResultsPage user={user} setUser={setUser} />}
+ />
+ {isAdmin(user) && <Route exact path="/admin" component={AdminPage} />}
+ </Switch>
+ </div>
+ {pathname !== '/faq' && <Footer />}
  </ThemeProvider>
  );
 };

frontend/src/colors.js

@@ -1,15 +1,18 @@
 export const colors = {
  red1: '#B94630',
+ red1Transparent: 'rgba(185, 70, 48, 0.8)',
  red2: '#EB5757',
  red3: '#E8725C',
  red4: '#FFCFC7',
  red5: '#FFF6F6',
  red6: '#FFF2F2',
+ darkred: '#9C3B29',
  black: '#000000',
  gray1: '#5D5D5D',
  gray2: '#898989',
  gray3: '#F9F9F9',
  gray4: '#C4C4C4',
+ gray5: '#E8E8E8',
  white: '#FFFFFF',
  landlordCardRed: '#F3664B',
  green1: '#68BB59',

frontend/src/components/Admin/AdminReview.tsx

@@ -24,6 +24,7 @@ import { get } from '../../utils/call';
 import { Link as RouterLink } from 'react-router-dom';
 import ReviewHeader from '../Review/ReviewHeader';
 import axios from 'axios';
+import getPriceRange from '../../utils/priceRange';
 import { createAuthHeaders, getUser } from '../../utils/firebase';
 
 /**
@@ -55,6 +56,12 @@ const useStyles = makeStyles(() => ({
  dateText: {
  color: colors.gray1,
  },
+ bedroomsPriceText: {
+ marginTop: '10px',
+ marginBottom: '10px',
+ display: 'flex',
+ gap: '30px',
+ },
  ratingInfo: {
  marginTop: '10px',
  marginBottom: '30px',
@@ -81,9 +88,9 @@ const useStyles = makeStyles(() => ({
  * @returns The rendered component.
  */
 const AdminReviewComponent = ({ review, setToggle, declinedSection }: Props): ReactElement => {
- const { detailedRatings, overallRating, date, reviewText, photos } = review;
+ const { detailedRatings, overallRating, bedrooms, price, date, reviewText, photos } = review;
  const formattedDate = format(new Date(date), 'MMM dd, yyyy').toUpperCase();
- const { root, dateText, ratingInfo, photoStyle, photoRowStyle } = useStyles();
+ const { root, dateText, bedroomsPriceText, ratingInfo, photoStyle, photoRowStyle } = useStyles();
  const [apt, setApt] = useState<ApartmentWithId[]>([]);
  const [landlord, setLandlord] = useState<Landlord>();
 
@@ -172,6 +179,18 @@ const AdminReviewComponent = ({ review, setToggle, declinedSection }: Props): Re
  <Typography className={dateText}>{formattedDate}</Typography>
  </Grid>
 
+ <Grid item xs={12} className={bedroomsPriceText}>
+ {bedrooms > 0 && (
+ <Typography style={{ fontWeight: '600' }}>Bedroom(s): {bedrooms}</Typography>
+ )}
+ {price > 0 && (
+ <Typography style={{ fontWeight: '600' }}>
+ {' '}
+ Price: {getPriceRange(price) || 0}
+ </Typography>
+ )}
+ </Grid>
+
  <Grid item xs={12} className={ratingInfo}>
  <ReviewHeader aveRatingInfo={getRatingInfo(detailedRatings)} />
  </Grid>