feat(frontend): initial version of the requests page (no filtering/sorting)

src/components/RequestList/index.tsx

@@ -0,0 +1,96 @@
+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';
+
+const RequestList: React.FC = () => {
+  const [pageIndex, setPageIndex] = useState(0);
+
+  const { data, error } = 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>Requests</Header>
+      <Table>
+        <thead>
+          <Table.TH className="hidden sm:table-cell"></Table.TH>
+          <Table.TH>Media Info</Table.TH>
+          <Table.TH>Status</Table.TH>
+          <Table.TH></Table.TH>
+          <Table.TH></Table.TH>
+          <Table.TH></Table.TH>
+        </thead>
+        <Table.TBody>
+          {data.results.map((request) => {
+            return (
+              <RequestItem
+                request={request}
+                key={`request-list-${request.id}`}
+              />
+            );
+          })}
+          <tr>
+            <Table.TD colSpan={6} noPadding>
+              <nav
+                className="bg-gray-700 px-4 py-3 flex items-center justify-between text-white sm:px-6"
+                aria-label="Pagination"
+              >
+                <div className="hidden sm:block">
+                  <p className="text-sm">
+                    Showing
+                    <span className="font-medium px-1">{pageIndex * 10}</span>
+                    to
+                    <span className="font-medium px-1">
+                      {data.results.length < 10
+                        ? pageIndex * 10 + data.results.length
+                        : pageIndex + 1 * 10}
+                    </span>
+                    of
+                    <span className="font-medium px-1">
+                      {data.pageInfo.results}
+                    </span>
+                    results
+                  </p>
+                </div>
+                <div className="flex-1 flex justify-start sm:justify-end">
+                  <span className="mr-2">
+                    <Button
+                      disabled={!hasPrevPage}
+                      onClick={() => setPageIndex((current) => current - 1)}
+                    >
+                      Previous
+                    </Button>
+                  </span>
+                  <Button
+                    disabled={!hasNextPage}
+                    onClick={() => setPageIndex((current) => current + 1)}
+                  >
+                    Next
+                  </Button>
+                </div>
+              </nav>
+            </Table.TD>
+          </tr>
+        </Table.TBody>
+      </Table>
+    </>
+  );
+};
+
+export default RequestList;