Get Certificate Data from useCert

code100x · May 11, 2024 · 6e66b7f · 6e66b7f
1 parent f094e03
commit 6e66b7f
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 39 deletions.
diff --git a/src/components/Certificate.tsx b/src/components/Certificate.tsx
@@ -10,36 +10,68 @@ import {
 } from '@/components/ui/card';
 import { Button } from './ui/button';
 import { FaDownload, FaFileImage, FaLinkedin, FaTwitter } from 'react-icons/fa';
+import { useCertPdf, useCertPng } from '@/hooks/useCert';
+
+import { useEffect } from 'react';
 
 export const CertificateComponent = ({ course, certificateId }: any) => {
+  //calls the useCertPdf and useCertPng and passes certificateId and course.id gets the pdfData and ImageData
+
+  const { pdfData, setPdfClicked, generatingPdf } = useCertPdf(
+    certificateId,
+    course.id,
+  );
+  const { imgUri, setImgClicked, generatingImg } = useCertPng(
+    certificateId,
+    course.id,
+  );
+  useEffect(() => {
+    if (pdfData) {
+      const a = document.createElement('a');
+      a.download = 'certificate.pdf';
+      a.href = pdfData;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    }
+  }, [pdfData]);
+
+  useEffect(() => {
+    if (imgUri) {
+      const imgBlob = getImgBlob(imgUri);
+      const downloadImgUri = URL.createObjectURL(imgBlob);
+      window.open(downloadImgUri);
+      const a = document.createElement('a');
+      a.download = 'certificate.png';
+      a.href = downloadImgUri;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(downloadImgUri);
+    }
+  }, [imgUri]);
+
+  function getImgBlob(dataUri: string) {
+    const base64Data = dataUri.split(',')[1];
+    const binaryData = atob(base64Data);
+    const arrayBuffer = new ArrayBuffer(binaryData.length);
+    const view = new Uint8Array(arrayBuffer);
+    for (let i = 0; i < binaryData.length; i++) {
+      view[i] = binaryData.charCodeAt(i);
+    }
+
+    // Convert ArrayBuffer to Blob
+    const blob = new Blob([arrayBuffer], { type: 'image/png' });
+
+    return blob;
+  }
+
   const handleDownloadPDF = async () => {
-    const response = await fetch(
-      `/api/certificate/get?courseId=${course.id}&type=pdf`,
-    );
-    const blob = await response.blob();
-    const url = window.URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = 'certificate.pdf';
-    document.body.appendChild(a);
-    a.click();
-    window.URL.revokeObjectURL(url);
-    document.body.removeChild(a);
+    setPdfClicked(true);
   };
 
   const handleDownloadPNG = async () => {
-    const response = await fetch(
-      `/api/certificate/get?courseId=${course.id}&type=png`,
-    );
-    const blob = await response.blob();
-    const url = window.URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = 'certificate.png';
-    document.body.appendChild(a);
-    a.click();
-    window.URL.revokeObjectURL(url);
-    document.body.removeChild(a);
+    setImgClicked(true);
   };
 
   const handleShareLinkedIn = async () => {
@@ -67,11 +99,19 @@ export const CertificateComponent = ({ course, certificateId }: any) => {
         <CardDescription>{course.description}</CardDescription>
       </CardHeader>
       <CardFooter className="flex justify-end">
-        <Button onClick={() => handleDownloadPDF()} className="mr-2">
+        <Button
+          disabled={generatingPdf}
+          onClick={() => handleDownloadPDF()}
+          className="mr-2"
+        >
           <FaDownload className="mr-1" />
           Download PDF
         </Button>
-        <Button onClick={() => handleDownloadPNG()} className="mr-2">
+        <Button
+          disabled={generatingImg}
+          onClick={() => handleDownloadPNG()}
+          className="mr-2"
+        >
           <FaFileImage className="mr-1" />
           Download PNG
         </Button>

diff --git a/src/components/CertificateVerify.tsx b/src/components/CertificateVerify.tsx
@@ -9,30 +9,44 @@ import {
 } from '@/components/ui/card';
 import { useEffect, useState } from 'react';
 import { Certificate, Course, User } from '@prisma/client';
+import { useCertPng } from '@/hooks/useCert';
 
 export const CertificateVerify = ({
   certificate,
 }: {
   certificate: Certificate & { user: User; course: Course };
 }) => {
   const [imageUrl, setImageUrl] = useState('');
+  const { imgUri, setImgClicked } = useCertPng(certificate.id);
 
   useEffect(() => {
-    const generateImage = async () => {
-      try {
-        const response = await fetch(
-          `/api/certificate/get?certificateId=${certificate.id}&userName=${certificate.user.name || ''}`,
-        );
-        const blob = await response.blob();
-        const url = URL.createObjectURL(blob);
-        setImageUrl(url);
-      } catch (error) {
-        console.error('Error generating image:', error);
-      }
-    };
-    if (!imageUrl) generateImage();
+    setImgClicked(true);
   }, []);
 
+  useEffect(() => {
+    if (imgUri) {
+      //convert dataUri to downloadable URI
+      const imgBlob = getImgBlob(imgUri);
+      const downloadImgUri = URL.createObjectURL(imgBlob);
+      setImageUrl(downloadImgUri);
+    }
+  }, [imgUri]);
+
+  function getImgBlob(dataUri: string) {
+    const base64Data = dataUri.split(',')[1];
+    const binaryData = atob(base64Data);
+    const arrayBuffer = new ArrayBuffer(binaryData.length);
+    const view = new Uint8Array(arrayBuffer);
+    for (let i = 0; i < binaryData.length; i++) {
+      view[i] = binaryData.charCodeAt(i);
+    }
+
+    // Convert ArrayBuffer to Blob
+    const blob = new Blob([arrayBuffer], { type: 'image/png' });
+
+    return blob;
+  }
+
   return (
     <div>
       <Card className="w-500 my-4 flex">