diff --git a/src/components/LeftSidebar/LeftSidebar.js b/src/components/LeftSidebar/LeftSidebar.js
index 16e08f31..377ade80 100644
--- a/src/components/LeftSidebar/LeftSidebar.js
+++ b/src/components/LeftSidebar/LeftSidebar.js
@@ -31,7 +31,7 @@ const LeftSidebar = () => {
const { state, dispatch } = context;
const { data } = state;
- const [currentTab, setCurrentTab] = useState('Profile');
+ const [currentTab, setCurrentTab] = useState('Education');
const onChange = (key, value) => {
dispatch({
type: 'on_input',
diff --git a/src/components/LeftSidebar/tabs/Education.js b/src/components/LeftSidebar/tabs/Education.js
index 1363ee7f..4cba7ddc 100644
--- a/src/components/LeftSidebar/tabs/Education.js
+++ b/src/components/LeftSidebar/tabs/Education.js
@@ -1,4 +1,5 @@
import React, { useState, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
import { v4 as uuidv4 } from 'uuid';
import set from 'lodash/set';
@@ -6,10 +7,12 @@ 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';
+import { addItem } from '../../../utils';
import ItemActions from '../../../shared/ItemActions';
+import AddItemButton from '../../../shared/AddItemButton';
const EducationTab = ({ data, onChange }) => {
+ const { t } = useTranslation('app');
const context = useContext(AppContext);
const { dispatch } = context;
@@ -24,7 +27,7 @@ const EducationTab = ({ data, onChange }) => {
onChange('data.education.heading', v)}
/>
@@ -45,12 +48,72 @@ const EducationTab = ({ data, onChange }) => {
/>
))}
-
+
>
);
};
-const AddItem = ({ dispatch }) => {
+const Form = ({ item, onChange, identifier = '' }) => {
+ const { t } = useTranslation(['leftSidebar', 'app']);
+
+ return (
+
+
onChange(`${identifier}name`, v)}
+ />
+
+ onChange(`${identifier}major`, v)}
+ />
+
+ onChange(`${identifier}grade`, v)}
+ />
+
+
+ onChange(`${identifier}start`, v)}
+ />
+
+ onChange(`${identifier}end`, v)}
+ />
+
+
+
+ );
+};
+
+const AddItem = ({ heading, dispatch }) => {
+ const { t } = useTranslation('app');
const [isOpen, setOpen] = useState(false);
const [item, setItem] = useState({
id: uuidv4(),
@@ -90,72 +153,13 @@ const AddItem = ({ dispatch }) => {
className="flex justify-between items-center cursor-pointer"
onClick={() => setOpen(!isOpen)}
>
- Add Education
+ {t('item.addHeading', { heading })}
{isOpen ? 'expand_less' : 'expand_more'}
-
onChange('name', v)}
- />
-
- onChange('major', v)}
- />
-
- onChange('grade', v)}
- />
-
-
- onChange('start', v)}
- />
-
- onChange('end', v)}
- />
-
-
-
);
@@ -163,7 +167,7 @@ const AddItem = ({ dispatch }) => {
const Item = ({ item, index, onChange, dispatch, first, last }) => {
const [isOpen, setOpen] = useState(false);
- const identifier = `data.education.items[${index}]`;
+ const identifier = `data.education.items[${index}].`;
return (
@@ -176,68 +180,16 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
-
onChange(`${identifier}.name`, v)}
- />
-
- onChange(`${identifier}.major`, v)}
- />
-
- onChange(`${identifier}.grade`, v)}
- />
-
-
- onChange(`${identifier}.start`, v)}
- />
-
- onChange(`${identifier}.end`, v)}
- />
-
-
-
diff --git a/src/components/LeftSidebar/tabs/Work.js b/src/components/LeftSidebar/tabs/Work.js
index 4d1db560..ed8bda8a 100644
--- a/src/components/LeftSidebar/tabs/Work.js
+++ b/src/components/LeftSidebar/tabs/Work.js
@@ -12,7 +12,7 @@ import ItemActions from '../../../shared/ItemActions';
import AddItemButton from '../../../shared/AddItemButton';
const WorkTab = ({ data, onChange }) => {
- const { t } = useTranslation(['leftSidebar', 'app']);
+ const { t } = useTranslation('app');
const context = useContext(AppContext);
const { dispatch } = context;
@@ -24,7 +24,7 @@ const WorkTab = ({ data, onChange }) => {
onChange('data.work.heading', v)}
/>
@@ -92,7 +92,7 @@ const Form = ({ item, onChange, identifier = '' }) => {