Implemented device search functionality! :D

4 files changed, 32 insertions, 8 deletions

diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
index 5f7892c..c5f2413 100644
--- a/modern/src/DevicesList.js
+++ b/modern/src/DevicesList.js
@@ -18,7 +18,7 @@ import { devicesActions, uiActions } 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) => ({
@@ -136,7 +136,10 @@ const DeviceView = ({ updateTimestamp, onMenuClick }) => {
   const dispatch = useDispatch();
   const listInnerEl = useRef(null);
 
-  const items = useSelector(getDevices);
+  const filteredItems = useSelector(getFilteredDevices);
+  const unfilteredItems = useSelector(getDevices);
+  
+  const items = filteredItems.length > 0 ? filteredItems : unfilteredItems;
 
   if (listInnerEl.current) {
     listInnerEl.current.className = classes.listInner;
@@ -157,7 +160,7 @@ const DeviceView = ({ updateTimestamp, onMenuClick }) => {
             width={width}
             height={height}
             itemCount={items.length}
-            itemData={{ items, onMenuClick }}
+            itemData={{items, onMenuClick}}
             itemSize={92}
             overscanCount={10}
             innerRef={listInnerEl}
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index bc0c498..c147ae8 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -4,6 +4,7 @@ import {
   makeStyles, Paper, Toolbar, TextField, IconButton, Button,
 } from '@material-ui/core';
 import { useDispatch, useSelector } from 'react-redux';
+import { devicesActions } from './store/devices';
 import { uiActions } from './store/ui';
 
 import { useTheme } from '@material-ui/core/styles';
@@ -101,12 +102,16 @@ const MainPage = () => {
   const isTablet = useMediaQuery(theme.breakpoints.down('md'));
   const isPhone = useMediaQuery(theme.breakpoints.down('xs'));
 
-  const [deviceName, setDeviceName] = useState('');
+  //const [deviceName, setDeviceName] = useState('');
   const collapsed = useSelector((state) => state.ui.collapsed);
 
   const handleClose = () => {
     dispatch(uiActions.setCollapsed(!collapsed));
   };
+  
+  const setDeviceName = (event) => {
+    dispatch(devicesActions.setFilter(event.target.value));
+  }
 
   useEffect(() => uiActions.setCollapsed(isTablet), [isTablet]);
 
@@ -143,10 +148,11 @@ const MainPage = () => {
             <TextField
               fullWidth
               name="deviceName"
+              /*name="deviceName"
               value={deviceName}
-              autoComplete="deviceName"
+              autoComplete="deviceName"*/
               autoFocus
-              onChange={(event) => setDeviceName(event.target.value)}
+              onChange={(event) => setDeviceName(event) }
               placeholder="Search Devices"
               variant="filled"
             />
diff --git a/modern/src/common/selectors.js b/modern/src/common/selectors.js
index 0c4c02e..e52943c 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 getPosition = (id) => (state) => state.positions.items[id];
+export const getFilteredDevices = (state) => Object.values(state.devices.filteredItems);
+
+export const getPosition = (id) => (state) => state.positions.items[id];
\ No newline at end of file
diff --git a/modern/src/store/devices.js b/modern/src/store/devices.js
index b76bc2f..2be5d6b 100644
--- a/modern/src/store/devices.js
+++ b/modern/src/store/devices.js
@@ -1,9 +1,10 @@
-import { createSlice } from '@reduxjs/toolkit';
+import { createSlice, current } from '@reduxjs/toolkit';
 
 const { reducer, actions } = createSlice({
   name: 'devices',
   initialState: {
     items: {},
+    filteredItems: {},
     selectedId: null,
   },
   reducers: {
@@ -20,6 +21,18 @@ const { reducer, actions } = createSlice({
     unselect(state, action) {
       state.selectedId = null;
     },
+    setFilter(state, action) {
+      console.log ('State! ', current(state).items);
+      console.log ('Payload! ', action.payload);
+      const items = Object.entries(current(state).items);
+      state.filteredItems = Object.fromEntries(items.filter(([k, v]) => {
+        return v.name.toLowerCase().includes(action.payload.toLowerCase());
+      }));
+      console.log ('Filtered items!', state.filteredItems);
+    },
+    clearFilter(state, action) {
+      state.filteredItems = {};
+    },
     remove(state, action) {
       delete state.items[action.payload];
     },