more organization, added references and languages

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',
 ];
 
@@ -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:

src/components/LeftSidebar/tabs/Awards.js

@@ -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({
+    addItem(dispatch, 'awards', item);
-      type: 'add_item',
-      payload: {
-        key: 'awards',
-        value: 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">

src/components/LeftSidebar/tabs/Certifications.js

@@ -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({
+    addItem(dispatch, 'certifications', item);
-      type: 'add_item',
-      payload: {
-        key: 'certifications',
-        value: 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">

src/components/LeftSidebar/tabs/Education.js

@@ -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({
+    addItem(dispatch, 'education', item);
-      type: 'add_item',
-      payload: {
-        key: 'education',
-        value: 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">

src/components/LeftSidebar/tabs/Extras.js

@@ -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({
+    addItem(dispatch, 'extras', item);
-      type: 'add_item',
-      payload: {
-        key: 'extras',
-        value: 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">

src/components/LeftSidebar/tabs/Languages.js

@@ -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;

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 && (
+      <>
+        <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;

src/components/LeftSidebar/tabs/Skills.js

@@ -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({
+    addItem(dispatch, 'skills', item);
-      type: 'add_item',
-      payload: {
-        key: 'skills',
-        value: 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">

src/components/LeftSidebar/tabs/Work.js

@@ -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({
+    addItem(dispatch, 'work', item);
-      type: 'add_item',
-      payload: {
-        key: 'work',
-        value: 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">

src/context/AppContext.js

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

src/index.css

@@ -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 {

src/shared/Counter.js

@@ -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;

src/shared/TextField.js

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

src/utils/index.js

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