feat: add basic load more pagination for users

HemmeligOrg · Apr 10, 2023 · d4576f7 · d4576f7
1 parent 36c0f4e
commit d4576f7
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 5 deletions.
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -65,6 +65,7 @@
         "update": "Update user",
         "add": "Add user",
         "saved": "Saved",
-        "save": "Save"
+        "save": "Save",
+        "more": "Load more"
     }
 }
diff --git a/src/client/api/users.js b/src/client/api/users.js
@@ -1,7 +1,7 @@
 import config from '../config';
 
-export const getUsers = async () => {
-    const data = await fetch(`${config.get('api.host')}/admin/users`, {
+export const getUsers = async (skip = 0) => {
+    const data = await fetch(`${config.get('api.host')}/admin/users?skip=${skip}`, {
         method: 'GET',
         cache: 'no-cache',
         headers: {

diff --git a/src/client/routes/account/users.jsx b/src/client/routes/account/users.jsx
@@ -3,6 +3,7 @@ import {
     Alert,
     ActionIcon,
     Container,
+    Center,
     Text,
     Stack,
     Select,
@@ -58,6 +59,7 @@ const addUserList = (users, data) => {
 const Users = () => {
     const [modalState, setModalState] = useState('add');
     const [users, setUsers] = useState([]);
+    const [skip, setSkip] = useState(10);
     const [success, setSuccess] = useState(false);
     const [error, setError] = useState(null);
     const [opened, { open, close }] = useDisclosure(false);
@@ -133,6 +135,16 @@ const Users = () => {
         setUsers(updateUserList(users, { values: user }, 'delete'));
     };
 
+    const onLoadUsers = async (event) => {
+        event.preventDefault();
+
+        const moreUsers = await getUsers(skip);
+
+        setSkip(skip + 20);
+
+        setUsers([...users, ...moreUsers]);
+    };
+
     const openDeleteModal = (user) =>
         openConfirmModal({
             title: 'Delete ' + user.username,
@@ -260,6 +272,12 @@ const Users = () => {
                     </Table>
                 </Group>
 
+                <Center>
+                    <Button color="hemmelig-orange" onClick={onLoadUsers}>
+                        {t('users.more')}
+                    </Button>
+                </Center>
+
                 <Group position="right">
                     <Button
                         leftIcon={<IconPlus size={14} />}

diff --git a/src/server/controllers/admin/users.js b/src/server/controllers/admin/users.js
@@ -19,8 +19,23 @@ async function users(fastify) {
         {
             preValidation: [fastify.authenticate, fastify.admin],
         },
-        async () => {
-            const users = await prisma.user.findMany({});
+        async (request, reply) => {
+            const { skip = 0, take = 10 } = request.query;
+
+            if (take > 100) {
+                return reply.code(403).send({
+                    type: 'take',
+                    error: 'Not allowed to fetch more users than 100.',
+                });
+            }
+
+            const users = await prisma.user.findMany({
+                skip: Number(skip),
+                take: Number(take),
+                orderBy: {
+                    role: 'asc',
+                },
+            });
 
             return getRedactedUsers(users);
         }