mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2025-11-14 00:32:35 +10:00
more organization, added references and languages
This commit is contained in:
Amruth Pillai
@ -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',
|
||||
];
|
||||
|
||||
@ -27,7 +31,7 @@ const LeftSidebar = () => {
|
||||
const { state, dispatch } = context;
|
||||
const { data } = state;
|
||||
|
||||
const [currentTab, setCurrentTab] = useState('Profile');
|
||||
const [currentTab, setCurrentTab] = useState('Languages');
|
||||
const onChange = (key, value) => {
|
||||
dispatch({
|
||||
type: 'on_input',
|
||||
@ -56,6 +60,10 @@ const LeftSidebar = () => {
|
||||
return <CertificationsTab data={data} onChange={onChange} />;
|
||||
case 'Skills':
|
||||
return <SkillsTab data={data} onChange={onChange} />;
|
||||
case 'Languages':
|
||||
return <LanguagesTab data={data} onChange={onChange} />;
|
||||
case 'References':
|
||||
return <ReferencesTab data={data} onChange={onChange} />;
|
||||
case 'Extras':
|
||||
return <ExtrasTab data={data} onChange={onChange} />;
|
||||
default:
|
||||
|
||||
@ -6,6 +6,7 @@ import TextField from '../../../shared/TextField';
|
||||
import AppContext from '../../../context/AppContext';
|
||||
import Checkbox from '../../../shared/Checkbox';
|
||||
import TextArea from '../../../shared/TextArea';
|
||||
import { addItem, deleteItem, moveItemUp, moveItemDown } from '../../../utils';
|
||||
|
||||
const AwardsTab = ({ data, onChange }) => {
|
||||
const context = useContext(AppContext);
|
||||
@ -59,16 +60,10 @@ const AddItem = ({ dispatch }) => {
|
||||
|
||||
const onChange = (key, value) => setItem(set({ ...item }, key, value));
|
||||
|
||||
const addItem = () => {
|
||||
const onSubmit = () => {
|
||||
if (item.title === '') return;
|
||||
|
||||
dispatch({
|
||||
type: 'add_item',
|
||||
payload: {
|
||||
key: 'awards',
|
||||
value: item,
|
||||
},
|
||||
});
|
||||
addItem(dispatch, 'awards', item);
|
||||
|
||||
setItem({
|
||||
id: uuidv4(),
|
||||
@ -116,7 +111,7 @@ const AddItem = ({ dispatch }) => {
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={addItem}
|
||||
onClick={onSubmit}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
@ -133,33 +128,6 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
const identifier = `data.awards.items[${index}]`;
|
||||
|
||||
const deleteItem = () =>
|
||||
dispatch({
|
||||
type: 'delete_item',
|
||||
payload: {
|
||||
key: 'awards',
|
||||
value: item,
|
||||
},
|
||||
});
|
||||
|
||||
const moveItemUp = () =>
|
||||
dispatch({
|
||||
type: 'move_item_up',
|
||||
payload: {
|
||||
key: 'awards',
|
||||
value: item,
|
||||
},
|
||||
});
|
||||
|
||||
const moveItemDown = () =>
|
||||
dispatch({
|
||||
type: 'move_item_down',
|
||||
payload: {
|
||||
key: 'awards',
|
||||
value: item,
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="my-4 border border-gray-200 rounded p-5">
|
||||
<div
|
||||
@ -197,7 +165,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
<div className="flex justify-between">
|
||||
<button
|
||||
type="button"
|
||||
onClick={deleteItem}
|
||||
onClick={() => deleteItem(dispatch, 'awards', item)}
|
||||
className="bg-red-600 hover:bg-red-700 text-white text-sm font-medium py-2 px-5 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
@ -210,7 +178,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
{!first && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={moveItemUp}
|
||||
onClick={() => moveItemUp(dispatch, 'awards', item)}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded mr-2"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
@ -222,7 +190,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
{!last && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={moveItemDown}
|
||||
onClick={() => moveItemDown(dispatch, 'awards', item)}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
|
||||
@ -6,6 +6,7 @@ import TextField from '../../../shared/TextField';
|
||||
import AppContext from '../../../context/AppContext';
|
||||
import Checkbox from '../../../shared/Checkbox';
|
||||
import TextArea from '../../../shared/TextArea';
|
||||
import { addItem, deleteItem, moveItemUp, moveItemDown } from '../../../utils';
|
||||
|
||||
const CertificationsTab = ({ data, onChange }) => {
|
||||
const context = useContext(AppContext);
|
||||
@ -59,16 +60,10 @@ const AddItem = ({ dispatch }) => {
|
||||
|
||||
const onChange = (key, value) => setItem(set({ ...item }, key, value));
|
||||
|
||||
const addItem = () => {
|
||||
const onSubmit = () => {
|
||||
if (item.title === '') return;
|
||||
|
||||
dispatch({
|
||||
type: 'add_item',
|
||||
payload: {
|
||||
key: 'certifications',
|
||||
value: item,
|
||||
},
|
||||
});
|
||||
addItem(dispatch, 'certifications', item);
|
||||
|
||||
setItem({
|
||||
id: uuidv4(),
|
||||
@ -116,7 +111,7 @@ const AddItem = ({ dispatch }) => {
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={addItem}
|
||||
onClick={onSubmit}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
@ -133,33 +128,6 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
const identifier = `data.certifications.items[${index}]`;
|
||||
|
||||
const deleteItem = () =>
|
||||
dispatch({
|
||||
type: 'delete_item',
|
||||
payload: {
|
||||
key: 'certifications',
|
||||
value: item,
|
||||
},
|
||||
});
|
||||
|
||||
const moveItemUp = () =>
|
||||
dispatch({
|
||||
type: 'move_item_up',
|
||||
payload: {
|
||||
key: 'certifications',
|
||||
value: item,
|
||||
},
|
||||
});
|
||||
|
||||
const moveItemDown = () =>
|
||||
dispatch({
|
||||
type: 'move_item_down',
|
||||
payload: {
|
||||
key: 'certifications',
|
||||
value: item,
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="my-4 border border-gray-200 rounded p-5">
|
||||
<div
|
||||
@ -197,7 +165,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
<div className="flex justify-between">
|
||||
<button
|
||||
type="button"
|
||||
onClick={deleteItem}
|
||||
onClick={() => deleteItem(dispatch, 'certifications', item)}
|
||||
className="bg-red-600 hover:bg-red-700 text-white text-sm font-medium py-2 px-5 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
@ -210,7 +178,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
{!first && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={moveItemUp}
|
||||
onClick={() => moveItemUp(dispatch, 'certifications', item)}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded mr-2"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
@ -222,7 +190,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
{!last && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={moveItemDown}
|
||||
onClick={() => moveItemDown(dispatch, 'certifications', item)}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
|
||||
@ -6,6 +6,7 @@ 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 EducationTab = ({ data, onChange }) => {
|
||||
const context = useContext(AppContext);
|
||||
@ -62,16 +63,10 @@ const AddItem = ({ dispatch }) => {
|
||||
|
||||
const onChange = (key, value) => setItem(set({ ...item }, key, value));
|
||||
|
||||
const addItem = () => {
|
||||
const onSubmit = () => {
|
||||
if (item.name === '' || item.major === '') return;
|
||||
|
||||
dispatch({
|
||||
type: 'add_item',
|
||||
payload: {
|
||||
key: 'education',
|
||||
value: item,
|
||||
},
|
||||
});
|
||||
addItem(dispatch, 'education', item);
|
||||
|
||||
setItem({
|
||||
id: uuidv4(),
|
||||
@ -150,7 +145,7 @@ const AddItem = ({ dispatch }) => {
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={addItem}
|
||||
onClick={onSubmit}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
@ -167,33 +162,6 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
const identifier = `data.education.items[${index}]`;
|
||||
|
||||
const deleteItem = () =>
|
||||
dispatch({
|
||||
type: 'delete_item',
|
||||
payload: {
|
||||
key: 'education',
|
||||
value: item,
|
||||
},
|
||||
});
|
||||
|
||||
const moveItemUp = () =>
|
||||
dispatch({
|
||||
type: 'move_item_up',
|
||||
payload: {
|
||||
key: 'education',
|
||||
value: item,
|
||||
},
|
||||
});
|
||||
|
||||
const moveItemDown = () =>
|
||||
dispatch({
|
||||
type: 'move_item_down',
|
||||
payload: {
|
||||
key: 'education',
|
||||
value: item,
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="my-4 border border-gray-200 rounded p-5">
|
||||
<div
|
||||
@ -259,7 +227,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
<div className="flex justify-between">
|
||||
<button
|
||||
type="button"
|
||||
onClick={deleteItem}
|
||||
onClick={() => deleteItem(dispatch, 'education', item)}
|
||||
className="bg-red-600 hover:bg-red-700 text-white text-sm font-medium py-2 px-5 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
@ -272,7 +240,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
{!first && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={moveItemUp}
|
||||
onClick={() => moveItemUp(dispatch, 'education', item)}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded mr-2"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
@ -284,7 +252,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
{!last && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={moveItemDown}
|
||||
onClick={() => moveItemDown(dispatch, 'education', item)}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
|
||||
@ -5,6 +5,7 @@ import set from 'lodash/set';
|
||||
import TextField from '../../../shared/TextField';
|
||||
import AppContext from '../../../context/AppContext';
|
||||
import Checkbox from '../../../shared/Checkbox';
|
||||
import { addItem, deleteItem, moveItemUp, moveItemDown } from '../../../utils';
|
||||
|
||||
const ExtrasTab = ({ data, onChange }) => {
|
||||
const context = useContext(AppContext);
|
||||
@ -57,16 +58,10 @@ const AddItem = ({ dispatch }) => {
|
||||
|
||||
const onChange = (key, value) => setItem(items => set({ ...items }, key, value));
|
||||
|
||||
const addItem = () => {
|
||||
const onSubmit = () => {
|
||||
if (item.key === '' || item.value === '') return;
|
||||
|
||||
dispatch({
|
||||
type: 'add_item',
|
||||
payload: {
|
||||
key: 'extras',
|
||||
value: item,
|
||||
},
|
||||
});
|
||||
addItem(dispatch, 'extras', item);
|
||||
|
||||
setItem({
|
||||
id: uuidv4(),
|
||||
@ -106,7 +101,7 @@ const AddItem = ({ dispatch }) => {
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={addItem}
|
||||
onClick={onSubmit}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
@ -123,33 +118,6 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
const identifier = `data.extras.items[${index}]`;
|
||||
|
||||
const deleteItem = () =>
|
||||
dispatch({
|
||||
type: 'delete_item',
|
||||
payload: {
|
||||
key: 'extras',
|
||||
value: item,
|
||||
},
|
||||
});
|
||||
|
||||
const moveItemUp = () =>
|
||||
dispatch({
|
||||
type: 'move_item_up',
|
||||
payload: {
|
||||
key: 'extras',
|
||||
value: item,
|
||||
},
|
||||
});
|
||||
|
||||
const moveItemDown = () =>
|
||||
dispatch({
|
||||
type: 'move_item_down',
|
||||
payload: {
|
||||
key: 'extras',
|
||||
value: item,
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="my-4 border border-gray-200 rounded p-5">
|
||||
<div
|
||||
@ -180,7 +148,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
<div className="mt-6 flex justify-between">
|
||||
<button
|
||||
type="button"
|
||||
onClick={deleteItem}
|
||||
onClick={() => deleteItem(dispatch, 'extras', item)}
|
||||
className="bg-red-600 hover:bg-red-700 text-white text-sm font-medium py-2 px-5 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
@ -193,7 +161,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
{!first && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={moveItemUp}
|
||||
onClick={() => moveItemUp(dispatch, 'extras', item)}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded mr-2"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
@ -205,7 +173,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
{!last && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={moveItemDown}
|
||||
onClick={() => moveItemDown(dispatch, 'extras', item)}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
|
||||
212
src/components/LeftSidebar/tabs/Languages.js
Normal file
212
src/components/LeftSidebar/tabs/Languages.js
Normal file
@ -0,0 +1,212 @@
|
||||
import React, { useState, useEffect, useContext } from 'react';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import set from 'lodash/set';
|
||||
|
||||
import TextField from '../../../shared/TextField';
|
||||
import AppContext from '../../../context/AppContext';
|
||||
import Checkbox from '../../../shared/Checkbox';
|
||||
import Counter from '../../../shared/Counter';
|
||||
import { addItem, deleteItem, moveItemUp, moveItemDown } from '../../../utils';
|
||||
|
||||
const LanguagesTab = ({ data, onChange }) => {
|
||||
const context = useContext(AppContext);
|
||||
const { dispatch } = context;
|
||||
|
||||
useEffect(() => {
|
||||
if (!('languages' in data)) {
|
||||
dispatch({
|
||||
type: 'migrate_section',
|
||||
payload: {
|
||||
key: 'languages',
|
||||
value: {
|
||||
enable: false,
|
||||
heading: 'Languages',
|
||||
items: [],
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
dispatch({ type: 'save_data' });
|
||||
}
|
||||
}, [data, dispatch]);
|
||||
|
||||
return (
|
||||
'languages' in data && (
|
||||
<>
|
||||
<div className="mb-6 grid grid-cols-6 items-center">
|
||||
<div className="col-span-1">
|
||||
<Checkbox
|
||||
checked={data.languages.enable}
|
||||
onChange={v => onChange('data.languages.enable', v)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-5">
|
||||
<TextField
|
||||
placeholder="Heading"
|
||||
value={data.languages.heading}
|
||||
onChange={v => onChange('data.languages.heading', v)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr className="my-6" />
|
||||
|
||||
{data.languages.items.map((x, index) => (
|
||||
<Item
|
||||
item={x}
|
||||
key={x.id}
|
||||
index={index}
|
||||
onChange={onChange}
|
||||
dispatch={dispatch}
|
||||
first={index === 0}
|
||||
last={index === data.languages.items.length - 1}
|
||||
/>
|
||||
))}
|
||||
|
||||
<AddItem dispatch={dispatch} />
|
||||
</>
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const AddItem = ({ dispatch }) => {
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
const [item, setItem] = useState({
|
||||
id: uuidv4(),
|
||||
key: '',
|
||||
value: 1,
|
||||
});
|
||||
|
||||
const onChange = (key, value) => setItem(items => set({ ...items }, key, value));
|
||||
|
||||
const onSubmit = () => {
|
||||
if (item.key === '') return;
|
||||
|
||||
addItem(dispatch, 'languages', item);
|
||||
|
||||
setItem({
|
||||
id: uuidv4(),
|
||||
key: '',
|
||||
value: 1,
|
||||
});
|
||||
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="my-4 border border-gray-200 rounded p-5">
|
||||
<div
|
||||
className="flex justify-between items-center cursor-pointer"
|
||||
onClick={() => setOpen(!isOpen)}
|
||||
>
|
||||
<h6 className="text-sm font-medium">Add Language</h6>
|
||||
<i className="material-icons">{isOpen ? 'expand_less' : 'expand_more'}</i>
|
||||
</div>
|
||||
|
||||
<div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
|
||||
<TextField
|
||||
label="Key"
|
||||
className="mb-6"
|
||||
placeholder="Dothraki"
|
||||
value={item.key}
|
||||
onChange={v => onChange('key', v)}
|
||||
/>
|
||||
|
||||
<Counter
|
||||
label="Rating"
|
||||
className="mb-6"
|
||||
value={item.value}
|
||||
onDecrement={() => item.value > 1 && onChange('value', item.value - 1)}
|
||||
onIncrement={() => item.value < 5 && onChange('value', item.value + 1)}
|
||||
/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={onSubmit}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<i className="material-icons mr-2 font-bold text-base">add</i>
|
||||
<span className="text-sm">Add</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
const identifier = `data.languages.items[${index}]`;
|
||||
|
||||
return (
|
||||
<div className="my-4 border border-gray-200 rounded p-5">
|
||||
<div
|
||||
className="flex justify-between items-center cursor-pointer"
|
||||
onClick={() => setOpen(!isOpen)}
|
||||
>
|
||||
<h6 className="text-sm font-medium">{item.key}</h6>
|
||||
<i className="material-icons">{isOpen ? 'expand_less' : 'expand_more'}</i>
|
||||
</div>
|
||||
|
||||
<div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
|
||||
<TextField
|
||||
label="Name"
|
||||
className="mb-6"
|
||||
placeholder="Dothraki"
|
||||
value={item.key}
|
||||
onChange={v => onChange(`${identifier}.key`, v)}
|
||||
/>
|
||||
|
||||
<Counter
|
||||
label="Rating"
|
||||
className="mb-6"
|
||||
value={item.value}
|
||||
onDecrement={() => item.value > 1 && onChange(`${identifier}.value`, item.value - 1)}
|
||||
onIncrement={() => item.value < 5 && onChange(`${identifier}.value`, item.value + 1)}
|
||||
/>
|
||||
|
||||
<div className="mt-6 flex justify-between">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => deleteItem(dispatch, 'languages', item)}
|
||||
className="bg-red-600 hover:bg-red-700 text-white text-sm font-medium py-2 px-5 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<i className="material-icons mr-2 font-bold text-base">delete</i>
|
||||
<span className="text-sm">Delete</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div className="flex">
|
||||
{!first && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => moveItemUp(dispatch, 'languages', item)}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded mr-2"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<i className="material-icons font-bold text-base">arrow_upward</i>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{!last && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => moveItemDown(dispatch, 'languages', item)}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<i className="material-icons font-bold text-base">arrow_downward</i>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LanguagesTab;
|
||||
268
src/components/LeftSidebar/tabs/References.js
Normal file
268
src/components/LeftSidebar/tabs/References.js
Normal file
@ -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 && (
|
||||
<>
|
||||
<div className="mb-6 grid grid-cols-6 items-center">
|
||||
<div className="col-span-1">
|
||||
<Checkbox
|
||||
checked={data.references.enable}
|
||||
onChange={v => onChange('data.references.enable', v)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-5">
|
||||
<TextField
|
||||
placeholder="Heading"
|
||||
value={data.references.heading}
|
||||
onChange={v => onChange('data.references.heading', v)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr className="my-6" />
|
||||
|
||||
{data.references.items.map((x, index) => (
|
||||
<Item
|
||||
item={x}
|
||||
key={x.id}
|
||||
index={index}
|
||||
onChange={onChange}
|
||||
dispatch={dispatch}
|
||||
first={index === 0}
|
||||
last={index === data.references.items.length - 1}
|
||||
/>
|
||||
))}
|
||||
|
||||
<AddItem dispatch={dispatch} />
|
||||
</>
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
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 (
|
||||
<div className="my-4 border border-gray-200 rounded p-5">
|
||||
<div
|
||||
className="flex justify-between items-center cursor-pointer"
|
||||
onClick={() => setOpen(!isOpen)}
|
||||
>
|
||||
<h6 className="text-sm font-medium">Add Reference</h6>
|
||||
<i className="material-icons">{isOpen ? 'expand_less' : 'expand_more'}</i>
|
||||
</div>
|
||||
|
||||
<div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
|
||||
<TextField
|
||||
label="Name"
|
||||
className="mb-6"
|
||||
placeholder="Steve Jobs"
|
||||
value={item.name}
|
||||
onChange={v => onChange('name', v)}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
label="Position"
|
||||
className="mb-6"
|
||||
placeholder="CEO of Apple"
|
||||
value={item.position}
|
||||
onChange={v => onChange('position', v)}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
label="Phone Number"
|
||||
className="mb-6"
|
||||
placeholder="+1 123 456 7890"
|
||||
value={item.phone}
|
||||
onChange={v => onChange('phone', v)}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
label="Email Address"
|
||||
className="mb-6"
|
||||
placeholder="steve@apple.com"
|
||||
value={item.email}
|
||||
onChange={v => onChange('email', v)}
|
||||
/>
|
||||
|
||||
<TextArea
|
||||
rows="5"
|
||||
className="mb-6"
|
||||
label="Description"
|
||||
placeholder="You can write about how you and the reference contact worked together and which projects you were a part of."
|
||||
value={item.description}
|
||||
onChange={v => onChange('description', v)}
|
||||
/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={onSubmit}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<i className="material-icons mr-2 font-bold text-base">add</i>
|
||||
<span className="text-sm">Add</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
const identifier = `data.references.items[${index}]`;
|
||||
|
||||
return (
|
||||
<div className="my-4 border border-gray-200 rounded p-5">
|
||||
<div
|
||||
className="flex justify-between items-center cursor-pointer"
|
||||
onClick={() => setOpen(!isOpen)}
|
||||
>
|
||||
<h6 className="text-sm font-medium">{item.name}</h6>
|
||||
<i className="material-icons">{isOpen ? 'expand_less' : 'expand_more'}</i>
|
||||
</div>
|
||||
|
||||
<div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
|
||||
<TextField
|
||||
label="Name"
|
||||
className="mb-6"
|
||||
placeholder="Steve Jobs"
|
||||
value={item.name}
|
||||
onChange={v => onChange(`${identifier}.name`, v)}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
label="Position"
|
||||
className="mb-6"
|
||||
placeholder="CEO of Apple"
|
||||
value={item.position}
|
||||
onChange={v => onChange(`${identifier}.position`, v)}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
label="Phone Number"
|
||||
className="mb-6"
|
||||
placeholder="+1 123 456 7890"
|
||||
value={item.phone}
|
||||
onChange={v => onChange(`${identifier}.phone`, v)}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
label="Email Address"
|
||||
className="mb-6"
|
||||
placeholder="steve@apple.com"
|
||||
value={item.email}
|
||||
onChange={v => onChange(`${identifier}.email`, v)}
|
||||
/>
|
||||
|
||||
<TextArea
|
||||
rows="5"
|
||||
className="mb-6"
|
||||
label="Description"
|
||||
placeholder="You can write about how you and the reference contact worked together and which projects you were a part of."
|
||||
value={item.description}
|
||||
onChange={v => onChange(`${identifier}.description`, v)}
|
||||
/>
|
||||
|
||||
<div className="flex justify-between">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => deleteItem(dispatch, 'references', item)}
|
||||
className="bg-red-600 hover:bg-red-700 text-white text-sm font-medium py-2 px-5 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<i className="material-icons mr-2 font-bold text-base">delete</i>
|
||||
<span className="text-sm">Delete</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div className="flex">
|
||||
{!first && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => moveItemUp(dispatch, 'references', item)}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded mr-2"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<i className="material-icons font-bold text-base">arrow_upward</i>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{!last && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => moveItemDown(dispatch, 'references', item)}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<i className="material-icons font-bold text-base">arrow_downward</i>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReferencesTab;
|
||||
@ -3,6 +3,7 @@ import React, { useState, useContext } from 'react';
|
||||
import AppContext from '../../../context/AppContext';
|
||||
import Checkbox from '../../../shared/Checkbox';
|
||||
import TextField from '../../../shared/TextField';
|
||||
import { addItem, deleteItem } from '../../../utils';
|
||||
|
||||
const SkillsTab = ({ data, onChange }) => {
|
||||
const context = useContext(AppContext);
|
||||
@ -29,7 +30,7 @@ const SkillsTab = ({ data, onChange }) => {
|
||||
<hr className="my-6" />
|
||||
|
||||
{data.skills.items.map((x, index) => (
|
||||
<Item item={x} key={x} index={index} onChange={onChange} dispatch={dispatch} />
|
||||
<Item item={x} key={index} index={index} onChange={onChange} dispatch={dispatch} />
|
||||
))}
|
||||
|
||||
<AddItem dispatch={dispatch} />
|
||||
@ -41,16 +42,10 @@ const AddItem = ({ dispatch }) => {
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
const [item, setItem] = useState('');
|
||||
|
||||
const addItem = () => {
|
||||
const add = () => {
|
||||
if (item === '') return;
|
||||
|
||||
dispatch({
|
||||
type: 'add_item',
|
||||
payload: {
|
||||
key: 'skills',
|
||||
value: item,
|
||||
},
|
||||
});
|
||||
addItem(dispatch, 'skills', item);
|
||||
|
||||
setItem('');
|
||||
};
|
||||
@ -79,7 +74,7 @@ const AddItem = ({ dispatch }) => {
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={addItem}
|
||||
onClick={add}
|
||||
className="col-span-1 bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium rounded"
|
||||
>
|
||||
<div className="flex justify-center items-center">
|
||||
@ -95,15 +90,6 @@ const AddItem = ({ dispatch }) => {
|
||||
const Item = ({ item, index, onChange, dispatch }) => {
|
||||
const identifier = `data.skills.items[${index}]`;
|
||||
|
||||
const deleteItem = () =>
|
||||
dispatch({
|
||||
type: 'delete_item',
|
||||
payload: {
|
||||
key: 'skills',
|
||||
value: item,
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="my-4 grid grid-cols-6">
|
||||
<div className="col-span-5">
|
||||
@ -118,7 +104,7 @@ const Item = ({ item, index, onChange, dispatch }) => {
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={deleteItem}
|
||||
onClick={() => deleteItem(dispatch, 'skills', item)}
|
||||
className="col-span-1 text-gray-600 hover:text-red-600 text-sm font-medium"
|
||||
>
|
||||
<div className="flex justify-end items-center">
|
||||
|
||||
@ -6,6 +6,7 @@ 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 WorkTab = ({ data, onChange }) => {
|
||||
const context = useContext(AppContext);
|
||||
@ -58,16 +59,10 @@ const AddItem = ({ dispatch }) => {
|
||||
|
||||
const onChange = (key, value) => setItem(set({ ...item }, key, value));
|
||||
|
||||
const addItem = () => {
|
||||
const onSubmit = () => {
|
||||
if (item.title === '' || item.role === '') return;
|
||||
|
||||
dispatch({
|
||||
type: 'add_item',
|
||||
payload: {
|
||||
key: 'work',
|
||||
value: item,
|
||||
},
|
||||
});
|
||||
addItem(dispatch, 'work', item);
|
||||
|
||||
setItem({
|
||||
id: uuidv4(),
|
||||
@ -137,7 +132,7 @@ const AddItem = ({ dispatch }) => {
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={addItem}
|
||||
onClick={onSubmit}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
@ -154,33 +149,6 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
const identifier = `data.work.items[${index}]`;
|
||||
|
||||
const deleteItem = () =>
|
||||
dispatch({
|
||||
type: 'delete_item',
|
||||
payload: {
|
||||
key: 'work',
|
||||
value: item,
|
||||
},
|
||||
});
|
||||
|
||||
const moveItemUp = () =>
|
||||
dispatch({
|
||||
type: 'move_item_up',
|
||||
payload: {
|
||||
key: 'work',
|
||||
value: item,
|
||||
},
|
||||
});
|
||||
|
||||
const moveItemDown = () =>
|
||||
dispatch({
|
||||
type: 'move_item_down',
|
||||
payload: {
|
||||
key: 'work',
|
||||
value: item,
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="my-4 border border-gray-200 rounded p-5">
|
||||
<div
|
||||
@ -238,7 +206,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
<div className="flex justify-between">
|
||||
<button
|
||||
type="button"
|
||||
onClick={deleteItem}
|
||||
onClick={() => deleteItem(dispatch, 'work', item)}
|
||||
className="bg-red-600 hover:bg-red-700 text-white text-sm font-medium py-2 px-5 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
@ -251,7 +219,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
{!first && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={moveItemUp}
|
||||
onClick={() => moveItemUp(dispatch, 'work', item)}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded mr-2"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
@ -263,7 +231,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
{!last && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={moveItemDown}
|
||||
onClick={() => moveItemDown(dispatch, 'work', item)}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
|
||||
@ -55,6 +55,16 @@ const initialState = {
|
||||
heading: 'Skills & Hobbies',
|
||||
items: [],
|
||||
},
|
||||
languages: {
|
||||
enable: false,
|
||||
heading: 'Languages',
|
||||
items: [],
|
||||
},
|
||||
references: {
|
||||
enable: false,
|
||||
heading: 'References',
|
||||
items: [],
|
||||
},
|
||||
extras: {
|
||||
enable: false,
|
||||
heading: 'Personal Information',
|
||||
@ -78,6 +88,8 @@ const reducer = (state, { type, payload }) => {
|
||||
let items;
|
||||
|
||||
switch (type) {
|
||||
case 'migrate_section':
|
||||
return set({ ...state }, `data.${payload.key}`, payload.value);
|
||||
case 'add_item':
|
||||
items = get({ ...state }, `data.${payload.key}.items`, []);
|
||||
items.push(payload.value);
|
||||
|
||||
@ -24,6 +24,24 @@ li {
|
||||
}
|
||||
|
||||
@media screen {
|
||||
input[type='number']::-webkit-inner-spin-button,
|
||||
input[type='number']::-webkit-outer-spin-button {
|
||||
appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type='number'] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
input:checked + i.material-icons {
|
||||
display: block;
|
||||
}
|
||||
@ -36,12 +54,14 @@ li {
|
||||
|
||||
#tabs {
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
#tabs::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
background: transparent; /* make scrollbar transparent */
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#page {
|
||||
|
||||
35
src/shared/Counter.js
Normal file
35
src/shared/Counter.js
Normal file
@ -0,0 +1,35 @@
|
||||
import React from 'react';
|
||||
|
||||
const Counter = ({ label, value, onDecrement, onIncrement, className }) => {
|
||||
return (
|
||||
<div className={className}>
|
||||
<label className="uppercase tracking-wide text-gray-600 text-xs font-semibold mb-2">
|
||||
{label}
|
||||
</label>
|
||||
<div className="flex flex-row h-10 w-full rounded-lg relative bg-transparent mt-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onDecrement}
|
||||
className="bg-gray-200 text-gray-600 hover:text-gray-700 hover:bg-gray-400 h-full w-20 rounded-l cursor-pointer px-2"
|
||||
>
|
||||
<span className="m-auto text-2xl">−</span>
|
||||
</button>
|
||||
<input
|
||||
readOnly
|
||||
type="number"
|
||||
className="text-center w-full bg-gray-200 font-semibold text-md hover:text-black focus:text-black md:text-basecursor-default flex items-center text-gray-600"
|
||||
value={value}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onIncrement}
|
||||
className="bg-gray-200 text-gray-600 hover:text-gray-700 hover:bg-gray-400 h-full w-20 rounded-r cursor-pointer px-2"
|
||||
>
|
||||
<span className="m-auto text-2xl">+</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Counter;
|
||||
@ -1,6 +1,14 @@
|
||||
import React from 'react';
|
||||
|
||||
const TextField = ({ label, placeholder, value, onChange, className, disabled }) => (
|
||||
const TextField = ({
|
||||
label,
|
||||
placeholder,
|
||||
value,
|
||||
onChange,
|
||||
className,
|
||||
disabled = false,
|
||||
type = 'text',
|
||||
}) => (
|
||||
<div className={`w-full flex flex-col ${className}`}>
|
||||
{label && (
|
||||
<label className="uppercase tracking-wide text-gray-600 text-xs font-semibold mb-2">
|
||||
@ -9,7 +17,7 @@ const TextField = ({ label, placeholder, value, onChange, className, disabled })
|
||||
)}
|
||||
<input
|
||||
className="appearance-none block w-full bg-gray-200 text-gray-800 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
|
||||
type="text"
|
||||
type={type}
|
||||
disabled={disabled}
|
||||
value={value}
|
||||
onChange={e => onChange(e.target.value)}
|
||||
|
||||
@ -40,4 +40,54 @@ const copyToClipboard = text => {
|
||||
return successful;
|
||||
};
|
||||
|
||||
export { move, hexToRgb, copyToClipboard };
|
||||
const saveData = dispatch => dispatch({ type: 'save_data' });
|
||||
|
||||
const addItem = (dispatch, key, value) => {
|
||||
dispatch({
|
||||
type: 'add_item',
|
||||
payload: {
|
||||
key,
|
||||
value,
|
||||
},
|
||||
});
|
||||
|
||||
saveData(dispatch);
|
||||
};
|
||||
|
||||
const deleteItem = (dispatch, key, value) => {
|
||||
dispatch({
|
||||
type: 'delete_item',
|
||||
payload: {
|
||||
key,
|
||||
value,
|
||||
},
|
||||
});
|
||||
|
||||
saveData(dispatch);
|
||||
};
|
||||
|
||||
const moveItemUp = (dispatch, key, value) => {
|
||||
dispatch({
|
||||
type: 'move_item_up',
|
||||
payload: {
|
||||
key,
|
||||
value,
|
||||
},
|
||||
});
|
||||
|
||||
saveData(dispatch);
|
||||
};
|
||||
|
||||
const moveItemDown = (dispatch, key, value) => {
|
||||
dispatch({
|
||||
type: 'move_item_down',
|
||||
payload: {
|
||||
key,
|
||||
value,
|
||||
},
|
||||
});
|
||||
|
||||
saveData(dispatch);
|
||||
};
|
||||
|
||||
export { move, hexToRgb, copyToClipboard, saveData, addItem, deleteItem, moveItemUp, moveItemDown };
|
||||
|
||||
Reference in New Issue
Block a user