From 0019fee34eb1434ac889ac7edd3592dee0076ee7 Mon Sep 17 00:00:00 2001
From: Amruth Pillai <im.amruth@gmail.com>
Date: Thu, 16 Jul 2020 17:34:21 +0530
Subject: [PATCH] - switch to using downloadjs for downloading files - increase
 timeout for cloud function

---
 functions/index.js                            | 10 ++++---
 package-lock.json                             |  5 ++++
 package.json                                  |  1 +
 src/components/landing/Screenshots.module.css |  7 ++---
 src/modals/sections/ExportModal.js            | 27 ++++++-------------
 5 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/functions/index.js b/functions/index.js
index 03be6fc8..45f9bce9 100644
--- a/functions/index.js
+++ b/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,
diff --git a/package-lock.json b/package-lock.json
index 8c355e59..19422d0e 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index ba2bc7e1..ccb0ed90 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/landing/Screenshots.module.css b/src/components/landing/Screenshots.module.css
index a29aa37d..b4a41880 100644
--- a/src/components/landing/Screenshots.module.css
+++ b/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 {
diff --git a/src/modals/sections/ExportModal.js b/src/modals/sections/ExportModal.js
index 2cafa322..65b76723 100644
--- a/src/modals/sections/ExportModal.js
+++ b/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 (