completed translation extraction of profile and work

src/components/LeftSidebar/tabs/Objective.js

@@ -1,9 +1,13 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
+
 import TextArea from '../../../shared/TextArea';
 import TextField from '../../../shared/TextField';
 import Checkbox from '../../../shared/Checkbox';
 
 const ObjectiveTab = ({ data, onChange }) => {
+  const { t } = useTranslation(['leftSidebar', 'app']);
+
   return (
     <div>
       <div className="mb-6 grid grid-cols-6 items-center">
@@ -15,7 +19,7 @@ const ObjectiveTab = ({ data, onChange }) => {
         </div>
         <div className="col-span-5">
           <TextField
-            placeholder="Heading"
+            placeholder={t('app:heading.placeholder')}
             value={data.objective.heading}
             onChange={v => onChange('data.objective.heading', v)}
           />
@@ -27,8 +31,8 @@ const ObjectiveTab = ({ data, onChange }) => {
       <TextArea
         rows="15"
         className="mb-4"
-        label="Objective"
-        placeholder="Looking for a challenging role in a reputable organization to utilize my technical, database, and management skills for the growth of the organization as well as to enhance my knowledge about new and emerging trends in the IT sector."
+        label={t('objective.objective.label')}
+        placeholder={t('objective.objective.placeholder')}
         value={data.objective.body}
         onChange={v => onChange('data.objective.body', v)}
       />

src/components/LeftSidebar/tabs/Profile.js

@@ -4,14 +4,14 @@ import { useTranslation } from 'react-i18next';
 import TextField from '../../../shared/TextField';
 
 const ProfileTab = ({ data, onChange }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('leftSidebar');
 
   return (
     <div>
       <TextField
         className="mb-6"
-        label={t('profile.photoUrl')}
-        placeholder="https://i.imgur.com/..."
+        label={t('profile.photoUrl.label')}
+        placeholder={t('profile.photoUrl.placeholder')}
         value={data.profile.photo}
         onChange={v => onChange('data.profile.photo', v)}
       />
@@ -19,16 +19,16 @@ const ProfileTab = ({ data, onChange }) => {
       <div className="grid grid-cols-2 col-gap-4">
         <TextField
           className="mb-6"
-          label="First Name"
-          placeholder="Jane"
+          label={t('profile.firstName.label')}
+          placeholder={t('profile.firstName.placeholder')}
           value={data.profile.firstName}
           onChange={v => onChange('data.profile.firstName', v)}
         />
 
         <TextField
           className="mb-6"
-          label="Last Name"
-          placeholder="Doe"
+          label={t('profile.lastName.label')}
+          placeholder={t('profile.lastName.placeholder')}
           value={data.profile.lastName}
           onChange={v => onChange('data.profile.lastName', v)}
         />
@@ -36,8 +36,8 @@ const ProfileTab = ({ data, onChange }) => {
 
       <TextField
         className="mb-6"
-        label="Subtitle"
-        placeholder="Full Stack Web Developer"
+        label={t('profile.subtitle.label')}
+        placeholder={t('profile.subtitle.placeholder')}
         value={data.profile.subtitle}
         onChange={v => onChange('data.profile.subtitle', v)}
       />
@@ -46,24 +46,24 @@ const ProfileTab = ({ data, onChange }) => {
 
       <TextField
         className="mb-6"
-        label="Address Line 1"
-        placeholder="Palladium Complex"
+        label={t('profile.address.line1.label')}
+        placeholder={t('profile.address.line1.placeholder')}
         value={data.profile.address.line1}
         onChange={v => onChange('data.profile.address.line1', v)}
       />
 
       <TextField
         className="mb-6"
-        label="Address Line 2"
-        placeholder="140 E 14th St"
+        label={t('profile.address.line2.label')}
+        placeholder={t('profile.address.line2.placeholder')}
         value={data.profile.address.line2}
         onChange={v => onChange('data.profile.address.line2', v)}
       />
 
       <TextField
         className="mb-6"
-        label="Address Line 3"
-        placeholder="New York, NY 10003 USA"
+        label={t('profile.address.line3.label')}
+        placeholder={t('profile.address.line3.placeholder')}
         value={data.profile.address.line3}
         onChange={v => onChange('data.profile.address.line3', v)}
       />
@@ -72,24 +72,24 @@ const ProfileTab = ({ data, onChange }) => {
 
       <TextField
         className="mb-6"
-        label="Phone Number"
-        placeholder="+1 541 754 3010"
+        label={t('profile.phone.label')}
+        placeholder={t('profile.phone.placeholder')}
         value={data.profile.phone}
         onChange={v => onChange('data.profile.phone', v)}
       />
 
       <TextField
         className="mb-6"
-        label="Website"
-        placeholder="google.com"
+        label={t('profile.website.label')}
+        placeholder={t('profile.website.placeholder')}
         value={data.profile.website}
         onChange={v => onChange('data.profile.website', v)}
       />
 
       <TextField
         className="mb-6"
-        label="Email Address"
-        placeholder="john.doe@example.com"
+        label={t('profile.email.label')}
+        placeholder={t('profile.email.placeholder')}
         value={data.profile.email}
         onChange={v => onChange('data.profile.email', v)}
       />

src/components/LeftSidebar/tabs/Work.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,10 @@ import AppContext from '../../../context/AppContext';
 import Checkbox from '../../../shared/Checkbox';
 import { addItem, deleteItem, moveItemUp, moveItemDown } from '../../../utils';
 import ItemActions from '../../../shared/ItemActions';
+import AddItemButton from '../../../shared/AddItemButton';
 
 const WorkTab = ({ data, onChange }) => {
+  const { t } = useTranslation(['leftSidebar', 'app']);
   const context = useContext(AppContext);
   const { dispatch } = context;
 
@@ -21,7 +24,7 @@ const WorkTab = ({ data, onChange }) => {
         </div>
         <div className="col-span-5">
           <TextField
-            placeholder="Heading"
+            placeholder={t('app:heading.placeholder')}
             value={data.work.heading}
             onChange={v => onChange('data.work.heading', v)}
           />
@@ -32,22 +35,75 @@ const WorkTab = ({ data, onChange }) => {
 
       {data.work.items.map((x, index) => (
         <Item
-          item={x}
-          key={x.id}
-          index={index}
-          onChange={onChange}
           dispatch={dispatch}
           first={index === 0}
+          index={index}
+          item={x}
+          key={x.id}
           last={index === data.work.items.length - 1}
+          onChange={onChange}
         />
       ))}
 
-      <AddItem dispatch={dispatch} />
+      <AddItem heading={data.work.heading} dispatch={dispatch} />
     </>
   );
 };
 
-const AddItem = ({ dispatch }) => {
+const Form = ({ item, onChange, identifier = '' }) => {
+  const { t } = useTranslation(['leftSidebar', 'app']);
+
+  return (
+    <div>
+      <TextField
+        className="mb-6"
+        label={t('work.name.label')}
+        placeholder={t('work.name.placeholder')}
+        value={item.title}
+        onChange={v => onChange(`${identifier}title`, v)}
+      />
+
+      <TextField
+        className="mb-6"
+        label={t('work.role.label')}
+        placeholder={t('work.role.placeholder')}
+        value={item.role}
+        onChange={v => onChange(`${identifier}role`, 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('work.description.label')}
+        placeholder={t('work.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(),
@@ -85,64 +141,13 @@ const AddItem = ({ dispatch }) => {
         className="flex justify-between items-center cursor-pointer"
         onClick={() => setOpen(!isOpen)}
       >
-        <h6 className="text-sm font-medium">Add Work Experience</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="Amazon US"
-          value={item.title}
-          onChange={v => onChange('title', v)}
-        />
-
-        <TextField
-          label="Role"
-          className="mb-6"
-          placeholder="Frontend Web Developer"
-          value={item.role}
-          onChange={v => onChange('role', 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="current"
-            value={item.end}
-            onChange={v => onChange('end', v)}
-          />
-        </div>
-
-        <TextArea
-          rows="5"
-          className="mb-6"
-          label="Description"
-          placeholder="You can write about what you specialized in while working at the company and what 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>
+        <Form item={item} onChange={onChange} />
+        <AddItemButton onSubmit={onSubmit} />
       </div>
     </div>
   );
@@ -150,7 +155,7 @@ const AddItem = ({ dispatch }) => {
 
 const Item = ({ item, index, onChange, dispatch, first, last }) => {
   const [isOpen, setOpen] = useState(false);
-  const identifier = `data.work.items[${index}]`;
+  const identifier = `data.work.items[${index}].`;
 
   return (
     <div className="my-4 border border-gray-200 rounded p-5">
@@ -163,60 +168,19 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
       </div>
 
       <div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
-        <TextField
-          label="Name"
-          className="mb-6"
-          placeholder="Amazon US"
-          value={item.title}
-          onChange={v => onChange(`${identifier}.title`, v)}
-        />
-
-        <TextField
-          label="Role"
-          className="mb-6"
-          placeholder="Frontend Web Developer"
-          value={item.role}
-          onChange={v => onChange(`${identifier}.role`, 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="current"
-            value={item.end}
-            onChange={v => onChange(`${identifier}.end`, v)}
-          />
-        </div>
-
-        <TextArea
-          rows="5"
-          className="mb-6"
-          label="Description"
-          placeholder="You can write about what you specialized in while working at the company and what projects you were a part of."
-          value={item.description}
-          onChange={v => onChange(`${identifier}.description`, v)}
-        />
+        <Form item={item} onChange={onChange} identifier={identifier} />
 
         <ItemActions
-          item={item}
-          onChange={onChange}
-          type="work"
-          identifier={identifier}
-          dispatch={dispatch}
           deleteItem={deleteItem}
+          dispatch={dispatch}
           first={first}
-          moveItemUp={moveItemUp}
+          identifier={identifier}
+          item={item}
           last={last}
           moveItemDown={moveItemDown}
+          moveItemUp={moveItemUp}
+          onChange={onChange}
+          type="work"
         />
       </div>
     </div>