- implement actions section

- implement settings section

src/modals/ModalRegistrar.js

@@ -4,6 +4,7 @@ import ResumeModal from './ResumeModal';
 import AwardModal from './sections/AwardModal';
 import CertificateModal from './sections/CertificateModal';
 import EducationModal from './sections/EducationModal';
+import ExportModal from './sections/ExportModal';
 import HobbyModal from './sections/HobbyModal';
 import ImportModal from './sections/ImportModal';
 import LanguageModal from './sections/LanguageModal';
@@ -29,6 +30,7 @@ const ModalRegistrar = () => {
       <LanguageModal />
       <ReferenceModal />
       <ImportModal />
+      <ExportModal />
     </>
   );
 };

src/modals/sections/ExportModal.js

@@ -0,0 +1,106 @@
+import { clone } from 'lodash';
+import React, { memo, useContext, useEffect, useState } from 'react';
+import Button from '../../components/shared/Button';
+import ModalContext from '../../contexts/ModalContext';
+import { useSelector } from '../../contexts/ResumeContext';
+import BaseModal from '../BaseModal';
+
+const ExportModal = () => {
+  const state = useSelector();
+  const [open, setOpen] = useState(false);
+
+  const { emitter, events } = useContext(ModalContext);
+
+  useEffect(() => {
+    const unbind = emitter.on(events.EXPORT_MODAL, () => setOpen(true));
+
+    return () => unbind();
+  }, [emitter, events]);
+
+  const handleOpenPrintDialog = () => {
+    if (typeof window !== `undefined`) {
+      window && window.print();
+    }
+  };
+
+  const handleExportToJson = () => {
+    const backupObj = clone(state);
+    delete backupObj.id;
+    delete backupObj.user;
+    delete backupObj.name;
+    delete backupObj.createdAt;
+    delete backupObj.updatedAt;
+    const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent(
+      JSON.stringify(backupObj),
+    )}`;
+    const dlAnchor = document.getElementById('downloadAnchor');
+    dlAnchor.setAttribute('href', dataStr);
+    dlAnchor.setAttribute(
+      'download',
+      `RxResume_${state.id}_${Date.now()}.json`,
+    );
+    dlAnchor.click();
+  };
+
+  return (
+    <BaseModal hideActions state={[open, setOpen]} title="Export Your Resume">
+      <div>
+        <h5 className="text-xl font-semibold mb-4">
+          Use Browser&apos;s Print Dialog
+        </h5>
+
+        <p className="leading-loose">
+          For those of you who want a quick solution, you need not look any
+          further than your browser. All you have to do is press Ctrl/Cmd + P
+          and open up the print dialog on your browser and get your resume
+          printed immediately.
+        </p>
+
+        <Button className="mt-5" onClick={handleOpenPrintDialog}>
+          Open Print Dialog
+        </Button>
+      </div>
+
+      <hr className="my-8" />
+
+      <div>
+        <h5 className="text-xl font-semibold mb-4">Download PDF</h5>
+
+        <p className="leading-loose">
+          These options allow you to print a single page, unconstrained version
+          of your resume, perfect for those who have a lot of content.
+          Alternatively, you could download a multi-page version of your resume
+          as well with just one click.
+        </p>
+
+        <div className="mt-5">
+          <div className="flex">
+            <Button>Single Page Resume</Button>
+            <Button className="ml-8">Multi Page Resume</Button>
+          </div>
+        </div>
+      </div>
+
+      <hr className="my-8" />
+
+      <div>
+        <h5 className="text-xl font-semibold mb-4">Export to JSON Format</h5>
+
+        <p className="leading-loose">
+          You can also export your data into JSON format for safe keeping so
+          that you can easily import it back into Reactive Resume whenever you
+          want to edit or generate a resume.
+        </p>
+
+        <div className="mt-5">
+          <Button onClick={handleExportToJson}>Export JSON</Button>
+          <a id="downloadAnchor" className="hidden">
+            Export JSON
+          </a>
+        </div>
+      </div>
+    </BaseModal>
+  );
+};
+
+export default memo(ExportModal);

src/modals/sections/ImportModal.js

@@ -29,7 +29,7 @@ const ImportModal = () => {
   };
 
   return (
-    <BaseModal hideActions state={[open, setOpen]} title="Import Data">
+    <BaseModal hideActions state={[open, setOpen]} title="Import Your Resume">
       <div>
         <h5 className="text-xl font-semibold mb-4">
           Import from Reactive Resume