diff --git a/public/index.html b/public/index.html index 5f920e8c..1533915c 100644 --- a/public/index.html +++ b/public/index.html @@ -5,7 +5,7 @@ + content="width=device-width, initial-scale=.5, maximum-scale=5.0, minimum-scale=.25, user-scalable=yes" /> diff --git a/src/components/App/App.js b/src/components/App/App.js index c0602236..6fea70b8 100644 --- a/src/components/App/App.js +++ b/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 (
diff --git a/src/components/LeftSidebar/LeftSidebar.js b/src/components/LeftSidebar/LeftSidebar.js index aafacc24..e6498664 100644 --- a/src/components/LeftSidebar/LeftSidebar.js +++ b/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) { diff --git a/src/components/RightSidebar/RightSidebar.js b/src/components/RightSidebar/RightSidebar.js index fdd6f83f..4b1ef163 100644 --- a/src/components/RightSidebar/RightSidebar.js +++ b/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': diff --git a/src/components/RightSidebar/tabs/Actions.js b/src/components/RightSidebar/tabs/Actions.js index 4d2fce68..6f06526e 100644 --- a/src/components/RightSidebar/tabs/Actions.js +++ b/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 }) => {
+ +
+ +

+ Reactive Resume is a project by{' '} + + Amruth Pillai + {' '} + in hopes of allowing anyone to make beautiful resumes and get equal job opportunities. +
+
+ Thank you for using Reactive Resume! +

); }; diff --git a/src/context/AppContext.js b/src/context/AppContext.js index 3f751c4d..05ee2379 100644 --- a/src/context/AppContext.js +++ b/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, diff --git a/src/index.js b/src/index.js index 8508418a..6e8acfcf 100644 --- a/src/index.js +++ b/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(