Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-13 00:03:27 +10:00
Code Issues Packages Projects Releases Wiki Activity

extracted strings from education tab

Browse Source
This commit is contained in:
Amruth Pillai
2020-03-30 00:08:43 +05:30
parent 07696b40ee
commit 959c843983
7 changed files with 102 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/LeftSidebar/LeftSidebar.js
View File

@ -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',

200
src/components/LeftSidebar/tabs/Education.js
View File

@ -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 }) => {
</div>
<div className="col-span-5">
<TextField
placeholder="Heading"
placeholder={t('heading.placeholder')}
value={data.education.heading}
onChange={v => onChange('data.education.heading', v)}
/>
@ -45,12 +48,72 @@ const EducationTab = ({ data, onChange }) => {
/>
))}
<AddItem dispatch={dispatch} />
<AddItem heading={data.education.heading} dispatch={dispatch} />
</>
);
};
const AddItem = ({ dispatch }) => {
const Form = ({ item, onChange, identifier = '' }) => {
const { t } = useTranslation(['leftSidebar', 'app']);
return (
<div>
<TextField
className="mb-6"
label={t('education.name.label')}
placeholder={t('education.name.placeholder')}
value={item.name}
onChange={v => onChange(`${identifier}name`, v)}
/>
<TextField
className="mb-6"
label={t('education.major.label')}
placeholder={t('education.major.placeholder')}
value={item.major}
onChange={v => onChange(`${identifier}major`, v)}
/>
<TextField
className="mb-6"
label={t('education.grade.label')}
placeholder={t('education.grade.placeholder')}
value={item.grade}
onChange={v => onChange(`${identifier}grade`, v)}
/>
<div className="grid grid-cols-2 col-gap-4">
<TextField
className="mb-6"
label={t('app:item.startDate.label')}
placeholder={t('app:item.startDate.placeholder')}
value={item.start}
onChange={v => onChange(`${identifier}start`, v)}
/>
<TextField
className="mb-6"
label={t('app:item.endDate.label')}
placeholder={t('app:item.endDate.placeholder')}
value={item.end}
onChange={v => onChange(`${identifier}end`, v)}
/>
</div>
<TextArea
rows="5"
className="mb-6"
label={t('app:item.description.label')}
placeholder={t('education.description.placeholder')}
value={item.description}
onChange={v => onChange(`${identifier}description`, v)}
/>
</div>
);
};
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)}
>
<h6 className="text-sm font-medium">Add Education</h6>
<h6 className="text-sm font-medium">{t('item.addHeading', { heading })}</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="Harvard University"
value={item.name}
onChange={v => onChange('name', v)}
/>
<TextField
label="Major"
className="mb-6"
placeholder="Masters in Computer Science"
value={item.major}
onChange={v => onChange('major', v)}
/>
<TextField
label="Grade"
className="mb-6"
placeholder="7.2 CGPA"
value={item.grade}
onChange={v => onChange('grade', v)}
/>
<div className="grid grid-cols-2 col-gap-4">
<TextField
label="Start Date"
className="mb-6"
placeholder="March 2018"
value={item.start}
onChange={v => onChange('start', v)}
/>
<TextField
label="End Date"
className="mb-6"
placeholder="May 2020"
value={item.end}
onChange={v => onChange('end', v)}
/>
</div>
<TextArea
rows="5"
className="mb-6"
label="Description"
placeholder="You can write about projects or special credit classes that you took while studying at this school."
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>
<Form item={item} onChange={onChange} />
<AddItemButton onSubmit={onSubmit} />
</div>
</div>
);
@ -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 (
<div className="my-4 border border-gray-200 rounded p-5">
@ -176,68 +180,16 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
</div>
<div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
<TextField
label="Name"
className="mb-6"
placeholder="Harvard University"
value={item.name}
onChange={v => onChange(`${identifier}.name`, v)}
/>
<TextField
label="Major"
className="mb-6"
placeholder="Masters in Computer Science"
value={item.major}
onChange={v => onChange(`${identifier}.major`, v)}
/>
<TextField
label="Grade"
className="mb-6"
placeholder="7.2 CGPA"
value={item.grade}
onChange={v => onChange(`${identifier}.grade`, v)}
/>
<div className="grid grid-cols-2 col-gap-4">
<TextField
label="Start Date"
className="mb-6"
placeholder="March 2018"
value={item.start}
onChange={v => onChange(`${identifier}.start`, v)}
/>
<TextField
label="End Date"
className="mb-6"
placeholder="May 2020"
value={item.end}
onChange={v => onChange(`${identifier}.end`, v)}
/>
</div>
<TextArea
rows="5"
className="mb-6"
label="Description"
placeholder="You can write about projects or special credit classes that you took while studying at this school."
value={item.description}
onChange={v => onChange(`${identifier}.description`, v)}
/>
<Form item={item} onChange={onChange} identifier={identifier} />
<ItemActions
dispatch={dispatch}
first={first}
identifier={identifier}
item={item}
last={last}
onChange={onChange}
type="education"
identifier={identifier}
dispatch={dispatch}
deleteItem={deleteItem}
first={first}
moveItemUp={moveItemUp}
last={last}
moveItemDown={moveItemDown}
/>
</div>
</div>

6
src/components/LeftSidebar/tabs/Work.js
View File

@ -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 }) => {
</div>
<div className="col-span-5">
<TextField
placeholder={t('app:heading.placeholder')}
placeholder={t('heading.placeholder')}
value={data.work.heading}
onChange={v => onChange('data.work.heading', v)}
/>
@ -92,7 +92,7 @@ const Form = ({ item, onChange, identifier = '' }) => {
<TextArea
rows="5"
className="mb-6"
label={t('work.description.label')}
label={t('app:item.description.label')}
placeholder={t('work.description.placeholder')}
value={item.description}
onChange={v => onChange(`${identifier}description`, v)}

3
src/i18n/resources/en/app/app.json
View File

@ -11,6 +11,9 @@
"endDate": {
"label": "End Date",
"placeholder": "current"
},
"description": {
"label": "Description"
}
},
"buttons": {

17
src/i18n/resources/en/leftSidebar/education.json Normal file
View File

@ -0,0 +1,17 @@
{
"name": {
"label": "Name",
"placeholder": "Harvard University"
},
"major": {
"label": "Major",
"placeholder": "Masters in Computer Science"
},
"grade": {
"label": "Grade",
"placeholder": "7.2 CGPA"
},
"description": {
"placeholder": "You can write about projects or special credit classes that you took while studying at this school."
}
}

2
src/i18n/resources/en/leftSidebar/index.js
View File

@ -1,9 +1,11 @@
import profile from './profile.json';
import objective from './objective.json';
import work from './work.json';
import education from './education.json';
export default {
profile,
objective,
work,
education,
};

1
src/i18n/resources/en/leftSidebar/work.json
View File

@ -8,7 +8,6 @@
"placeholder": "Frontend Web Developer"
},
"description": {
"label": "Description",
"placeholder": "You can write about what you specialized in while working at the company and what projects you were a part of."
}
}