hot fix for opening docs

shpe-app-web/app/components/MemberCard.tsx

@@ -1,28 +1,70 @@
-'use client'
-import { useState } from "react";
+import { getStorage, ref, getMetadata, getBlob } from "firebase/storage";
+import { saveAs } from "file-saver";
 import { RequestWithDoc } from "@/types/membership";
 
+const storage = getStorage();
 
-interface MemberCardProps{
-    request: RequestWithDoc,
-    onApprove: (member: RequestWithDoc) => void,
-    onDeny: (member: RequestWithDoc) => void,
-}
+const fetchAndFixFile = async (url: string) => {
+    try {
+        const fileRef = ref(storage, url);
+
+        const metadata = await getMetadata(fileRef);
+
+        if (metadata.contentType === "image/png" || metadata.contentType === "image/jpeg") {
+            window.open(url, "_blank");
+            return;
+        }
+
+        let extension = "";
+        switch (metadata.contentType) {
+            case "application/pdf":
+                extension = ".pdf";
+                break;
+            case "image/heic":
+                extension = ".heic";
+                break;
+            default:
+                extension = "";
+        }
+
+        const blob = await getBlob(fileRef);
 
-const MemberCard : React.FC<MemberCardProps> = ({request, onApprove, onDeny}) => {
-
-
-        return(
-            // flex text-gray-400  justify-evenly text-2xl
-    <tr className="bg-gray-300">
-      <td className="bg-gray-500 px-4 py-2">{request.name}</td>
-      <td className="px-4 py-2"><a href={request.chapterURL}>Chapter</a></td>
-      <td className="px-4 py-2"><a href={request.nationalURL}>National</a></td>
-      <td className="bg-green-400 px-4 py-2"><button onClick={() => {onApprove(request); }}>Approve</button></td>
-      <td className="bg-red-400 px-4 py-2"><button onClick={() => {onDeny(request); }}>Deny</button></td>
-    </tr>
-        )
-    //}
-
+        const filename = `verification${extension}`;
+
+        saveAs(blob, filename);
+    } catch (error) {
+        console.error("Error fetching or fixing the file:", error);
+    }
+};
+
+interface MemberCardProps {
+    request: RequestWithDoc;
+    onApprove: (member: RequestWithDoc) => void;
+    onDeny: (member: RequestWithDoc) => void;
 }
-export default MemberCard;
+
+const MemberCard: React.FC<MemberCardProps> = ({ request, onApprove, onDeny }) => {
+    return (
+        <tr className="bg-gray-300">
+            <td className="bg-gray-500 px-4 py-2">{request.name}</td>
+            <td className="px-4 py-2">
+                <button onClick={() => fetchAndFixFile(request.chapterURL)}>
+                    Chapter
+                </button>
+            </td>
+            <td className="px-4 py-2">
+                <button onClick={() => fetchAndFixFile(request.nationalURL)}>
+                    National
+                </button>
+            </td>
+            <td className="bg-green-400 px-4 py-2">
+                <button onClick={() => onApprove(request)}>Approve</button>
+            </td>
+            <td className="bg-red-400 px-4 py-2">
+                <button onClick={() => onDeny(request)}>Deny</button>
+            </td>
+        </tr>
+    );
+};
+
+export default MemberCard;

shpe-app-web/cors.json

@@ -0,0 +1,9 @@
+[
+    {
+      "origin": ["http://localhost:3000", "https://tamu-shpe-admin-web.vercel.app"],
+      "method": ["GET"],
+      "maxAgeSeconds": 3600,
+      "responseHeader": ["Content-Type"]
+    }
+  ]
+