overseerr/src/components/RequestList/index.tsx

import React, { useState } from 'react';
import useSWR from 'swr';
import type { RequestResultsResponse } from '../../../server/interfaces/api/requestInterfaces';
import LoadingSpinner from '../Common/LoadingSpinner';
import RequestItem from './RequestItem';
import Header from '../Common/Header';
import Table from '../Common/Table';
import Button from '../Common/Button';
import { defineMessages, useIntl } from 'react-intl';

const messages = defineMessages({
  requests: 'Requests',
  mediaInfo: 'Media Info',
  status: 'Status',
  requestedAt: 'Requested At',
  modifiedBy: 'Last Modified By',
  showingresults:
    'Showing <strong>{from}</strong> to <strong>{to}</strong> of <strong>{total}</strong> results',
  next: 'Next',
  previous: 'Previous',
});

const RequestList: React.FC = () => {
  const intl = useIntl();
  const [pageIndex, setPageIndex] = useState(0);

  const { data, error, revalidate } = useSWR<RequestResultsResponse>(
    `/api/v1/request?take=10&skip=${pageIndex * 10}`
  );
  if (!data && !error) {
    return <LoadingSpinner />;
  }

  if (!data) {
    return <LoadingSpinner />;
  }

  const hasNextPage = data.pageInfo.pages > pageIndex + 1;
  const hasPrevPage = pageIndex > 0;

  return (
    <>
      <Header>{intl.formatMessage(messages.requests)}</Header>
      <Table>
        <thead>
          <Table.TH className="hidden sm:table-cell"></Table.TH>
          <Table.TH>{intl.formatMessage(messages.mediaInfo)}</Table.TH>
          <Table.TH>{intl.formatMessage(messages.status)}</Table.TH>
          <Table.TH>{intl.formatMessage(messages.requestedAt)}</Table.TH>
          <Table.TH>{intl.formatMessage(messages.modifiedBy)}</Table.TH>
          <Table.TH></Table.TH>
        </thead>
        <Table.TBody>
          {data.results.map((request) => {
            return (
              <RequestItem
                request={request}
                key={`request-list-${request.id}`}
                revalidateList={() => revalidate()}
              />
            );
          })}
          <tr>
            <Table.TD colSpan={6} noPadding>
              <nav
                className="flex items-center justify-between px-4 py-3 text-white bg-gray-700"
                aria-label="Pagination"
              >
                <div className="hidden sm:block">
                  <p className="text-sm">
                    {intl.formatMessage(messages.showingresults, {
                      from: pageIndex * 10,
                      to:
                        data.results.length < 10
                          ? pageIndex * 10 + data.results.length
                          : (pageIndex + 1) * 10,
                      total: data.pageInfo.results,
                      strong: function strong(msg) {
                        return <span className="font-medium">{msg}</span>;
                      },
                    })}
                  </p>
                </div>
                <div className="flex justify-start flex-1 sm:justify-end">
                  <span className="mr-2">
                    <Button
                      disabled={!hasPrevPage}
                      onClick={() => setPageIndex((current) => current - 1)}
                    >
                      {intl.formatMessage(messages.previous)}
                    </Button>
                  </span>
                  <Button
                    disabled={!hasNextPage}
                    onClick={() => setPageIndex((current) => current + 1)}
                  >
                    {intl.formatMessage(messages.next)}
                  </Button>
                </div>
              </nav>
            </Table.TD>
          </tr>
        </Table.TBody>
      </Table>
    </>
  );
};

export default RequestList;