jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui) - pagination limit set

Browse source
This commit is contained in:
Shekar Siri 2022-03-10 18:22:19 +01:00
parent 45857a804b
commit 7e29cde06f
4 changed files with 8 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/app/components/BugFinder/SessionList/SessionList.js
View file

@ -7,7 +7,7 @@ import SessionListHeader from './SessionListHeader';
import { FilterKey } from 'Types/filter/filterType'; import { FilterKey } from 'Types/filter/filterType';
const ALL = 'all'; const ALL = 'all';
const PER_PAGE = 5; const PER_PAGE = 10;
const AUTOREFRESH_INTERVAL = 3 * 60 * 1000; const AUTOREFRESH_INTERVAL = 3 * 60 * 1000;
var timeoutId; var timeoutId;
@ -136,6 +136,7 @@ export default class SessionList extends React.PureComponent {
totalPages={Math.ceil(total / PER_PAGE)} totalPages={Math.ceil(total / PER_PAGE)}
onPageChange={(page) => this.props.updateCurrentPage(page)} onPageChange={(page) => this.props.updateCurrentPage(page)}
limit={PER_PAGE} limit={PER_PAGE}
debounceRequest={1000}
/> />
</div> </div>
{/* <LoadMoreButton {/* <LoadMoreButton

3
frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
View file

@ -16,7 +16,7 @@ import { capitalize, sliceListPerPage } from 'App/utils';
import LiveSessionReloadButton from 'Shared/LiveSessionReloadButton'; import LiveSessionReloadButton from 'Shared/LiveSessionReloadButton';
const AUTOREFRESH_INTERVAL = .5 * 60 * 1000 const AUTOREFRESH_INTERVAL = .5 * 60 * 1000
const PER_PAGE = 20; const PER_PAGE = 10;
interface Props { interface Props {
loading: Boolean, loading: Boolean,
@ -165,6 +165,7 @@ function LiveSessionList(props: Props) {
page={currentPage} page={currentPage}
totalPages={Math.ceil(sessions.size / PER_PAGE)} totalPages={Math.ceil(sessions.size / PER_PAGE)}
onPageChange={(page) => props.updateCurrentPage(page)} onPageChange={(page) => props.updateCurrentPage(page)}
limit={PER_PAGE}
/> />
</div> </div>
</Loader> </Loader>

5
frontend/app/components/ui/Pagination/Pagination.tsx
View file

@ -8,16 +8,17 @@ interface Props {
totalPages: number totalPages: number
onPageChange: (page: number) => void onPageChange: (page: number) => void
limit?: number limit?: number
debounceRequest?: number
} }
export default function Pagination(props: Props) { export default function Pagination(props: Props) {
const { page, totalPages, onPageChange, limit = 5 } = props; const { page, totalPages, onPageChange, limit = 5, debounceRequest = 0 } = props;
const [currentPage, setCurrentPage] = React.useState(page); const [currentPage, setCurrentPage] = React.useState(page);
React.useMemo( React.useMemo(
() => setCurrentPage(page), () => setCurrentPage(page),
[page], [page],
); );
const debounceChange = React.useCallback(debounce(onPageChange, 1000), []); const debounceChange = React.useCallback(debounce(onPageChange, debounceRequest), []);
const changePage = (page: number) => { const changePage = (page: number) => {
if (page > 0 && page <= totalPages) { if (page > 0 && page <= totalPages) {

2
frontend/app/duck/search.js
View file

@ -142,7 +142,7 @@ const reduceThenFetchResource = actionCreator => (...args) => (dispatch, getStat
} }
filter.filters = filter.filters.map(filterMap); filter.filters = filter.filters.map(filterMap);
filter.limit = 5; filter.limit = 10;
filter.page = getState().getIn([ 'search', 'currentPage']); filter.page = getState().getIn([ 'search', 'currentPage']);
return isRoute(ERRORS_ROUTE, window.location.pathname) return isRoute(ERRORS_ROUTE, window.location.pathname)