feat: creating a new user

src/pages/users/components/CreateUserModal/CreateUserModal.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   Modal,
   ModalOverlay,
@@ -34,6 +34,9 @@ import { UserRoleEnum } from 'enums';
  */
 import { useDisclosure } from '@chakra-ui/hooks';
 import { useForm } from 'react-hook-form';
+import { useRootStore } from 'hooks/useRootStore';
+import { useErrorHandler } from 'react-error-boundary';
+import { useToast } from '@chakra-ui/react';
 
 type CreateUserModalPropsType = {
   me: IMe;
@@ -49,17 +52,45 @@ type CreateUserInputType = {
 };
 
 const CreateUserModal: React.FC<CreateUserModalPropsType> = ({ me }) => {
+  const { userStore } = useRootStore();
   const { isOpen, onOpen, onClose } = useDisclosure();
   const {
     register,
     handleSubmit,
+    reset,
     formState: { errors },
   } = useForm<CreateUserInputType>({
     resolver: yupResolver(CreateUserSchema),
   });
+  const [loading, setLoading] = useState<boolean>(false);
+  const toast = useToast();
+  const handleError = useErrorHandler();
 
-  const onSubmit: SubmitHandler<CreateUserInputType> = data => {
+  /**
-    console.log(data);
+   * Create new user handler
+   */
+  const onSubmit: SubmitHandler<CreateUserInputType> = async data => {
+    try {
+      setLoading(true);
+      await userStore.createUser(data);
+      /**
+       * Clear form state
+       */
+      reset();
+
+      /**
+       * Close modal
+       */
+      onClose();
+    } catch (error: any) {
+      if (error.response) {
+        toast({ title: `${error.message}`, status: 'error' });
+      } else {
+        handleError(error);
+      }
+    } finally {
+      setLoading(false);
+    }
   };
 
   return (
@@ -129,7 +160,15 @@ const CreateUserModal: React.FC<CreateUserModalPropsType> = ({ me }) => {
             </ModalBody>
 
             <ModalFooter>
-              <Button type='submit' variant='outline' mr={3} colorScheme='blue' leftIcon={<AddIcon />}>
+              <Button
+                type='submit'
+                variant='outline'
+                mr={3}
+                colorScheme='blue'
+                isLoading={loading}
+                loadingText='Creating...'
+                leftIcon={<AddIcon />}
+              >
                 Create
               </Button>
               <Button onClick={onClose}>Cancel</Button>

src/pages/users/components/UserList/UserList.tsx

@@ -8,6 +8,7 @@ import { useRootStore } from 'hooks/useRootStore';
 import { useErrorHandler } from 'react-error-boundary';
 import { UsersPageContextType } from 'types';
 import { UsersPageContext } from 'contexts';
+import { observer } from 'mobx-react';
 
 type UserListPropsType = {
   users: IUser[];
@@ -106,4 +107,4 @@ const UserList: React.FC<UserListPropsType> = ({ users, pagination }) => {
   );
 };
 
-export default UserList;
+export default observer(UserList);

src/services/UserService.ts

@@ -4,6 +4,14 @@ import * as helpers from 'helpers';
 import { UserRoleEnum } from 'enums';
 
 export type FetchUsersParamsType = { page?: number; limit?: number; role?: UserRoleEnum | 'any'; search?: string };
+export type CreateUserParamsType = {
+  first_name: string;
+  last_name: string;
+  login: string;
+  email: string;
+  role: UserRoleEnum;
+  password: string;
+};
 
 export default class UserService {
   public api: AxiosInstance;
@@ -30,6 +38,18 @@ export default class UserService {
     return result.data;
   }
 
+  public async create(data: CreateUserParamsType): Promise<IApiRespose<IUser>> {
+    const result = await this.api.post('v1/users', {
+      first_name: data.first_name,
+      last_name: data.last_name,
+      login: data.login,
+      email: data.email,
+      role: data.role,
+      password: data.password,
+    });
+    return result.data;
+  }
+
   public async updateContacts(data: IUserContacts): Promise<IApiRespose<IUserContacts>> {
     const result = await this.api.put('v1/me/contacts', helpers.removeEmptyValues(data));
     return result.data;

src/stores/UserStore.ts

@@ -6,7 +6,7 @@ import * as helpers from 'helpers';
 /**
  * Services
  */
-import UserService, { FetchUsersParamsType } from 'services/UserService';
+import UserService, { CreateUserParamsType, FetchUsersParamsType } from 'services/UserService';
 
 /**
  * Stores
@@ -78,6 +78,24 @@ export default class UserStore {
     }
   }
 
+  public async createUser(data: CreateUserParamsType) {
+    try {
+      const result = await this.userService.create(data);
+
+      console.log(`[${this.constructor.name}]: ${result.message}`, result);
+
+      runInAction(() => {
+        if (this.users !== null) {
+          this.users.unshift(result.data);
+        }
+      });
+
+      return result;
+    } catch (error: any) {
+      throw error;
+    }
+  }
+
   /**
    * Update contacts of authorized user
    *