aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
Diffstat (limited to 'modern')
-rw-r--r--modern/src/DevicesList.js10
-rw-r--r--modern/src/MainPage.js5
-rw-r--r--modern/src/common/selectors.js2
-rw-r--r--modern/src/store/devices.js9
4 files changed, 23 insertions, 3 deletions
diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
index e06fd580..f5482252 100644
--- a/modern/src/DevicesList.js
+++ b/modern/src/DevicesList.js
@@ -18,7 +18,7 @@ import { devicesActions } from './store';
import EditCollectionView from './EditCollectionView';
import { useEffectAsync } from './reactHelper';
import { formatPosition } from './common/formatter';
-import { getDevices, getPosition } from './common/selectors';
+import { getDevices, getFilteredDevices, getPosition } from './common/selectors';
import { useTranslation } from './LocalizationProvider';
const useStyles = makeStyles((theme) => ({
@@ -133,6 +133,10 @@ const DeviceView = ({ updateTimestamp, onMenuClick }) => {
const items = useSelector(getDevices);
+ const filteredItems = useSelector(getFilteredDevices);
+
+ const getItems = () => filteredItems.length == 0 ? items : filteredItems;
+
if (listInnerEl.current) {
listInnerEl.current.className = classes.listInner;
}
@@ -151,8 +155,8 @@ const DeviceView = ({ updateTimestamp, onMenuClick }) => {
<FixedSizeList
width={width}
height={height}
- itemCount={items.length}
- itemData={{ items, onMenuClick }}
+ itemCount={getItems().length}
+ itemData={{ items: getItems(), onMenuClick }}
itemSize={72}
overscanCount={10}
innerRef={listInnerEl}
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index 7fd43154..4a266328 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -1,4 +1,5 @@
import React, { useState, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
import { useHistory } from 'react-router-dom';
import {
makeStyles, Paper, Toolbar, TextField, IconButton, Button,
@@ -22,6 +23,7 @@ import BottomMenu from './components/BottomMenu';
import { useTranslation } from './LocalizationProvider';
import PoiMap from './map/PoiMap';
import MapPadding from './map/MapPadding';
+import { devicesActions } from './store';
const useStyles = makeStyles((theme) => ({
root: {
@@ -93,6 +95,7 @@ const MainPage = () => {
const classes = useStyles();
const history = useHistory();
const theme = useTheme();
+ const dispatch = useDispatch();
const t = useTranslation();
const isTablet = useMediaQuery(theme.breakpoints.down('md'));
@@ -105,6 +108,8 @@ const MainPage = () => {
setCollapsed(!collapsed);
};
+ useEffect(() => dispatch(devicesActions.filterByName(deviceName.trim())), [deviceName]);
+
useEffect(() => setCollapsed(isTablet), [isTablet]);
return (
diff --git a/modern/src/common/selectors.js b/modern/src/common/selectors.js
index 0c4c02e1..45a79504 100644
--- a/modern/src/common/selectors.js
+++ b/modern/src/common/selectors.js
@@ -4,4 +4,6 @@ export const getUserId = (state) => state.session.user?.id;
export const getDevices = (state) => Object.values(state.devices.items);
+export const getFilteredDevices = (state) => Object.values(state.devices.filteredItems);
+
export const getPosition = (id) => (state) => state.positions.items[id];
diff --git a/modern/src/store/devices.js b/modern/src/store/devices.js
index cca23cb9..ab4ca9ee 100644
--- a/modern/src/store/devices.js
+++ b/modern/src/store/devices.js
@@ -5,6 +5,7 @@ const { reducer, actions } = createSlice({
initialState: {
items: {},
selectedId: null,
+ filteredItems: {},
},
reducers: {
refresh(state, action) {
@@ -20,6 +21,14 @@ const { reducer, actions } = createSlice({
remove(state, action) {
delete state.items[action.payload];
},
+ filterByName(state, action) {
+ return {
+ ...state,
+ filteredItems: action.payload ?
+ Object.values(state.items).filter((item) => item.name?.toLowerCase().includes(action.payload?.toLowerCase()))
+ : state.items,
+ }
+ }
},
});