Clear search implemented

2 files changed, 16 insertions, 13 deletions

diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index c147ae8..13cc1fc 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -102,15 +102,16 @@ const MainPage = () => {
   const isTablet = useMediaQuery(theme.breakpoints.down('md'));
   const isPhone = useMediaQuery(theme.breakpoints.down('xs'));
 
-  //const [deviceName, setDeviceName] = useState('');
+  const [deviceName, setDeviceName] = useState('');
   const collapsed = useSelector((state) => state.ui.collapsed);
 
   const handleClose = () => {
     dispatch(uiActions.setCollapsed(!collapsed));
   };
   
-  const setDeviceName = (event) => {
-    dispatch(devicesActions.setFilter(event.target.value));
+  const setFilter = (text) => {
+    setDeviceName(text);
+    dispatch(devicesActions.setFilter(text));
   }
 
   useEffect(() => uiActions.setCollapsed(isTablet), [isTablet]);
@@ -148,22 +149,21 @@ const MainPage = () => {
             <TextField
               fullWidth
               name="deviceName"
-              /*name="deviceName"
               value={deviceName}
-              autoComplete="deviceName"*/
+              autoComplete="deviceName"
               autoFocus
-              onChange={(event) => setDeviceName(event) }
-              placeholder="Search Devices"
+              onChange={(event) => setFilter(event.target.value) }
+              placeholder={t("sharedSearch")}
               variant="filled"
             />
+            {deviceName.length > 0 && (
+              <IconButton onClick={() => setFilter("") }>
+                <CloseIcon />
+              </IconButton>
+            )}
             <IconButton onClick={() => history.push('/device')}>
               <AddIcon />
             </IconButton>
-            {!isTablet && (
-            <IconButton onClick={handleClose}>
-              <CloseIcon />
-            </IconButton>
-            )}
           </Toolbar>
         </Paper>
         <div className={classes.deviceList}>
diff --git a/modern/src/components/BottomMenu.js b/modern/src/components/BottomMenu.js
index a1e9625..db8cb3b 100644
--- a/modern/src/components/BottomMenu.js
+++ b/modern/src/components/BottomMenu.js
@@ -10,7 +10,7 @@ import ShuffleIcon from '@material-ui/icons/Shuffle';
 import MapIcon from '@material-ui/icons/Map';
 import LogoutIcon from '@material-ui/icons/ExitToApp';
 
-import { sessionActions } from '../store';
+import { sessionActions, uiActions } from '../store';
 import { useTranslation } from '../LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
@@ -37,6 +37,9 @@ const BottomMenu = () => {
 
   const handleSelection = async (_, value) => {
     switch (value) {
+      case 0:
+        dispatch(uiActions.setCollapsed(true));
+        break;
       case 1:
         history.push('/reports/route');
         break;