From 1ca65eca8c4b925aa87a74d764f97d8ab337de18 Mon Sep 17 00:00:00 2001
From: Grace Sawatyanon <ggsawatyanon@gmail.com>
Date: Fri, 12 May 2023 23:13:52 -0400
Subject: [PATCH 1/7] search bar redesign

---
 frontend/src/components/Home/Autocomplete.tsx | 64 ++++++++++++++-----
 .../src/components/utils/NavBar/index.tsx     | 22 ++++---
 2 files changed, 62 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/Home/Autocomplete.tsx b/frontend/src/components/Home/Autocomplete.tsx
index 11c4fe11..1fb8e74c 100644
--- a/frontend/src/components/Home/Autocomplete.tsx
+++ b/frontend/src/components/Home/Autocomplete.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
 import {
   Chip,
   CircularProgress,
@@ -38,7 +39,26 @@ export default function Autocomplete() {
     buildingText: {
       color: colors.black,
     },
-    searchIcon: { paddingRight: '10px' },
+    searchIcon: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      color: 'white',
+      // fontSize: isMobile ? 17 : 22
+      height: '62%',
+      width: '62%',
+    },
+    searchIconBackground: {
+      backgroundColor: colors.red1,
+      width: '50px',
+      height: isMobile ? '35px' : '50px',
+      position: 'absolute',
+      right: '0',
+      borderRadius: '0px 10px 10px 0px',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
     resultChip: { cursor: 'pointer' },
     field: {
       '&.Mui-focused': {
@@ -50,7 +70,16 @@ export default function Autocomplete() {
       height: isMobile ? '35px' : '50px',
     },
   }));
-  const { menuList, text, searchIcon, resultChip, field, addressText, buildingText } = useStyles();
+  const {
+    menuList,
+    text,
+    searchIcon,
+    searchIconBackground,
+    resultChip,
+    field,
+    addressText,
+    buildingText,
+  } = useStyles();
   const [focus, setFocus] = useState(false);
   const inputRef = useRef<HTMLDivElement>(document.createElement('div'));
   const [loading, setLoading] = useState(false);
@@ -191,18 +220,24 @@ export default function Autocomplete() {
     }
   }, [loading, query]);
 
+  const location = useLocation();
+  let placeholderText = '';
+  if (location.pathname === '/') {
+    placeholderText = 'Search by any location e.g. “301 College Ave”';
+  }
+
   return (
-    <div>
+    <div style={{ position: 'relative' }}>
       <TextField
         fullWidth
         ref={inputRef}
         value={query}
-        placeholder="Search by any location e.g. “301 College Ave”"
+        placeholder={placeholderText}
         className={text}
         variant="outlined"
         style={{
-          borderRadius: '6px',
-          width: !isMobile ? '70%' : '98%',
+          borderRadius: '10px',
+          width: !isMobile ? '65%' : '98%',
         }}
         onKeyDown={textFieldHandleListKeyDown}
         onChange={(event) => {
@@ -212,19 +247,18 @@ export default function Autocomplete() {
           }
         }}
         InputProps={{
-          style: { fontSize: isMobile ? 16 : 20 },
-          endAdornment: <>{loading ? <CircularProgress color="inherit" size={20} /> : null}</>,
-          startAdornment: (
-            <SearchIcon
-              style={{ fontSize: isMobile ? 17 : 22, marginLeft: isMobile ? -3 : 0 }}
-              className={searchIcon}
-            />
+          style: { height: isMobile ? '35px' : '50px', borderRadius: '10px' },
+          endAdornment: (
+            <React.Fragment>
+              {loading ? <CircularProgress color="inherit" size={20} /> : null}
+              <div className={searchIconBackground}>
+                <SearchIcon className={searchIcon} />
+              </div>
+            </React.Fragment>
           ),
           className: field,
         }}
       />
-
-      <Menu />
     </div>
   );
 }
