Ms2/replace auth0

src/management-system-v2/app/(dashboard)/iam/users/header-actions.tsx

@@ -1,18 +1,15 @@
 'use client';
 
 import { AuthCan } from '@/components/auth-can';
-import { ApiRequestBody, usePostAsset } from '@/lib/fetch-data';
+import { UserSchema } from '@/lib/data/user-schema';
+import { addUser } from '@/lib/data/users';
+import useParseZodErrors from '@/lib/useParseZodErrors';
 import { PlusOutlined } from '@ant-design/icons';
 import { Button, Form, App, Input, Modal } from 'antd';
-import { FC, ReactNode, useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { FC, useEffect, useState, useTransition } from 'react';
 
-type PostUserField = keyof ApiRequestBody<'/users', 'post'>;
-
-const modalStructureWithoutPassword: {
-  dataKey: PostUserField;
-  label: string;
-  type: string;
-}[] = [
+const modalStructureWithoutPassword = [
   {
     dataKey: 'firstName',
     label: 'First Name',
@@ -33,24 +30,17 @@ const modalStructureWithoutPassword: {
     label: 'Email',
     type: 'email',
   },
-];
-
-const fieldNameToLabel: Record<PostUserField, string> = modalStructureWithoutPassword.reduce(
-  (acc, curr) => {
-    acc[curr.dataKey] = curr.label;
-    return acc;
-  },
-  {} as Record<PostUserField, string>,
-);
+] as const;
 
 const CreateUserModal: FC<{
   modalOpen: boolean;
   close: () => void;
 }> = ({ modalOpen, close }) => {
   const { message: messageApi } = App.useApp();
-  type ErrorsObject = { [field in PostUserField]?: ReactNode[] };
-  const [formatError, setFormatError] = useState<ErrorsObject>({});
+  const router = useRouter();
+
   const [form] = Form.useForm();
+  const [formErrors, parseInput] = useParseZodErrors(UserSchema);
 
   const [submittable, setSubmittable] = useState(false);
   const values = Form.useWatch([], form);
@@ -66,59 +56,30 @@ const CreateUserModal: FC<{
     );
   }, [form, values]);
 
-  const { mutateAsync: postUser, isLoading } = usePostAsset('/users', {
-    onError(e) {
-      if (!(typeof e === 'object' && e !== null && 'errors' in e)) {
-        return;
-      }
-
-      const errors: { [key in PostUserField]?: ReactNode[] } = {};
-
-      function appendError(key: PostUserField, error: string) {
-        error = error.replace(key, fieldNameToLabel[key]);
-
-        if (key in errors) {
-          errors[key]!.push(<p key={errors[key]?.length}>{error}</p>);
-        } else {
-          errors[key] = [<p key={0}>{error}</p>];
-        }
-      }
-
-      for (const error of e.errors as string[]) {
-        if (error.includes('username')) appendError('username', error);
-        else if (error.includes('email')) appendError('email', error);
-        else if (error.includes('firstName')) appendError('firstName', error);
-        else if (error.includes('lastName')) appendError('lastName', error);
-        else if (error.includes('password')) appendError('password', error);
-      }
-
-      setFormatError(errors);
-    },
-  });
+  const [isLoading, startTransition] = useTransition();
 
   useEffect(() => {
     form.resetFields();
-    setFormatError({});
   }, [form, modalOpen]);
 
-  const submitData = async (
-    values: Record<keyof ApiRequestBody<'/users', 'post'> | 'confirm_password', string>,
-  ) => {
-    try {
-      await postUser({
-        body: {
-          email: values.email,
-          firstName: values.firstName,
-          lastName: values.lastName,
-          username: values.username,
-          password: values.password,
-        },
-      });
-      messageApi.success({ content: 'Account created' });
-      close();
-    } catch (e) {
-      messageApi.error({ content: 'An error ocurred' });
-    }
+  const submitData = (values: any) => {
+    startTransition(async () => {
+      try {
+        form.validateFields();
+
+        const data = parseInput({ ...values, oauthProvider: 'email' });
+        if (!data) return;
+
+        const result = await addUser(data);
+        if (result && 'error' in result) throw new Error();
+
+        messageApi.success({ content: 'Account created' });
+        router.refresh();
+        close();
+      } catch (e) {
+        messageApi.error({ content: 'An error ocurred' });
+      }
+    });
   };
 
   return (
@@ -129,54 +90,15 @@ const CreateUserModal: FC<{
             key={formField.dataKey}
             label={formField.label}
             name={formField.dataKey}
-            validateStatus={formField.dataKey in formatError ? 'error' : ''}
-            help={formField.dataKey in formatError ? formatError[formField.dataKey] : ''}
+            validateStatus={formField.dataKey in formErrors ? 'error' : ''}
+            help={formField.dataKey in formErrors ? formErrors[formField.dataKey] : ''}
             hasFeedback
             required
           >
             <Input type={formField.type} />
           </Form.Item>
         ))}
 
-        <Form.Item
-          name="password"
-          label="Password"
-          rules={[
-            {
-              required: true,
-              message: 'Please input your password!',
-            },
-          ]}
-          validateStatus={'password' in formatError ? 'error' : ''}
-          help={'password' in formatError ? formatError.password : ''}
-          hasFeedback
-        >
-          <Input.Password />
-        </Form.Item>
-
-        <Form.Item
-          name="confirm_password"
-          label="Confirm Password"
-          dependencies={['password']}
-          hasFeedback
-          rules={[
-            {
-              required: true,
-              message: 'Please confirm your password!',
-            },
-            ({ getFieldValue }) => ({
-              validator(_, value) {
-                if (!value || getFieldValue('password') === value) {
-                  return Promise.resolve();
-                }
-                return Promise.reject(new Error('The new password that you entered do not match!'));
-              },
-            }),
-          ]}
-        >
-          <Input.Password />
-        </Form.Item>
-
         <Form.Item>
           <Button type="primary" htmlType="submit" loading={isLoading} disabled={!submittable}>
             Create User
@@ -196,7 +118,6 @@ const HeaderActions: FC = () => {
         modalOpen={createUserModalOpen}
         close={() => setCreateUserModalOpen(false)}
       />
-
       <AuthCan action="create" resource="User">
         <Button type="primary" onClick={() => setCreateUserModalOpen(true)}>
           <PlusOutlined /> Create User

src/management-system-v2/app/(dashboard)/iam/users/page.tsx

@@ -1,11 +1,24 @@
-import Auth from '@/components/auth';
+import Auth, { getCurrentUser } from '@/components/auth';
 import UsersPage from './users-page';
+import { getUsers } from '@/lib/data/legacy/iam/users';
+import Content from '@/components/content';
+
+const Page = async () => {
+  const { ability } = await getCurrentUser();
+  const users = getUsers(ability);
+
+  return (
+    <Content title="Identity and Access Management">
+      <UsersPage users={users} />
+    </Content>
+  );
+};
 
 export default Auth(
   {
     action: 'manage',
     resource: 'User',
     fallbackRedirect: '/',
   },
-  UsersPage,
+  Page,
 );

src/management-system-v2/app/(dashboard)/iam/users/user-side-panel.tsx

@@ -60,8 +60,8 @@ const UserSidePanel: FC<{ user: ListUser | null }> = ({ user }) => {
       >
         {user ? (
           <>
-            <Avatar src={user.picture} size={60} style={{ marginBottom: 20 }}>
-              {user.picture
+            <Avatar src={user.image} size={60} style={{ marginBottom: 20 }}>
+              {user.image
                 ? null
                 : user.firstName.value.slice(0, 1) + user.lastName.value.slice(0, 1)}
             </Avatar>

src/management-system-v2/app/(dashboard)/iam/users/users-page.tsx

@@ -1,80 +1,78 @@
 'use client';
 
-import { FC, useState } from 'react';
+import { FC, useState, useTransition } from 'react';
 import { DeleteOutlined } from '@ant-design/icons';
 import { Tooltip, App } from 'antd';
-import { useGetAsset, useDeleteAsset } from '@/lib/fetch-data';
-import Content from '@/components/content';
 import HeaderActions from './header-actions';
 import UserList, { ListUser } from '@/components/user-list';
-import { useQueryClient } from '@tanstack/react-query';
 import ConfirmationButton from '@/components/confirmation-button';
 import UserSidePanel from './user-side-panel';
+import { deleteUsers as serverActionDeleteUsers } from '@/lib/data/users';
+import { useRouter } from 'next/navigation';
+import { User } from '@/lib/data/user-schema';
 
-const UsersPage: FC = () => {
+const UsersPage: FC<{ users: User[] }> = ({ users }) => {
   const { message: messageApi } = App.useApp();
-  const queryClient = useQueryClient();
   const [selectedUser, setSelectedUser] = useState<ListUser | null>(null);
+  const [deletingUser, startTransition] = useTransition();
+  const router = useRouter();
 
-  const { error, data, isLoading } = useGetAsset('/users', {});
-  const { mutateAsync: deleteUser, isLoading: deletingUser } = useDeleteAsset('/users/{id}', {
-    onError: () => messageApi.open({ type: 'error', content: 'Something went wrong' }),
-    onSuccess: async () => await queryClient.invalidateQueries(['/users']),
-  });
+  async function deleteUsers(ids: string[], unsetIds: () => void) {
+    startTransition(async () => {
+      unsetIds();
 
-  async function deleteUsers(ids: string[], unsetIds?: () => void) {
-    if (unsetIds) unsetIds();
-    const promises = ids.map((id) => deleteUser({ params: { path: { id } } }));
-    await Promise.allSettled(promises);
+      const result = await serverActionDeleteUsers(ids);
+
+      if (result && 'error' in result)
+        messageApi.open({ type: 'error', content: 'Something went wrong' });
+
+      router.refresh();
+    });
   }
 
   return (
-    <Content title="Identity and Access Management">
-      <UserList
-        users={data || []}
-        error={!!error}
-        columns={(clearSelected, hoveredId, selectedRowKeys) => [
-          {
-            dataIndex: 'id',
-            key: 'tooltip',
-            title: '',
-            width: 100,
-            render: (id: string) => (
-              <Tooltip placement="top" title="Delete">
-                <ConfirmationButton
-                  title="Delete User"
-                  description="Are you sure you want to delete this user?"
-                  onConfirm={() => deleteUsers([id], clearSelected)}
-                  buttonProps={{
-                    icon: <DeleteOutlined />,
-                    type: 'text',
-                    style: { opacity: hoveredId === id && selectedRowKeys.length === 0 ? 1 : 0 },
-                  }}
-                />
-              </Tooltip>
-            ),
-          },
-        ]}
-        loading={deletingUser || isLoading}
-        selectedRowActions={(ids, clearIds) => (
-          <ConfirmationButton
-            title="Delete Users"
-            description="Are you sure you want to delete the selected users?"
-            onConfirm={() => deleteUsers(ids, clearIds)}
-            buttonProps={{
-              type: 'text',
-              icon: <DeleteOutlined />,
-            }}
-          />
-        )}
-        searchBarRightNode={<HeaderActions />}
-        onSelectedRows={(users) => {
-          console.log(users);
-          setSelectedUser(users.length > 0 ? users[users.length - 1] : null);
-        }}
-        sidePanel={<UserSidePanel user={selectedUser} />}
-      />
-    </Content>
+    <UserList
+      users={users}
+      columns={(clearSelected, hoveredId, selectedRowKeys) => [
+        {
+          dataIndex: 'id',
+          key: 'tooltip',
+          title: '',
+          width: 100,
+          render: (id: string) => (
+            <Tooltip placement="top" title="Delete">
+              <ConfirmationButton
+                title="Delete User"
+                description="Are you sure you want to delete this user?"
+                onConfirm={() => deleteUsers([id], clearSelected)}
+                buttonProps={{
+                  icon: <DeleteOutlined />,
+                  type: 'text',
+                  style: { opacity: hoveredId === id && selectedRowKeys.length === 0 ? 1 : 0 },
+                }}
+              />
+            </Tooltip>
+          ),
+        },
+      ]}
+      loading={deletingUser}
+      selectedRowActions={(ids, clearIds) => (
+        <ConfirmationButton
+          title="Delete Users"
+          description="Are you sure you want to delete the selected users?"
+          onConfirm={() => deleteUsers(ids, clearIds)}
+          buttonProps={{
+            type: 'text',
+            icon: <DeleteOutlined />,
+          }}
+        />
+      )}
+      searchBarRightNode={<HeaderActions />}
+      onSelectedRows={(users) => {
+        setSelectedUser(users.length > 0 ? users[users.length - 1] : null);
+      }}
+      sidePanel={<UserSidePanel user={selectedUser} />}
+    />
   );
 };