Patch/fix pagination total (#1960)
* fix(ui): fix total pages in pagination * fix(ui): pages
This commit is contained in:
Delirium
GitHub
parent
09d1820403
commit
3eb9f5cc52
28 changed files with 31 additions and 33 deletions
|
|
@ -63,7 +63,7 @@ function RecordingsList() {
|
|||
</div>
|
||||
<Pagination
|
||||
page={page}
|
||||
totalPages={Math.ceil(total / pageSize)}
|
||||
total={total}
|
||||
onPageChange={(page) => recordingsStore.updatePage(page)}
|
||||
limit={pageSize}
|
||||
debounceRequest={100}
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@ function StatsTable({ onSort, isLoading, onPageChange, page, sessions, exportCSV
|
|||
)}
|
||||
<Pagination
|
||||
page={sessions.total > 0 ? page : 0}
|
||||
totalPages={Math.ceil(sessions.total / PER_PAGE)}
|
||||
total={sessions.total}
|
||||
onPageChange={onPageChange}
|
||||
limit={10}
|
||||
debounceRequest={200}
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ function AuditList(props: Props) {
|
|||
<div className="w-full flex items-center justify-center py-10">
|
||||
<Pagination
|
||||
page={auditStore.page}
|
||||
totalPages={Math.ceil(auditStore.total / auditStore.pageSize)}
|
||||
total={auditStore.total}
|
||||
onPageChange={(page) => auditStore.updateKey('page', page)}
|
||||
limit={auditStore.pageSize}
|
||||
debounceRequest={200}
|
||||
|
|
|
|||
|
|
@ -160,7 +160,7 @@ const Sites = ({ loading, sites, user, init }: PropsFromRedux) => {
|
|||
<div className="w-full flex items-center justify-center py-10">
|
||||
<Pagination
|
||||
page={page}
|
||||
totalPages={Math.ceil(filteredSites.size / pageSize)}
|
||||
total={filteredSites.size}
|
||||
onPageChange={(page) => updatePage(page)}
|
||||
limit={pageSize}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@ function UserList(props: Props) {
|
|||
<div className="w-full flex items-center justify-center py-10">
|
||||
<Pagination
|
||||
page={userStore.page}
|
||||
totalPages={Math.ceil(length / userStore.pageSize)}
|
||||
total={length}
|
||||
onPageChange={(page) => userStore.updateKey('page', page)}
|
||||
limit={userStore.pageSize}
|
||||
debounceRequest={100}
|
||||
|
|
|
|||
|
|
@ -65,9 +65,7 @@ function CustomMetricTableErrors(props: RouteComponentProps & Props) {
|
|||
<div className="my-6 flex items-center justify-center">
|
||||
<Pagination
|
||||
page={metric.page}
|
||||
totalPages={Math.ceil(
|
||||
data.total / metric.limit
|
||||
)}
|
||||
total={data.total}
|
||||
onPageChange={(page: any) =>
|
||||
metric.updateKey("page", page)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ function CustomMetricTableSessions(props: Props) {
|
|||
<div className="mt-6 flex items-center justify-center">
|
||||
<Pagination
|
||||
page={metric.page}
|
||||
totalPages={Math.ceil(data.total / metric.limit)}
|
||||
total={data.total}
|
||||
onPageChange={(page: any) => metric.updateKey('page', page)}
|
||||
limit={data.total}
|
||||
debounceRequest={500}
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ function AlertsList({ siteId }: Props) {
|
|||
</div>
|
||||
<Pagination
|
||||
page={page}
|
||||
totalPages={Math.ceil(list.length / pageSize)}
|
||||
total={list.length}
|
||||
onPageChange={(page) => alertsStore.updateKey('page', page)}
|
||||
limit={pageSize}
|
||||
debounceRequest={100}
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@ function CardIssues() {
|
|||
|
||||
<Pagination
|
||||
page={filter.page}
|
||||
totalPages={Math.ceil(data.total / pageSize)}
|
||||
total={data.total}
|
||||
onPageChange={(page: any) => filter.updateKey('page', page)}
|
||||
limit={pageSize}
|
||||
debounceRequest={500}
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ function CardUserList(props: RouteComponentProps<Props>) {
|
|||
</div>
|
||||
<Pagination
|
||||
page={metricStore.sessionsPage}
|
||||
totalPages={Math.ceil(data.length / metricStore.sessionsPageSize)}
|
||||
total={data.length}
|
||||
onPageChange={(page: any) => metricStore.updateKey('sessionsPage', page)}
|
||||
limit={metricStore.sessionsPageSize}
|
||||
debounceRequest={500}
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ function SessionsModal(props: Props) {
|
|||
</div>
|
||||
<Pagination
|
||||
page={filter.page}
|
||||
totalPages={Math.ceil(data.total / PER_PAGE)}
|
||||
total={data.total}
|
||||
onPageChange={(page) => filter.update('page', page)}
|
||||
limit={PER_PAGE}
|
||||
debounceRequest={1000}
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ function DashboardList() {
|
|||
</div>
|
||||
<Pagination
|
||||
page={dashboardStore.page}
|
||||
totalPages={Math.ceil(lenth / dashboardStore.pageSize)}
|
||||
total={lenth}
|
||||
onPageChange={(page) => dashboardStore.updateKey('page', page)}
|
||||
limit={dashboardStore.pageSize}
|
||||
debounceRequest={100}
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@ function MetricsList({
|
|||
</div>
|
||||
<Pagination
|
||||
page={metricStore.page}
|
||||
totalPages={Math.ceil(lenth / metricStore.pageSize)}
|
||||
total={lenth}
|
||||
onPageChange={(page) => metricStore.updateKey('page', page)}
|
||||
limit={metricStore.pageSize}
|
||||
debounceRequest={100}
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ function SessionsModal(props: Props) {
|
|||
</div>
|
||||
<Pagination
|
||||
page={page}
|
||||
totalPages={Math.ceil(total / 10)}
|
||||
total={total}
|
||||
onPageChange={(page: any) => setPage(page)}
|
||||
limit={10}
|
||||
debounceRequest={500}
|
||||
|
|
|
|||
|
|
@ -174,7 +174,7 @@ function WidgetSessions(props: Props) {
|
|||
</div>
|
||||
<Pagination
|
||||
page={metricStore.sessionsPage}
|
||||
totalPages={Math.ceil(filteredSessions.total / metricStore.sessionsPageSize)}
|
||||
total={filteredSessions.total}
|
||||
onPageChange={(page: any) => metricStore.updateKey('sessionsPage', page)}
|
||||
limit={metricStore.sessionsPageSize}
|
||||
debounceRequest={500}
|
||||
|
|
|
|||
|
|
@ -245,7 +245,7 @@ export default class List extends React.PureComponent {
|
|||
<div className="w-full flex items-center justify-center mt-4">
|
||||
<Pagination
|
||||
page={currentPage}
|
||||
totalPages={Math.ceil(total / limit)}
|
||||
total={total}
|
||||
onPageChange={(page) => this.props.updateCurrentPage(page)}
|
||||
limit={limit}
|
||||
debounceRequest={500}
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@ function FFlagsList({ siteId }: { siteId: string }) {
|
|||
</div>
|
||||
<Pagination
|
||||
page={featureFlagsStore.page}
|
||||
totalPages={Math.ceil(featureFlagsStore.total / featureFlagsStore.pageSize)}
|
||||
total={featureFlagsStore.total}
|
||||
onPageChange={(page) => featureFlagsStore.setPage(page)}
|
||||
limit={featureFlagsStore.pageSize}
|
||||
debounceRequest={100}
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ function FunnelList(props) {
|
|||
<div className="w-full flex items-center justify-center py-8">
|
||||
<Pagination
|
||||
page={funnelStore.page}
|
||||
totalPages={Math.ceil(list.length / funnelStore.pageSize)}
|
||||
total={list.length}
|
||||
onPageChange={(page) => funnelStore.updateKey('page', page)}
|
||||
limit={funnelStore.pageSize}
|
||||
debounceRequest={100}
|
||||
|
|
|
|||
|
|
@ -147,7 +147,7 @@ function AssistSessionsModal(props: Props) {
|
|||
<div className="w-full flex items-center justify-center py-6">
|
||||
<Pagination
|
||||
page={currentPage}
|
||||
totalPages={Math.ceil(total / PER_PAGE)}
|
||||
total={total}
|
||||
onPageChange={(page: any) => props.updateCurrentPage(page)}
|
||||
limit={PER_PAGE}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ function LiveTestsModal({ testId, closeModal }: { testId: string; closeModal: ()
|
|||
</div>
|
||||
<Pagination
|
||||
page={page}
|
||||
totalPages={Math.ceil(uxtestingStore.testAssistSessions.total / 10)}
|
||||
total={uxtestingStore.testAssistSessions.total}
|
||||
onPageChange={refreshData}
|
||||
limit={10}
|
||||
debounceRequest={200}
|
||||
|
|
|
|||
|
|
@ -144,7 +144,7 @@ const ResponsesOverview = observer(() => {
|
|||
</div>
|
||||
<Pagination
|
||||
page={page}
|
||||
totalPages={Math.ceil(uxtestingStore.responses[taskId!]?.total / 10)}
|
||||
total={uxtestingStore.responses[taskId!]?.total ?? 0}
|
||||
onPageChange={(p) => setPage(p)}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -213,7 +213,7 @@ function TestOverview() {
|
|||
</div>
|
||||
<Pagination
|
||||
page={uxtestingStore.testSessions.page}
|
||||
totalPages={Math.ceil(uxtestingStore.testSessions.total / 10)}
|
||||
total={uxtestingStore.testSessions.total}
|
||||
onPageChange={onPageChange}
|
||||
limit={10}
|
||||
debounceRequest={200}
|
||||
|
|
|
|||
|
|
@ -171,7 +171,7 @@ function TestsTable() {
|
|||
</div>
|
||||
<Pagination
|
||||
page={uxtestingStore.page}
|
||||
totalPages={Math.ceil(uxtestingStore.total / 10)}
|
||||
total={uxtestingStore.total}
|
||||
onPageChange={onPageChange}
|
||||
limit={10}
|
||||
debounceRequest={200}
|
||||
|
|
|
|||
|
|
@ -172,7 +172,7 @@ function LiveSessionList(props: Props) {
|
|||
</div>
|
||||
<Pagination
|
||||
page={currentPage}
|
||||
totalPages={Math.ceil(total / PER_PAGE)}
|
||||
total={total}
|
||||
onPageChange={(page: any) => props.updateCurrentPage(page)}
|
||||
limit={PER_PAGE}
|
||||
debounceRequest={500}
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ function NotesList({ members }: { members: Array<Record<string, any>> }) {
|
|||
</div>
|
||||
<Pagination
|
||||
page={notesStore.page}
|
||||
totalPages={Math.ceil(list.length / notesStore.pageSize)}
|
||||
total={list.length}
|
||||
onPageChange={(page) => notesStore.changePage(page)}
|
||||
limit={notesStore.pageSize}
|
||||
debounceRequest={100}
|
||||
|
|
|
|||
|
|
@ -266,7 +266,7 @@ function SessionList(props: Props) {
|
|||
</div>
|
||||
<Pagination
|
||||
page={currentPage}
|
||||
totalPages={Math.ceil(total / pageSize)}
|
||||
total={total}
|
||||
onPageChange={(page) => props.updateCurrentPage(page)}
|
||||
limit={pageSize}
|
||||
debounceRequest={1000}
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ function UserSessionsModal(props: Props) {
|
|||
</div>
|
||||
<Pagination
|
||||
page={filter.page}
|
||||
totalPages={Math.ceil(data.total / PER_PAGE)}
|
||||
total={data.total}
|
||||
onPageChange={(page) => filter.update('page', page)}
|
||||
limit={PER_PAGE}
|
||||
debounceRequest={1000}
|
||||
|
|
|
|||
|
|
@ -4,20 +4,20 @@ import { debounce } from 'App/utils';
|
|||
|
||||
interface Props {
|
||||
page: number;
|
||||
totalPages: number;
|
||||
total: number;
|
||||
onPageChange: (page: number) => void;
|
||||
limit?: number;
|
||||
debounceRequest?: number;
|
||||
}
|
||||
export default function Pagination(props: Props) {
|
||||
const { page, totalPages, onPageChange, limit = 5, debounceRequest = 0 } = props;
|
||||
const { page, total, onPageChange, limit = 5, debounceRequest = 0 } = props;
|
||||
const [currentPage, setCurrentPage] = React.useState(page);
|
||||
React.useMemo(() => setCurrentPage(page), [page]);
|
||||
|
||||
const debounceChange = React.useCallback(debounce(onPageChange, debounceRequest), []);
|
||||
|
||||
const changePage = (page: number) => {
|
||||
if (page > 0 && page <= totalPages) {
|
||||
if (page > 0) {
|
||||
setCurrentPage(page);
|
||||
debounceChange(page);
|
||||
}
|
||||
|
|
@ -28,7 +28,7 @@ export default function Pagination(props: Props) {
|
|||
<AntPagination
|
||||
simple
|
||||
current={currentPage}
|
||||
total={totalPages}
|
||||
total={total}
|
||||
pageSize={limit}
|
||||
onChange={changePage}
|
||||
showSizeChanger={false}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue