frontend/src/components/tables/PageControl.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

import { FunctionComponent, useEffect } from "react";
import { Group, Pagination, Text } from "@mantine/core";
import { useIsLoading } from "@/contexts";

interface Props {
  count: number;
  index: number;
  size: number;
  total: number;
  goto: (idx: number) => void;
}

const PageControl: FunctionComponent<Props> = ({
  count,
  index,
  size,
  total,
  goto,
}) => {
  const empty = total === 0;
  const start = empty ? 0 : size * index + 1;
  const end = Math.min(size * (index + 1), total);

  const isLoading = useIsLoading();

  // Jump to first page if total page count changes
  useEffect(() => {
    goto(0);
  }, [total, goto]);

  return (
    <Group p={16} justify="space-between">
      <Text size="sm">
        Show {start} to {end} of {total} entries
      </Text>
      <Pagination
        size="sm"
        color={isLoading ? "gray" : "primary"}
        value={index + 1}
        onChange={(page) => goto(page - 1)}
        hidden={count <= 1}
        total={count}
      ></Pagination>
    </Group>
  );
};

export default PageControl;