Merge pull request #532 from LAION-AI/237-admin-paginate-users

Adidng simple pagination to the admin user view #237

website/src/pages/admin/index.tsx

@@ -26,7 +26,7 @@ const AdminIndex = () => {
       return;
     }
     router.push("/");
-  }, [session, status]);
+  }, [router, session, status]);
 
   return (
     <>

website/src/pages/admin/manage_user/[id].tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Container, Flex, FormControl, FormLabel, Input, Select, useToast } from "@chakra-ui/react";
+import { Button, Container, FormControl, FormLabel, Input, Select, useToast } from "@chakra-ui/react";
 import { Field, Form, Formik } from "formik";
 import Head from "next/head";
 import { useRouter } from "next/router";
@@ -27,7 +27,7 @@ const ManageUser = ({ user }) => {
       return;
     }
     router.push("/");
-  }, [session, status]);
+  }, [router, session, status]);
 
   // Trigger to let us update the user's role.  Triggers a toast when complete.
   const { trigger } = useSWRMutation("/api/admin/update_user", poster, {

website/src/pages/api/admin/update_user.ts

@@ -1,4 +1,3 @@
-import { getToken } from "next-auth/jwt";
 import withRole from "src/lib/auth";
 import prisma from "src/lib/prismadb";
 

website/src/pages/api/admin/users.ts

@@ -1,12 +1,21 @@
-import { getToken } from "next-auth/jwt";
 import withRole from "src/lib/auth";
 import prisma from "src/lib/prismadb";
 
+// The number of users to fetch in any request.
+const PAGE_SIZE = 20;
+
 /**
  * Returns a list of user results from the database when the requesting user is
  * a logged in admin.
  */
 const handler = withRole("admin", async (req, res) => {
+  // Figure out the pagination index and skip that number of users.
+  //
+  // Note: with Prisma this isn't the most efficient but it's the only possible
+  // option with cuid based User IDs.
+  const { pageIndex } = req.query;
+  const skip = parseInt(pageIndex as string) * PAGE_SIZE || 0;
+
   // Fetch 20 users.
   const users = await prisma.user.findMany({
     select: {
@@ -15,7 +24,8 @@ const handler = withRole("admin", async (req, res) => {
       name: true,
       email: true,
     },
-    take: 20,
+    skip,
+    take: PAGE_SIZE,
   });
 
   res.status(200).json(users);