refactor: removed usage of s3 sdk and updated components to use BE api for uploading and accessing objects

Author: seangaaab

frontend/package-lock.json

@@ -11,7 +11,6 @@
     "pretty": "prettier --write \"./**/*.{js,jsx,ts,tsx,json,scss,sass,css}\""
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "^3.451.0",
     "@hookform/resolvers": "^3.3.2",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",

frontend/package.json

@@ -1,6 +1,6 @@
 import { ulid } from 'ulid';
 import { createApi } from '@/api/utils/createApi';
-import { Event, EventFAQs, EventStatus, FAQ } from '@/model/events';
+import { Event, EventFAQs, EventStatus, FAQ, UploadType } from '@/model/events';
 
 export interface TicketType {
   name: string;
@@ -65,6 +65,11 @@ export interface PresignedUrl {
   objectKey: string;
 }
 
+export interface DownloadUrl {
+  downloadLink: string;
+  objectKey: string;
+}
+
 interface EventRegCountStatus {
   registrationCount: number;
   maximumSlots: number | null;
@@ -161,14 +166,21 @@ export const deleteEvent = (entryId: string) =>
     output: mapEventDtoToEvent
   });
 
-export const getPresignedUrl = (entryId: string, fileName: string, uploadType: string) =>
+export const getPresignedUrl = (entryId: string, fileName: string, uploadType: UploadType, headers?: object) =>
   createApi<PresignedUrl>({
     method: 'put',
-    authorize: true,
     url: `/events/${entryId}/upload/${uploadType}`,
+    headers,
     body: { fileName }
   });
 
+export const getDownloadUrl = (entryId: string, objectKey: string) =>
+  createApi<DownloadUrl>({
+    method: 'get',
+    url: `/events/${entryId}/download`,
+    queryParams: { objectKey }
+  });
+
 export const getEventRegCountStatus = (entryId: string) =>
   createApi<EventDto, EventRegCountStatus>({
     method: 'get',

frontend/src/api/events.ts

@@ -3,10 +3,6 @@ import { getCookie } from 'typescript-cookie';
 import { refreshOnIntercept } from '@/utils/refreshToken';
 import { QueryKey } from '@tanstack/react-query';
 
-type SearchParamType = string | string[] | number | number[] | boolean | Record<string, any> | Date | null | undefined;
-
-type SearchParams = Record<string, SearchParamType>;
-
 interface ErrorStringResponse {
   message: string;
 }
@@ -27,15 +23,16 @@ export interface CustomAxiosError extends Omit<AxiosResponse, 'data'> {
   errorData: ErrorResponse;
 }
 
-export const createQueryKey = (url: string, body?: SearchParams) => [url, body];
+export const createQueryKey = (url: string, body?: any) => [url, body];
 export type ApiService = 'auth' | 'events' | 'payments';
 interface createApiProps<D, T = D> {
   method?: 'get' | 'post' | 'delete' | 'patch' | 'put';
   authorize?: boolean;
   apiService?: ApiService;
   url: string;
   queryParams?: any;
-  body?: SearchParams;
+  headers?: object;
+  body?: any;
   timeout?: number;
   output?: (dto: D) => T;
 }
@@ -53,7 +50,7 @@ const getUrl = (apiService: ApiService) => {
 export type GenericReturn<T> = AxiosResponse<T> & CustomAxiosError;
 
 export function createApi<D, T = D>(
-  { method = 'get', url, authorize = false, apiService = 'events', queryParams = {}, body, timeout = 1000 * 60, output }: createApiProps<D, T>,
+  { method = 'get', url, authorize = false, apiService = 'events', queryParams = {}, headers, body, timeout = 1000 * 60, output }: createApiProps<D, T>,
   staleTime?: number,
   cacheTime?: number
 ) {
@@ -75,7 +72,8 @@ export function createApi<D, T = D>(
           'Content-Type': 'application/json',
           ...(authorize && {
             Authorization: `Bearer ${accessToken}`
-          })
+          }),
+          ...headers
         }
       });
 
