🚸 Improve UX on create user page

src/modals/delete-user/delete-user.modal.tsx

@@ -0,0 +1,45 @@
+import { Button, Group, Stack, Text } from '@mantine/core';
+import { ContextModalProps, modals } from '@mantine/modals';
+import { api } from '~/utils/api';
+
+export const DeleteUserModal = ({
+  context,
+  id,
+  innerProps,
+}: ContextModalProps<{ userId: string; username: string }>) => {
+  const apiContext = api.useContext();
+  const { isLoading, mutateAsync } = api.user.deleteUser.useMutation({
+    onSuccess: async () => {
+      await apiContext.user.getAll.invalidate();
+      modals.close(id);
+    },
+  });
+  return (
+    <Stack>
+      <Text>
+        Are you sure, that you want to delete the user {innerProps.username}? This will delete data
+        associated with this account, but not any created dashboards by this user.
+      </Text>
+
+      <Group grow>
+        <Button
+          onClick={() => {
+            modals.close(id);
+          }}
+        >
+          Cancel
+        </Button>
+        <Button
+          onClick={async () => {
+            await mutateAsync({
+              userId: innerProps.userId,
+            });
+          }}
+          disabled={isLoading}
+        >
+          Delete
+        </Button>
+      </Group>
+    </Stack>
+  );
+};

src/modals/modals.ts

@@ -0,0 +1,26 @@
+import { ChangeAppPositionModal } from '~/components/Dashboard/Modals/ChangePosition/ChangeAppPositionModal';
+import { ChangeWidgetPositionModal } from '~/components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal';
+import { EditAppModal } from '~/components/Dashboard/Modals/EditAppModal/EditAppModal';
+import { SelectElementModal } from '~/components/Dashboard/Modals/SelectElement/SelectElementModal';
+import { WidgetsEditModal } from '~/components/Dashboard/Tiles/Widgets/WidgetsEditModal';
+import { WidgetsRemoveModal } from '~/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal';
+import { CategoryEditModal } from '~/components/Dashboard/Wrappers/Category/CategoryEditModal';
+
+import { DeleteUserModal } from './delete-user/delete-user.modal';
+
+export const modals = {
+  editApp: EditAppModal,
+  selectElement: SelectElementModal,
+  integrationOptions: WidgetsEditModal,
+  integrationRemove: WidgetsRemoveModal,
+  categoryEditModal: CategoryEditModal,
+  changeAppPositionModal: ChangeAppPositionModal,
+  changeIntegrationPositionModal: ChangeWidgetPositionModal,
+  deleteUserModal: DeleteUserModal,
+};
+
+declare module '@mantine/modals' {
+  export interface MantineModalsOverride {
+    modals: typeof modals;
+  }
+}

src/pages/_app.tsx

@@ -16,22 +16,15 @@ import Head from 'next/head';
 import { useEffect, useState } from 'react';
 import 'video.js/dist/video-js.css';
 import { env } from '~/env.js';
-import { ColorScheme, ColorSchemeProvider } from '~/hooks/use-colorscheme';
+import { ColorSchemeProvider } from '~/hooks/use-colorscheme';
+import { modals } from '~/modals/modals';
 import { ConfigType } from '~/types/config';
 import { api } from '~/utils/api';
 import { colorSchemeParser } from '~/validations/user';
 
 import { COOKIE_COLOR_SCHEME_KEY, COOKIE_LOCALE_KEY } from '../../data/constants';
 import nextI18nextConfig from '../../next-i18next.config.js';
-import { ChangeAppPositionModal } from '../components/Dashboard/Modals/ChangePosition/ChangeAppPositionModal';
-import { ChangeWidgetPositionModal } from '../components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal';
-import { EditAppModal } from '../components/Dashboard/Modals/EditAppModal/EditAppModal';
-import { SelectElementModal } from '../components/Dashboard/Modals/SelectElement/SelectElementModal';
-import { WidgetsEditModal } from '../components/Dashboard/Tiles/Widgets/WidgetsEditModal';
-import { WidgetsRemoveModal } from '../components/Dashboard/Tiles/Widgets/WidgetsRemoveModal';
-import { CategoryEditModal } from '../components/Dashboard/Wrappers/Category/CategoryEditModal';
 import { ConfigProvider } from '../config/provider';
-import { useEditModeInformationStore } from '../hooks/useEditModeInformation';
 import '../styles/global.scss';
 import { usePackageAttributesStore } from '../tools/client/zustands/usePackageAttributesStore';
 import { ColorTheme } from '../tools/color';
@@ -123,17 +116,7 @@ function App(
                 >
                   <ConfigProvider {...props.pageProps}>
                     <Notifications limit={4} position="bottom-left" />
-                    <ModalsProvider
+                    <ModalsProvider modals={modals}>
-                      modals={{
-                        editApp: EditAppModal,
-                        selectElement: SelectElementModal,
-                        integrationOptions: WidgetsEditModal,
-                        integrationRemove: WidgetsRemoveModal,
-                        categoryEditModal: CategoryEditModal,
-                        changeAppPositionModal: ChangeAppPositionModal,
-                        changeIntegrationPositionModal: ChangeWidgetPositionModal,
-                      }}
-                    >
                       <Component {...pageProps} />
                     </ModalsProvider>
                   </ConfigProvider>

src/pages/manage/users/create.tsx

@@ -48,7 +48,12 @@ const CreateNewUserPage = () => {
     ),
   });
 
-  const { mutateAsync, isSuccess } = api.user.createUser.useMutation();
+  const context = api.useContext();
+  const { mutateAsync, isSuccess } = api.user.createUser.useMutation({
+    onSettled: () => {
+      void context.user.getAll.invalidate();
+    }
+  });
 
   return (
     <MainLayout>

src/pages/manage/users/index.tsx

@@ -11,6 +11,7 @@ import {
   Text,
   Title,
 } from '@mantine/core';
+import { openContextModal } from '@mantine/modals';
 import { IconPlus, IconTrash } from '@tabler/icons-react';
 import Head from 'next/head';
 import Link from 'next/link';
@@ -28,9 +29,9 @@ const ManageUsersPage = () => {
     }
   );
 
-  const [activePage, _] = useState(0);
+  const { mutateAsync: deleteUserMutateAsync } = api.user.deleteUser.useMutation();
 
-  console.log(data?.pages);
+  const [activePage, _] = useState(0);
 
   return (
     <MainLayout>
@@ -82,7 +83,20 @@ const ManageUsersPage = () => {
                         <Text>{user.name}</Text>
                       </Group>
                       <Group>
-                        <ActionIcon color="red" variant="light">
+                        <ActionIcon
+                          onClick={() => {
+                            openContextModal({
+                              modal: 'deleteUserModal',
+                              title: <Text weight="bold">Delete user ${user.name}</Text>,
+                              innerProps: {
+                                userId: user.id,
+                                username: user.name ?? ''
+                              }
+                            });
+                          }}
+                          color="red"
+                          variant="light"
+                        >
                           <IconTrash size="1rem" />
                         </ActionIcon>
                       </Group>

src/server/api/routers/user.ts

@@ -185,4 +185,18 @@ export const userRouter = createTRPCRouter({
         },
       });
     }),
+
+  deleteUser: publicProcedure
+    .input(
+      z.object({
+        userId: z.string(),
+      })
+    )
+    .mutation(async ({ ctx, input }) => {
+      await ctx.prisma.user.delete({
+        where: {
+          id: input.userId,
+        },
+      });
+    }),
 });