fix: fixed contacts updating

src/pages/profile/components/UpdateUserContactsForm/UpdateUserContactsForm.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
+import React from 'react';
+import * as helpers from '@educt/helpers';
 import { observer } from 'mobx-react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { MdSave } from 'react-icons/md';
-import { Text, Input, Button } from '@chakra-ui/react';
+import { Text, Input } from '@chakra-ui/react';
 import { Box, Stack } from '@chakra-ui/layout';
 import { FormControl, FormHelperText } from '@chakra-ui/form-control';
 import { yupResolver } from '@hookform/resolvers/yup';
@@ -15,6 +16,7 @@ import { IUserContacts } from '@educt/interfaces';
 /**
  * Hooks
  */
+import { useState } from 'react';
 import { useToast } from '@chakra-ui/toast';
 import { useRootStore } from '@educt/hooks/useRootStore';
 import { useErrorHandler } from 'react-error-boundary';
@@ -62,7 +64,8 @@ const UpdateUserContactsForm: React.FC<UpdateUserContactsFormPropsType> = ({ con
   const onSubmit: SubmitHandler<UpdateUserContactsInputType> = async data => {
     try {
       setIsLoading(true);
-      await userStore.updateCurrentUserContacts(data);
+      const updatedFields = helpers.getDirtyFields(dirtyFields, data);
+      await userStore.updateCurrentUserContacts(updatedFields);
       toast({ title: 'Contacts saved!', status: 'info' });
       reset({
         phone_number: data.phone_number ?? '',
@@ -113,7 +116,7 @@ const UpdateUserContactsForm: React.FC<UpdateUserContactsFormPropsType> = ({ con
                 type='text'
                 size='md'
                 variant='flushed'
-                placeholder='@tw_username'
+                placeholder='@username'
                 isInvalid={errors.twitter_id ? true : false}
                 {...register('twitter_id')}
               />
@@ -128,7 +131,7 @@ const UpdateUserContactsForm: React.FC<UpdateUserContactsFormPropsType> = ({ con
                 type='text'
                 size='md'
                 variant='flushed'
-                placeholder='@tg_username'
+                placeholder='@username'
                 isInvalid={errors.telegram_id ? true : false}
                 {...register('telegram_id')}
               />
@@ -143,7 +146,7 @@ const UpdateUserContactsForm: React.FC<UpdateUserContactsFormPropsType> = ({ con
                 type='text'
                 size='md'
                 variant='flushed'
-                placeholder='VKontakte id'
+                placeholder='username'
                 isInvalid={errors.vk_id ? true : false}
                 {...register('vk_id')}
               />

src/pages/profile/components/index.tsx

@@ -51,7 +51,7 @@ export const ProfileDescription: React.FC<IProfileDescriptionProps> = props => {
   const { fullname, email, roles, ...boxProps } = props;
   return (
     <Box w='full' ml={{ md: '50' }} mt={{ base: '2', md: '3' }} {...boxProps}>
-      <Flex alignItems='center' justifyContent='space-between'>
+      <Flex alignItems='center' justifyContent={{ base: 'center', md: 'space-between' }}>
         <Box>
           <Heading lineHeight='1.5rem' fontWeight='bold' fontSize='24px'>
             {fullname}

src/pages/profile/profile.tsx

@@ -53,7 +53,7 @@ const ProfilePage: React.FC<IPageProps> = () => {
         <ProfileDescription fullname={me.fullname} email={me.email} roles={me.roles} />
       </ProfileBaseInfo>
       <PageContent>
-        <Tabs>
+        <Tabs mt='7'>
           <TabList>
             <Tab>Account information</Tab>
             <Tab>My contacts</Tab>

src/services/UserService.ts

@@ -2,7 +2,12 @@ import { AxiosInstance } from 'axios';
 import { ApiServiceInstance } from '.';
 import * as helpers from '@educt/helpers';
 import { IApiRespose, IMe, IUser, IUserContacts } from '@educt/interfaces';
-import { CreateUserParamsType, FetchUsersParamsType, UpdateUserParamsType } from '@educt/types';
+import {
+  CreateUserParamsType,
+  FetchUsersParamsType,
+  UpdateUserParamsType,
+  UpdateUserContactsParamsType,
+} from '@educt/types';
 
 class UserService {
   public api: AxiosInstance;
@@ -87,8 +92,8 @@ class UserService {
    * @param data New values for contacts
    * @returns Updated contacts
    */
-  public async updateContacts(data: IUserContacts): Promise<IApiRespose<IUserContacts>> {
-    const result = await this.api.put('v1/me/contacts', helpers.removeEmptyValues(data));
+  public async updateContacts(data: UpdateUserContactsParamsType): Promise<IApiRespose<IUserContacts>> {
+    const result = await this.api.patch('v1/me/contacts', data);
     return result.data;
   }
 

src/stores/UserStore.ts

@@ -4,8 +4,13 @@ import * as helpers from '@educt/helpers';
 /**
  * Types
  */
-import { CreateUserParamsType, FetchUsersParamsType, UpdateUserParamsType } from '@educt/types';
-import { IUser, IUserContacts, IMe, IPaginationMeta } from '@educt/interfaces';
+import {
+  CreateUserParamsType,
+  FetchUsersParamsType,
+  UpdateUserContactsParamsType,
+  UpdateUserParamsType,
+} from '@educt/types';
+import { IUser, IMe, IPaginationMeta } from '@educt/interfaces';
 import { UserRoleEnum } from '@educt/enums';
 
 /**
@@ -135,7 +140,7 @@ export default class UserStore {
    * @param data New contacts
    * @returns Updated user contacts
    */
-  public async updateCurrentUserContacts(data: IUserContacts) {
+  public async updateCurrentUserContacts(data: UpdateUserContactsParamsType) {
     const result = await UserServiceInstance.updateContacts(data);
 
     runInAction(() => {

src/types/index.d.ts

@@ -117,6 +117,12 @@ export type CreateUserParamsType = {
   password: string;
 };
 export type UpdateUserParamsType = { first_name?: string; last_name?: string; email?: string };
+export type UpdateUserContactsParamsType = {
+  phone_number?: string | null | undefined;
+  twitter_id?: string | null | undefined;
+  telegram_id?: string | null | undefined;
+  vk_id?: string | null | undefined;
+};
 
 export type CreateCourseParamsType = {
   title: string;