1 files changed, 11 insertions, 8 deletions
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index 0559f15..0d3ad54 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -103,18 +103,22 @@ const MainPage = () => {
   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 = useSelector((state) => state.ui.collapsed);
 
   const handleClose = () => {
     dispatch(uiActions.setCollapsed(!collapsed));
   };
+
+  const filterTerm = useSelector((state) => state.devices.filterTerm);
   
-  const setFilter = (text) => {
-    setDeviceName(text);
+  const setFilterTerm = (text) => {
     dispatch(devicesActions.setFilter(text));
   }
 
+  const clearFilter = () => {
+    dispatch(devicesActions.clearFilter());
+  }
+
   useEffect(() => uiActions.setCollapsed(isPhone), [isPhone]);
 
   return (
@@ -150,15 +154,14 @@ const MainPage = () => {
             <TextField
               fullWidth
               name="deviceName"
-              value={deviceName}
-              autoComplete="deviceName"
+              value={filterTerm}
               autoFocus
-              onChange={(event) => setFilter(event.target.value) }
+              onChange={(event) => setFilterTerm(event.target.value) }
               placeholder={t("sharedSearch")}
               variant="filled"
             />
-            {deviceName.length > 0 && (
-              <IconButton onClick={() => setFilter("") }>
+            {filterTerm.length > 0 && (
+              <IconButton onClick={() => clearFilter() }>
                 <CloseIcon />
               </IconButton>
             )}