All files / js/sidebar ChildPagination.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
49
50
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from "react";
import { CHILDREN_PER_PAGE } from "./constants";
 
/** Pagination buttons for the list of children in the sidebar. */
export default function ChildPagination({
  page,
  numberOfChildren,
  setPage,
}: {
  page: number;
  numberOfChildren: number;
  setPage: (n: number) => void;
}): JSX.Element | null {
  const pages = Math.ceil(numberOfChildren / CHILDREN_PER_PAGE);
  if (pages <= 1) {
    return null;
  }
  return (
    <li className="pagination">
      {page > 1 ? (
        <a
          href="#"
          onClick={(ev) => {
            ev.preventDefault();
            setPage(page - 1);
          }}
        >
          «
        </a>
      ) : (
        <em>«</em>
      )}
      <span className="page">{page + " / " + pages}</span>
      {page < pages ? (
        <a
          href="#"
          onClick={(ev) => {
            ev.preventDefault();
            setPage(page + 1);
          }}
        >
          »
        </a>
      ) : (
        <em>»</em>
      )}
    </li>
  );
}