- switch to using downloadjs for downloading files

- increase timeout for cloud function

functions/index.js

@@ -15,7 +15,7 @@ exports.printResume = functions.https.onCall(async ({ id, type }, { auth }) => {
     );
   }
 
-  if (!type || type !== 'single' || type !== 'multi') {
+  if (!type) {
     throw new functions.https.HttpsError(
       'invalid-argument',
       'The function must be called with argument "type" containing the type of resume.',
@@ -33,8 +33,10 @@ exports.printResume = functions.https.onCall(async ({ id, type }, { auth }) => {
     headless: true,
   });
   const page = await browser.newPage();
-  await page.goto(BASE_URL + id);
-  await timeout(5000);
+  await page.goto(BASE_URL + id, {
+    waitUntil: 'networkidle0',
+  });
+  await timeout(6000);
   await page.emulateMediaType('print');
   let pdf;
 
@@ -59,7 +61,7 @@ exports.printResume = functions.https.onCall(async ({ id, type }, { auth }) => {
       height: `${height}px`,
       pageRanges: '1',
     });
-  } else if (type === 'multi') {
+  } else {
     pdf = await page.pdf({
       format: 'A4',
       printBackground: true,

package-lock.json

@@ -6392,6 +6392,11 @@
         }
       }
     },
+    "downloadjs": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmjs.org/downloadjs/-/downloadjs-1.4.7.tgz",
+      "integrity": "sha1-9p+W+UDg0FU9rCkROYZaPNAQHjw="
+    },
     "duplexer": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",

package.json

@@ -23,6 +23,7 @@
     "array-move": "^3.0.0",
     "classnames": "^2.2.6",
     "dotenv": "^8.2.0",
+    "downloadjs": "^1.4.7",
     "firebase": "^7.16.0",
     "formik": "^2.1.4",
     "gatsby": "^2.24.2",

src/components/landing/Screenshots.module.css

@@ -1,11 +1,12 @@
 .screenshot {
+  filter: grayscale(100%);
   @apply shadow-xl rounded border-2 border-primary-100 ml-10;
-  @apply transition-opacity duration-200 ease-in-out;
+  @apply transition-all duration-200 ease-in-out;
 }
 
 .screenshot:hover {
-  @apply opacity-50;
-  @apply transition-opacity duration-200 ease-in-out;
+  filter: grayscale(0%);
+  @apply transition-all duration-200 ease-in-out;
 }
 
 .screenshot:first-child {

src/modals/sections/ExportModal.js

@@ -1,5 +1,6 @@
 import firebase from 'gatsby-plugin-firebase';
 import { clone } from 'lodash';
+import download from 'downloadjs';
 import React, { memo, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaPrint } from 'react-icons/fa';
@@ -30,20 +31,13 @@ const ExportModal = () => {
     }
   };
 
-  const openFile = (blob) => {
-    if (typeof window !== `undefined`) {
-      const url = window.URL.createObjectURL(blob, { oneTimeOnly: true });
-      window && window.open(url);
-      setLoadingSingle(false);
-    }
-  };
-
   const handleSinglePageDownload = async () => {
     setLoadingSingle(true);
     const printResume = firebase.functions().httpsCallable('printResume');
     const { data } = await printResume({ id: state.id, type: 'single' });
     const blob = b64toBlob(data, 'application/pdf');
-    openFile(blob);
+    download(blob, `RxResume-${state.id}.pdf`, 'application/pdf');
+    setLoadingSingle(false);
   };
 
   const handleMultiPageDownload = async () => {
@@ -51,7 +45,8 @@ const ExportModal = () => {
     const printResume = firebase.functions().httpsCallable('printResume');
     const { data } = await printResume({ id: state.id, type: 'multi' });
     const blob = b64toBlob(data, 'application/pdf');
-    openFile(blob);
+    download(blob, `RxResume-${state.id}.pdf`, 'application/pdf');
+    setLoadingSingle(false);
   };
 
   const handleExportToJson = () => {
@@ -61,16 +56,10 @@ const ExportModal = () => {
     delete backupObj.name;
     delete backupObj.createdAt;
     delete backupObj.updatedAt;
-    const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent(
-      JSON.stringify(backupObj),
+    const data = `data:text/json;charset=utf-8,${encodeURIComponent(
+      JSON.stringify(backupObj, null, '\t'),
     )}`;
-    const dlAnchor = document.getElementById('downloadAnchor');
-    dlAnchor.setAttribute('href', dataStr);
-    dlAnchor.setAttribute(
-      'download',
-      `RxResume_${state.id}_${Date.now()}.json`,
-    );
-    dlAnchor.click();
+    download(data, `RxResume-${state.id}.json`, 'text/json');
   };
 
   return (