Implemented device search functionality! :D

1 files changed, 9 insertions, 3 deletions

diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index bc0c498..c147ae8 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -4,6 +4,7 @@ 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';
@@ -101,12 +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));
+  }
 
   useEffect(() => uiActions.setCollapsed(isTablet), [isTablet]);
 
@@ -143,10 +148,11 @@ const MainPage = () => {
             <TextField
               fullWidth
               name="deviceName"
+              /*name="deviceName"
               value={deviceName}
-              autoComplete="deviceName"
+              autoComplete="deviceName"*/
               autoFocus
-              onChange={(event) => setDeviceName(event.target.value)}
+              onChange={(event) => setDeviceName(event) }
               placeholder="Search Devices"
               variant="filled"
             />