passed card name as fileNames (#82)

* passed card name as fileNames

* redundant console.log

src/api-helpers/image-gen.ts

@@ -20,12 +20,10 @@ export const generateImages = async (
     );
 
     const imageFileBuffers = await Promise.all(
-      cardsToBeGenerated.map((cardName, index) =>
+      cardsToBeGenerated.map((cardName) =>
         createImageUsingVercel(
           { ...adaptedData[cardName], username: data.user.login },
-          cardName,
-          'node',
-          index
+          cardName
         )
       )
     );

src/api-helpers/vercel-generator.tsx

@@ -15,11 +15,10 @@ import { SCALE_FACTOR } from '@/constants/general';
 export const createImageUsingVercel = async (
   data: CardTemplateData['data'],
   cardType: CardTypes,
-  env: 'node' | 'browser',
-  index?: number
+  env: 'node' | 'browser' = 'node'
 ): Promise<ImageFile> => {
+  const fileName = `${cardType.toLowerCase()}.png`;
   try {
-    const fileName = (index || 0) + 1 + '.png';
     const fonts = await getFontsForImageGeneration(env);
 
     const generatedImage = new ImageResponse(

src/components/SwiperCarousel.tsx

@@ -11,10 +11,15 @@ import 'swiper/css/effect-coverflow';
 import 'swiper/css/pagination';
 import 'swiper/css/navigation';
 import { ShareButton } from './ShareButton';
+import { UpdatedImageFile } from '@/types/images';
 
 interface SwiperCarouselProps {
-  images: string[];
-  singleImageSharingCallback: ({ images }: { images: string }) => void;
+  images: UpdatedImageFile[];
+  singleImageSharingCallback: ({
+    images
+  }: {
+    images: UpdatedImageFile;
+  }) => void;
 }
 
 const SwiperCarousel: React.FC<SwiperCarouselProps> = ({
@@ -89,7 +94,7 @@ const SwiperCarousel: React.FC<SwiperCarouselProps> = ({
                 onClick={handlePrev}
               />
             )}
-            <img src={image} alt={`Slide ${index + 1}`} />
+            <img src={image.data} alt={`Slide ${index + 1}`} />
 
             <IoIosArrowDroprightCircle
               size={36}

src/hooks/useImageDownloader.ts

@@ -1,24 +1,25 @@
 import JSZip from 'jszip';
 import { saveAs } from 'file-saver';
 import { useCallback } from 'react';
+import { UpdatedImageFile } from '@/types/images';
 
 interface DownloadImagesProps {
-  images: string | string[];
+  images: UpdatedImageFile | UpdatedImageFile[];
 }
-const downloadSingleImage = (url: string) => {
-  const fileName = 'unwrapped-image.png';
-  fetch(url)
+const downloadSingleImage = (image: UpdatedImageFile) => {
+  const fileName = image.fileName;
+  fetch(image.data)
     .then((response) => response.blob())
     .then((blob) => saveAs(blob, fileName))
     .catch((error) => console.error('Error downloading image:', error));
 };
 
-const downloadMultipleImages = (urls: string[]) => {
+const downloadMultipleImages = (images: UpdatedImageFile[]) => {
   const zip = new JSZip();
-  const promises = urls.map((url, index) => {
-    const fileName = `image${index + 1}.png`;
+  const promises = images.map((image) => {
+    const fileName = image.fileName;
 
-    return fetch(url)
+    return fetch(image.data)
       .then((response) => response.blob())
       .then((blob) => zip.file(fileName, blob));
   });

src/hooks/useImageDownloaderAsPdfHook.ts

@@ -1,8 +1,9 @@
 import jsPDF from 'jspdf';
 import { rgbToHex, darkenHexColor } from '@/api-helpers/general';
+import { UpdatedImageFile } from '@/types/images';
 
 interface DownloadImagesAsPdfProps {
-  images: string[];
+  images: UpdatedImageFile[];
 }
 
 const IMAGE_HEIGHT = 600;
@@ -20,7 +21,7 @@ const downloadImagesAsPdf = async ({ images }: DownloadImagesAsPdfProps) => {
     compress: true
   });
   const colorsCodesByImageOrder = await Promise.all(
-    images.map(getColorFromImage)
+    images.map((item) => item.data).map(getColorFromImage)
   );
 
   images.forEach(async (imageUrl, index) => {
@@ -38,7 +39,7 @@ const downloadImagesAsPdf = async ({ images }: DownloadImagesAsPdfProps) => {
     pdf.setDrawColor(darkenHexCode);
     pdf.rect(0, 0, PAGE_WIDTH, PAGE_HEIGHT, 'F');
     pdf.addImage(
-      imageUrl,
+      imageUrl.data,
       'JPEG',
       IMAGE_MARGIN,
       IMAGE_MARGIN,

src/pages/api/download.ts

@@ -60,9 +60,10 @@ const fetchAndDownloadImageBuffer = async (
     } else {
       res.setHeader('Content-Type', 'application/json');
       res.send(
-        imageBuffer.map(
-          ({ data }) => `data:image/png;base64,${data.toString('base64')}`
-        )
+        imageBuffer.map(({ data, fileName }) => ({
+          fileName,
+          data: `data:image/png;base64,${data.toString('base64')}`
+        }))
       );
     }
     console.log(chalk.green('Successfully sent buffer to client'));

src/pages/stats-unwrapped.tsx

@@ -10,18 +10,20 @@ import { useImageDownloaderAsPdf } from '@/hooks/useImageDownloaderAsPdfHook';
 import Confetti from 'react-confetti';
 import Link from 'next/link';
 import toast from 'react-hot-toast';
+import { UpdatedImageFile } from '@/types/images';
 
 const LINKEDIN_URL = 'https://www.linkedin.com/';
 
 export default function StatsUnwrapped() {
   const [isLoading, setIsLoading] = useState(false);
   const downloadImage = useImageDownloader();
   const downloadImagesAsPdf = useImageDownloaderAsPdf();
-  const [images, setUnwrappedImages] = useState<string[] | null>(null);
-
+  const [images, setUnwrappedImages] = useState<UpdatedImageFile[] | null>(
+    null
+  );
   useEffect(() => {
     setIsLoading(true);
-    handleRequest<string[]>('/api/download')
+    handleRequest<UpdatedImageFile[]>('/api/download')
       .then((res) => {
         setUnwrappedImages(res);
       })

src/types/images.ts

@@ -5,3 +5,8 @@ export type ImageFile = {
   data: Buffer;
   image?: ImageResponse;
 };
+
+export type UpdatedImageFile = {
+  fileName: string;
+  data: string;
+};