Implemented HomePage Sortings

- Implemented most loved and most reviewed sorting apartment functionalities
- Implemented HomePage dummy apartment card rows

Author: CasperL1218

frontend/src/App.tsx

@@ -9,7 +9,7 @@ import ProfilePage from './pages/ProfilePage';
 import BookmarksPage from './pages/BookmarksPage';
 import { ThemeProvider } from '@material-ui/core';
 import { createTheme } from '@material-ui/core/styles';
-import NavBar, { NavbarButton } from './components/utils/NavBar';
+import NavBar, { NavbarButton } from './components/utils/NavBar/index';
 import NotFoundPage from './pages/NotFoundPage';
 import { ApartmentWithId } from '../../common/types/db-types';
 import Footer from './components/utils/Footer';

frontend/src/components/ApartmentCard/ApartmentCard.tsx

@@ -25,6 +25,7 @@ import { Link as RouterLink } from 'react-router-dom';
 type Props = {
   buildingData: ApartmentWithId;
   numReviews: number;
+  avgRating: number;
   company?: string;
   user: firebase.User | null;
   setUser: React.Dispatch<React.SetStateAction<firebase.User | null>>;
@@ -84,12 +85,14 @@ const useStyles = makeStyles({
  * @param {Object} props - Component properties.
  * @param {ApartmentWithId} props.buildingData - The data for the apartment.
  * @param {number} props.numReviews - The number of reviews for the apartment.
+ * @param {number} props.avgRating - The average rating for the apartment.
  * @param {string} [props.company] - The company associated with the apartment (optional).
  * @returns {ReactElement} ApartmentCard component.
  */
 const ApartmentCard = ({
   buildingData,
   numReviews,
+  avgRating,
   company,
   user,
   setUser,
@@ -330,6 +333,13 @@ const ApartmentCard = ({
               >
                 {numReviews + (numReviews !== 1 ? ' Reviews' : ' Review')}
               </Typography>
+              <Typography
+                variant="h6"
+                className={reviewNum}
+                style={{ fontSize: '10px', lineHeight: 'normal' }}
+              >
+                {`Rating: ${avgRating.toFixed(1)}`}
+              </Typography>
             </Grid>
           )}
           {/* Sample Review */}

frontend/src/components/ApartmentCard/ApartmentCards.tsx

@@ -132,18 +132,32 @@ const ApartmentCards = ({
                 setOrderLowToHigh(false);
               },
             },
+            {
+              item: 'Most Loved',
+              callback: () => {
+                setSortBy('avgRating');
+                setOrderLowToHigh(false);
+              },
+            },
+            {
+              item: 'Most Reviewed',
+              callback: () => {
+                setSortBy('numReviews');
+                setOrderLowToHigh(false);
+              },
+            },
           ]}
           isMobile={isMobile}
         />
       </Grid>
       <Grid container spacing={3} className={boundingBox}>
         {data &&
           sortApartments(data, sortBy, orderLowToHigh)
-            .slice(0, resultsToShow)
-            .map(({ buildingData, numReviews, company }, index) => {
+            .slice(0, Math.min(3, resultsToShow))
+            .map(({ buildingData, numReviews, company, avgRating }, index) => {
               const { id } = buildingData;
               return (
-                <Grid item md={12} key={index}>
+                <Grid item md={4} key={index}>
                   <Link
                     {...{
                       to: `/apartment/${id}`,
@@ -154,6 +168,7 @@ const ApartmentCards = ({
                     <ApartmentCard
                       key={index}
                       numReviews={numReviews}
+                      avgRating={avgRating ?? 0}
                       buildingData={buildingData}
                       company={company}
                       user={user}
@@ -164,7 +179,7 @@ const ApartmentCards = ({
               );
             })}
 
-        {data && data.length > resultsToShow && (
+        {data && data.length > 3 && resultsToShow > 3 && (
           <>
             <Grid item xs={12}>
               <hr className={horizontalLine} />

frontend/src/components/Search/Autocomplete.tsx

@@ -194,9 +194,15 @@ const Autocomplete = ({ drawerOpen }: Props): ReactElement => {
     setOpen(false);
   };
 
+  const handleClickAway = () => {
+    setOpen(false);
+    setOpenFilter(false);
+  };
+
   const handleOnChange = (query: string) => {
     setQuery(query);
     setSelected(null);
+    setOpenFilter(false);
     if (query !== '') {
       setLoading(true);
     } else {
@@ -214,7 +220,6 @@ const Autocomplete = ({ drawerOpen }: Props): ReactElement => {
         <ClickAwayListener
           onClickAway={() => {
             setOpen(false);
-            setOpenFilter(false);
           }}
         >
           <div>
@@ -354,33 +359,48 @@ const Autocomplete = ({ drawerOpen }: Props): ReactElement => {
 
   return (
     <div style={{ position: 'relative', width: drawerOpen ? '100%' : '65%' }}>
-      <div className={searchBarRow}>
-        <TextField
-          fullWidth
-          ref={inputRef}
-          value={query}
-          placeholder={placeholderText}
-          className={text}
-          variant="outlined"
-          style={{
-            borderRadius: '10px',
-            width: !isMobile ? '100%' : '98%',
-          }}
-          onKeyDown={textFieldHandleListKeyDown}
-          onChange={(event) => {
-            const value = event.target.value;
-            if (value !== '' || value !== null) {
-              handleOnChange(value);
-            }
-          }}
-          InputProps={getInputProps()}
-        />
-        <IconButton onClick={handleToggleFilter} className={filterIconBackground} disableRipple>
-          <img src={filterIcon} alt={'filter-icon'} style={{ width: '21.4px', height: '21.4px' }} />
-        </IconButton>
-      </div>
-      <Menu />
-      <FilterSection filters={filters} onChange={handleFilterChange} open={openFilter} />
+      <ClickAwayListener onClickAway={handleClickAway}>
+        <div>
+          <div className={searchBarRow}>
+            <TextField
+              fullWidth
+              ref={inputRef}
+              value={query}
+              placeholder={placeholderText}
+              className={text}
+              variant="outlined"
+              style={{
+                borderRadius: '10px',
+                width: !isMobile ? '100%' : '98%',
+              }}
+              onKeyDown={textFieldHandleListKeyDown}
+              onChange={(event) => {
+                const value = event.target.value;
+                if (value !== '' || value !== null) {
+                  handleOnChange(value);
+                }
+              }}
+              InputProps={getInputProps()}
+            />
+            <IconButton
+              onClick={(e) => {
+                e.stopPropagation(); // Prevent click from triggering ClickAwayListener
+                handleToggleFilter();
+              }}
+              className={filterIconBackground}
+              disableRipple
+            >
+              <img
+                src={filterIcon}
+                alt={'filter-icon'}
+                style={{ width: '21.4px', height: '21.4px' }}
+              />
+            </IconButton>
+          </div>
+          <Menu />
+          <FilterSection filters={filters} onChange={handleFilterChange} open={openFilter} />
+        </div>
+      </ClickAwayListener>
     </div>
   );
 };

frontend/src/components/Search/FilterSection.tsx

@@ -15,19 +15,19 @@ const useStyles = makeStyles({
   container: {
     position: 'absolute',
     zIndex: 1,
-    width: '100%',
+    minWidth: '100%',
     backgroundColor: 'white',
     borderRadius: '10px',
     marginTop: '5px',
     display: 'flex',
     flexDirection: 'row',
+    boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.1)',
   },
   section: {
     marginBottom: '1rem',
     backgroundColor: 'white',
-    borderRadius: '10px',
     padding: '1rem',
-    border: '1px solid rgb(255, 8, 8)',
+    minWidth: '210px',
   },
   sectionTitle: {
     fontWeight: 'bold',
@@ -99,6 +99,12 @@ const FilterSection: React.FC<FilterSectionProps> = ({ filters, onChange, open }
     onChange({ ...filters, [field]: newValue });
   };
 
+  const handlePriceChange = (field: 'minPrice' | 'maxPrice', value: string) => {
+    if (value === '' || /^\d+$/.test(value)) {
+      onChange({ ...filters, [field]: value });
+    }
+  };
+
   return (
     <div>
       {open && (
@@ -128,21 +134,25 @@ const FilterSection: React.FC<FilterSectionProps> = ({ filters, onChange, open }
               <TextField
                 placeholder="No Min"
                 value={filters.minPrice}
-                onChange={(e) => onChange({ ...filters, minPrice: e.target.value })}
+                onChange={(e) => handlePriceChange('minPrice', e.target.value)}
                 variant="outlined"
                 size="small"
-                InputProps={{
+                type="text"
+                inputProps={{
+                  pattern: '\\d*',
                   className: classes.filterText,
                 }}
               />
               <span className={classes.filterText}>-</span>
               <TextField
                 placeholder="No Max"
                 value={filters.maxPrice}
-                onChange={(e) => onChange({ ...filters, maxPrice: e.target.value })}
+                onChange={(e) => handlePriceChange('maxPrice', e.target.value)}
                 variant="outlined"
                 size="small"
-                InputProps={{
+                type="text"
+                inputProps={{
+                  pattern: '\\d*',
                   className: classes.filterText,
                 }}
               />

frontend/src/pages/HomePage.tsx

@@ -132,7 +132,28 @@ const HomePage = ({ user, setUser }: Props): ReactElement => {
             </Typography>
             <LocationCards />
           </Box>
-          {!isMobile && <ApartmentCards user={user} setUser={setUser} data={data.buildingData} />}
+          {!isMobile && (
+            <>
+              <Box mb={4}>
+                <Typography variant="h5" style={{ fontWeight: 600 }}>
+                  Close to Central Campus
+                </Typography>
+                <ApartmentCards user={user} setUser={setUser} data={data.buildingData} />
+              </Box>
+              <Box mb={4}>
+                <Typography variant="h5" style={{ fontWeight: 600 }}>
+                  Most Reviewed
+                </Typography>
+                <ApartmentCards user={user} setUser={setUser} data={data.buildingData} />
+              </Box>
+              <Box mb={4}>
+                <Typography variant="h5" style={{ fontWeight: 600 }}>
+                  Most Loved
+                </Typography>
+                <ApartmentCards user={user} setUser={setUser} data={data.buildingData} />
+              </Box>
+            </>
+          )}
         </Container>
       </Box>
     </>