Update devices list search

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,
+      }
+    }
   },
 });