90% completed, only final touches left

2025-11-17 02:01:29 +10:00 · 2020-03-25 16:08:42 +05:30
parent 36800a944e
commit d5dcd38edb
21 changed files with 462 additions and 24 deletions
--- a/src/components/RightSidebar/tabs/Actions.js
+++ b/src/components/RightSidebar/tabs/Actions.js
@ -0,0 +1,124 @@
+/* eslint-disable jsx-a11y/anchor-has-content */
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, { useRef } from 'react';
+
+const ActionsTab = ({ data, theme, dispatch }) => {
+  const fileInputRef = useRef(null);
+
+  const importJson = event => {
+    const fr = new FileReader();
+    fr.addEventListener('load', () => {
+      const importedObject = JSON.parse(fr.result);
+      dispatch({ type: 'import_data', payload: importedObject });
+    });
+    fr.readAsText(event.target.files[0]);
+  };
+
+  const exportToJson = () => {
+    const backupObj = { data, theme };
+    const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(backupObj))}`;
+    const dlAnchor = document.getElementById('downloadAnchor');
+    dlAnchor.setAttribute('href', dataStr);
+    dlAnchor.setAttribute('download', `RxResumeBackup_${Date.now()}.json`);
+    dlAnchor.click();
+  };
+
+  const resetEverything = () => {
+    dispatch({ type: 'reset' });
+  };
+
+  return (
+    <div>
+      <div className="shadow text-center text-sm p-5">
+        Changes you make to your resume are saved automatically to your browser&apos;s local
+        storage. No data gets out, hence your information is completely secure.
+      </div>
+
+      <hr className="my-6" />
+
+      <div className="shadow text-center p-5">
+        <h6 className="font-bold text-sm mb-2">Import/Export</h6>
+
+        <p className="text-sm">
+          You can import or export your data in JSON format. With this, you can edit and print your
+          resume from any device. Save this file for later use.
+        </p>
+
+        <input ref={fileInputRef} type="file" className="hidden" onChange={importJson} />
+        <a id="downloadAnchor" className="hidden" />
+
+        <div className="mt-4 grid grid-cols-2 col-gap-6">
+          <button
+            type="button"
+            onClick={() => fileInputRef.current.click()}
+            className="bg-gray-600 hover:bg-gray-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">publish</i>
+              <span className="text-sm">Import</span>
+            </div>
+          </button>
+
+          <button
+            type="button"
+            onClick={exportToJson}
+            className="bg-gray-600 hover:bg-gray-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">get_app</i>
+              <span className="text-sm">Export</span>
+            </div>
+          </button>
+        </div>
+      </div>
+
+      <hr className="my-6" />
+
+      <div className="shadow text-center p-5">
+        <h6 className="font-bold text-sm mb-2">Print Your Resume</h6>
+
+        <div className="text-sm">
+          You can simply press <pre className="inline font-bold">Cmd/Ctrl + P</pre> at any time
+          while you&apos;re in the app to print your resume, but here&apos;s a fancy button to do
+          the same thing, just &apos;cause.
+        </div>
+
+        <button
+          type="button"
+          onClick={() => window.print()}
+          className="mt-4 w-1/2 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">Print</span>
+          </div>
+        </button>
+      </div>
+
+      <hr className="my-6" />
+
+      <div className="shadow text-center p-5">
+        <h6 className="font-bold text-sm mb-2">Reset Everything!</h6>
+
+        <div className="text-sm">
+          This action will reset all your data and remove backups made to your browser&apos;s local
+          storage as well, so please make sure you have exported your information before you reset
+          everything.
+        </div>
+
+        <button
+          type="button"
+          onClick={resetEverything}
+          className="mt-4 w-1/2 bg-red-600 hover:bg-red-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">refresh</i>
+            <span className="text-sm">Reset</span>
+          </div>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ActionsTab;