completed project, base structure to create more templates

public/index.html

@@ -5,7 +5,7 @@
   <meta charset="utf-8" />
   <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
   <meta name="viewport"
-    content="width=device-width, initial-scale=.5, maximum-scale=12.0, minimum-scale=.25, user-scalable=yes" />
+    content="width=device-width, initial-scale=.5, maximum-scale=5.0, minimum-scale=.25, user-scalable=yes" />
   <meta name="theme-color" content="#000000" />
   <meta name="description"
     content="The resume generator you've been waiting for. Completely private, secure and customizable. Pick a layout, pick colors, enter your information and voila!" />

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>
   );
 };

src/context/AppContext.js

@@ -96,6 +96,9 @@ const reducer = (state, { type, payload }) => {
       return set({ ...state }, `data.${payload.key}.items`, items);
     case 'on_input':
       return set({ ...state }, payload.key, payload.value);
+    case 'save_data':
+      localStorage.setItem('state', JSON.stringify(state));
+      return state;
     case 'import_data':
       return {
         ...state,

src/index.js

@@ -1,12 +1,22 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 import './assets/tailwind/tailwind.css';
-import * as serviceWorker from './serviceWorker';
 import './index.css';
+
+import * as serviceWorker from './serviceWorker';
 import { AppProvider } from './context/AppContext';
 import App from './components/App/App';
 
+toast.configure({
+  autoClose: 3000,
+  closeButton: false,
+  hideProgressBar: true,
+  position: toast.POSITION.BOTTOM_RIGHT,
+});
+
 ReactDOM.render(
   <React.StrictMode>
     <AppProvider>