✨ Add basic pagination in log view

frontend/src/features/log/Log.tsx

@@ -1,17 +1,33 @@
 import { useQuery } from "@apollo/client";
+import clsx from "clsx";
 import { parseISO, format } from "date-fns";
 import React from "react";
+import { useUrlSearchParams } from "use-url-search-params";
 
 import { Order, OrderLine, OrderListDocument, Transaction, TransactionListDocument } from "../../types";
 import styles from "./Log.module.css";
 
 const formatTime = (isoDateTime: string): string => format(parseISO(isoDateTime), "yyyy-MM-dd HH:mm");
 
+const PAGE_SIZE = 10;
+
 export const Log = () => {
-  const { data: ordersData, loading: ordersLoading } = useQuery(OrderListDocument);
-  const { data: transactionsData, loading: transactionsLoading } = useQuery(TransactionListDocument);
+  const types = {
+    orderOffset: Number,
+    transactionOffset: Number,
+  };
+  const [params, setParams] = useUrlSearchParams({}, types);
+  const { data: ordersData, loading: ordersLoading } = useQuery(OrderListDocument, {
+    variables: { offset: params.orderOffset },
+  });
+  const { data: transactionsData, loading: transactionsLoading } = useQuery(TransactionListDocument, {
+    variables: { offset: params.transactionOffset },
+  });
   const loading = ordersLoading || transactionsLoading;
 
+  const orderOffset = params.orderOffset || 0;
+  const transactionOffset = params.transactionOffset || 0;
+
   if (loading) return <div>Loading...</div>;
 
   const { orderList: orders } = ordersData;
@@ -47,6 +63,30 @@ export const Log = () => {
             ))}
           </tbody>
         </table>
+        <nav aria-label="Order pagination">
+          <ul className="pagination">
+            <li className={clsx("page-item", { disabled: orderOffset <= 0 })}>
+              <a
+                className="page-link"
+                onClick={() => {
+                  setParams({ orderOffset: orderOffset - PAGE_SIZE });
+                }}
+              >
+                Previous
+              </a>
+            </li>
+            <li className="page-item">
+              <a
+                className="page-link"
+                onClick={() => {
+                  setParams({ orderOffset: orderOffset + PAGE_SIZE });
+                }}
+              >
+                Next
+              </a>
+            </li>
+          </ul>
+        </nav>
       </div>
       <div>
         <h2>Transaksjoner</h2>
@@ -70,6 +110,30 @@ export const Log = () => {
             ))}
           </tbody>
         </table>
+        <nav aria-label="Transaction pagination">
+          <ul className="pagination">
+            <li className={clsx("page-item", { disabled: transactionOffset <= 0 })}>
+              <a
+                className="page-link"
+                onClick={() => {
+                  setParams({ transactionOffset: transactionOffset - PAGE_SIZE });
+                }}
+              >
+                Previous
+              </a>
+            </li>
+            <li className="page-item">
+              <a
+                className="page-link"
+                onClick={() => {
+                  setParams({ transactionOffset: transactionOffset + PAGE_SIZE });
+                }}
+              >
+                Next
+              </a>
+            </li>
+          </ul>
+        </nav>
       </div>
     </div>
   );