diff --git a/frontend/src/components/LoadMore/LoadMore.tsx b/frontend/src/components/LoadMore/LoadMore.tsx index 1c3fd20b0..e017d1498 100644 --- a/frontend/src/components/LoadMore/LoadMore.tsx +++ b/frontend/src/components/LoadMore/LoadMore.tsx @@ -2,24 +2,37 @@ import React from 'react' import { Dispatch, State } from '../../store' import { selectDeviceModelAttributes } from '../../selectors/devices' import { useDispatch, useSelector } from 'react-redux' -import { makeStyles } from '@mui/styles' -import { Box, Button } from '@mui/material' -import { spacing } from '../../styling' +import { Box, Button, Typography } from '@mui/material' export const LoadMore: React.FC = () => { const { from, size, total, results, searched, fetching } = useSelector((state: State) => selectDeviceModelAttributes(state) ) const dispatch = useDispatch() - const css = useStyles() const pages = Math.ceil((searched ? results : total) / size) const nextPage = Math.floor(from / size) + 1 + const count = searched ? results : total + const showing = Math.min(from + size, count) + if (nextPage >= pages) return null return ( - + + + {showing.toLocaleString()} of {count.toLocaleString()} + ) } - -const useStyles = makeStyles({ - box: { - position: 'absolute', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - flexDirection: 'column', - padding: spacing.lg, - paddingBottom: spacing.xl, - height: 100, - marginLeft: spacing.xl, - marginTop: spacing.xl, - }, -}) diff --git a/frontend/src/pages/DevicesPage.tsx b/frontend/src/pages/DevicesPage.tsx index 6a3844654..ec007858b 100644 --- a/frontend/src/pages/DevicesPage.tsx +++ b/frontend/src/pages/DevicesPage.tsx @@ -41,7 +41,7 @@ export const DevicesPage: React.FC = ({ restore, select }) => { - {(fetching || shouldRedirect) && !devices.length ? ( + {(!initialized || fetching || shouldRedirect) && !devices.length ? ( ) : !devices.length ? ( diff --git a/frontend/src/services/CloudSync.ts b/frontend/src/services/CloudSync.ts index 0a9e5ed46..ea79f3cf7 100644 --- a/frontend/src/services/CloudSync.ts +++ b/frontend/src/services/CloudSync.ts @@ -1,5 +1,6 @@ import network from './Network' -import { dispatch } from '../store' +import { store, dispatch } from '../store' +import { selectDeviceModelAttributes } from '../selectors/devices' class CloudSync { initialized = false @@ -56,7 +57,15 @@ class CloudSync { all = async () => { console.log('CLOUD SYNC ALL') await this.core() - await dispatch.devices.set({ from: 0 }) + // Preserve pagination: re-fetch all loaded devices instead of resetting to first page + const state = store.getState() + const deviceModel = selectDeviceModelAttributes(state) + const loadedCount = deviceModel.from + deviceModel.size + if (loadedCount > deviceModel.size) { + await dispatch.devices.set({ from: 0, size: loadedCount }) + } else { + await dispatch.devices.set({ from: 0 }) + } await this.call([ dispatch.files.fetch, dispatch.jobs.fetch, @@ -67,6 +76,10 @@ class CloudSync { dispatch.products.fetch, dispatch.partnerStats.fetch, ]) + // Restore original pagination position after refresh + if (loadedCount > deviceModel.size) { + await dispatch.devices.set({ from: deviceModel.from, size: deviceModel.size }) + } } }