extracted strings from awards tab

src/components/LeftSidebar/LeftSidebar.js

@@ -31,7 +31,7 @@ const LeftSidebar = () => {
   const { state, dispatch } = context;
   const { data } = state;
 
-  const [currentTab, setCurrentTab] = useState('Education');
+  const [currentTab, setCurrentTab] = useState('Awards');
   const onChange = (key, value) => {
     dispatch({
       type: 'on_input',

src/components/LeftSidebar/tabs/Awards.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';
 
@@ -8,8 +9,11 @@ import Checkbox from '../../../shared/Checkbox';
 import TextArea from '../../../shared/TextArea';
 import { addItem, deleteItem, moveItemUp, moveItemDown } from '../../../utils';
 import ItemActions from '../../../shared/ItemActions';
+import AddItemButton from '../../../shared/AddItemButton';
+import ItemHeading from '../../../shared/ItemHeading';
 
 const AwardsTab = ({ data, onChange }) => {
+  const { t } = useTranslation('app');
   const context = useContext(AppContext);
   const { dispatch } = context;
 
@@ -24,7 +28,7 @@ const AwardsTab = ({ data, onChange }) => {
         </div>
         <div className="col-span-5">
           <TextField
-            placeholder="Heading"
+            placeholder={t('heading.placeholder')}
             value={data.awards.heading}
             onChange={v => onChange('data.awards.heading', v)}
           />
@@ -45,12 +49,44 @@ const AwardsTab = ({ data, onChange }) => {
         />
       ))}
 
-      <AddItem dispatch={dispatch} />
+      <AddItem heading={data.awards.heading} dispatch={dispatch} />
     </>
   );
 };
 
-const AddItem = ({ dispatch }) => {
+const Form = ({ item, onChange, identifier = '' }) => {
+  const { t } = useTranslation(['leftSidebar', 'app']);
+
+  return (
+    <div>
+      <TextField
+        className="mb-6"
+        label={t('awards.title.label')}
+        placeholder={t('awards.title.placeholder')}
+        value={item.title}
+        onChange={v => onChange(`${identifier}title`, v)}
+      />
+
+      <TextField
+        className="mb-6"
+        label={t('awards.subtitle.label')}
+        placeholder={t('awards.subtitle.placeholder')}
+        value={item.subtitle}
+        onChange={v => onChange(`${identifier}subtitle`, v)}
+      />
+
+      <TextArea
+        className="mb-6"
+        label={t('app:item.description.label')}
+        placeholder={t('awards.description.placeholder')}
+        value={item.description}
+        onChange={v => onChange(`${identifier}description`, v)}
+      />
+    </div>
+  );
+};
+
+const AddItem = ({ heading, dispatch }) => {
   const [isOpen, setOpen] = useState(false);
   const [item, setItem] = useState({
     id: uuidv4(),
@@ -80,48 +116,12 @@ const AddItem = ({ dispatch }) => {
 
   return (
     <div className="my-4 border border-gray-200 rounded p-5">
-      <div
+      <ItemHeading heading={heading} setOpen={setOpen} isOpen={isOpen} />
-        className="flex justify-between items-center cursor-pointer"
-        onClick={() => setOpen(!isOpen)}
-      >
-        <h6 className="text-sm font-medium">Add Award</h6>
-        <i className="material-icons">{isOpen ? 'expand_less' : 'expand_more'}</i>
-      </div>
 
       <div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
-        <TextField
+        <Form item={item} onChange={onChange} />
-          label="Title"
-          className="mb-6"
-          placeholder="Math &amp; Science Olympiad"
-          value={item.title}
-          onChange={v => onChange('title', v)}
-        />
 
-        <TextField
+        <AddItemButton onSubmit={onSubmit} />
-          label="Subtitle"
-          className="mb-6"
-          placeholder="First Place, International Level"
-          value={item.subtitle}
-          onChange={v => onChange('subtitle', v)}
-        />
-
-        <TextArea
-          label="Description"
-          className="mb-6"
-          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>
   );
@@ -129,41 +129,14 @@ const AddItem = ({ dispatch }) => {
 
 const Item = ({ item, index, onChange, dispatch, first, last }) => {
   const [isOpen, setOpen] = useState(false);
-  const identifier = `data.awards.items[${index}]`;
+  const identifier = `data.awards.items[${index}].`;
 
   return (
     <div className="my-4 border border-gray-200 rounded p-5">
-      <div
+      <ItemHeading title={item.title} setOpen={setOpen} isOpen={isOpen} />
-        className="flex justify-between items-center cursor-pointer"
-        onClick={() => setOpen(!isOpen)}
-      >
-        <h6 className="text-sm font-medium">{item.title}</h6>
-        <i className="material-icons">{isOpen ? 'expand_less' : 'expand_more'}</i>
-      </div>
 
       <div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
-        <TextField
+        <Form item={item} onChange={onChange} identifier={identifier} />
-          label="Title"
-          className="mb-6"
-          placeholder="Math &amp; Science Olympiad"
-          value={item.title}
-          onChange={v => onChange(`${identifier}.title`, v)}
-        />
-
-        <TextField
-          label="Subtitle"
-          className="mb-6"
-          placeholder="First Place, International Level"
-          value={item.subtitle}
-          onChange={v => onChange(`${identifier}.subtitle`, v)}
-        />
-
-        <TextArea
-          label="Description"
-          className="mb-6"
-          value={item.description}
-          onChange={v => onChange(`${identifier}.description`, v)}
-        />
 
         <ItemActions
           item={item}

src/components/LeftSidebar/tabs/Education.js

@@ -10,6 +10,7 @@ import Checkbox from '../../../shared/Checkbox';
 import { addItem } from '../../../utils';
 import ItemActions from '../../../shared/ItemActions';
 import AddItemButton from '../../../shared/AddItemButton';
+import ItemHeading from '../../../shared/ItemHeading';
 
 const EducationTab = ({ data, onChange }) => {
   const { t } = useTranslation('app');
@@ -113,7 +114,6 @@ const Form = ({ item, onChange, identifier = '' }) => {
 };
 
 const AddItem = ({ heading, dispatch }) => {
-  const { t } = useTranslation('app');
   const [isOpen, setOpen] = useState(false);
   const [item, setItem] = useState({
     id: uuidv4(),
@@ -136,7 +136,7 @@ const AddItem = ({ heading, dispatch }) => {
     setItem({
       id: uuidv4(),
       enable: true,
-      title: '',
+      name: '',
       role: '',
       start: '',
       end: '',
@@ -149,13 +149,7 @@ const AddItem = ({ heading, dispatch }) => {
 
   return (
     <div className="my-4 border border-gray-200 rounded p-5">
-      <div
+      <ItemHeading heading={heading} setOpen={setOpen} isOpen={isOpen} />
-        className="flex justify-between items-center cursor-pointer"
-        onClick={() => setOpen(!isOpen)}
-      >
-        <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'}`}>
         <Form item={item} onChange={onChange} />
@@ -171,13 +165,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
 
   return (
     <div className="my-4 border border-gray-200 rounded p-5">
-      <div
+      <ItemHeading title={item.name} setOpen={setOpen} isOpen={isOpen} />
-        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'}`}>
         <Form item={item} onChange={onChange} identifier={identifier} />

src/components/LeftSidebar/tabs/Work.js

@@ -10,6 +10,7 @@ import Checkbox from '../../../shared/Checkbox';
 import { addItem } from '../../../utils';
 import ItemActions from '../../../shared/ItemActions';
 import AddItemButton from '../../../shared/AddItemButton';
+import ItemHeading from '../../../shared/ItemHeading';
 
 const WorkTab = ({ data, onChange }) => {
   const { t } = useTranslation('app');
@@ -102,8 +103,6 @@ const Form = ({ item, onChange, identifier = '' }) => {
 };
 
 const AddItem = ({ heading, dispatch }) => {
-  const { t } = useTranslation('app');
-
   const [isOpen, setOpen] = useState(false);
   const [item, setItem] = useState({
     id: uuidv4(),
@@ -137,16 +136,11 @@ const AddItem = ({ heading, dispatch }) => {
 
   return (
     <div className="my-4 border border-gray-200 rounded p-5">
-      <div
+      <ItemHeading heading={heading} setOpen={setOpen} isOpen={isOpen} />
-        className="flex justify-between items-center cursor-pointer"
-        onClick={() => setOpen(!isOpen)}
-      >
-        <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'}`}>
         <Form item={item} onChange={onChange} />
+
         <AddItemButton onSubmit={onSubmit} />
       </div>
     </div>
@@ -159,13 +153,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
 
   return (
     <div className="my-4 border border-gray-200 rounded p-5">
-      <div
+      <ItemHeading title={item.title} setOpen={setOpen} isOpen={isOpen} />
-        className="flex justify-between items-center cursor-pointer"
-        onClick={() => setOpen(!isOpen)}
-      >
-        <h6 className="ml-2 text-sm font-medium">{item.title}</h6>
-        <i className="material-icons">{isOpen ? 'expand_less' : 'expand_more'}</i>
-      </div>
 
       <div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
         <Form item={item} onChange={onChange} identifier={identifier} />

src/i18n/resources/en/app/app.json

@@ -3,7 +3,7 @@
     "placeholder": "Heading"
   },
   "item": {
-    "addHeading": "Add {{heading}}",
+    "add": "Add {{- heading}}",
     "startDate": {
       "label": "Start Date",
       "placeholder": "March 2018"

src/i18n/resources/en/leftSidebar/awards.json

@@ -0,0 +1,13 @@
+{
+  "title": {
+    "label": "Title",
+    "placeholder": "Math & Science Olympiad"
+  },
+  "subtitle": {
+    "label": "Subtitle",
+    "placeholder": "First Place, International Level"
+  },
+  "description": {
+    "placeholder": ""
+  }
+}

src/i18n/resources/en/leftSidebar/index.js

@@ -2,10 +2,12 @@ import profile from './profile.json';
 import objective from './objective.json';
 import work from './work.json';
 import education from './education.json';
+import awards from './awards.json';
 
 export default {
   profile,
   objective,
   work,
   education,
+  awards,
 };

src/shared/ItemHeading.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+const ItemHeading = ({ title, heading, isOpen, setOpen }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div
+      className="flex justify-between items-center cursor-pointer"
+      onClick={() => setOpen(!isOpen)}
+    >
+      <h6 className="text-sm font-medium">
+        {typeof heading === 'undefined' ? title : t('item.add', { heading })}
+      </h6>
+      <i className="material-icons">{isOpen ? 'expand_less' : 'expand_more'}</i>
+    </div>
+  );
+};
+
+export default ItemHeading;