fix: simple usage

Author: ivan-dalmet

src/features/account/AccountProfileForm.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 
 import { Button, ButtonGroup, Stack } from '@chakra-ui/react';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { SubmitHandler, useForm } from 'react-hook-form';
+import { useMutation } from '@tanstack/react-query';
+import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 import { ErrorPage } from '@/components/ErrorPage';
@@ -22,7 +23,7 @@ import {
   AVAILABLE_LANGUAGES,
   DEFAULT_LANGUAGE_KEY,
 } from '@/lib/i18n/constants';
-import { useUploadFileMutation } from '@/lib/s3/client';
+import { uploadFile } from '@/lib/s3/client';
 import { FILES_COLLECTIONS_CONFIG } from '@/lib/s3/config';
 import { trpc } from '@/lib/trpc/client';
 
@@ -33,9 +34,24 @@ export const AccountProfileForm = () => {
     staleTime: Infinity,
   });
 
-  const uploadAvatar = useUploadFileMutation('avatar');
-
-  const updateAccount = trpc.account.update.useMutation({
+  const updateAccount = useMutation({
+    mutationFn: async ({ image, ...values }: FormFieldsAccountProfile) => {
+      return await trpcUtils.client.account.update.mutate({
+        ...values,
+        image: image?.file
+          ? await uploadFile({
+              trpcClient: trpcUtils.client,
+              collection: 'avatar',
+              file: image.file,
+              onError: () => {
+                form.setError('image', {
+                  message: t('account:profile.feedbacks.uploadError.title'),
+                });
+              },
+            })
+          : account.data?.image,
+      });
+    },
     onSuccess: async () => {
       await trpcUtils.account.invalidate();
       toastCustom({
@@ -61,31 +77,18 @@ export const AccountProfileForm = () => {
     },
   });
 
-  const onSubmit: SubmitHandler<FormFieldsAccountProfile> = async ({
-    image,
-    ...values
-  }) => {
-    try {
-      updateAccount.mutate({
-        ...values,
-        image: image?.file
-          ? await uploadAvatar.mutateAsync(image.file)
-          : account.data?.image,
-      });
-    } catch {
-      form.setError('image', {
-        message: t('account:profile.feedbacks.uploadError.title'),
-      });
-    }
-  };
-
   return (
     <>
       {account.isLoading && <LoaderFull />}
       {account.isError && <ErrorPage />}
       {account.isSuccess && (
         <Stack spacing={4}>
-          <Form {...form} onSubmit={onSubmit}>
+          <Form
+            {...form}
+            onSubmit={(values) => {
+              updateAccount.mutate(values);
+            }}
+          >
             <Stack spacing={4}>
               <FormField>
                 <FormFieldLabel>
@@ -129,7 +132,7 @@ export const AccountProfileForm = () => {
                 <Button
                   type="submit"
                   variant="@primary"
-                  isLoading={updateAccount.isLoading || uploadAvatar.isLoading}
+                  isLoading={updateAccount.isLoading}
                 >
                   {t('account:profile.actions.update')}
                 </Button>

src/lib/s3/client.ts

@@ -1,48 +1,42 @@
-import { useMutation } from '@tanstack/react-query';
-import { TRPCError } from '@trpc/server';
 import { stringify } from 'superjson';
 
 import { env } from '@/env.mjs';
 import { trpc } from '@/lib/trpc/client';
 import { RouterInputs } from '@/lib/trpc/types';
 
-export const useUploadFileMutation = (
-  collection: RouterInputs['files']['uploadPresignedUrl']['collection'],
-  params: {
-    getMetadata?: (file: File) => Record<string, string>;
-  } = {}
-) => {
-  const uploadPresignedUrl = trpc.files.uploadPresignedUrl.useMutation();
-  return useMutation({
-    mutationFn: async (file: File) => {
-      const presignedUrlOutput = await uploadPresignedUrl.mutateAsync({
+export const uploadFile = async (params: {
+  file: File;
+  trpcClient: ReturnType<typeof trpc.useUtils>['client'];
+  collection: RouterInputs['files']['uploadPresignedUrl']['collection'];
+  metadata?: Record<string, string>;
+  onError?: (file: File, error: unknown) => void;
+}) => {
+  try {
+    const presignedUrlOutput =
+      await params.trpcClient.files.uploadPresignedUrl.mutate({
         // Metadata is a Record<string, string> but should be serialized for trpc-openapi
-        metadata: stringify({
-          ...params.getMetadata?.(file),
-        }),
-        collection,
-        type: file.type,
-        size: file.size,
-        name: file.name,
+        metadata: params.metadata ? stringify(params.metadata) : undefined,
+        collection: params.collection,
+        type: params.file.type,
+        size: params.file.size,
+        name: params.file.name,
       });
 
-      try {
-        await fetch(presignedUrlOutput.signedUrl, {
-          method: 'PUT',
-          headers: { 'Content-Type': file.type },
-          body: file,
-        });
-      } catch (e) {
-        throw new TRPCError({
-          code: 'INTERNAL_SERVER_ERROR',
-          message: 'Unable to upload the file',
-          cause: e,
-        });
-      }
+    const response = await fetch(presignedUrlOutput.signedUrl, {
+      method: 'PUT',
+      headers: { 'Content-Type': params.file.type },
+      body: params.file,
+    });
 
-      return presignedUrlOutput.key;
-    },
-  });
+    if (!response.ok) {
+      throw new Error('Failed to upload file');
+    }
+
+    return presignedUrlOutput.key;
+  } catch (error) {
+    params.onError?.(params.file, error);
+    throw error;
+  }
 };
 
 export const getFilePublicUrl = (key: string | null | undefined) => {

src/lib/s3/utils.ts

@@ -17,7 +17,7 @@ export const validateFile = (params: {
 }): ValidateReturn => {
   if (
     params.config.maxSize &&
-    (params.input.size ?? 0) >= params.config.maxSize
+    (params.input.size ?? 0) > params.config.maxSize
   ) {
     return {
       error: {
@@ -30,7 +30,7 @@ export const validateFile = (params: {
 
   if (
     params.config.allowedTypes &&
-    !params.config.allowedTypes.includes(params.input.type ?? '')
+    !params.config.allowedTypes.includes(params.input.type?.toLowerCase() ?? '')
   ) {
     return {
       error: {