3 files changed, 23 insertions, 14 deletions
diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
index e06fd580..10ac4fc7 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';
@@ -126,12 +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);
+
+  useEffect(() => {
+    setFilteredItems(
+      filter.trim().length > 0
+        ? items.filter((item) => `${item.name} ${item.uniqueId}`.toLowerCase().includes(filter?.toLowerCase()))
+        : items,
+    );
+  }, [filter, items]);
 
   if (listInnerEl.current) {
     listInnerEl.current.className = classes.listInner;
@@ -151,8 +160,8 @@ const DeviceView = ({ updateTimestamp, onMenuClick }) => {
           <FixedSizeList
             width={width}
             height={height}
-            itemCount={items.length}
-            itemData={{ items, onMenuClick }}
+            itemCount={filteredItems.length}
+            itemData={{ items: filteredItems, onMenuClick }}
             itemSize={72}
             overscanCount={10}
             innerRef={listInnerEl}
@@ -165,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 2f1bc79c..e504ff29 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -98,7 +98,7 @@ const MainPage = () => {
   const isTablet = useMediaQuery(theme.breakpoints.down('md'));
   const isPhone = useMediaQuery(theme.breakpoints.down('xs'));
 
-  const [deviceName, setDeviceName] = useState('');
+  const [searchKeyword, setSearchKeyword] = useState('');
   const [collapsed, setCollapsed] = useState(false);
 
   const handleClose = () => {
@@ -139,11 +139,11 @@ const MainPage = () => {
             )}
             <TextField
               fullWidth
-              name="deviceName"
-              value={deviceName}
-              autoComplete="deviceName"
+              name="searchKeyword"
+              value={searchKeyword}
+              autoComplete="searchKeyword"
               autoFocus
-              onChange={(event) => setDeviceName(event.target.value)}
+              onChange={(event) => setSearchKeyword(event.target.value)}
               placeholder={t('sharedSearchDevices')}
               variant="filled"
             />
@@ -158,7 +158,7 @@ const MainPage = () => {
           </Toolbar>
         </Paper>
         <div className={classes.deviceList}>
-          <DevicesList />
+          <DevicesList filter={searchKeyword} />
         </div>
       </Paper>
       <BottomMenu />