✨ Add tRPC user query

2023-07-29 16:08:58 +02:00
parent 5c4e1a4bb8
commit e4e1f2e32e
4 changed files with 144 additions and 20 deletions
--- a/src/pages/manage/users/index.tsx
+++ b/src/pages/manage/users/index.tsx
@@ -1,12 +1,98 @@
-import { Title } from "@mantine/core";
-import { MainLayout } from "~/components/layout/admin/main-admin.layout";
+import {
+  ActionIcon,
+  Autocomplete,
+  Avatar,
+  Button,
+  Flex,
+  Group,
+  Pagination,
+  SegmentedControl,
+  Table,
+  Text,
+  Title,
+} from '@mantine/core';
+import { IconPlus, IconTrash } from '@tabler/icons-react';
+import Head from 'next/head';
+import { useState } from 'react';
+import { MainLayout } from '~/components/layout/admin/main-admin.layout';
+import { api } from '~/utils/api';

 const ManageUsersPage = () => {
-    return (
-        <MainLayout>
-            <Title>Manage users</Title>
-        </MainLayout>
-    )
-}
+  const { isLoading, data, fetchNextPage, fetchPreviousPage } = api.user.getAll.useInfiniteQuery(
+    {
+      limit: 10,
+    },
+    {
+      getNextPageParam: (lastPage) => lastPage.nextCursor,
+    }
+  );

-export default ManageUsersPage;
+  const [activePage, _] = useState(1);
+
+  return (
+    <MainLayout>
+      <Head>
+        <title>Users • Homarr</title>
+      </Head>
+      <Title mb="xl">Manage users</Title>
+
+      <Group position="apart" mb="md">
+        <SegmentedControl
+          data={[
+            { label: 'Active', value: 'active' },
+            { label: 'Inactive', value: 'inactive' },
+          ]}
+        />
+        <Flex columnGap={10}>
+          <Autocomplete
+            placeholder="Filter"
+            data={['React', 'Angular', 'Svelte', 'Vue']}
+            variant="filled"
+          />
+          <Button leftIcon={<IconPlus size="1rem" />} variant="default">
+            Create
+          </Button>
+        </Flex>
+      </Group>
+
+      {data && (
+        <>
+          <Table mb="md" withBorder highlightOnHover>
+            <thead>
+              <tr>
+                <th>User</th>
+              </tr>
+            </thead>
+            <tbody>
+              {data.pages[0].users.map((user) => (
+                <tr>
+                  <td>
+                    <Group position="apart">
+                      <Group spacing="xs">
+                        <Avatar size="sm" />
+                        <Text>{user.name}</Text>
+                      </Group>
+                      <Group>
+                        <ActionIcon color="red" variant="light">
+                          <IconTrash size="1rem" />
+                        </ActionIcon>
+                      </Group>
+                    </Group>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+          <Pagination
+            total={data.pages.length}
+            value={activePage}
+            onNextPage={fetchNextPage}
+            onPreviousPage={fetchPreviousPage}
+          />
+        </>
+      )}
+    </MainLayout>
+  );
+};
+
+export default ManageUsersPage;
--- a/src/pages/manage/users/invites.tsx
+++ b/src/pages/manage/users/invites.tsx
@@ -1,12 +1,16 @@
-import { Title } from "@mantine/core";
-import { MainLayout } from "~/components/layout/admin/main-admin.layout";
+import { Title } from '@mantine/core';
+import { Head } from 'next/document';
+import { MainLayout } from '~/components/layout/admin/main-admin.layout';

 const ManageUserInvitesPage = () => {
-    return (
-        <MainLayout>
-            <Title>Manage user invites</Title>
-        </MainLayout>
-    )
-}
+  return (
+    <MainLayout>
+      <Head>
+        <title>User invites • Homarr</title>
+      </Head>
+      <Title>Manage user invites</Title>
+    </MainLayout>
+  );
+};

-export default ManageUserInvitesPage;
+export default ManageUserInvitesPage;