feat(client): add create user

Makefile

@@ -64,5 +64,6 @@ check-api:
 	poetry run ruff format . --check
 
 regenerate-openapi-local:
-	rm client/src/types/openapi-types.ts \
+	cd client \
-	npx openapi-typescript http://localhost:8000/openapi -o client/src/types/openapi-types.ts
+	rm src/types/openapi-types.ts \
+	npx openapi-typescript http://localhost:8000/openapi -o src/types/openapi-types.ts

client/src/api/api.ts

@@ -4,7 +4,7 @@ import axiosRetry from 'axios-retry';
 import { Auth, Tokens } from '@/types/auth';
 import { useAuthStore } from '@/store/authStore';
 import { AuthService } from '@/services/authService';
-import { User } from '@/types/user';
+import { User, UserUpdate } from '@/types/user';
 
 const baseURL = `${import.meta.env.VITE_APP_HTTP_PROTOCOL}://${
   import.meta.env.VITE_APP_API_URL
@@ -114,6 +114,11 @@ const api = {
     const response = await base.get<User>(`/account/${userId}`);
     return response.data;
   },
+
+  async createUser(user: UserUpdate): Promise<User> {
+    const response = await base.post<User>('/account', user);
+    return response.data;
+  },
 };
 
 export default api;

client/src/components/UserCreate.tsx

@@ -12,6 +12,8 @@ import {
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useUserSelector } from '@/store/userStore';
+import { UserUpdate } from '@/types/user';
+import { UserService } from '@/services/userService';
 
 const { Option } = Select;
 
@@ -25,7 +27,11 @@ const getBase64 = (file: FileType): Promise<string> =>
     reader.onerror = (error) => reject(error);
   });
 
-export default function UserCreate() {
+interface UserCreateProps {
+  closeDrawer: () => void;
+}
+
+export default function UserCreate({ closeDrawer }: UserCreateProps) {
   const user = useUserSelector();
   const { t } = useTranslation();
   const [previewOpen, setPreviewOpen] = useState(false);
@@ -45,6 +51,12 @@ export default function UserCreate() {
   const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) =>
     setFileList(newFileList);
 
+  const onFinish = async (values: UserUpdate) => {
+    console.log(values);
+    await UserService.createUser(values);
+    closeDrawer();
+  };
+
   const customUploadButton = (
     <div>
       <div
@@ -128,7 +140,7 @@ export default function UserCreate() {
       <Form
         name="user-edit-form"
         layout="vertical"
-        // onFinish={onFinish}
+        onFinish={onFinish}
         initialValues={{
           name: '',
           login: '',

client/src/pages/AccountsPage.tsx

@@ -35,6 +35,7 @@ export default function AccountsPage() {
     amountPages: 0,
     users: [],
     currentPage: 1,
+    limit: 10,
   });
 
   useEffect(() => {
@@ -160,11 +161,12 @@ export default function AccountsPage() {
         }
       />
       <Table
+        size="small"
         onChange={onTableChange}
         columns={columns}
         dataSource={accounts.users}
         pagination={{
-          pageSize: 10,
+          pageSize: accounts.limit,
           current: accounts.currentPage,
           total: accounts.amountCount,
         }}
@@ -176,7 +178,7 @@ export default function AccountsPage() {
         closeDrawer={closeCreateDrawer}
         type="create"
       >
-        <UserCreate />
+        <UserCreate closeDrawer={closeCreateDrawer} />
       </ContentDrawer>
       <ContentDrawer
         login={activeAccount?.login}

client/src/services/userService.ts

@@ -1,5 +1,5 @@
 import api from '@/api/api';
-import { AllUserResponse, User } from '@/types/user';
+import { AllUserResponse, User, UserUpdate } from '@/types/user';
 
 export class UserService {
   static async getProfile(): Promise<User> {
@@ -23,4 +23,10 @@ export class UserService {
     const user = api.getUserById(userId);
     return user;
   }
+
+  static async createUser(user: UserUpdate): Promise<User> {
+    console.log('createUser');
+    const createdUser = api.createUser(user);
+    return createdUser;
+  }
 }

client/src/types/openapi-types.ts

@@ -193,6 +193,8 @@ export interface components {
             amountPages: number;
             /** Currentpage */
             currentPage: number;
+            /** Limit */
+            limit: number;
         };
         /** Auth */
         Auth: {

client/src/types/user.ts

@@ -1,8 +1,8 @@
-import { components } from "./openapi-types";
+import { components } from './openapi-types';
 
 export type User = components['schemas']['User'];
 export type AllUserResponse = components['schemas']['AllUserResponse'];
 export type AllUser = components['schemas']['AllUser'];
 export type AccountStatus = components['schemas']['AccountStatus'];
 export type AccountRole = components['schemas']['AccountRole'];
-
+export type UserUpdate = components['schemas']['UserUpdate'];