Merge branch 'main' into main

code100x · May 28, 2024 · 366a457 · 366a457
2 parents b83945b + 00af23b
commit 366a457
Show file tree

Hide file tree

Showing 10 changed files with 125 additions and 30,825 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -106,7 +106,7 @@
     "husky": "^9.0.7",
     "postcss": "^8",
     "prettier": "^3.2.4",
-    "prisma": "^5.6.0",
+    "prisma": "^5.13.0",
     "tailwindcss": "^3.3.0",
     "ts-node": "^10.9.2"
   }

diff --git a/prisma/seed.ts b/prisma/seed.ts
@@ -107,59 +107,61 @@ async function seedCourses() {
 }
 
 async function seedContent() {
-  const content = [
-    {
-      id: 1,
-      type: 'folder',
-      title: 'week 1',
-      hidden: false,
-      thumbnail:
-        'https://appx-recordings.s3.ap-south-1.amazonaws.com/drm/100x/images/week-1.jpg',
-      commentsCount: 0,
-    },
-    {
-      id: 2,
-      type: 'notion',
-      title: 'Notes for week 1',
-      hidden: false,
-      thumbnail:
-        'https://appx-recordings.s3.ap-south-1.amazonaws.com/drm/100x/images/notes.png',
-      parentId: 1,
-      commentsCount: 0,
-    },
-    {
-      id: 3,
-      type: 'video',
-      title: 'test video for week 1',
-      hidden: false,
-      thumbnail:
-        'https://appx-recordings.s3.ap-south-1.amazonaws.com/drm/100x/images/week-1-orientation.jpg',
-      parentId: 1,
-      commentsCount: 0,
-    },
-    {
-      id: 4,
-      type: 'video',
-      title: 'test video 2 for week 1',
-      hidden: false,
-      thumbnail:
-        'https://appx-recordings.s3.ap-south-1.amazonaws.com/drm/100x/images/week-1-orientation.jpg',
-      parentId: 1,
-      commentsCount: 0,
-    },
-    {
-      id: 5,
-      type: 'video',
-      title: 'test video-3 for week 1',
-      hidden: false,
-      thumbnail:
-        'https://appx-recordings.s3.ap-south-1.amazonaws.com/drm/100x/images/week-1-orientation.jpg',
-      parentId: 1,
-      commentsCount: 0,
-    },
-  ];
+  const folderData = {
+    type: 'folder',
+    title: 'week 1',
+    hidden: false,
+    thumbnail:
+      'https://appx-recordings.s3.ap-south-1.amazonaws.com/drm/100x/images/week-1.jpg',
+    commentsCount: 0,
+  };
+
   try {
-    await db.content.createMany({ data: content });
+    const createdFolder = await db.content.create({ data: folderData });
+    console.log('Created folder:', createdFolder);
+    const folderId = createdFolder.id;
+
+    const contentData = [
+      {
+        type: 'notion',
+        title: 'Notes for week 1',
+        hidden: false,
+        thumbnail:
+          'https://appx-recordings.s3.ap-south-1.amazonaws.com/drm/100x/images/notes.png',
+        parentId: folderId,
+        commentsCount: 0,
+      },
+      {
+        type: 'video',
+        title: 'test video for week 1',
+        hidden: false,
+        thumbnail:
+          'https://appx-recordings.s3.ap-south-1.amazonaws.com/drm/100x/images/week-1-orientation.jpg',
+        parentId: folderId,
+        commentsCount: 0,
+      },
+      {
+        type: 'video',
+        title: 'test video for week 1',
+        hidden: false,
+        thumbnail:
+          'https://appx-recordings.s3.ap-south-1.amazonaws.com/drm/100x/images/week-1-orientation.jpg',
+        parentId: folderId,
+        commentsCount: 0,
+      },
+      {
+        type: 'video',
+        title: 'test video 2 for week 1',
+        hidden: false,
+        thumbnail:
+          'https://appx-recordings.s3.ap-south-1.amazonaws.com/drm/100x/images/week-1-orientation.jpg',
+        parentId: folderId,
+        commentsCount: 0,
+      },
+    ];
+
+    const createdContent = await db.content.createMany({ data: contentData });
+    console.log('Created content:', createdContent);
   } catch (error) {
     console.error('Error seeding content:', error);
     throw error;

diff --git a/public/certificate.png b/public/certificate.png
diff --git a/src/components/Certificate.tsx b/src/components/Certificate.tsx
@@ -8,7 +8,7 @@ import {
   CardTitle,
 } from '@/components/ui/card';
 import { Button } from './ui/button';
-import { FaDownload, FaFileImage, FaLinkedin, FaTwitter } from 'react-icons/fa';
+import { FaFileImage, FaLinkedin, FaTwitter } from 'react-icons/fa';
 import { useGenerateCertificate } from '@/hooks/useCertGen';
 import { OneCertificate } from '@/utiles/certificate';
 import { useMemo } from 'react'; //used to fix maximum update depth exceeded err
@@ -34,15 +34,15 @@ export const CertificateComponent = ({
     userName,
   });
 
-  const handleDownloadPDF = async () => {
-    const downloadUrl = certificatePdfUrl;
-    const a = document.createElement('a');
-    a.href = downloadUrl!;
-    a.download = 'certificate.pdf';
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-  };
+  // const handleDownloadPDF = async () => {
+  //   const downloadUrl = certificatePdfUrl;
+  //   const a = document.createElement('a');
+  //   a.href = downloadUrl!;
+  //   a.download = 'certificate.pdf';
+  //   document.body.appendChild(a);
+  //   a.click();
+  //   document.body.removeChild(a);
+  // };
 
   const handleDownloadPNG = async () => {
     const downloadUrl = certificateImageUrl;
@@ -57,15 +57,15 @@ export const CertificateComponent = ({
 
   const handleShareLinkedIn = async () => {
     const certificateUrl = `${window.location.origin}/certificate/verify/${certificateSlug}`;
-    const postContent = `I just earned the "${course.title}" certificate on 100x Academy! Check it out: ${certificateUrl}`;
+    const postContent = `I just earned the "${course.title}" certificate on 100xDevs! Check it out: ${certificateUrl}`;
     const shareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(
       certificateUrl,
     )}&text=${encodeURIComponent(postContent)}`;
     window.open(shareUrl);
   };
 
   const handleShareTwitter = () => {
-    const tweetText = `I just earned the "${course.title}" certificate on 100x Academy! Check it out:`;
+    const tweetText = `I just earned the "${course.title}" certificate on 100xDevs! Check it out:`;
     const certificateUrl = `${window.location.origin}/certificate/verify/${certificateSlug}`;
     const shareUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(tweetText)}&url=${encodeURIComponent(certificateUrl)}`;
     window.open(shareUrl);
@@ -87,9 +87,9 @@ export const CertificateComponent = ({
         <CardDescription>{course.description}</CardDescription>
       </CardHeader>
       <CardFooter className="flex justify-end">
-        <Button onClick={() => handleDownloadPDF()} className="mr-2">
+        {/* <Button onClick={() => handleDownloadPDF()} className="mr-2">
           <FaDownload className="mr-1" /> Download PDF
-        </Button>
+        </Button> */}
         <Button onClick={() => handleDownloadPNG()} className="mr-2">
           <FaFileImage className="mr-1" /> Download PNG
         </Button>

diff --git a/src/components/CertificateVerify.tsx b/src/components/CertificateVerify.tsx
@@ -1,12 +1,6 @@
 'use client';
 
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Certificate, Course, User } from '@prisma/client';
 import { useGenerateCertificate } from '@/hooks/useCertGen';
 
@@ -25,33 +19,34 @@ export const CertificateVerify = ({
   });
 
   return (
-    <div className="h-screen flex justify-center flex-col pb-20 mx-10">
-      <h1 className="text-4xl text-center pb-4">100x Devs Certificate</h1>
-      <Card className="w-500 my-4 flex">
-        <CardContent className="flex-none mr-4 w-1/2">
-          {certificateImageUrl ? (
-            <img
-              src={certificateImageUrl}
-              alt="Generated Certificate"
-              className="w-full h-auto"
-            />
-          ) : (
-            'Loading...'
-          )}
-        </CardContent>
+    <div>
+      <h1 className="text-4xl text-center py-4">100x Devs Certificate</h1>
+      <div className="flex justify-center pb-20 mx-10">
+        <Card className="my-4">
+          <CardContent className="flex-none w-[90vw] max-w-[800px]">
+            {certificateImageUrl ? (
+              <img
+                src={certificateImageUrl}
+                alt="Generated Certificate"
+                className="w-full h-auto"
+              />
+            ) : (
+              <div className="min-h-[500px] flex justify-center items-center">
+                Loading...
+              </div>
+            )}
+          </CardContent>
 
-        <div className="flex-grow">
-          <CardHeader>
-            <CardTitle>
-              This Certificate was issued to {certificate.user.name} for
-              completing {certificate.course.title}
-            </CardTitle>
-            <CardDescription>
-              Course Description: {certificate.course.description}
-            </CardDescription>
-          </CardHeader>
-        </div>
-      </Card>
+          <div className="flex justify-center">
+            <CardHeader>
+              <CardTitle>
+                This Certificate was issued to {certificate.user.name} for
+                completing {certificate.course.title}
+              </CardTitle>
+            </CardHeader>
+          </div>
+        </Card>
+      </div>
     </div>
   );
 };
diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx
@@ -59,6 +59,16 @@ export const CourseCard = ({
           >
             View Content
           </button>
+          {course.certIssued && (
+            <SecondaryButton
+              onClick={(e) => {
+                e.stopPropagation();
+                router.push('/certificate');
+              }}
+            >
+              Download Certificate
+            </SecondaryButton>
+          )}
         </div>
       </div>
     </div>

diff --git a/src/db/cert.ts b/src/db/cert.ts
@@ -10,7 +10,7 @@ export const getCertificates = async () => {
     return [];
   }
   const purchases = await getPurchases(session?.user.email || '');
-  const courses = purchases.filter((x) => x.certIssued);
+  const courses = purchases.filter((x) => x.certIssued === true);
 
   const courseWithCert: {
     course: Course;

diff --git a/src/hooks/useCertGen.ts b/src/hooks/useCertGen.ts
@@ -23,6 +23,7 @@ export function useGenerateCertificate({
     null,
   );
   const [certificateImageUrl, setCertificateImageUrl] = useState('');
+  const [downloadDate, setDownloadDate] = useState<Date | null>(null);
 
   useEffect(() => {
     async function generateCertificateAndImage() {
@@ -31,6 +32,7 @@ export function useGenerateCertificate({
       try {
         await generateCertificate();
         await generateCertificateImage();
+        setDownloadDate(new Date());
       } catch (error) {
         console.error(error);
       } finally {
@@ -113,20 +115,29 @@ export function useGenerateCertificate({
 
       ctx.drawImage(certificateImage, 0, 0);
 
-      ctx.font = '85px Helvetica';
+      ctx.font = '85px "Brush Script MT", cursive'; // Changed to  font
       ctx.fillStyle = 'black';
       const textWidth = ctx.measureText(recipientName).width;
       const xRecipient = (offscreenCanvas.width - textWidth) / 2;
       const yRecipient = offscreenCanvas.height * 0.54;
       ctx.fillText(recipientName, xRecipient, yRecipient);
 
-      const certificateNumberFontSize = 50;
-      ctx.font = `bold ${certificateNumberFontSize}px Helvetica`;
+      const certificateNumberFontSize = 35;
+      ctx.font = `${certificateNumberFontSize}px Helvetica`;
       const certificateNumberText = `Certificate No: ${certificateDetails.certificateSlug}`;
       ctx.fillText(
         certificateNumberText,
-        offscreenCanvas.width * 0.35,
-        offscreenCanvas.height * 0.88,
+        offscreenCanvas.width * 0.35 + 510,
+        offscreenCanvas.height * 0.77,
+      );
+
+      // Add download date
+      const downloadDateText = ` ${new Date().toLocaleDateString()}`;
+      ctx.font = `${certificateNumberFontSize / 1}px Helvetica`;
+      ctx.fillText(
+        downloadDateText,
+        offscreenCanvas.width * 0.18 + 20,
+        offscreenCanvas.height * 0.94,
       );
 
       const dataUrl = offscreenCanvas.toDataURL();
@@ -142,5 +153,6 @@ export function useGenerateCertificate({
     generating,
     certificatePdfUrl,
     certificateImageUrl,
+    downloadDate,
   };
 }