completed translation extraction of profile and work

2020-03-29 23:28:24 +05:30 · 2020-03-29 23:28:24 +05:30 · 9510d44949
parent e75c0769c6
commit 9510d44949
18 changed files with 275 additions and 177 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,4 @@
+{
+  "i18n-ally.localesPaths": "src/i18n",
+  "i18n-ally.keystyle": "nested"
+}
--- a/src/components/App/App.js
+++ b/src/components/App/App.js
@ -1,5 +1,5 @@
 /* eslint-disable no-unused-vars */
-import React, { useEffect, useContext } from 'react';
+import React, { useEffect, useContext, Suspense } from 'react';

 import LeftSidebar from '../LeftSidebar/LeftSidebar';
 import RightSidebar from '../RightSidebar/RightSidebar';
@ -37,21 +37,23 @@ const App = () => {
  };

  return (
-    <div className="h-screen overflow-hidden grid grid-cols-5 items-center">
-      <LeftSidebar />
+    <Suspense fallback="Loading...">
+      <div className="h-screen overflow-hidden grid grid-cols-5 items-center">
+        <LeftSidebar />

-      <div className="z-0 h-screen col-span-3 flex justify-center items-center overflow-scroll">
-        <div
-          id="page"
-          className="animated fadeIn my-auto shadow-2xl"
-          style={{ animationDelay: '500ms' }}
-        >
-          {renderTemplate()}
+        <div className="z-0 h-screen col-span-3 flex justify-center items-center overflow-scroll">
+          <div
+            id="page"
+            className="animated fadeIn my-auto shadow-2xl"
+            style={{ animationDelay: '500ms' }}
+          >
+            {renderTemplate()}
+          </div>
        </div>
-      </div>

-      <RightSidebar />
-    </div>
+        <RightSidebar />
+      </div>
+    </Suspense>
  );
 };

--- a/src/components/LeftSidebar/tabs/Objective.js
+++ b/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)}
      />
--- a/src/components/LeftSidebar/tabs/Profile.js
+++ b/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)}
      />
--- a/src/components/LeftSidebar/tabs/Work.js
+++ b/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>
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@ -1,19 +1,15 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';

-import leftSidebarEn from './locales/en/leftSidebar.json';
+import resources from './resources';

 i18n.use(initReactI18next).init({
  lng: 'en',
  fallbackLng: 'en',
+  resources,
  debug: true,
-  resources: {
-    en: {
-      translations: leftSidebarEn,
-    },
-  },
-  ns: ['translations'],
-  defaultNS: 'translations',
+  ns: ['app', 'leftSidebar'],
+  defaultNS: 'app',
 });

 export default i18n;
