changed the way we upload user avatars

src/api/auth/index.ts

@@ -15,6 +15,7 @@ import {
   ApiLoginWithSocialResult,
   ApiRestoreCodeRequest,
   ApiRestoreCodeResult,
+  ApiUpdatePhotoRequest,
   ApiUpdateUserRequest,
   ApiUpdateUserResult,
   ApiUserLoginRequest,
@@ -51,6 +52,12 @@ export const apiAuthGetUpdates = ({
 export const apiUpdateUser = ({ user }: ApiUpdateUserRequest) =>
   api.patch<ApiUpdateUserResult>(API.USER.ME, user).then(cleanResult);
 
+export const apiUpdatePhoto = ({ file }: ApiUpdatePhotoRequest) =>
+  api.post<ApiUpdateUserResult>(API.USER.UPDATE_PHOTO, file).then(cleanResult);
+
+export const apiUpdateCover = ({ file }: ApiUpdatePhotoRequest) =>
+  api.post<ApiUpdateUserResult>(API.USER.UPDATE_COVER, file).then(cleanResult);
+
 export const apiRequestRestoreCode = (field: string) =>
   api
     .post<{ field: string }>(API.USER.REQUEST_CODE(), { field })

src/api/auth/types.ts

@@ -1,4 +1,4 @@
-import { INotification } from '~/types';
+import { IFile, INotification } from '~/types';
 import { ISocialAccount, IUser } from '~/types/auth';
 
 export type ApiUserLoginRequest = Record<'username' | 'password', string>;
@@ -8,6 +8,9 @@ export type ApiAuthGetUserResult = { user: IUser };
 export type ApiUpdateUserRequest = {
   user: Partial<IUser & { password: string; newPassword: string }>;
 };
+export type ApiUpdatePhotoRequest = {
+  file: IFile;
+};
 export type ApiUpdateUserResult = {
   user: IUser;
   errors: Record<Partial<keyof IUser>, string>;

src/constants/api.ts

@@ -9,6 +9,8 @@ export const API = {
     OAUTH_WINDOW: (provider: OAuthProvider) =>
       `${CONFIG.apiHost}oauth/${provider}/redirect`,
     ME: '/auth',
+    UPDATE_PHOTO: '/auth/photo',
+    UPDATE_COVER: '/auth/photo',
     PROFILE: (username: string) => `/users/${username}/profile`,
     MESSAGES: (username: string) => `/users/${username}/messages`,
     MESSAGE_SEND: (username: string) => `/users/${username}/messages`,

src/hooks/auth/usePatchUser.ts

@@ -1,10 +1,11 @@
 import { useCallback } from 'react';
 
-import { apiUpdateUser } from '~/api/auth';
+import { apiUpdatePhoto, apiUpdateUser } from '~/api/auth';
 import { ApiUpdateUserRequest } from '~/api/auth/types';
 import { UploadSubject, UploadTarget } from '~/constants/uploads';
 import { useUser } from '~/hooks/auth/useUser';
 import { useUploader } from '~/hooks/data/useUploader';
+import { IFile } from '~/types';
 import { showErrorToast } from '~/utils/errors/showToast';
 
 export const usePatchUser = () => {
@@ -24,10 +25,16 @@ export const usePatchUser = () => {
   );
 
   const updatePhoto = useCallback(
-    async (file: File) => {
+    async (photo: File) => {
       try {
-        const photo = await uploadFile(file);
+        const file = await uploadFile(photo);
-        await save({ photo });
+
+        if (!file) {
+          return;
+        }
+
+        const result = await apiUpdatePhoto({ file: file! });
+        await update(result.user);
       } catch (error) {
         showErrorToast(error);
       }