diff --git a/package-lock.json b/package-lock.json index ab5d7d213..d7b03a92e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5544,9 +5544,9 @@ } }, "eslint-plugin-react-hooks": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-2.5.1.tgz", - "integrity": "sha512-Y2c4b55R+6ZzwtTppKwSmK/Kar8AdLiC2f9NADCuxbcTgPPg41Gyqa6b9GppgXSvCtkRw43ZE86CT5sejKC6/g==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-3.0.0.tgz", + "integrity": "sha512-EjxTHxjLKIBWFgDJdhKKzLh5q+vjTFrqNZX36uIxWS4OfyXe5DawqPj3U5qeJ1ngLwatjzQnmR0Lz0J0YH3kxw==", "dev": true }, "eslint-scope": { diff --git a/package.json b/package.json index 50a6b5180..667aecf82 100644 --- a/package.json +++ b/package.json @@ -52,8 +52,8 @@ "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-prettier": "^3.1.2", "eslint-plugin-react": "^7.19.0", - "eslint-plugin-react-hooks": "^2.5.1", + "eslint-plugin-react-hooks": "^3.0.0", "postcss-cli": "^7.1.0", "tailwindcss": "^1.2.0" } -} \ No newline at end of file +} diff --git a/public/index.html b/public/index.html index 31b9c7784..f791a688b 100644 --- a/public/index.html +++ b/public/index.html @@ -25,9 +25,13 @@ Reactive Resume + + + + diff --git a/src/components/App/App.js b/src/components/App/App.js index dc387d649..ceea9cdd3 100644 --- a/src/components/App/App.js +++ b/src/components/App/App.js @@ -38,7 +38,11 @@ const App = () => {
-
+
{renderTemplate()}
diff --git a/src/components/LeftSidebar/LeftSidebar.js b/src/components/LeftSidebar/LeftSidebar.js index e64986642..16e08f311 100644 --- a/src/components/LeftSidebar/LeftSidebar.js +++ b/src/components/LeftSidebar/LeftSidebar.js @@ -10,6 +10,8 @@ import AwardsTab from './tabs/Awards'; import CertificationsTab from './tabs/Certifications'; import SkillsTab from './tabs/Skills'; import ExtrasTab from './tabs/Extras'; +import LanguagesTab from './tabs/Languages'; +import ReferencesTab from './tabs/References'; const tabs = [ 'Profile', @@ -19,6 +21,8 @@ const tabs = [ 'Awards', 'Certifications', 'Skills', + 'Languages', + 'References', 'Extras', ]; @@ -56,6 +60,10 @@ const LeftSidebar = () => { return ; case 'Skills': return ; + case 'Languages': + return ; + case 'References': + return ; case 'Extras': return ; default: @@ -66,7 +74,7 @@ const LeftSidebar = () => { return ( +
+ ); +}; + +const Item = ({ item, index, onChange, dispatch, first, last }) => { + const [isOpen, setOpen] = useState(false); + const identifier = `data.languages.items[${index}]`; + + return ( +
+
setOpen(!isOpen)} + > +
{item.key}
+ {isOpen ? 'expand_less' : 'expand_more'} +
+ +
+ onChange(`${identifier}.key`, v)} + /> + + item.value > 1 && onChange(`${identifier}.value`, item.value - 1)} + onIncrement={() => item.value < 5 && onChange(`${identifier}.value`, item.value + 1)} + /> + +
+ + +
+ {!first && ( + + )} + + {!last && ( + + )} +
+
+
+
+ ); +}; + +export default LanguagesTab; diff --git a/src/components/LeftSidebar/tabs/References.js b/src/components/LeftSidebar/tabs/References.js new file mode 100644 index 000000000..ec1749e20 --- /dev/null +++ b/src/components/LeftSidebar/tabs/References.js @@ -0,0 +1,268 @@ +import React, { useState, useEffect, useContext } from 'react'; +import { v4 as uuidv4 } from 'uuid'; +import set from 'lodash/set'; + +import TextField from '../../../shared/TextField'; +import TextArea from '../../../shared/TextArea'; +import AppContext from '../../../context/AppContext'; +import Checkbox from '../../../shared/Checkbox'; +import { addItem, deleteItem, moveItemUp, moveItemDown } from '../../../utils'; + +const ReferencesTab = ({ data, onChange }) => { + const context = useContext(AppContext); + const { dispatch } = context; + + useEffect(() => { + if (!('references' in data)) { + dispatch({ + type: 'migrate_section', + payload: { + key: 'references', + value: { + enable: false, + heading: 'References', + items: [], + }, + }, + }); + + dispatch({ type: 'save_data' }); + } + }, [data, dispatch]); + + return ( + 'references' in data && ( + <> +
+
+ onChange('data.references.enable', v)} + /> +
+
+ onChange('data.references.heading', v)} + /> +
+
+ +
+ + {data.references.items.map((x, index) => ( + + ))} + + + + ) + ); +}; + +const AddItem = ({ dispatch }) => { + const [isOpen, setOpen] = useState(false); + const [item, setItem] = useState({ + id: uuidv4(), + name: '', + position: '', + phone: '', + email: '', + description: '', + }); + + const onChange = (key, value) => setItem(set({ ...item }, key, value)); + + const onSubmit = () => { + if (item.name === '' || item.position === '') return; + + addItem(dispatch, 'references', item); + + setItem({ + id: uuidv4(), + name: '', + position: '', + phone: '', + email: '', + description: '', + }); + + setOpen(false); + }; + + return ( +
+
setOpen(!isOpen)} + > +
Add Reference
+ {isOpen ? 'expand_less' : 'expand_more'} +
+ +
+ onChange('name', v)} + /> + + onChange('position', v)} + /> + + onChange('phone', v)} + /> + + onChange('email', v)} + /> + +