refactor(file-upload): Remove hook abstraction layer and regroup feature's files

Author: ntatoud

src/features/account/AccountProfileForm.tsx

@@ -10,8 +10,7 @@ import { FieldSelect } from '@/components/FieldSelect';
 import { FieldUpload, FieldUploadValue } from '@/components/FieldUpload';
 import { LoaderFull } from '@/components/LoaderFull';
 import { useToastError, useToastSuccess } from '@/components/Toast';
-import { useFetchAvatar } from '@/features/account/service';
-import { useAvatarUpload } from '@/features/account/useAvatarUpload';
+import { useAvatarFetch, useAvatarUpload } from '@/features/account/service';
 import {
   AVAILABLE_LANGUAGES,
   DEFAULT_LANGUAGE_KEY,
@@ -26,9 +25,7 @@ export const AccountProfileForm = () => {
     refetchOnWindowFocus: false,
   });
 
-  const accountAvatar = useFetchAvatar(account.data?.image || '', {
-    enabled: !!account?.data?.image,
-  });
+  const accountAvatar = useAvatarFetch(account.data?.image || '');
 
   const toastSuccess = useToastSuccess();
   const toastError = useToastError();

src/features/account/service.ts

@@ -1,10 +1,21 @@
-import { UseQueryOptions } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 
-import { useFileFetch } from '@/hooks/useFileFetch';
+import { trpc } from '@/lib/trpc/client';
 
-export const useFetchAvatar = (url: string, config?: UseQueryOptions) => {
-  return useFileFetch(url, ['name'], {
+import { fetchFile, uploadFile } from '../files/utils';
+
+export const useAvatarFetch = (url: string) => {
+  return useQuery({
     queryKey: ['account', url],
-    ...config,
+    queryFn: fetchFile(url, ['name']),
+    enabled: !!url,
+  });
+};
+
+export const useAvatarUpload = () => {
+  const getPresignedUrl = trpc.account.uploadAvatarPresignedUrl.useMutation();
+  return useMutation({
+    mutationFn: uploadFile(getPresignedUrl.mutateAsync),
   });
 };

src/features/account/useAvatarUpload.ts

@@ -1,5 +1,14 @@
 import { z } from 'zod';
 
+export type FetchedFile = z.infer<ReturnType<typeof zFetchedFile>>;
+export const zFetchedFile = () =>
+  z.object({
+    fileUrl: z.string(),
+    size: z.string().optional(),
+    type: z.string().optional(),
+    lastModifiedDate: z.date(),
+  });
+
 export type UploadSignedUrlInput = z.infer<
   ReturnType<typeof zUploadSignedUrlInput>
 >;

src/lib/s3.ts src/features/files/schemas.ts

@@ -0,0 +1,74 @@
+import { UseMutateAsyncFunction } from '@tanstack/react-query';
+
+import { UploadSignedUrlInput } from './schemas';
+import { FetchedFile } from './schemas';
+
+export const fetchFile =
+  (url: string, metadata?: string[]) => async (): Promise<FetchedFile> => {
+    const fileResponse = await fetch(url);
+    if (!fileResponse.ok) {
+      throw new Error('Could not fetch the file');
+    }
+
+    const lastModifiedDateHeader = fileResponse.headers.get('Last-Modified');
+
+    return (metadata || []).reduce(
+      (file, currentMetadata) => {
+        return {
+          ...file,
+          [currentMetadata]: fileResponse.headers.get(
+            `x-amz-meta-${currentMetadata}`
+          ),
+        };
+      },
+      {
+        fileUrl: url,
+        size: fileResponse.headers.get('Content-Length') ?? undefined,
+        type: fileResponse.headers.get('Content-Type') ?? undefined,
+        lastModifiedDate: lastModifiedDateHeader
+          ? new Date(lastModifiedDateHeader)
+          : new Date(),
+      }
+    );
+  };
+
+export const uploadFile =
+  (
+    getPresignedUrl: UseMutateAsyncFunction<
+      { signedUrl: string; futureFileUrl: string },
+      unknown,
+      UploadSignedUrlInput | void
+    >
+  ) =>
+  async (
+    file?: File,
+    {
+      metadata,
+    }: {
+      metadata?: Record<string, string>;
+    } = {}
+  ) => {
+    if (!file) {
+      return {
+        fileUrl: undefined,
+      };
+    }
+
+    console.log(file.name + ' uploaded');
+    const { signedUrl, futureFileUrl } = await getPresignedUrl({
+      metadata: {
+        name: file.name,
+        ...metadata,
+      },
+    });
+
+    await fetch(signedUrl, {
+      method: 'PUT',
+      headers: { 'Content-Type': file.type },
+      body: file,
+    });
+
+    return {
+      fileUrl: futureFileUrl,
+    } as const;
+  };

src/features/files/utils.ts

@@ -6,7 +6,10 @@ import {
 import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
 
 import { env } from '@/env.mjs';
-import { ReadSignedUrlOutput, UploadSignedUrlOutput } from '@/lib/s3';
+import {
+  ReadSignedUrlOutput,
+  UploadSignedUrlOutput,
+} from '@/features/files/schemas';
 
 const S3 = new S3Client({
   region: 'auto',

src/hooks/useFileFetch.ts

@@ -7,8 +7,11 @@ import EmailAddressChange from '@/emails/templates/email-address-change';
 import { env } from '@/env.mjs';
 import { zUserAccount } from '@/features/account/schemas';
 import { VALIDATION_TOKEN_EXPIRATION_IN_MINUTES } from '@/features/auth/utils';
+import {
+  zUploadSignedUrlInput,
+  zUploadSignedUrlOutput,
+} from '@/features/files/schemas';
 import i18n from '@/lib/i18n/server';
-import { zUploadSignedUrlInput, zUploadSignedUrlOutput } from '@/lib/s3';
 import {
   deleteUsedCode,
   generateCode,

src/hooks/useFileUpload.ts

@@ -1,7 +1,10 @@
 import { randomUUID } from 'crypto';
 
 import { env } from '@/env.mjs';
-import { zUploadSignedUrlInput, zUploadSignedUrlOutput } from '@/lib/s3';
+import {
+  zUploadSignedUrlInput,
+  zUploadSignedUrlOutput,
+} from '@/features/files/schemas';
 import { getS3UploadSignedUrl } from '@/server/config/s3';
 import { createTRPCRouter, protectedProcedure } from '@/server/config/trpc';