Fix bug where user avatar is not uploaded on user creation (#128)

* fix: set logs for debugging

* fix: change fetch call to undici request

* security: audit fix cross-spawn

* refactor: add result type to upload image, remove debug logs

---------

Co-authored-by: andrea.smiesna <[email protected]>

app/common/types.ts

@@ -439,6 +439,25 @@ export type ImageFormats = {
   thumbnail?: ImageFormat;
 };
 
+export type UploadImageResponse = {
+  id: number;
+  name: string;
+  alternativeText: string | null;
+  caption: string | null;
+  width: number;
+  height: number;
+  formats: ImageFormats;
+  hash: string;
+  ext: string;
+  mime: string;
+  size: number;
+  url: string;
+  previewUrl: string | null;
+  provider: string;
+  createdAt: string;
+  updatedAt: string;
+};
+
 export enum SortValues {
   DESC = 'DESC',
   ASC = 'ASC',

app/package.json

@@ -64,6 +64,7 @@
     "sharp": "^0.33.3",
     "slick-carousel": "^1.8.1",
     "swr": "^2.2.4",
+    "undici": "^6.21.0",
     "usehooks-ts": "^3.1.0",
     "web-push": "^3.6.6",
     "winston": "^3.11.0",

app/utils/requests/innoUsers/requests.ts

@@ -1,6 +1,6 @@
 'use server';
 
-import { UserSession } from '@/common/types';
+import { UploadImageResponse, UserSession } from '@/common/types';
 import { clientConfig } from '@/config/client';
 import { serverConfig } from '@/config/server';
 import { RequestError } from '@/entities/error';
@@ -10,16 +10,18 @@ import { mapFirstToUser, mapFirstToUserOrThrow, mapToUser } from '@/utils/reques
 import { CreateInnoUserMutation } from '@/utils/requests/innoUsers/mutations';
 import { GetInnoUserByEmailQuery, GetInnoUserByProviderIdQuery } from '@/utils/requests/innoUsers/queries';
 import strapiGraphQLFetcher from '@/utils/requests/strapiGraphQLFetcher';
+import { request, FormData } from 'undici';
 
 const logger = getLogger();
 
 export async function createInnoUser(body: Omit<UserSession, 'image'>, image?: string | null) {
   try {
     const uploadedImages = image ? await uploadImage(image, `avatar-${body.name}`) : null;
     const uploadedImage = uploadedImages ? uploadedImages[0] : null;
+
     const response = await strapiGraphQLFetcher(CreateInnoUserMutation, {
       ...body,
-      avatarId: uploadedImage ? uploadedImage.id : null,
+      avatarId: uploadedImage ? (uploadedImage.id as unknown as string) : null,
     });
 
     const userData = response.createInnoUser?.data;
@@ -69,23 +71,34 @@ export async function createInnoUserIfNotExist(body: Omit<UserSession, 'image'>,
 
 async function uploadImage(imageUrl: string, fileName: string) {
   return fetch(imageUrl)
-    .then((response) => response.blob())
+    .catch((e) => {
+      logger.error('Error while fetching image:', e);
+      throw new Error('Error while fetching image');
+    })
+    .then((response) => {
+      return response.blob();
+    })
     .then(async function (myBlob) {
       const formData = new FormData();
       formData.append('files', myBlob, fileName);
       formData.append('ref', 'api::event.event');
       formData.append('field', 'image');
-
-      return fetch(`${clientConfig.NEXT_PUBLIC_STRAPI_ENDPOINT}/api/upload`, {
+      return request(`${clientConfig.NEXT_PUBLIC_STRAPI_ENDPOINT}/api/upload`, {
         method: 'POST',
         headers: {
           Authorization: `Bearer ${serverConfig.STRAPI_TOKEN}`,
         },
         body: formData,
       })
-        .then((response) => response.json())
+        .catch((e) => {
+          logger.error('Error while uploading image:', e);
+          throw new Error('Error while uploading image');
+        })
+        .then((response) => {
+          return response.body.json();
+        })
         .then((result) => {
-          return result;
+          return result as UploadImageResponse[];
         });
     });
 }