Improved Dropdown component UI to more accurately match Figma design.…

… Adjusted sorting options after feedback from designers and product managers. Simplified to a single drop down menu.
cornell-dti · Feb 29, 2024 · 9274837 · 9274837
1 parent 52b88bc
commit 9274837
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 48 deletions.
diff --git a/frontend/src/components/ApartmentCard/ApartmentCards.tsx b/frontend/src/components/ApartmentCard/ApartmentCards.tsx
@@ -79,65 +79,40 @@ const ApartmentCards = ({ data, user, setUser }: Props): ReactElement => {
             <DropDown
               menuItems={[
                 {
-                  item: 'Relevance',
+                  item: 'Recommended',
                   callback: () => {
                     setSortBy('originalOrder');
+                    setOrderLowToHigh(false);
                   },
                 },
                 {
-                  item: 'Date Added',
-                  callback: () => {
-                    setSortBy('id');
-                  },
-                },
-                {
-                  item: 'Name',
-                  callback: () => {
-                    setSortBy('name');
-                  },
-                },
-                {
-                  item: 'Address',
-                  callback: () => {
-                    setSortBy('address');
-                  },
-                },
-                {
-                  item: 'LandlordID',
+                  item: 'Lowest Price',
                   callback: () => {
-                    setSortBy('landlordId');
+                    setSortBy('avgPrice');
+                    setOrderLowToHigh(true);
                   },
                 },
                 {
-                  item: 'Avg Price',
+                  item: 'Highest Price',
                   callback: () => {
                     setSortBy('avgPrice');
+                    setOrderLowToHigh(false);
                   },
                 },
                 {
-                  item: 'Avg Rating',
+                  item: 'Lowest Rating',
                   callback: () => {
                     setSortBy('avgRating');
+                    setOrderLowToHigh(true);
                   },
                 },
-              ]}
-            />
-          </Grid>
-          <Grid item className={sortByButton}>
-            <DropDown
-              menuItems={[
                 {
-                  item: '⬇ High To Low',
+                  item: 'Highest Rating',
                   callback: () => {
+                    setSortBy('avgRating');
                     setOrderLowToHigh(false);
                   },
                 },
-                {
-                  item: '⬆ Low to High',
-                  callback: () => {
-                    setOrderLowToHigh(true);
-                  },
-                },
               ]}
             />
           </Grid>

diff --git a/frontend/src/components/utils/DropDown.tsx b/frontend/src/components/utils/DropDown.tsx
@@ -1,7 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { Button, Menu, MenuItem } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
-import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
+import {
+  RadioButtonChecked,
+  RadioButtonUnchecked,
+  ArrowDropDown,
+  ArrowDropUp,
+} from '@material-ui/icons';
 import SvgIcon from '@material-ui/core/SvgIcon';
 
 type MenuElement = {
@@ -52,7 +57,7 @@ export default function BasicMenu({ menuItems }: Props) {
         className={button}
       >
         {selected}
-        <SvgIcon component={ArrowDropDownIcon} />
+        <SvgIcon component={open ? ArrowDropUp : ArrowDropDown} />
       </Button>
       <Menu
         id="basic-menu"
@@ -74,6 +79,11 @@ export default function BasicMenu({ menuItems }: Props) {
                 callback();
               }}
             >
+              <SvgIcon
+                component={menuItem.item === selected ? RadioButtonChecked : RadioButtonUnchecked}
+                fontSize="small"
+                style={{ paddingRight: '1rem' }}
+              />
               {item}
             </MenuItem>
           );

diff --git a/frontend/src/utils/sortApartments.ts b/frontend/src/utils/sortApartments.ts
@@ -16,19 +16,9 @@ const sortApartments = (arr: CardData[], property: Fields, orderLowToHigh: boole
   if (property === 'originalOrder') {
     return orderLowToHigh ? clonedArr.reverse() : clonedArr;
   }
-  // Object.keys(originalIndex).forEach(key => {
-  //     let value = originalIndex[key];
-  //     console.log(key, value);
-  //   });
   return clonedArr.sort((r1, r2) => {
     let first, second;
 
-    // if(property === 'originalOrder'){
-    //     //negative to reverse direction
-    //     //(since high to low means smaller original index first)
-    //     first = -originalIndex[r1.buildingData.id];
-    //     second = -originalIndex[r2.buildingData.id];
-    // }
     //if property is a key of ApartmentWithId, then sort by that property using r1?.buildingData[property]
     if (property in r1.buildingData) {
       const prop = property as keyof ApartmentWithId;