diff --git a/frontend/src/components/utils/NavBar/index.tsx b/frontend/src/components/utils/NavBar/index.tsx
index 6986ff3b..3acfe1f4 100644
--- a/frontend/src/components/utils/NavBar/index.tsx
+++ b/frontend/src/components/utils/NavBar/index.tsx
@@ -112,8 +112,9 @@ const useStyles = makeStyles(() => ({
   },
   search: {
     width: '50%',
-    marginRight: '25%',
+    marginLeft: '30px',
     marginBottom: '-15px',
+    borderRadius: '10px',
   },
   searchHidden: {
     width: '50%',
@@ -126,7 +127,8 @@ const useStyles = makeStyles(() => ({
     marginLeft: '70%',
   },
   searchDrawer: {
-    fontSize: 5,
+    // fontSize: 5,
+    width: '100%',
     marginBottom: '5%',
   },
 }));
@@ -317,16 +319,16 @@ const NavBar = ({ headersData, user, setUser }: Props): ReactElement => {
   );
 
   const searchBar = location.pathname !== '/';
-
   const displayDesktop = () => {
     return (
       <Grid container className={toolbar} alignItems="center" justifyContent="space-between">
-        <Grid item md={3}>
-          {homeLogo}
-        </Grid>
-        <Grid item md={6} className={searchBar ? search : searchHidden}>
-          {auto()}
+        <Grid item md={9} container alignItems="center">
+          <Grid item>{homeLogo}</Grid>
+          <Grid item className={searchBar ? search : searchHidden}>
+            {auto()}
+          </Grid>
         </Grid>
+
         {isAdmin(user) && (
           <Grid item md={1} className={menu} container justifyContent="flex-end">
             {getAdminButton()}
@@ -367,7 +369,9 @@ const NavBar = ({ headersData, user, setUser }: Props): ReactElement => {
             onClose: () => setDrawerOpen(false),
           }}
         >
-          <div className={drawerContainer}>{getDrawerChoices()}</div>
+          <div className={drawerContainer} style={{ width: '80%' }}>
+            {getDrawerChoices()}
+          </div>
         </Drawer>
       </Toolbar>
     );

From 51ea7999d996997a4d5c46093dc52f73adcf7748 Mon Sep 17 00:00:00 2001
From: "(Grace) Gunyasorn Sawatyanon" <ggsawatyanon@gmail.com>
Date: Sun, 1 Oct 2023 22:51:56 -0400
Subject: [PATCH 2/7] Search Bar Redesign

---
 frontend/src/components/Home/Autocomplete.tsx | 83 +++++++++++++------
 .../src/components/utils/NavBar/index.tsx     | 17 ++--
 frontend/src/pages/HomePage.tsx               |  3 +-
 3 files changed, 72 insertions(+), 31 deletions(-)

diff --git a/frontend/src/components/Home/Autocomplete.tsx b/frontend/src/components/Home/Autocomplete.tsx
index 1fb8e74c..0ecc10b0 100644
--- a/frontend/src/components/Home/Autocomplete.tsx
+++ b/frontend/src/components/Home/Autocomplete.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { ReactElement, useEffect, useState, useRef } from 'react';
 import { useLocation } from 'react-router-dom';
 import {
   Chip,
@@ -19,7 +19,12 @@ import { Link as RouterLink } from 'react-router-dom';
 import { colors } from '../../colors';
 import { useHistory } from 'react-router-dom';
 
-export default function Autocomplete() {
+type Props = {
+  drawerOpen: boolean;
+  setDrawerOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+const Autocomplete = ({ drawerOpen, setDrawerOpen }: Props): ReactElement => {
   const [isMobile, setIsMobile] = useState<boolean>(false);
   const useStyles = makeStyles((theme) => ({
     menuList: {
@@ -39,6 +44,9 @@ export default function Autocomplete() {
     buildingText: {
       color: colors.black,
     },
+    homeSearchIcon: {
+      paddingRight: '10px',
+    },
     searchIcon: {
       display: 'flex',
       alignItems: 'center',
@@ -51,7 +59,7 @@ export default function Autocomplete() {
     searchIconBackground: {
       backgroundColor: colors.red1,
       width: '50px',
-      height: isMobile ? '35px' : '50px',
+      height: isMobile ? '35px' : '45px',
       position: 'absolute',
       right: '0',
       borderRadius: '0px 10px 10px 0px',
@@ -62,18 +70,18 @@ export default function Autocomplete() {
     resultChip: { cursor: 'pointer' },
     field: {
       '&.Mui-focused': {
-        border: '20px black ',
         '& .MuiOutlinedInput-notchedOutline': {
-          border: 'none',
+          border: `1px solid #c4c4c4`,
         },
       },
-      height: isMobile ? '35px' : '50px',
+      height: isMobile ? '35px' : '45px',
     },
   }));
   const {
     menuList,
     text,
     searchIcon,
+    homeSearchIcon,
     searchIconBackground,
     resultChip,
     field,
@@ -221,13 +229,47 @@ export default function Autocomplete() {
   }, [loading, query]);
 
   const location = useLocation();
-  let placeholderText = '';
-  if (location.pathname === '/') {
-    placeholderText = 'Search by any location e.g. “301 College Ave”';
-  }
+  let placeholderText =
+    location.pathname === '/' && !drawerOpen
+      ? 'Search by any location e.g. “301 College Ave”'
+      : 'Search';
+
+  /**
+   * @returns The the InputProps for the search bar depending on user's location.
+   * If: home and NavBar drawer is closed –> returns search bar style without red input adornment on right.
+   * If: home/NavBar drawer is open –> returns search bar style with red input adornment on right.
+   */
+  const getInputProps = () => {
+    if (location.pathname === '/' && !drawerOpen) {
+      return {
+        style: { fontSize: isMobile ? 16 : 20 },
+        endAdornment: <>{loading ? <CircularProgress color="inherit" size={20} /> : null}</>,
+        startAdornment: (
+          <SearchIcon
+            style={{ fontSize: isMobile ? 17 : 22, marginLeft: isMobile ? -3 : 0 }}
+            className={homeSearchIcon}
+          />
+        ),
+        className: field,
+      };
+    } else {
+      return {
+        style: { height: isMobile ? '35px' : '45px', borderRadius: '10px' },
+        endAdornment: (
+          <React.Fragment>
+            {loading ? <CircularProgress color="inherit" size={20} /> : null}
+            <div className={searchIconBackground}>
+              <SearchIcon className={searchIcon} />
+            </div>
+          </React.Fragment>
+        ),
+        className: field,
+      };
+    }
+  };
 
   return (
-    <div style={{ position: 'relative' }}>
+    <div style={{ position: 'relative', width: drawerOpen ? '100%' : '65%' }}>
       <TextField
         fullWidth
         ref={inputRef}
@@ -237,7 +279,7 @@ export default function Autocomplete() {
         variant="outlined"
         style={{
           borderRadius: '10px',
-          width: !isMobile ? '65%' : '98%',
+          width: !isMobile ? '100%' : '98%',
         }}
         onKeyDown={textFieldHandleListKeyDown}
         onChange={(event) => {
@@ -246,19 +288,10 @@ export default function Autocomplete() {
             handleOnChange(value);
           }
         }}
-        InputProps={{
-          style: { height: isMobile ? '35px' : '50px', borderRadius: '10px' },
-          endAdornment: (
-            <React.Fragment>
-              {loading ? <CircularProgress color="inherit" size={20} /> : null}
-              <div className={searchIconBackground}>
-                <SearchIcon className={searchIcon} />
-              </div>
-            </React.Fragment>
-          ),
-          className: field,
-        }}
+        InputProps={getInputProps()}
       />
     </div>
   );
-}
+};
+
+export default Autocomplete;
diff --git a/frontend/src/components/utils/NavBar/index.tsx b/frontend/src/components/utils/NavBar/index.tsx
index 3acfe1f4..c8e96429 100644
--- a/frontend/src/components/utils/NavBar/index.tsx
+++ b/frontend/src/components/utils/NavBar/index.tsx
@@ -23,7 +23,7 @@ import { Link as RouterLink } from 'react-router-dom';
 import LogoIcon from '../../../assets/navbar-logo.svg';
 import { useLocation } from 'react-router-dom';
 import { colors } from '../../../colors';
-import auto from '../../Home/Autocomplete';
+import Autocomplete from '../../Home/Autocomplete';
 import { isAdmin } from '../../../utils/adminTool';
 
 export type NavbarButton = {
@@ -178,16 +178,23 @@ const NavBar = ({ headersData, user, setUser }: Props): ReactElement => {
   }, [user]);
 
   useEffect(() => {
-    const handleResize = () => setIsMobile(window.innerWidth <= 600);
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= 600);
+      if (drawerOpen && window.innerWidth >= 960) {
+        setDrawerOpen(false);
+      }
+    };
     handleResize();
     window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);
-  }, []);
+  }, [drawerOpen]);
 
   const getDrawerChoices = () => {
     return (
       <ThemeProvider theme={muiTheme}>
-        <Grid className={searchDrawer}>{auto()}</Grid>
+        <Grid className={searchDrawer}>
+          <Autocomplete drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />
+        </Grid>
         {headersData.map(({ label, href }, index) => {
           return (
             <Link component={RouterLink} to={href} color={GetButtonColor(label)} key={index}>
@@ -325,7 +332,7 @@ const NavBar = ({ headersData, user, setUser }: Props): ReactElement => {
         <Grid item md={9} container alignItems="center">
           <Grid item>{homeLogo}</Grid>
           <Grid item className={searchBar ? search : searchHidden}>
-            {auto()}
+            <Autocomplete drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />
           </Grid>
         </Grid>
 
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index 450c4cd7..3c2b59e6 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -38,6 +38,7 @@ const HomePage = (): ReactElement => {
   const classes = useStyles();
   const [data, setData] = useState<returnData>({ buildingData: [], isEnded: false });
   const [isMobile, setIsMobile] = useState<boolean>(false);
+  const [drawerOpen, setDrawerOpen] = useState<boolean>(false);
 
   useEffect(() => {
     get<returnData>(`/api/page-data/home/${loadingLength}`, {
@@ -80,7 +81,7 @@ const HomePage = (): ReactElement => {
           </Box>
 
           <Box pb={5} mx={0} mt={-4} paddingBottom={isMobile ? 4 : 8}>
-            <Autocomplete />
+            <Autocomplete drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />
           </Box>
         </Container>
       </Box>

From bdedc55631f6e2963d02bf5e3bdaf5c9cd8d8f18 Mon Sep 17 00:00:00 2001
From: "(Grace) Gunyasorn Sawatyanon" <ggsawatyanon@gmail.com>
Date: Sun, 1 Oct 2023 23:06:42 -0400
Subject: [PATCH 3/7] changed searchbar border color when selected

---
 frontend/src/components/Home/Autocomplete.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Home/Autocomplete.tsx b/frontend/src/components/Home/Autocomplete.tsx
index 0ecc10b0..c8b756bf 100644
--- a/frontend/src/components/Home/Autocomplete.tsx
+++ b/frontend/src/components/Home/Autocomplete.tsx
@@ -71,7 +71,7 @@ const Autocomplete = ({ drawerOpen, setDrawerOpen }: Props): ReactElement => {
     field: {
       '&.Mui-focused': {
         '& .MuiOutlinedInput-notchedOutline': {
-          border: `1px solid #c4c4c4`,
+          border: `1px solid ${colors.red1}`,
         },
       },
       height: isMobile ? '35px' : '45px',

From 112b6ac1b2278520477486b651099eda9fba05c2 Mon Sep 17 00:00:00 2001
From: "(Grace) Gunyasorn Sawatyanon" <ggsawatyanon@gmail.com>
Date: Sun, 1 Oct 2023 23:23:07 -0400
Subject: [PATCH 4/7] Deleted 'Menu' to solve deployment check fail

Yarn workspace frontend build error: 'Menu' is assigned a value but never used
---
 frontend/src/components/Home/Autocomplete.tsx | 59 -------------------
 1 file changed, 59 deletions(-)

diff --git a/frontend/src/components/Home/Autocomplete.tsx b/frontend/src/components/Home/Autocomplete.tsx
index c8b756bf..e9693d78 100644
--- a/frontend/src/components/Home/Autocomplete.tsx
+++ b/frontend/src/components/Home/Autocomplete.tsx
@@ -133,65 +133,6 @@ const Autocomplete = ({ drawerOpen, setDrawerOpen }: Props): ReactElement => {
     }
   };
 
-  const Menu = () => {
-    return (
-      <div>
-        <ClickAwayListener
-          onClickAway={() => {
-            setOpen(false);
-          }}
-        >
-          <div>
-            {open ? (
-              <MenuList
-                style={{ width: `${inputRef.current?.offsetWidth}px`, zIndex: 1 }}
-                className={menuList}
-                autoFocusItem={focus}
-                onKeyDown={handleListKeyDown}
-              >
-                {options.length === 0 ? (
-                  <MenuItem disabled>No search results.</MenuItem>
-                ) : (
-                  options.map(({ id, name, address, label }, index) => {
-                    return (
-                      <Link
-                        key={index}
-                        {...{
-                          to: `/${label.toLowerCase()}/${id}`,
-                          style: { textDecoration: 'none' },
-                          component: RouterLink,
-                        }}
-                      >
-                        <MenuItem button={true} key={index} onClick={() => setOpen(false)}>
-                          <Grid container justifyContent="space-between">
-                            <Grid item xl={8}>
-                              <Typography className={buildingText}>{name}</Typography>
-
-                              <Typography className={addressText}>
-                                {address !== name && address}
-                              </Typography>
-                            </Grid>
-                            <Grid item xl={4}>
-                              <Chip
-                                color="primary"
-                                label={label.toLowerCase()}
-                                className={resultChip}
-                              />
-                            </Grid>
-                          </Grid>
-                        </MenuItem>
-                      </Link>
-                    );
-                  })
-                )}
-              </MenuList>
-            ) : null}
-          </div>
-        </ClickAwayListener>
-      </div>
-    );
-  };
-
   useEffect(() => {
     if (query === '') {
       setOpen(false);

From 6518e667486bb0b8bc609173696cae7447268207 Mon Sep 17 00:00:00 2001
From: "(Grace) Gunyasorn Sawatyanon" <ggsawatyanon@gmail.com>
Date: Sun, 1 Oct 2023 23:27:59 -0400
Subject: [PATCH 5/7] Revert "Deleted 'Menu' to solve deployment check fail"

This reverts commit 112b6ac1b2278520477486b651099eda9fba05c2.
---
 frontend/src/components/Home/Autocomplete.tsx | 59 +++++++++++++++++++
 1 file changed, 59 insertions(+)

diff --git a/frontend/src/components/Home/Autocomplete.tsx b/frontend/src/components/Home/Autocomplete.tsx
index e9693d78..c8b756bf 100644
--- a/frontend/src/components/Home/Autocomplete.tsx
+++ b/frontend/src/components/Home/Autocomplete.tsx
@@ -133,6 +133,65 @@ const Autocomplete = ({ drawerOpen, setDrawerOpen }: Props): ReactElement => {
     }
   };
 
+  const Menu = () => {
+    return (
+      <div>
+        <ClickAwayListener
+          onClickAway={() => {
+            setOpen(false);
+          }}
+        >
+          <div>
+            {open ? (
+              <MenuList
+                style={{ width: `${inputRef.current?.offsetWidth}px`, zIndex: 1 }}
+                className={menuList}
+                autoFocusItem={focus}
+                onKeyDown={handleListKeyDown}
+              >
+                {options.length === 0 ? (
+                  <MenuItem disabled>No search results.</MenuItem>
+                ) : (
+                  options.map(({ id, name, address, label }, index) => {
+                    return (
+                      <Link
+                        key={index}
+                        {...{
+                          to: `/${label.toLowerCase()}/${id}`,
+                          style: { textDecoration: 'none' },
+                          component: RouterLink,
+                        }}
+                      >
+                        <MenuItem button={true} key={index} onClick={() => setOpen(false)}>
+                          <Grid container justifyContent="space-between">
+                            <Grid item xl={8}>
+                              <Typography className={buildingText}>{name}</Typography>
+
+                              <Typography className={addressText}>
+                                {address !== name && address}
+                              </Typography>
+                            </Grid>
+                            <Grid item xl={4}>
+                              <Chip
+                                color="primary"
+                                label={label.toLowerCase()}
+                                className={resultChip}
+                              />
+                            </Grid>
+                          </Grid>
+                        </MenuItem>
+                      </Link>
+                    );
+                  })
+                )}
+              </MenuList>
+            ) : null}
+          </div>
+        </ClickAwayListener>
+      </div>
+    );
+  };
+
   useEffect(() => {
     if (query === '') {
       setOpen(false);

From 398391c7133f9c1d400a8baa031d034980a2f84b Mon Sep 17 00:00:00 2001
From: "(Grace) Gunyasorn Sawatyanon" <ggsawatyanon@gmail.com>
Date: Thu, 12 Oct 2023 13:45:46 -0400
Subject: [PATCH 6/7] resolveFailedChecks

---
 frontend/src/components/Home/Autocomplete.tsx | 113 +-----------------
 .../src/components/utils/NavBar/index.tsx     |   4 +-
 frontend/src/pages/HomePage.tsx               |   4 +-
 3 files changed, 7 insertions(+), 114 deletions(-)

diff --git a/frontend/src/components/Home/Autocomplete.tsx b/frontend/src/components/Home/Autocomplete.tsx
index c8b756bf..2dd1685a 100644
--- a/frontend/src/components/Home/Autocomplete.tsx
+++ b/frontend/src/components/Home/Autocomplete.tsx
@@ -1,30 +1,18 @@
 import React, { ReactElement, useEffect, useState, useRef } from 'react';
 import { useLocation } from 'react-router-dom';
-import {
-  Chip,
-  CircularProgress,
-  ClickAwayListener,
-  Grid,
-  MenuItem,
-  MenuList,
-  TextField,
-  Typography,
-  Link,
-} from '@material-ui/core';
+import { CircularProgress, TextField } from '@material-ui/core';
 import { get } from '../../utils/call';
 import { LandlordOrApartmentWithLabel } from '../../../../common/types/db-types';
 import SearchIcon from '@material-ui/icons/Search';
 import { makeStyles } from '@material-ui/core/styles';
-import { Link as RouterLink } from 'react-router-dom';
 import { colors } from '../../colors';
 import { useHistory } from 'react-router-dom';
 
 type Props = {
   drawerOpen: boolean;
-  setDrawerOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-const Autocomplete = ({ drawerOpen, setDrawerOpen }: Props): ReactElement => {
+const Autocomplete = ({ drawerOpen }: Props): ReactElement => {
   const [isMobile, setIsMobile] = useState<boolean>(false);
   const useStyles = makeStyles((theme) => ({
     menuList: {
@@ -77,24 +65,10 @@ const Autocomplete = ({ drawerOpen, setDrawerOpen }: Props): ReactElement => {
       height: isMobile ? '35px' : '45px',
     },
   }));
-  const {
-    menuList,
-    text,
-    searchIcon,
-    homeSearchIcon,
-    searchIconBackground,
-    resultChip,
-    field,
-    addressText,
-    buildingText,
-  } = useStyles();
-  const [focus, setFocus] = useState(false);
+  const { text, searchIcon, homeSearchIcon, searchIconBackground, field } = useStyles();
   const inputRef = useRef<HTMLDivElement>(document.createElement('div'));
   const [loading, setLoading] = useState(false);
-  const [open, setOpen] = useState(false);
-  const [options, setOptions] = useState<LandlordOrApartmentWithLabel[]>([]);
   const [query, setQuery] = useState('');
-  const [selected, setSelected] = useState<LandlordOrApartmentWithLabel | null>(null);
   const [width, setWidth] = useState(inputRef.current?.offsetWidth);
 
   const history = useHistory();
@@ -106,26 +80,15 @@ const Autocomplete = ({ drawerOpen, setDrawerOpen }: Props): ReactElement => {
     return () => window.removeEventListener('resize', handleResize);
   }, []);
 
-  function handleListKeyDown(event: React.KeyboardEvent) {
-    event.preventDefault();
-    if (event.key === 'Tab') {
-      setOpen(false);
-    }
-  }
-
   function textFieldHandleListKeyDown(event: React.KeyboardEvent) {
     if (event.key === 'ArrowDown') {
-      setFocus(true);
     } else if (event.key === 'Enter') {
-      setFocus(true);
       history.push(`/search?q=${query}`);
-      setOpen(false);
     }
   }
 
   const handleOnChange = (query: string) => {
     setQuery(query);
-    setSelected(null);
     if (query !== '') {
       setLoading(true);
     } else {
@@ -133,75 +96,6 @@ const Autocomplete = ({ drawerOpen, setDrawerOpen }: Props): ReactElement => {
     }
   };
 
-  const Menu = () => {
-    return (
-      <div>
-        <ClickAwayListener
-          onClickAway={() => {
-            setOpen(false);
-          }}
-        >
-          <div>
-            {open ? (
-              <MenuList
-                style={{ width: `${inputRef.current?.offsetWidth}px`, zIndex: 1 }}
-                className={menuList}
-                autoFocusItem={focus}
-                onKeyDown={handleListKeyDown}
-              >
-                {options.length === 0 ? (
-                  <MenuItem disabled>No search results.</MenuItem>
-                ) : (
-                  options.map(({ id, name, address, label }, index) => {
-                    return (
-                      <Link
-                        key={index}
-                        {...{
-                          to: `/${label.toLowerCase()}/${id}`,
-                          style: { textDecoration: 'none' },
-                          component: RouterLink,
-                        }}
-                      >
-                        <MenuItem button={true} key={index} onClick={() => setOpen(false)}>
-                          <Grid container justifyContent="space-between">
-                            <Grid item xl={8}>
-                              <Typography className={buildingText}>{name}</Typography>
-
-                              <Typography className={addressText}>
-                                {address !== name && address}
-                              </Typography>
-                            </Grid>
-                            <Grid item xl={4}>
-                              <Chip
-                                color="primary"
-                                label={label.toLowerCase()}
-                                className={resultChip}
-                              />
-                            </Grid>
-                          </Grid>
-                        </MenuItem>
-                      </Link>
-                    );
-                  })
-                )}
-              </MenuList>
-            ) : null}
-          </div>
-        </ClickAwayListener>
-      </div>
-    );
-  };
-
-  useEffect(() => {
-    if (query === '') {
-      setOpen(false);
-    } else if (selected === null) {
-      setOpen(true);
-    } else {
-      setOpen(false);
-    }
-  }, [query, selected]);
-
   useEffect(() => {
     const handleResize = () => {
       setWidth(inputRef.current?.offsetWidth);
@@ -221,7 +115,6 @@ const Autocomplete = ({ drawerOpen, setDrawerOpen }: Props): ReactElement => {
     if (loading && query.trim() !== '') {
       get<LandlordOrApartmentWithLabel[]>(`/api/search?q=${query}`, {
         callback: (data) => {
-          setOptions(data);
           setLoading(false);
         },
       });
diff --git a/frontend/src/components/utils/NavBar/index.tsx b/frontend/src/components/utils/NavBar/index.tsx
index c8e96429..a596bec3 100644
--- a/frontend/src/components/utils/NavBar/index.tsx
+++ b/frontend/src/components/utils/NavBar/index.tsx
@@ -193,7 +193,7 @@ const NavBar = ({ headersData, user, setUser }: Props): ReactElement => {
     return (
       <ThemeProvider theme={muiTheme}>
         <Grid className={searchDrawer}>
-          <Autocomplete drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />
+          <Autocomplete drawerOpen={drawerOpen} />
         </Grid>
         {headersData.map(({ label, href }, index) => {
           return (
@@ -332,7 +332,7 @@ const NavBar = ({ headersData, user, setUser }: Props): ReactElement => {
         <Grid item md={9} container alignItems="center">
           <Grid item>{homeLogo}</Grid>
           <Grid item className={searchBar ? search : searchHidden}>
-            <Autocomplete drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />
+            <Autocomplete drawerOpen={drawerOpen} />
           </Grid>
         </Grid>
 
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index 3c2b59e6..376ed209 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -38,7 +38,7 @@ const HomePage = (): ReactElement => {
   const classes = useStyles();
   const [data, setData] = useState<returnData>({ buildingData: [], isEnded: false });
   const [isMobile, setIsMobile] = useState<boolean>(false);
-  const [drawerOpen, setDrawerOpen] = useState<boolean>(false);
+  const [drawerOpen] = useState<boolean>(false);
 
   useEffect(() => {
     get<returnData>(`/api/page-data/home/${loadingLength}`, {
@@ -81,7 +81,7 @@ const HomePage = (): ReactElement => {
           </Box>
 
           <Box pb={5} mx={0} mt={-4} paddingBottom={isMobile ? 4 : 8}>
-            <Autocomplete drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />
+            <Autocomplete drawerOpen={drawerOpen} />
           </Box>
         </Container>
       </Box>

From fd1b38a83b1912a52f05e68552f78480ae1f4db5 Mon Sep 17 00:00:00 2001
From: "(Grace) Gunyasorn Sawatyanon" <ggsawatyanon@gmail.com>
Date: Thu, 12 Oct 2023 14:03:18 -0400
Subject: [PATCH 7/7] clickableAndClear

---
 frontend/src/components/Home/Autocomplete.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Home/Autocomplete.tsx b/frontend/src/components/Home/Autocomplete.tsx
index 2dd1685a..e48229bf 100644
--- a/frontend/src/components/Home/Autocomplete.tsx
+++ b/frontend/src/components/Home/Autocomplete.tsx
@@ -84,9 +84,15 @@ const Autocomplete = ({ drawerOpen }: Props): ReactElement => {
     if (event.key === 'ArrowDown') {
     } else if (event.key === 'Enter') {
       history.push(`/search?q=${query}`);
+      setQuery('');
     }
   }
 
+  const handleSearchIconClick = () => {
+    history.push(`/search?q=${query}`);
+    setQuery('');
+  };
+
   const handleOnChange = (query: string) => {
     setQuery(query);
     if (query !== '') {
@@ -151,7 +157,7 @@ const Autocomplete = ({ drawerOpen }: Props): ReactElement => {
         endAdornment: (
           <React.Fragment>
             {loading ? <CircularProgress color="inherit" size={20} /> : null}
-            <div className={searchIconBackground}>
+            <div className={searchIconBackground} onClick={handleSearchIconClick}>
               <SearchIcon className={searchIcon} />
             </div>
           </React.Fragment>