@@ -103,7 +101,7 @@ export function createApi<D, T = D>(
   authorize && refreshOnIntercept(api);
 
   return {
-    queryKey: createQueryKey(url, body) as unknown as QueryKey,
+    queryKey: createQueryKey(url, body ?? queryParams) as unknown as QueryKey,
     queryFn,
     staleTime,
     cacheTime

frontend/src/api/utils/createApi.ts

@@ -22,10 +22,10 @@ interface CardHeaderProps {
 }
 
 const EventCardHeader: React.FC<CardHeaderProps> = ({ event, isDeleteEnabled, isDeletingEvent, setDeleteModalOpen }) => {
-  const { fileUrl: imageUrl, isFetching } = useFileUrl(event.bannerLink!);
+  const { fileUrl, isFetching } = useFileUrl(event.eventId, event.bannerLink);
 
   return (
-    <div className="h-1/2 group-hover:opacity-70 transition" style={{ backgroundImage: `url(${imageUrl})`, backgroundSize: 'cover' }}>
+    <div className="h-1/2 group-hover:opacity-70 transition" style={{ backgroundImage: `url(${fileUrl})`, backgroundSize: 'cover' }}>
       {isFetching && <Skeleton className="w-full h-full rounded-b-none" />}
       {isDeleteEnabled && (
         <div className="w-full flex p-2 justify-end">

frontend/src/components/EventCard/EventCard.tsx

@@ -1,4 +1,5 @@
 import { forwardRef, useMemo } from 'react';
+import { UploadType } from '@/model/events';
 import { useFileUpload } from '@/hooks/useFileUpload';
 import { CardContainer, CardFooter, CardHeader } from './Card';
 import ImageViewer from './ImageViewer';
@@ -9,7 +10,7 @@ import Progress from './Progress';
 interface FileUploadProps {
   name?: string;
   eventId: string;
-  uploadType: string;
+  uploadType: UploadType;
   value: string;
   onChange: (value: string) => void;
 }
@@ -36,7 +37,7 @@ const FileUpload = forwardRef<HTMLInputElement, FileUploadProps>(({ name, eventI
   return (
     <CardContainer className="p-0 border-none shadow-none">
       <CardHeader className="items-center">
-        <ImageViewer objectKey={value} className="h-40 w-min object-cover" alt="" />
+        <ImageViewer eventId={eventId} objectKey={value} className="h-40 w-min object-cover" alt="" />
       </CardHeader>
       <CardFooter className="flex flex-wrap px-0 pb-2 gap-2 items-center w-full">
         <Input id={`upload-custom-${uploadType}`} ref={ref} onChange={onFileChange} type="file" accept="image/*" className="hidden" />

frontend/src/components/FileUpload.tsx

@@ -4,14 +4,14 @@ import { useFileUrl } from '@/hooks/useFileUrl';
 import Skeleton from './Skeleton';
 
 interface FileViewerProps {
+  eventId: string;
   objectKey: string | null;
   className?: string;
   alt?: string;
 }
 
-const ImageViewer: FC<FileViewerProps> = ({ objectKey, className, alt }) => {
-  const { fileUrl, isFetching } = useFileUrl(objectKey);
-
+const ImageViewer: FC<FileViewerProps> = ({ eventId, objectKey, className, alt }) => {
+  const { fileUrl, isFetching } = useFileUrl(eventId, objectKey);
   if (isFetching) {
     return <Skeleton className={cn('h-full', className)} />;
   }
@@ -20,7 +20,7 @@ const ImageViewer: FC<FileViewerProps> = ({ objectKey, className, alt }) => {
     return <div className={cn('min-w-full h-full', className)} />;
   }
 
-  return <img src={fileUrl ?? undefined} className={cn('w-full h-full', className)} alt={alt} />;
+  return <img src={fileUrl} className={cn('w-full h-full', className)} alt={alt} />;
 };
 
 export default ImageViewer;

frontend/src/components/ImageViewer.tsx

@@ -1,9 +1,10 @@
 import { ChangeEvent, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { getPresignedUrl } from '@/api/events';
+import { createApi } from '@/api/utils/createApi';
+import { UploadType } from '@/model/events';
 import { useApi } from './useApi';
 import { useNotifyToast } from './useNotifyToast';
-import { S3Client, PutObjectCommand, PutObjectCommandInput } from '@aws-sdk/client-s3';
 
 const MAX_FILE_UPLOAD_SIZE = 1e7; // 10MB
 
@@ -26,15 +27,15 @@ const isExtensionAllowed = (fileName: string) => {
   }
 };
 
-export const useFileUpload = (eventId: string, uploadType: string, onChange: (key: string) => void, name?: string) => {
+export const useFileUpload = (eventId: string, uploadType: UploadType, onChange: (key: string) => void, name?: string) => {
   const api = useApi();
   const { successToast, errorToast } = useNotifyToast();
   const formContext = useFormContext();
   const [isUploading, setIsUploading] = useState(false);
   const [uploadProgress, setUploadProgress] = useState(0);
 
-  const getPresignedUrlTrigger = async (entryId: string, fileName: string, fileType: string) => {
-    const response = await api.execute(getPresignedUrl(entryId, fileName, fileType));
+  const getPresignedUrlTrigger = async (entryId: string, file: File, uploadType: UploadType) => {
+    const response = await api.execute(getPresignedUrl(entryId, file.name, uploadType));
     return response.data;
   };
 
@@ -77,33 +78,29 @@ export const useFileUpload = (eventId: string, uploadType: string, onChange: (ke
       return;
     }
 
-    setIsUploading(true);
-    await uploadFile(selectedFileObj);
-    setIsUploading(false);
-    setUploadProgress(0);
+    try {
+      setIsUploading(true);
+      await uploadFile(selectedFileObj);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsUploading(false);
+      setUploadProgress(0);
+    }
   };
 
   const uploadFile = async (file: File) => {
-    const s3Client = new S3Client({
-      region: 'ap-southeast-1',
-      credentials: {
-        accessKeyId: import.meta.env.VITE_AWS_ACCESS_KEY_ID!,
-        secretAccessKey: import.meta.env.VITE_AWS_SECRET_ACCESS_KEY!
-      }
-    });
+    const { uploadLink, objectKey } = await getPresignedUrlTrigger(eventId, file, uploadType);
 
-    const { objectKey } = await getPresignedUrlTrigger(eventId, file.name, uploadType);
-
-    // Function to upload a file to S3
-    const uploadParams: PutObjectCommandInput = {
-      Bucket: import.meta.env.VITE_S3_BUCKET!,
-      Key: objectKey,
-      Body: file
-    };
+    const uploadApi = createApi({
+      method: 'put',
+      url: uploadLink,
+      headers: { 'Content-Type': file.type },
+      body: file
+    });
 
     try {
-      const command = new PutObjectCommand(uploadParams);
-      await s3Client.send(command);
+      await api.execute(uploadApi);
       setUploadProgress(100);
 
       successToast({
@@ -113,6 +110,7 @@ export const useFileUpload = (eventId: string, uploadType: string, onChange: (ke
 
       onChange(objectKey);
     } catch (err) {
+      setIsUploading(false);
       console.error('Error', err);
       errorToast({
         title: 'File Upload Failed',

frontend/src/hooks/useFileUpload.ts

@@ -1,39 +1,11 @@
-import { useCallback } from 'react';
-import { createQueryKey } from '@/api/utils/createApi';
-import { S3Client, GetObjectCommand, GetObjectAclCommandInput } from '@aws-sdk/client-s3';
-import { useQuery } from '@tanstack/react-query';
+import { getDownloadUrl } from '@/api/events';
+import { useApiQuery } from './useApi';
 
-const s3Client = new S3Client({
-  region: 'ap-southeast-1',
-  credentials: {
-    accessKeyId: import.meta.env.VITE_AWS_ACCESS_KEY_ID!,
-    secretAccessKey: import.meta.env.VITE_AWS_SECRET_ACCESS_KEY!
-  }
-});
-
-export const useFileUrl = (key: string | null) => {
-  const getFileUrl = useCallback(async () => {
-    const params: GetObjectAclCommandInput = {
-      Bucket: import.meta.env.VITE_S3_BUCKET!,
-      Key: key!
-    };
-
-    const { Body } = await s3Client.send(new GetObjectCommand(params));
-    const blob = await new Response(Body as ReadableStream).blob();
-    return URL.createObjectURL(blob);
-  }, [key]);
-
-  const { data, isFetching } = useQuery({
-    queryKey: createQueryKey('getFileUrl', { key }),
-    queryFn: async () => getFileUrl(),
-    enabled: !!key,
-    refetchOnWindowFocus: false,
-    refetchOnMount: false,
-    refetchOnReconnect: false
-  });
+export const useFileUrl = (eventId: string, key: string | null) => {
+  const { data, isFetching } = useApiQuery(getDownloadUrl(eventId, key!), { active: !!key });
 
   return {
-    fileUrl: data,
+    fileUrl: data?.data.downloadLink,
     isFetching
   };
 };

frontend/src/hooks/useFileUrl.ts

@@ -78,40 +78,15 @@ export const EVENT_STATUSES: EventStatusItem[] = [
   }
 ];
 
-export const EVENT_UPLOAD_TYPES = {
+export type UploadType = 'banner' | 'logo' | 'certificateTemplate' | 'proofOfPayment' | 'gcashQRCode';
+
+export const EVENT_UPLOAD_TYPE: Record<string, UploadType> = {
   BANNER: 'banner',
   LOGO: 'logo',
   CERTIFICATE_TEMPLATE: 'certificateTemplate',
   PROOF_OF_PAYMENT: 'proofOfPayment',
   GCASH_QR: 'gcashQRCode'
 };
-
-export const EVENT_OBJECT_KEY_MAPS = {
-  BANNER: 'bannerLink',
-  LOGO: 'logoLink',
-  CERTIFICATE_TEMPLATE: 'certificateTemplate',
-  PROOF_OF_PAYMENT: 'proofOfPayment',
-  GCASH_QR: 'gcashQRCode'
-};
-
-export type UploadType = keyof typeof EVENT_UPLOAD_TYPE;
-
-export const enum EVENT_UPLOAD_TYPE {
-  BANNER = 'banner',
-  LOGO = 'logo',
-  CERTIFICATE_TEMPLATE = 'certificateTemplate',
-  PROOF_OF_PAYMENT = 'proofOfPayment',
-  GCASH_QR = 'gcashQRCode'
-}
-
-export const enum EVENT_OBJECT_KEY_MAP {
-  BANNER = 'bannerLink',
-  LOGO = 'logoLink',
-  CERTIFICATE_TEMPLATE = 'certificateTemplate',
-  GCASH_PAYMENT = 'gcashPayment',
-  GCASH_QR = 'gcashQRCode'
-}
-
 export type EventFAQs = {
   isActive: boolean;
   faqs: FAQ[];