1 files changed, 35 insertions, 25 deletions

diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index 7fd4315..a118f17 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -1,8 +1,11 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 import {
   makeStyles, Paper, Toolbar, TextField, IconButton, Button,
 } from '@material-ui/core';
+import { useDispatch, useSelector } from 'react-redux';
+import { devicesActions } from './store/devices';
+import { uiActions } from './store/ui';
 
 import { useTheme } from '@material-ui/core/styles';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
@@ -22,7 +25,6 @@ import BottomMenu from './components/BottomMenu';
 import { useTranslation } from './LocalizationProvider';
 import PoiMap from './map/PoiMap';
 import MapPadding from './map/MapPadding';
-
 const useStyles = makeStyles((theme) => ({
   root: {
     height: '100vh',
@@ -34,20 +36,20 @@ const useStyles = makeStyles((theme) => ({
     left: 0,
     top: 0,
     margin: theme.spacing(1.5),
-    width: theme.dimensions.drawerWidthDesktop,
+    width: '450px',
     bottom: 56,
     zIndex: 1301,
     transition: 'transform .5s ease',
     backgroundColor: 'white',
-    [theme.breakpoints.down('md')]: {
+    [theme.breakpoints.down('sm')]: {
       width: '100%',
       margin: 0,
     },
   },
   sidebarCollapsed: {
-    transform: `translateX(-${theme.dimensions.drawerWidthDesktop})`,
+    transform: `translateX(-450px)`,
     marginLeft: 0,
-    [theme.breakpoints.down('md')]: {
+    [theme.breakpoints.down('sm')]: {
       transform: 'translateX(-100vw)',
     },
   },
@@ -93,25 +95,34 @@ const MainPage = () => {
   const classes = useStyles();
   const history = useHistory();
   const theme = useTheme();
+  const dispatch = useDispatch();
   const t = useTranslation();
 
-  const isTablet = useMediaQuery(theme.breakpoints.down('md'));
-  const isPhone = useMediaQuery(theme.breakpoints.down('xs'));
+  const isPhone = useMediaQuery(theme.breakpoints.down('sm'));
+  const isWide = useMediaQuery(theme.breakpoints.up('md')/* || theme.breakpoints.up('sm') || theme.breakpoints.up('xs')*/);
 
-  const [deviceName, setDeviceName] = useState('');
-  const [collapsed, setCollapsed] = useState(false);
+  const collapsed = useSelector((state) => state.ui.collapsed);
 
   const handleClose = () => {
-    setCollapsed(!collapsed);
+    dispatch(uiActions.setCollapsed(!collapsed));
   };
 
-  useEffect(() => setCollapsed(isTablet), [isTablet]);
+  const filterTerm = useSelector((state) => state.devices.filterTerm);
+  
+  const setFilterTerm = (text) => {
+    dispatch(devicesActions.setFilter(text));
+  }
+
+  const clearFilter = () => {
+    dispatch(devicesActions.clearFilter());
+  }
+
+  useEffect(() => uiActions.setCollapsed(isPhone), [isPhone]);
 
   return (
     <div className={classes.root}>
       <Map>
-        {!isTablet && <MapPadding left={parseInt(theme.dimensions.drawerWidthDesktop, 10)} />}
-        <CurrentLocationMap />
+        {isWide && <MapPadding left={parseInt(theme.dimensions.drawerWidthDesktop, 10)} />}
         <GeofenceMap />
         <AccuracyMap />
         <CurrentPositionsMap />
@@ -129,10 +140,10 @@ const MainPage = () => {
         <ListIcon />
         <div className={classes.sidebarToggleText}>{t('deviceTitle')}</div>
       </Button>
-      <Paper square elevation={3} className={`${classes.sidebar} ${collapsed && classes.sidebarCollapsed}`}>
+      <Paper square elevation={3} className={`${classes.sidebar} ${(!isWide && collapsed) && classes.sidebarCollapsed}`}>
         <Paper className={classes.paper} square elevation={3}>
           <Toolbar className={classes.toolbar} disableGutters>
-            {isTablet && (
+            {!isWide && (
             <IconButton onClick={handleClose}>
               <ArrowBackIcon />
             </IconButton>
@@ -140,21 +151,20 @@ const MainPage = () => {
             <TextField
               fullWidth
               name="deviceName"
-              value={deviceName}
-              autoComplete="deviceName"
+              value={filterTerm}
               autoFocus
-              onChange={(event) => setDeviceName(event.target.value)}
-              placeholder="Search Devices"
+              onChange={(event) => setFilterTerm(event.target.value) }
+              placeholder={t("sharedSearch")}
               variant="filled"
             />
+            {filterTerm.length > 0 && (
+              <IconButton onClick={() => clearFilter() }>
+                <CloseIcon />
+              </IconButton>
+            )}
             <IconButton onClick={() => history.push('/device')}>
               <AddIcon />
             </IconButton>
-            {!isTablet && (
-            <IconButton onClick={handleClose}>
-              <CloseIcon />
-            </IconButton>
-            )}
           </Toolbar>
         </Paper>
         <div className={classes.deviceList}>