--- a/src/i18n/locales/en/leftSidebar.json
+++ b/src/i18n/locales/en/leftSidebar.json
@ -1,5 +0,0 @@
-{
-  "profile": {
-    "photoUrl": "Photo URL"
-  }
-}
--- a/src/i18n/resources/en/app/app.json
+++ b/src/i18n/resources/en/app/app.json
@ -0,0 +1,22 @@
+{
+  "heading": {
+    "placeholder": "Heading"
+  },
+  "item": {
+    "addHeading": "Add {{heading}}",
+    "startDate": {
+      "label": "Start Date",
+      "placeholder": "March 2018"
+    },
+    "endDate": {
+      "label": "End Date",
+      "placeholder": "current"
+    }
+  },
+  "buttons": {
+    "add": {
+      "label": "Add"
+    }
+  },
+  "markdownHelpText": "You can use <1>GitHub Flavored Markdown</1> to style this section of text."
+}
--- a/src/i18n/resources/en/app/index.js
+++ b/src/i18n/resources/en/app/index.js
@ -0,0 +1,3 @@
+import app from './app.json';
+
+export default app;
--- a/src/i18n/resources/en/index.js
+++ b/src/i18n/resources/en/index.js
@ -0,0 +1,7 @@
+import app from './app';
+import leftSidebar from './leftSidebar';
+
+export default {
+  app,
+  leftSidebar,
+};
--- a/src/i18n/resources/en/leftSidebar/index.js
+++ b/src/i18n/resources/en/leftSidebar/index.js
@ -0,0 +1,9 @@
+import profile from './profile.json';
+import objective from './objective.json';
+import work from './work.json';
+
+export default {
+  profile,
+  objective,
+  work,
+};
--- a/src/i18n/resources/en/leftSidebar/objective.json
+++ b/src/i18n/resources/en/leftSidebar/objective.json
@ -0,0 +1,6 @@
+{
+  "objective": {
+    "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."
+  }
+}
--- a/src/i18n/resources/en/leftSidebar/profile.json
+++ b/src/i18n/resources/en/leftSidebar/profile.json
@ -0,0 +1,44 @@
+{
+  "photoUrl": {
+    "label": "Photo URL",
+    "placeholder": "https://i.imgur.com/..."
+  },
+  "firstName": {
+    "label": "First Name",
+    "placeholder": "Jane"
+  },
+  "lastName": {
+    "label": "Last Name",
+    "placeholder": "Doe"
+  },
+  "subtitle": {
+    "label": "Subtitle",
+    "placeholder": "Full Stack Web Developer"
+  },
+  "address": {
+    "line1": {
+      "label": "Address Line 1",
+      "placeholder": "Palladium Complex"
+    },
+    "line2": {
+      "label": "Address Line 2",
+      "placeholder": "140 E 14th St"
+    },
+    "line3": {
+      "label": "Address Line 3",
+      "placeholder": "New York, NY 10003 USA"
+    }
+  },
+  "phone": {
+    "label": "Phone Number",
+    "placeholder": "+1 541 754 3010"
+  },
+  "website": {
+    "label": "Website",
+    "placeholder": "google.com"
+  },
+  "email": {
+    "label": "Email Address",
+    "placeholder": "john.doe@example.com"
+  }
+}
--- a/src/i18n/resources/en/leftSidebar/work.json
+++ b/src/i18n/resources/en/leftSidebar/work.json
@ -0,0 +1,14 @@
+{
+  "name": {
+    "label": "Name",
+    "placeholder": "Amazon US"
+  },
+  "role": {
+    "label": "Role",
+    "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."
+  }
+}
--- a/src/i18n/resources/index.js
+++ b/src/i18n/resources/index.js
@ -0,0 +1,5 @@
+import en from './en';
+
+export default {
+  en,
+};
--- a/src/shared/AddItemButton.js
+++ b/src/shared/AddItemButton.js
@ -0,0 +1,20 @@
+import React from 'react';
+
+const AddItemButton = ({ onSubmit }) => {
+  return (
+    <div>
+      <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>
+  );
+};
+
+export default AddItemButton;
--- a/src/shared/ItemActions.js
+++ b/src/shared/ItemActions.js
@ -2,16 +2,16 @@ import React from 'react';
 import Checkbox from './Checkbox';

 const ItemActions = ({
-  item,
-  onChange,
-  type,
-  identifier,
-  dispatch,
  deleteItem,
+  dispatch,
  first,
-  moveItemUp,
+  identifier,
+  item,
  last,
  moveItemDown,
+  moveItemUp,
+  onChange,
+  type,
 }) => {
  return (
    <div className="flex justify-between">
@ -20,7 +20,7 @@ const ItemActions = ({
          size="2.25rem"
          checked={item.enable}
          onChange={v => {
-            onChange(`${identifier}.enable`, v);
+            onChange(`${identifier}enable`, v);
          }}
        />

--- a/src/shared/MarkdownHelpText.js
+++ b/src/shared/MarkdownHelpText.js
@ -1,19 +1,22 @@
 import React from 'react';
+import { Trans } from 'react-i18next';

 const MarkdownHelpText = ({ className }) => {
  return (
    <div className={className}>
      <p className="text-gray-800 text-xs">
-        You can use{' '}
-        <a
-          className="text-blue-600 hover:underline"
-          target="_blank"
-          rel="noopener noreferrer"
-          href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet"
-        >
-          GitHub Flavored Markdown
-        </a>{' '}
-        to style this section of text.
+        <Trans i18nKey="markdownHelpText">
+          You can use
+          <a
+            className="text-blue-600 hover:underline"
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet"
+          >
+            GitHub Flavored Markdown
+          </a>
+          to style this section of text.
+        </Trans>
      </p>
    </div>
  );