aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
Diffstat (limited to 'modern')
-rw-r--r--modern/src/main/MainPage.js8
-rw-r--r--modern/src/main/MainToolbar.js6
-rw-r--r--modern/src/main/useFilter.js8
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]);
};