completed project, base structure to create more templates

src/components/App/App.js

@@ -1,20 +1,20 @@
 /* eslint-disable no-unused-vars */
-import React from 'react';
-import { toast } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
+import React, { useEffect, useContext } from 'react';
 
 import Onyx from '../../templates/onyx';
 import LeftSidebar from '../LeftSidebar/LeftSidebar';
 import RightSidebar from '../RightSidebar/RightSidebar';
-
-toast.configure({
-  autoClose: 3000,
-  closeButton: false,
-  hideProgressBar: true,
-  position: toast.POSITION.BOTTOM_RIGHT,
-});
+import AppContext from '../../context/AppContext';
 
 const App = () => {
+  const context = useContext(AppContext);
+  const { dispatch } = context;
+
+  useEffect(() => {
+    const state = JSON.parse(localStorage.getItem('state'));
+    dispatch({ type: 'import_data', payload: state });
+  }, [dispatch]);
+
   return (
     <div className="h-screen overflow-hidden grid grid-cols-5 items-center">
       <LeftSidebar />

src/components/LeftSidebar/LeftSidebar.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useContext } from 'react';
 
 import AppContext from '../../context/AppContext';
 import TabBar from '../../shared/TabBar';
@@ -28,7 +28,7 @@ const LeftSidebar = () => {
   const { data } = state;
 
   const [currentTab, setCurrentTab] = useState('Profile');
-  const onChange = (key, value) =>
+  const onChange = (key, value) => {
     dispatch({
       type: 'on_input',
       payload: {
@@ -37,10 +37,8 @@ const LeftSidebar = () => {
       },
     });
 
-  // TODO: Remove this in production environment
-  useEffect(() => {
-    dispatch({ type: 'populate_starter' });
-  }, [dispatch]);
+    dispatch({ type: 'save_data' });
+  };
 
   const renderTabs = () => {
     switch (currentTab) {

src/components/RightSidebar/RightSidebar.js

@@ -14,8 +14,8 @@ const RightSidebar = () => {
   const { state, dispatch } = context;
   const { data, theme } = state;
 
-  const [currentTab, setCurrentTab] = useState('Actions');
-  const onChange = (key, value) =>
+  const [currentTab, setCurrentTab] = useState('Layout');
+  const onChange = (key, value) => {
     dispatch({
       type: 'on_input',
       payload: {
@@ -24,6 +24,9 @@ const RightSidebar = () => {
       },
     });
 
+    dispatch({ type: 'save_data' });
+  };
+
   const renderTabs = () => {
     switch (currentTab) {
       case 'Layout':

src/components/RightSidebar/tabs/Actions.js

@@ -10,6 +10,7 @@ const ActionsTab = ({ data, theme, dispatch }) => {
     fr.addEventListener('load', () => {
       const importedObject = JSON.parse(fr.result);
       dispatch({ type: 'import_data', payload: importedObject });
+      dispatch({ type: 'save_data' });
     });
     fr.readAsText(event.target.files[0]);
   };
@@ -25,6 +26,7 @@ const ActionsTab = ({ data, theme, dispatch }) => {
 
   const resetEverything = () => {
     dispatch({ type: 'reset' });
+    dispatch({ type: 'save_data' });
   };
 
   return (
@@ -117,6 +119,24 @@ const ActionsTab = ({ data, theme, dispatch }) => {
           </div>
         </button>
       </div>
+
+      <hr className="my-6" />
+
+      <p className="text-xs font-gray-600 text-center">
+        Reactive Resume is a project by{' '}
+        <a
+          className="hover:underline"
+          href="https://www.amruthpillai.com/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <strong>Amruth Pillai</strong>
+        </a>{' '}
+        in hopes of allowing anyone to make beautiful resumes and get equal job opportunities.
+        <br />
+        <br />
+        Thank you for using Reactive Resume!
+      </p>
     </div>
   );
 };