- implement actions section

src/modals/AuthModal.js

@@ -39,23 +39,25 @@ const AuthModal = () => {
 
   const loggedInAction = (
     <>
-      <Button outline className="mr-8" title="Logout" onClick={logout} />
-      <Button title="Go to App" onClick={handleGotoApp} />
+      <Button outline className="mr-8" onClick={logout}>
+        Logout
+      </Button>
+      <Button title="" onClick={handleGotoApp}>
+        Go to App
+      </Button>
     </>
   );
 
   const loggedOutAction = (
-    <Button
-      isLoading={isLoading}
-      title="Sign in with Google"
-      onClick={handleSignInWithGoogle}
-    />
+    <Button isLoading={isLoading} onClick={handleSignInWithGoogle}>
+      Sign in with Google
+    </Button>
   );
 
   return (
     <BaseModal
-      state={[open, setOpen]}
       title={getTitle()}
+      state={[open, setOpen]}
       action={user ? loggedInAction : loggedOutAction}
     >
       <p>{getMessage()}</p>

src/modals/BaseModal.js

@@ -9,7 +9,7 @@ import { handleKeyUp } from '../utils';
 import styles from './BaseModal.module.css';
 
 const BaseModal = forwardRef(
-  ({ title, state, children, action, onDestroy }, ref) => {
+  ({ title, state, children, action, hideActions = false, onDestroy }, ref) => {
     const [open, setOpen] = state;
 
     const handleClose = () => {
@@ -44,16 +44,15 @@ const BaseModal = forwardRef(
 
             <div className={styles.body}>{children}</div>
 
-            <div className={styles.actions}>
-              <Button
-                outline
-                title="Cancel"
-                className="mr-8"
-                onClick={handleClose}
-              />
+            {!hideActions && (
+              <div className={styles.actions}>
+                <Button outline className="mr-8" onClick={handleClose}>
+                  Cancel
+                </Button>
 
-              {action}
-            </div>
+                {action}
+              </div>
+            )}
           </div>
         </Fade>
       </Modal>

src/modals/DataModal.js

@@ -79,7 +79,9 @@ const DataModal = ({
     : title.create;
 
   const submitAction = (
-    <Button type="submit" title={getTitle} onClick={() => onSubmit(values)} />
+    <Button type="submit" onClick={() => onSubmit(values)}>
+      {getTitle}
+    </Button>
   );
 
   const onDestroy = () => {

src/modals/ModalRegistrar.js

@@ -5,6 +5,7 @@ import AwardModal from './sections/AwardModal';
 import CertificateModal from './sections/CertificateModal';
 import EducationModal from './sections/EducationModal';
 import HobbyModal from './sections/HobbyModal';
+import ImportModal from './sections/ImportModal';
 import LanguageModal from './sections/LanguageModal';
 import ReferenceModal from './sections/ReferenceModal';
 import SkillModal from './sections/SkillModal';
@@ -25,6 +26,7 @@ const ModalRegistrar = () => {
       <HobbyModal />
       <LanguageModal />
       <ReferenceModal />
+      <ImportModal />
     </>
   );
 };

src/modals/sections/ImportModal.js

@@ -0,0 +1,95 @@
+import React, { memo, useContext, useEffect, useState, useRef } from 'react';
+import { Tooltip } from '@material-ui/core';
+import ModalContext from '../../contexts/ModalContext';
+import BaseModal from '../BaseModal';
+import Button from '../../components/shared/Button';
+import { useDispatch } from '../../contexts/ResumeContext';
+
+const ImportModal = () => {
+  const fileInputRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const dispatch = useDispatch();
+
+  const { emitter, events } = useContext(ModalContext);
+
+  useEffect(() => {
+    const unbind = emitter.on(events.IMPORT_MODAL, () => setOpen(true));
+
+    return () => unbind();
+  }, [emitter, events]);
+
+  const importReactiveResumeJson = (event) => {
+    const fr = new FileReader();
+    fr.addEventListener('load', () => {
+      const payload = JSON.parse(fr.result);
+      dispatch({ type: 'on_import', payload });
+      setOpen(false);
+    });
+    fr.readAsText(event.target.files[0]);
+  };
+
+  return (
+    <BaseModal hideActions state={[open, setOpen]} title="Import Data">
+      <div>
+        <h5 className="text-xl font-semibold mb-4">
+          Import from Reactive Resume
+        </h5>
+
+        <p>
+          Reactive Resume has it&apos;s own schema format to make the most of
+          all the customizable capabilities it has to offer. If you&apos;d like
+          to import a backup of your resume made with this app, just upload the
+          file using the button below.
+        </p>
+
+        <Button className="mt-5" onClick={() => fileInputRef.current.click()}>
+          Select File
+        </Button>
+        <input
+          ref={fileInputRef}
+          type="file"
+          className="hidden"
+          onChange={importReactiveResumeJson}
+        />
+      </div>
+
+      <hr className="my-8" />
+
+      <div>
+        <h5 className="text-xl font-semibold mb-4">Import from JSON Resume</h5>
+
+        <p>
+          <a href="https://jsonresume.org/">JSON Resume</a> is an open standard
+          for resume schema structure. If you are one of the many enthusiasts
+          who have their resume ready in this format, all it takes it just one
+          click to get started with Reactive Resume.
+        </p>
+
+        <Tooltip title="Coming Soon" placement="right" arrow>
+          <div className="mt-5 inline-block">
+            <Button className="opacity-50">Select File</Button>
+          </div>
+        </Tooltip>
+      </div>
+
+      <hr className="my-8" />
+
+      <div>
+        <h5 className="text-xl font-semibold mb-4">Import from LinkedIn</h5>
+
+        <p>
+          You can import a JSON that was exported from Reactive Resume by
+          clicking on the button below and selecting the appropriate file.
+        </p>
+
+        <Tooltip title="Coming Soon" placement="right" arrow>
+          <div className="mt-5 inline-block">
+            <Button className="opacity-50">Select File</Button>
+          </div>
+        </Tooltip>
+      </div>
+    </BaseModal>
+  );
+};
+
+export default memo(ImportModal);