[resumes][feat] add GET method for file-storage API

apps/portal/src/components/resumes/ResumePdf.tsx

@@ -1,9 +1,12 @@
-import { useState } from 'react';
+import axios from 'axios';
+import { useEffect, useState } from 'react';
 import { Document, Page, pdfjs } from 'react-pdf';
 import type { PDFDocumentProxy } from 'react-pdf/node_modules/pdfjs-dist';
 import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/20/solid';
 import { Button, Spinner } from '@tih/ui';
 
+import { RESUME_STORAGE_KEY } from '~/constants/file-storage-keys';
+
 pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;
 
 type Props = Readonly<{
@@ -13,16 +16,31 @@ type Props = Readonly<{
 export default function ResumePdf({ url }: Props) {
   const [numPages, setNumPages] = useState(0);
   const [pageNumber] = useState(1);
+  const [file, setFile] = useState<File>();
 
   const onPdfLoadSuccess = (pdf: PDFDocumentProxy) => {
     setNumPages(pdf.numPages);
   };
 
+  useEffect(() => {
+    async function fetchData() {
+      await axios
+        .get(`/api/file-storage?key=${RESUME_STORAGE_KEY}&url=${url}`, {
+          responseType: 'blob',
+        })
+        .then((res) => {
+          const fileObject = res.data;
+          setFile(fileObject);
+        });
+    }
+    fetchData();
+  }, [url]);
+
   return (
     <div>
       <Document
         className="h-[calc(100vh-17rem)] overflow-scroll"
-        file={url}
+        file={file}
         loading={<Spinner display="block" label="" size="lg" />}
         onLoadSuccess={onPdfLoadSuccess}>
         <Page pageNumber={pageNumber} />

apps/portal/src/constants/file-storage-keys.ts

@@ -0,0 +1 @@
+export const RESUME_STORAGE_KEY = 'resumes';

apps/portal/src/pages/api/file-storage.ts

@@ -2,11 +2,8 @@ import formidable from 'formidable';
 import * as fs from 'fs';
 import type { NextApiRequest, NextApiResponse } from 'next';
 
-import { env } from '~/env/server.mjs';
 import { supabase } from '~/utils/supabase';
 
-const BASE_URL = `${env.SUPABASE_URL}/storage/v1/object/public`;
-
 export const config = {
   api: {
     bodyParser: false,
@@ -42,7 +39,7 @@ export default async function handler(
         }
 
         return res.status(200).json({
-          url: `${BASE_URL}/${key}/${filePath}`,
+          url: filePath,
         });
       });
     } catch (error: unknown) {
@@ -50,18 +47,19 @@ export default async function handler(
     }
   }
 
-  // See if we need this
   if (req.method === 'GET') {
-    const { key, filePath } = req.query;
+    const { key, url } = req.query;
 
     const { data, error } = await supabase.storage
-      .from(key as string)
-      .download(filePath as string);
+      .from(`public/${key as string}`)
+      .download(url as string);
 
-    if (error) {
+    if (error || data == null) {
       throw error;
     }
 
-    res.status(200).write(data);
+    const arrayBuffer = await data.arrayBuffer();
+    const buffer = Buffer.from(arrayBuffer);
+    res.status(200).send(buffer);
   }
 }

apps/portal/src/pages/resumes/submit.tsx

@@ -14,6 +14,7 @@ import {
   ROLES,
 } from '~/components/resumes/browse/constants';
 
+import { RESUME_STORAGE_KEY } from '~/constants/file-storage-keys';
 import { trpc } from '~/utils/trpc';
 
 const TITLE_PLACEHOLDER =
@@ -55,7 +56,7 @@ export default function SubmitResumeForm() {
     }
 
     const formData = new FormData();
-    formData.append('key', 'resumes');
+    formData.append('key', RESUME_STORAGE_KEY);
     formData.append('file', resumeFile);
 
     const res = await axios.post('/api/file-storage', formData, {