diff options
| -rw-r--r-- | modern/src/DevicesList.js | 25 | ||||
| -rw-r--r-- | modern/src/EditCollectionView.js | 4 | ||||
| -rw-r--r-- | modern/src/MainPage.js | 7 | ||||
| -rw-r--r-- | modern/src/common/selectors.js | 2 | ||||
| -rw-r--r-- | modern/src/store/devices.js | 8 |
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, - }; - }, }, }); |