function GithubIssueListFooter()

in dashboard/client/src/GithubIssueList.tsx [415:523]
102 lines of code
3 McCabe index (conditional complexity)

function GithubIssueListFooter(props: {
  data: GithubIssueListData;
  goToPage: (page: number) => void;
  changePageSize: (pageSize: number) => void;
}) {
  const buttonRef = useRef<HTMLButtonElement>(null);
  const data = props.data;
  const page = data.page;
  const total = data.total;
  const pageSize = data.pageSize;
  const lastPage = Math.ceil(total / pageSize);

  const start = 1 + pageSize * (page - 1);
  const end = Math.min(total, start + pageSize - 1);

  if (start > total) {
    return null;
  }

  return (
    <div className="flex flex-row-reverse mt-2">
      <div className="flex flex-row items-center">
        <div className="mr-8 flex flex-row">
          <span>Rows per page: </span>
          <Popover className="relative">
            {({ open }) => (
              <>
                <Popover.Button
                  ref={buttonRef}
                  className="ml-1 flex flex-row items-center cursor-pointer relative focus:outline-none"
                >
                  <span>{pageSize}</span>
                  <span className="ml-1">
                    <DownIcon />
                  </span>
                </Popover.Button>

                <Transition
                  show={open}
                  enter="transition duration-100 ease-out"
                  enterFrom="transform translate-y-10 opacity-0"
                  enterTo="transform translate-y-0 opacity-100"
                  leave="transition duration-100 ease-out"
                  leaveFrom="transform opacity-100"
                  leaveTo="transform opacity-0"
                >
                  <Popover.Panel className="absolute bg-white right-0 bottom-8 border shadow rounded bg-white z-popup flex flex-col mt-2">
                    <ul className="flex flex-col text-center cursor-pointer">
                      {[10, 25, 50, 100].map((pageSize) => (
                        <li
                          key={pageSize}
                          className="py-1 px-2 border-b hover:bg-gray-100"
                          onClick={() => {
                            if (buttonRef.current) {
                              buttonRef.current.click();
                            }
                            props.changePageSize(pageSize);
                          }}
                        >
                          {pageSize}
                        </li>
                      ))}
                    </ul>
                  </Popover.Panel>
                </Transition>
              </>
            )}
          </Popover>
        </div>

        <span className="mr-4">
          {start}-{end} of {total}
        </span>

        <button
          className="h-8 px-1 rounded-lg ring-gray-300 hover:ring-1 focus:outline-none disabled:text-gray-400 mr-2"
          disabled={page == 1}
          onClick={() => props.goToPage(page - 1)}
        >
          <svg
            className="w-6 h-6"
            focusable="false"
            viewBox="0 0 24 24"
            aria-hidden="true"
            fill="currentColor"
          >
            <path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z" />
          </svg>
        </button>

        <button
          className="h-8 px-1 rounded-lg ring-gray-300 hover:ring-1 focus:outline-none disabled:text-gray-400"
          disabled={page == lastPage}
          onClick={() => props.goToPage(page + 1)}
        >
          <svg
            className="w-6 h-6"
            focusable="false"
            viewBox="0 0 24 24"
            aria-hidden="true"
            fill="currentColor"
          >
            <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z" />
          </svg>
        </button>
      </div>
    </div>
  );
}