Changed devices list search

5 files changed, 18 insertions, 28 deletions

diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
index f98e5c72..fdbdfcdf 100644
--- a/modern/src/DevicesList.js
+++ b/modern/src/DevicesList.js
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { makeStyles } from '@material-ui/core/styles';
 import Avatar from '@material-ui/core/Avatar';
@@ -18,7 +18,7 @@ import { devicesActions } from './store';
 import EditCollectionView from './EditCollectionView';
 import { useEffectAsync } from './reactHelper';
 import { formatPosition } from './common/formatter';
-import { getDevices, getFilteredDevices, getPosition } from './common/selectors';
+import { getDevices, getPosition } from './common/selectors';
 import { useTranslation } from './LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
@@ -126,16 +126,21 @@ const DeviceRow = ({ data, index, style }) => {
   );
 };
 
-const DeviceView = ({ updateTimestamp, onMenuClick }) => {
+const DeviceView = ({ updateTimestamp, onMenuClick, filter }) => {
   const classes = useStyles();
   const dispatch = useDispatch();
   const listInnerEl = useRef(null);
 
   const items = useSelector(getDevices);
+  const [filteredItems, setFilteredItems] = useState(null);
 
-  const filteredItems = useSelector(getFilteredDevices);
-
-  const getItems = () => (filteredItems.length === 0 ? items : filteredItems);
+  useEffect(() => {
+    setFilteredItems(
+      filter.trim().length > 0
+        ? items.filter((item) => `${item.name} ${item.uniqueId} ${item.groupId}`.toLowerCase().includes(filter?.toLowerCase()))
+        : items,
+    );
+  }, [filter, items]);
 
   if (listInnerEl.current) {
     listInnerEl.current.className = classes.listInner;
@@ -155,8 +160,8 @@ const DeviceView = ({ updateTimestamp, onMenuClick }) => {
           <FixedSizeList
             width={width}
             height={height}
-            itemCount={getItems().length}
-            itemData={{ items: getItems(), onMenuClick }}
+            itemCount={filteredItems.length}
+            itemData={{ items: filteredItems, onMenuClick }}
             itemSize={72}
             overscanCount={10}
             innerRef={listInnerEl}
@@ -169,8 +174,8 @@ const DeviceView = ({ updateTimestamp, onMenuClick }) => {
   );
 };
 
-const DevicesList = () => (
-  <EditCollectionView content={DeviceView} editPath="/device" endpoint="devices" disableAdd />
+const DevicesList = ({ filter }) => (
+  <EditCollectionView content={DeviceView} editPath="/device" endpoint="devices" disableAdd filter={filter} />
 );
 
 export default DevicesList;
diff --git a/modern/src/EditCollectionView.js b/modern/src/EditCollectionView.js
index 24e85b7c..2d011302 100644
--- a/modern/src/EditCollectionView.js
+++ b/modern/src/EditCollectionView.js
@@ -19,7 +19,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 const EditCollectionView = ({
-  content, editPath, endpoint, disableAdd,
+  content, editPath, endpoint, disableAdd, filter,
 }) => {
   const classes = useStyles();
   const history = useHistory();
@@ -64,7 +64,7 @@ const EditCollectionView = ({
 
   return (
     <>
-      <Content updateTimestamp={updateTimestamp} onMenuClick={menuShow} />
+      <Content updateTimestamp={updateTimestamp} onMenuClick={menuShow} filter={filter} />
       {adminEnabled && !disableAdd
         && (
         <Fab size="medium" color="primary" className={classes.fab} onClick={handleAdd}>
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index 4a266328..b20c1264 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react';
-import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import {
   makeStyles, Paper, Toolbar, TextField, IconButton, Button,
@@ -23,7 +22,6 @@ 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: {
@@ -95,7 +93,6 @@ const MainPage = () => {
   const classes = useStyles();
   const history = useHistory();
   const theme = useTheme();
-  const dispatch = useDispatch();
   const t = useTranslation();
 
   const isTablet = useMediaQuery(theme.breakpoints.down('md'));
@@ -108,8 +105,6 @@ const MainPage = () => {
     setCollapsed(!collapsed);
   };
 
-  useEffect(() => dispatch(devicesActions.filterByName(deviceName.trim())), [deviceName]);
-
   useEffect(() => setCollapsed(isTablet), [isTablet]);
 
   return (
@@ -163,7 +158,7 @@ const MainPage = () => {
           </Toolbar>
         </Paper>
         <div className={classes.deviceList}>
-          <DevicesList />
+          <DevicesList filter={deviceName} />
         </div>
       </Paper>
       <BottomMenu />
diff --git a/modern/src/common/selectors.js b/modern/src/common/selectors.js
index 45a79504..0c4c02e1 100644
--- a/modern/src/common/selectors.js
+++ b/modern/src/common/selectors.js
@@ -4,6 +4,4 @@ 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 cfe8f162..52a002dc 100644
--- a/modern/src/store/devices.js
+++ b/modern/src/store/devices.js
@@ -21,14 +21,6 @@ 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,
-      };
-    },
   },
 });