- implement actions section

src/components/builder/right/sections/Actions.js

@@ -1,25 +1,52 @@
-import React, { memo } from 'react';
+import React, { memo, useContext } from 'react';
 import { MdImportExport } from 'react-icons/md';
+import { clone } from 'lodash';
 import Heading from '../../../shared/Heading';
 import Button from '../../../shared/Button';
 import styles from './Actions.module.css';
 import Input from '../../../shared/Input';
+import ModalContext from '../../../../contexts/ModalContext';
+import { useSelector } from '../../../../contexts/ResumeContext';
 
 const Actions = () => {
+  const state = useSelector();
+  const { emitter, events } = useContext(ModalContext);
+
+  const handleImport = () => emitter.emit(events.IMPORT_MODAL);
+
+  const handleExportToJson = () => {
+    const backupObj = clone(state);
+    delete backupObj.id;
+    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}.json`);
+    dlAnchor.click();
+  };
+
+  const getSharableUrl = () => {
+    const shareId = state.id.split('-')[0];
+    return `https://rxresu.me/r/${shareId}`;
+  };
+
   return (
     <section>
       <Heading>Actions</Heading>
 
       <div className={styles.container}>
-        <h5>Import from Other Sources</h5>
+        <h5>Import Your Resume</h5>
 
         <p>
           You can import your information from various sources like JSON Resume
-          or your LinkedIn profile to autofill most of the data for your resume.
+          or your LinkedIn to autofill most of the data for your resume.
         </p>
 
         <div className="mt-4 flex">
-          <Button icon={MdImportExport} title="Import" />
+          <Button icon={MdImportExport} onClick={handleImport}>
+            Import
+          </Button>
         </div>
       </div>
 
@@ -32,21 +59,27 @@ const Actions = () => {
         </p>
 
         <div className="mt-4 flex">
-          <Button title="Save as PDF" />
-          <Button outline title="Export as JSON" className="ml-6" />
+          <Button>Save as PDF</Button>
+          <Button outline className="ml-6" onClick={handleExportToJson}>
+            Export as JSON
+          </Button>
         </div>
+
+        <a id="downloadAnchor" className="hidden">
+          Download Exported JSON
+        </a>
       </div>
 
       <div className={styles.container}>
         <h5>Share Your Resume</h5>
 
         <p>
-          The link below will be accessible publicly if you choose, and you can
-          share the latest version of your resume to anyone in the world.
+          The link below will be accessible publicly if you choose to share it,
+          and viewers would see the latest version of your resume at any time.
         </p>
 
         <div>
-          <Input type="action" value="https://google.com" onClick={() => {}} />
+          <Input type="action" value={getSharableUrl()} onClick={() => {}} />
         </div>
       </div>
 
@@ -59,7 +92,7 @@ const Actions = () => {
         </p>
 
         <div className="mt-4 flex">
-          <Button title="Load Demo Data" />
+          <Button>Load Demo Data</Button>
         </div>
       </div>
 
@@ -73,7 +106,7 @@ const Actions = () => {
         </p>
 
         <div className="mt-4 flex">
-          <Button title="Delete Account" />
+          <Button isDelete>Delete Account</Button>
         </div>
       </div>
     </section>

src/components/builder/right/sections/Colors.js

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/control-has-associated-label */
 import React, { memo } from 'react';
 import { useDispatch } from '../../../../contexts/ResumeContext';
-import colors from '../../../../data/colors';
+import colorOptions from '../../../../data/colorOptions';
 import { handleKeyUp } from '../../../../utils';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
@@ -25,7 +25,7 @@ const Colors = () => {
       <Heading>Colors</Heading>
 
       <div className="mb-6 grid grid-cols-8 col-gap-2 row-gap-6">
-        {colors.map((color) => (
+        {colorOptions.map((color) => (
           <div
             key={color}
             tabIndex="0"

src/components/builder/right/sections/Fonts.js

@@ -1,7 +1,7 @@
 import cx from 'classnames';
 import React, { memo } from 'react';
 import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
-import fonts from '../../../../data/fonts';
+import fontOptions from '../../../../data/fontOptions';
 import { handleKeyUp } from '../../../../utils';
 import Heading from '../../../shared/Heading';
 import styles from './Fonts.module.css';
@@ -25,7 +25,7 @@ const Fonts = () => {
       <Heading>Fonts</Heading>
 
       <div className="grid grid-cols-2 gap-8">
-        {fonts.map((x) => (
+        {fontOptions.map((x) => (
           <div
             key={x}
             tabIndex="0"

src/components/builder/right/sections/Templates.js

@@ -1,7 +1,7 @@
 import cx from 'classnames';
 import React, { memo, useContext } from 'react';
 import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
-import templates from '../../../../data/templates';
+import templateOptions from '../../../../data/templateOptions';
 import { handleKeyUp } from '../../../../utils';
 import Heading from '../../../shared/Heading';
 import styles from './Templates.module.css';
@@ -28,7 +28,7 @@ const Templates = () => {
       <Heading>Templates</Heading>
 
       <div className="grid grid-cols-2 gap-8">
-        {templates.map((x) => (
+        {templateOptions.map((x) => (
           <div
             key={x.id}
             tabIndex="0"