Persist device filtering

3 files changed, 13 insertions, 9 deletions

diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js
index f5d6d25b..df1c8734 100644
--- a/modern/src/main/MainPage.js
+++ b/modern/src/main/MainPage.js
@@ -73,8 +73,8 @@ const MainPage = () => {
 
   const [filteredDevices, setFilteredDevices] = useState([]);
 
-  const [filter, setFilter] = useState({
-    keyword: '',
+  const [keyword, setKeyword] = useState('');
+  const [filter, setFilter] = usePersistedState('filter', {
     statuses: [],
     groups: [],
   });
@@ -92,7 +92,7 @@ const MainPage = () => {
     }
   }, [desktop, mapOnSelect, selectedDeviceId]);
 
-  useFilter(filter, filterSort, filterMap, positions, setFilteredDevices, setFilteredPositions);
+  useFilter(keyword, filter, filterSort, filterMap, positions, setFilteredDevices, setFilteredPositions);
 
   return (
     <div className={classes.root}>
@@ -109,6 +109,8 @@ const MainPage = () => {
             filteredDevices={filteredDevices}
             devicesOpen={devicesOpen}
             setDevicesOpen={setDevicesOpen}
+            keyword={keyword}
+            setKeyword={setKeyword}
             filter={filter}
             setFilter={setFilter}
             filterSort={filterSort}
diff --git a/modern/src/main/MainToolbar.js b/modern/src/main/MainToolbar.js
index b6b0a556..859aa218 100644
--- a/modern/src/main/MainToolbar.js
+++ b/modern/src/main/MainToolbar.js
@@ -31,6 +31,8 @@ const MainToolbar = ({
   filteredDevices,
   devicesOpen,
   setDevicesOpen,
+  keyword,
+  setKeyword,
   filter,
   setFilter,
   filterSort,
@@ -63,8 +65,8 @@ const MainToolbar = ({
       <OutlinedInput
         ref={inputRef}
         placeholder={t('sharedSearchDevices')}
-        value={filter.keyword}
-        onChange={(e) => setFilter({ ...filter, keyword: e.target.value })}
+        value={keyword}
+        onChange={(e) => setKeyword(e.target.value)}
         onFocus={() => setDevicesAnchorEl(toolbarRef.current)}
         onBlur={() => setDevicesAnchorEl(null)}
         endAdornment={(
diff --git a/modern/src/main/useFilter.js b/modern/src/main/useFilter.js
index 66215c43..96a8c4b9 100644
--- a/modern/src/main/useFilter.js
+++ b/modern/src/main/useFilter.js
@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import moment from 'moment';
 
-export default (filter, filterSort, filterMap, positions, setFilteredDevices, setFilteredPositions) => {
+export default (keyword, filter, filterSort, filterMap, positions, setFilteredDevices, setFilteredPositions) => {
   const groups = useSelector((state) => state.groups.items);
   const devices = useSelector((state) => state.devices.items);
 
@@ -21,8 +21,8 @@ export default (filter, filterSort, filterMap, positions, setFilteredDevices, se
       .filter((device) => !filter.statuses.length || filter.statuses.includes(device.status))
       .filter((device) => !filter.groups.length || deviceGroups(device).some((id) => filter.groups.includes(id)))
       .filter((device) => {
-        const keyword = filter.keyword.toLowerCase();
-        return [device.name, device.uniqueId, device.phone, device.model, device.contact].some((s) => s && s.toLowerCase().includes(keyword));
+        const lowerCaseKeyword = keyword.toLowerCase();
+        return [device.name, device.uniqueId, device.phone, device.model, device.contact].some((s) => s && s.toLowerCase().includes(lowerCaseKeyword));
       });
     switch (filterSort) {
       case 'name':
@@ -42,5 +42,5 @@ export default (filter, filterSort, filterMap, positions, setFilteredDevices, se
     setFilteredPositions(filterMap
       ? filtered.map((device) => positions[device.id]).filter(Boolean)
       : Object.values(positions));
-  }, [filter, filterSort, filterMap, groups, devices, positions, setFilteredDevices, setFilteredPositions]);
+  }, [keyword, filter, filterSort, filterMap, groups, devices, positions, setFilteredDevices, setFilteredPositions]);
 };