connecting actions to page controller

src/components/RightSidebar/tabs/Actions.js

@@ -2,12 +2,10 @@
 /* eslint-disable jsx-a11y/anchor-has-content */
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React, { useRef, useContext } from 'react';
-import { useTranslation, Trans } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
-import html2canvas from 'html2canvas';
-import * as jsPDF from 'jspdf';
 
 import PageContext from '../../../context/PageContext';
-import { importJson } from '../../../utils';
+import { importJson, saveAsPdf } from '../../../utils';
 
 const ActionsTab = ({ data, theme, dispatch }) => {
   const pageContext = useContext(PageContext);
@@ -24,39 +22,6 @@ const ActionsTab = ({ data, theme, dispatch }) => {
     dlAnchor.click();
   };
 
-  const printAsPdf = () => {
-    panZoomRef.current.autoCenter(1);
-    panZoomRef.current.reset();
-
-    setTimeout(() => {
-      html2canvas(pageRef.current, {
-        scale: 5,
-        useCORS: true,
-        allowTaint: true,
-      }).then(canvas => {
-        const image = canvas.toDataURL('image/jpeg', 1.0);
-        const doc = new jsPDF('p', 'mm', 'a4');
-        const pageWidth = doc.internal.pageSize.getWidth();
-        const pageHeight = doc.internal.pageSize.getHeight();
-
-        const widthRatio = pageWidth / canvas.width;
-        const heightRatio = pageHeight / canvas.height;
-        const ratio = widthRatio > heightRatio ? heightRatio : widthRatio;
-
-        const canvasWidth = canvas.width * ratio;
-        const canvasHeight = canvas.height * ratio;
-
-        const marginX = (pageWidth - canvasWidth) / 2;
-        const marginY = (pageHeight - canvasHeight) / 2;
-
-        panZoomRef.current.autoCenter(0.7);
-
-        doc.addImage(image, 'JPEG', marginX, marginY, canvasWidth, canvasHeight, null, 'SLOW');
-        doc.save(`RxResume_${Date.now()}.pdf`);
-      });
-    }, 250);
-  };
-
   const loadDemoData = () => {
     dispatch({ type: 'load_demo_data' });
     dispatch({ type: 'save_data' });
@@ -114,39 +79,19 @@ const ActionsTab = ({ data, theme, dispatch }) => {
       <hr className="my-6" />
 
       <div className="shadow text-center p-5">
-        <h6 className="font-bold text-sm mb-2">{t('actions.printResume.heading')}</h6>
+        <h6 className="font-bold text-sm mb-2">{t('actions.downloadResume.heading')}</h6>
+        <div className="text-sm">{t('actions.downloadResume.body')}</div>
 
-        <div className="text-sm">
+        <button
-          <Trans t={t} i18nKey="actions.printResume.body">
+          type="button"
-            You can click on the button below to generate a PDF instantly. Alternatively, you can
+          onClick={() => saveAsPdf(pageRef, panZoomRef)}
-            also use <pre className="inline font-bold">Cmd/Ctrl + P</pre> but it would have
+          className="mt-4 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium py-2 px-5 rounded"
-            different effects.
+        >
-          </Trans>
+          <div className="flex justify-center items-center">
-        </div>
+            <i className="material-icons mr-2 font-bold text-base">save</i>
-
+            <span className="text-sm">{t('actions.downloadResume.buttons.saveAsPdf')}</span>
-        <div className="mt-1 grid grid-cols-2 col-gap-6">
+          </div>
-          <button
+        </button>
-            type="button"
-            onClick={printAsPdf}
-            className="mt-4 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium py-2 px-5 rounded"
-          >
-            <div className="flex justify-center items-center">
-              <i className="material-icons mr-2 font-bold text-base">import_export</i>
-              <span className="text-sm">{t('actions.printResume.buttons.export')}</span>
-            </div>
-          </button>
-
-          <button
-            type="button"
-            onClick={printAsPdf}
-            className="mt-4 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium py-2 px-5 rounded"
-          >
-            <div className="flex justify-center items-center">
-              <i className="material-icons mr-2 font-bold text-base">print</i>
-              <span className="text-sm">{t('actions.printResume.buttons.print')}</span>
-            </div>
-          </button>
-        </div>
       </div>
 
       <hr className="my-6" />

src/i18n/source/rightSidebar/actions.json

@@ -9,12 +9,11 @@
       "export": "Export"
     }
   },
-  "printResume": {
+  "downloadResume": {
-    "heading": "Print Your Resume",
+    "heading": "Download Resume",
-    "body": "You can click on the button below to generate a PDF instantly. Alternatively, you can also use <1>Cmd/Ctrl + P</1> but it would have different effects.",
+    "body": "You can click on the button below to download a PDF version of your resume instantly. For best results, please use the latest version of Google Chrome.",
     "buttons": {
-      "export": "Export",
+      "saveAsPdf": "Save as PDF"
-      "print": "Print"
     }
   },
   "loadDemoData": {

src/shared/PageController.js

@@ -1,9 +1,10 @@
 import React, { useContext } from 'react';
 import PageContext from '../context/PageContext';
+import { saveAsPdf } from '../utils';
 
 const PageController = () => {
   const pageContext = useContext(PageContext);
-  const { panZoomRef } = pageContext;
+  const { pageRef, panZoomRef } = pageContext;
 
   const zoomIn = () => panZoomRef.current.zoomIn(2);
   const zoomOut = () => panZoomRef.current.zoomOut(2);
@@ -29,15 +30,23 @@ const PageController = () => {
 
         <div className="text-gray-400 p-3">|</div>
 
-        <div className="p-3 hover:bg-gray-200 cursor-pointer flex">
+        <div
+          className="p-3 hover:bg-gray-200 cursor-pointer flex"
+          onClick={() => saveAsPdf(pageRef, panZoomRef)}
+        >
           <i className="material-icons">save</i>
         </div>
 
         <div className="text-gray-400 p-3">|</div>
 
-        <div className="p-3 hover:bg-gray-200 cursor-pointer flex">
+        <a
+          className="p-3 hover:bg-gray-200 cursor-pointer flex"
+          href="https://docs.rxresu.me/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           <i className="material-icons">help_outline</i>
-        </div>
+        </a>
       </div>
     </div>
   );

src/templates/gengar/Gengar.js

@@ -117,7 +117,7 @@ const Gengar = () => {
     <div key={x.title} className="mb-3">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
-      <ReactMarkdown className="mt-2 text-sm break-words" source={x.description} />
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
     </div>
   );
 

src/utils/index.js

@@ -1,3 +1,7 @@
+/* eslint-disable new-cap */
+import html2canvas from 'html2canvas';
+import * as jsPDF from 'jspdf';
+
 const move = (array, element, delta) => {
   const index = array.indexOf(element);
   const newIndex = index + delta;
@@ -94,13 +98,45 @@ const importJson = (event, dispatch) => {
   const fr = new FileReader();
   fr.addEventListener('load', () => {
     const importedObject = JSON.parse(fr.result);
-    console.log(importedObject);
     dispatch({ type: 'import_data', payload: importedObject });
     dispatch({ type: 'save_data' });
   });
   fr.readAsText(event.target.files[0]);
 };
 
+const saveAsPdf = (pageRef, panZoomRef) => {
+  panZoomRef.current.autoCenter(1);
+  panZoomRef.current.reset();
+
+  setTimeout(() => {
+    html2canvas(pageRef.current, {
+      scale: 5,
+      useCORS: true,
+      allowTaint: true,
+    }).then(canvas => {
+      const image = canvas.toDataURL('image/jpeg', 1.0);
+      const doc = new jsPDF('p', 'mm', 'a4');
+      const pageWidth = doc.internal.pageSize.getWidth();
+      const pageHeight = doc.internal.pageSize.getHeight();
+
+      const widthRatio = pageWidth / canvas.width;
+      const heightRatio = pageHeight / canvas.height;
+      const ratio = widthRatio > heightRatio ? heightRatio : widthRatio;
+
+      const canvasWidth = canvas.width * ratio;
+      const canvasHeight = canvas.height * ratio;
+
+      const marginX = (pageWidth - canvasWidth) / 2;
+      const marginY = (pageHeight - canvasHeight) / 2;
+
+      panZoomRef.current.autoCenter(0.7);
+
+      doc.addImage(image, 'JPEG', marginX, marginY, canvasWidth, canvasHeight, null, 'SLOW');
+      doc.save(`RxResume_${Date.now()}.pdf`);
+    });
+  }, 250);
+};
+
 export {
   move,
   hexToRgb,
@@ -111,4 +147,5 @@ export {
   moveItemUp,
   moveItemDown,
   importJson,
+  saveAsPdf,
 };