Added sorting functionality to ApartmentCards component, Added sortApartments.ts file.

frontend/src/components/ApartmentCard/ApartmentCards.tsx

@@ -1,9 +1,12 @@
-import React, { ReactElement, useState } from 'react';
+import React, { ReactElement, useEffect, useState } from 'react';
 import ApartmentCard from './ApartmentCard';
 import { Grid, Link, makeStyles, Button } from '@material-ui/core';
 import { Link as RouterLink } from 'react-router-dom';
 import { CardData } from '../../App';
 import { loadingLength } from '../../constants/HomeConsts';
+import { ApartmentWithId } from '../../../../common/types/db-types';
+import { sortApartments } from '../../utils/sortApartments';
+import DropDownWithLabel from '../utils/DropDownWithLabel';
 
 type Props = {
  data: CardData[];
@@ -36,8 +39,10 @@ const useStyles = makeStyles({
 /**
  * ApartmentCards Component
  *
- * This component displays ApartmentCard components of the data. It also shows
- * a 'Show more' button if there is more data than the loadingLength constant.
+ * @remarks
+ * This component displays ApartmentCard components of the data.
+ * It also shows a 'Show more' button if there is more data than the loadingLength constant.
+ * It also has a dropdown to sort the apartments based on different properties, such as price and rating.
  * The component is responsive and adjusts its layout based on the screen size.
  *
  * @component
@@ -47,40 +52,99 @@ const useStyles = makeStyles({
  */
 const ApartmentCards = ({ data, user, setUser }: Props): ReactElement => {
  const { boundingBox, showMoreButton, horizontalLine } = useStyles();
-
+ const [isMobile, setIsMobile] = useState<boolean>(false);
  const [resultsToShow, setResultsToShow] = useState<number>(loadingLength);
 
  const handleShowMore = () => {
  setResultsToShow(resultsToShow + loadingLength);
  };
 
+ // Handle resizing of the window depending on mobile and if it is clicked.
+ useEffect(() => {
+ const handleResize = () => {
+ setIsMobile(window.innerWidth <= 600);
+ };
+ handleResize();
+ window.addEventListener('resize', handleResize);
+ return () => window.removeEventListener('resize', handleResize);
+ }, []);
+
+ type Fields = keyof CardData | keyof ApartmentWithId | 'originalOrder';
+ const [sortBy, setSortBy] = useState<Fields>('originalOrder');
+ const [orderLowToHigh, setOrderLowToHigh] = useState<boolean>(false);
+
  return (
  <>
+ <Grid item style={{ marginRight: '8px' }}>
+ <DropDownWithLabel
+ label="Sort by"
+ menuItems={[
+ {
+ item: 'Recommended',
+ callback: () => {
+ setSortBy('originalOrder');
+ setOrderLowToHigh(false);
+ },
+ },
+ {
+ item: 'Lowest Price',
+ callback: () => {
+ setSortBy('avgPrice');
+ setOrderLowToHigh(true);
+ },
+ },
+ {
+ item: 'Highest Price',
+ callback: () => {
+ setSortBy('avgPrice');
+ setOrderLowToHigh(false);
+ },
+ },
+ {
+ item: 'Lowest Rating',
+ callback: () => {
+ setSortBy('avgRating');
+ setOrderLowToHigh(true);
+ },
+ },
+ {
+ item: 'Highest Rating',
+ callback: () => {
+ setSortBy('avgRating');
+ setOrderLowToHigh(false);
+ },
+ },
+ ]}
+ isMobile={isMobile}
+ />
+ </Grid>
  <Grid container spacing={3} className={boundingBox}>
  {data &&
- data.slice(0, resultsToShow).map(({ buildingData, numReviews, company }, index) => {
- const { id } = buildingData;
- return (
- <Grid item md={12} key={index}>
- <Link
- {...{
- to: `/apartment/${id}`,
- style: { textDecoration: 'none' },
- component: RouterLink,
- }}
- >
- <ApartmentCard
- key={index}
- numReviews={numReviews}
- buildingData={buildingData}
- company={company}
- user={user}
- setUser={setUser}
- />
- </Link>
- </Grid>
- );
- })}
+ sortApartments(data, sortBy, orderLowToHigh)
+ .slice(0, resultsToShow)
+ .map(({ buildingData, numReviews, company }, index) => {
+ const { id } = buildingData;
+ return (
+ <Grid item md={12} key={index}>
+ <Link
+ {...{
+ to: `/apartment/${id}`,
+ style: { textDecoration: 'none' },
+ component: RouterLink,
+ }}
+ >
+ <ApartmentCard
+ key={index}
+ numReviews={numReviews}
+ buildingData={buildingData}
+ company={company}
+ user={user}
+ setUser={setUser}
+ />
+ </Link>
+ </Grid>
+ );
+ })}
 
  {data && data.length > resultsToShow && (
  <>

frontend/src/components/LeaveReview/ReviewModal.tsx

@@ -12,7 +12,6 @@ import {
  makeStyles,
  IconButton,
  CardMedia,
- Icon,
  useMediaQuery,
 } from '@material-ui/core';
 import axios from 'axios';
@@ -69,18 +68,14 @@ const useStyle = makeStyles({
  fontWeight: 600,
  width: '100%',
  height: '100%',
- borderRadius: '50px !important',
- backgroundColor: 'transparent',
  top: '0',
  left: '0',
  textTransform: 'none',
  fontSize: '18px',
- textAlign: 'left',
  position: 'absolute',
- zIndex: 1,
- display: 'flex',
- justifyContent: 'left',
- paddingLeft: '25px',
+ borderRadius: '50px',
+ justifyContent: 'flex-start',
+ paddingLeft: '20px',
  },
  expandMoreIcon: {
  right: '10px',
@@ -515,7 +510,7 @@ const ReviewModal = ({
  spacing={1}
  direction="row"
  alignItems="center"
- justifyContent="flex-start"
+ justifyContent={isMobile ? 'flex-start' : 'flex-end'}
  >
  <Grid
  item

frontend/src/components/utils/DropDown.tsx

@@ -1,8 +1,48 @@
-import React, { useState, useEffect } from 'react';
-import { Button, Menu, MenuItem } from '@material-ui/core';
-import { makeStyles } from '@material-ui/styles';
+/**
+ * DropDown Component
+ *
+ * @remarks
+ * A dropdown component that displays a button and a menu with selectable items.
+ * The component uses Material-UI components for consistent styling.
+ *
+ * @component
+ * @example
+ * ```typescript
+ * const menuItems = [
+ * { item: 'Price', callback: () => setSortBy('avgPrice')},
+ * { item: 'Rating', callback: () => setSortBy('avgRating')},
+ * { item: 'Date Added', callback: () => setSortBy('id')},
+ * ];
+ *
+ * function App() {
+ * return (
+ * <DropDown menuItems={menuItems} />
+ * );
+ * }
+ *```
+ * @param {Object} props - The props of the component.
+ * @param {MenuElement[]} props.menuItems - An array of menu items, each containing an item name and a callback function.
+ * @returns {JSX.Element} The rendered dropdown component.
+ */
+import React, { useState } from 'react';
+import { Button, Menu, MenuItem, SvgIcon } from '@material-ui/core';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import { makeStyles } from '@material-ui/styles';
+import ArrowDownSrc from '../../assets/dropdown-arrow-down.svg';
+
+const expandArrow = (direction: boolean) => {
+ return (
+ <div
+ style={{
+ padding: '0 0 0 10px',
+ transform: direction ? 'scaleY(-1)' : 'none',
+ transition: 'all 0.5s ease',
+ }}
+ >
+ <img src={ArrowDownSrc} alt="⬇" height="10" />
+ </div>
+ );
+};
 
 type MenuElement = {
  item: string;
@@ -11,24 +51,31 @@ type MenuElement = {
 
 type Props = {
  menuItems: MenuElement[];
+ isMobile?: boolean;
  defaultValue?: string;
  className?: string;
  icon?: boolean;
 };
 
 const useStyles = makeStyles({
  button: {
- minWidth: '64px',
- backgroundColor: '#e8e8e8',
- borderColor: '#e8e8e8',
+ borderColor: '#E8E8E8',
+ textTransform: 'none',
+ fontSize: '18px',
+ lineHeight: 'normal',
+ fontWeight: 'normal',
+ height: '44px',
+ borderRadius: '10px',
+ backgroundColor: '#E8E8E8',
+ scale: '1',
+ whiteSpace: 'nowrap',
  },
 });
 
-export default function BasicMenu({ menuItems, defaultValue, className, icon }: Props) {
+export default function DropDown({ menuItems, isMobile, defaultValue, className, icon }: Props) {
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
- const [selected, setSelected] = useState<string>(defaultValue ? defaultValue : 'Recent');
+ const [selected, setSelected] = useState<string>(defaultValue ? defaultValue : menuItems[0].item);
  const { button } = useStyles();
- const [isMobile, setIsMobile] = useState<boolean>(false);
 
  const open = Boolean(anchorEl);
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -37,12 +84,6 @@ export default function BasicMenu({ menuItems, defaultValue, className, icon }:
  const handleClose = () => {
  setAnchorEl(null);
  };
- useEffect(() => {
- const handleResize = () => setIsMobile(window.innerWidth <= 600);
- handleResize();
- window.addEventListener('resize', handleResize);
- return () => window.removeEventListener('resize', handleResize);
- }, []);
 
  return (
  <div>
@@ -55,7 +96,9 @@ export default function BasicMenu({ menuItems, defaultValue, className, icon }:
  className={className || button}
  >
  {selected}
- {icon != false && <SvgIcon component={ArrowDropDownIcon} />}
+ {icon === undefined
+ ? expandArrow(open)
+ : icon === true && <SvgIcon component={ArrowDropDownIcon} />}
  </Button>
  <Menu
  id="basic-menu"

frontend/src/components/utils/DropDownWithLabel.tsx

@@ -0,0 +1,74 @@
+/**
+ * A dropdown component with a label.
+ *
+ * @component
+ *
+ * @param {string} label - The label for the dropdown.
+ * @param {MenuElement[]} menuItems - An array of menu items, each containing an item name and a callback function.
+ * @param {React.CSSProperties} [labelStyle] - The style of the label.
+ * @param {boolean} isMobile - Whether the dropdown is being displayed on a mobile device.
+ *
+ * @returns {JSX.Element} The rendered dropdown component.
+ *
+ * @example
+ * // Usage:
+ * const menuItems = [
+ * { item: 'Item 1', callback: () => console.log('Item 1 selected') },
+ * { item: 'Item 2', callback: () => console.log('Item 2 selected') },
+ * { item: 'Item 3', callback: () => console.log('Item 3 selected') },
+ * ];
+ *
+ * <DropDownWithLabel label="Select an item" menuItems={menuItems} isMobile={true} />
+ */
+import React from 'react';
+import { Typography, Grid } from '@material-ui/core';
+import DropDown from './DropDown';
+
+type MenuElement = {
+ item: string;
+ callback: () => void;
+};
+
+interface DropDownWithLabelProps {
+ label: string;
+ menuItems: MenuElement[];
+ labelStyle?: React.CSSProperties;
+ isMobile: boolean;
+}
+
+const DropDownWithLabel: React.FC<DropDownWithLabelProps> = ({
+ label,
+ menuItems,
+ labelStyle,
+ isMobile,
+}) => {
+ return (
+ <Grid
+ container
+ direction="row"
+ alignItems="center"
+ justifyContent="flex-end"
+ wrap="nowrap"
+ spacing={0}
+ >
+ <Grid item>
+ <Typography
+ variant="body1"
+ style={{
+ fontSize: '18px',
+ paddingRight: '10px',
+ whiteSpace: 'nowrap',
+ ...labelStyle,
+ }}
+ >
+ {label}
+ </Typography>
+ </Grid>
+ <Grid item>
+ <DropDown menuItems={menuItems} isMobile={isMobile} />
+ </Grid>
+ </Grid>
+ );
+};
+
+export default DropDownWithLabel;