it works!

2025-11-12 15:52:56 +10:00 · 2020-03-29 21:45:24 +05:30
parent 2e871f2d88
commit e75c0769c6
6 changed files with 143 additions and 79 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -8617,6 +8617,14 @@
        }
      }
    },
+    "html-parse-stringify2": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz",
+      "integrity": "sha1-3FZwtyksoVi3vJFsmmc1rIhyg0o=",
+      "requires": {
+        "void-elements": "^2.0.1"
+      }
+    },
    "html-tags": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-2.0.0.tgz",
@ -8790,6 +8798,14 @@
      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz",
      "integrity": "sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ=="
    },
+    "i18next": {
+      "version": "19.3.4",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-19.3.4.tgz",
+      "integrity": "sha512-ef7AxxutzdhBsBNugE9jgqsbwesG1muJOtZ9ZrPARPs/jXegViTp4+8JCeMp8BAyTIo1Zn0giqc8+2UpqFjU0w==",
+      "requires": {
+        "@babel/runtime": "^7.3.1"
+      }
+    },
    "iconv-lite": {
      "version": "0.4.24",
      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@ -14234,6 +14250,15 @@
      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.7.tgz",
      "integrity": "sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA=="
    },
+    "react-i18next": {
+      "version": "11.3.4",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.3.4.tgz",
+      "integrity": "sha512-IRZMD7PAM3C+fJNzRbyLNi1ZD0kc3Z3obBspJjEl+9H+ME41PhVor3BpdIqv/Rm7lUoGhMjmpu42J45ooJ61KA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "html-parse-stringify2": "2.0.1"
+      }
+    },
    "react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@ -17099,6 +17124,11 @@
      "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
      "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ=="
    },
+    "void-elements": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
+      "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w="
+    },
    "vue": {
      "version": "2.6.11",
      "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
--- a/package.json
+++ b/package.json
@ -8,9 +8,11 @@
    "@testing-library/react": "^10.0.1",
    "@testing-library/user-event": "^10.0.0",
    "axios": "^0.19.2",
+    "i18next": "^19.3.4",
    "lodash": "^4.17.15",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
+    "react-i18next": "^11.3.4",
    "react-markdown": "^4.3.1",
    "react-scripts": "3.4.1",
    "react-toastify": "^5.5.0",
--- a/src/components/LeftSidebar/tabs/Profile.js
+++ b/src/components/LeftSidebar/tabs/Profile.js
@ -1,93 +1,100 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
+
 import TextField from '../../../shared/TextField';

-const ProfileTab = ({ data, onChange }) => (
-  <div>
-    <TextField
-      className="mb-6"
-      label="Photo URL"
-      placeholder="https://i.imgur.com/..."
-      value={data.profile.photo}
-      onChange={v => onChange('data.profile.photo', v)}
-    />
+const ProfileTab = ({ data, onChange }) => {
+  const { t } = useTranslation();

-    <div className="grid grid-cols-2 col-gap-4">
+  return (
+    <div>
      <TextField
        className="mb-6"
-        label="First Name"
-        placeholder="Jane"
-        value={data.profile.firstName}
-        onChange={v => onChange('data.profile.firstName', v)}
+        label={t('profile.photoUrl')}
+        placeholder="https://i.imgur.com/..."
+        value={data.profile.photo}
+        onChange={v => onChange('data.profile.photo', v)}
+      />
+
+      <div className="grid grid-cols-2 col-gap-4">
+        <TextField
+          className="mb-6"
+          label="First Name"
+          placeholder="Jane"
+          value={data.profile.firstName}
+          onChange={v => onChange('data.profile.firstName', v)}
+        />
+
+        <TextField
+          className="mb-6"
+          label="Last Name"
+          placeholder="Doe"
+          value={data.profile.lastName}
+          onChange={v => onChange('data.profile.lastName', v)}
+        />
+      </div>
+
+      <TextField
+        className="mb-6"
+        label="Subtitle"
+        placeholder="Full Stack Web Developer"
+        value={data.profile.subtitle}
+        onChange={v => onChange('data.profile.subtitle', v)}
+      />
+
+      <hr className="my-6" />
+
+      <TextField
+        className="mb-6"
+        label="Address Line 1"
+        placeholder="Palladium Complex"
+        value={data.profile.address.line1}
+        onChange={v => onChange('data.profile.address.line1', v)}
      />

      <TextField
        className="mb-6"
-        label="Last Name"
-        placeholder="Doe"
-        value={data.profile.lastName}
-        onChange={v => onChange('data.profile.lastName', v)}
+        label="Address Line 2"
+        placeholder="140 E 14th St"
+        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"
+        value={data.profile.address.line3}
+        onChange={v => onChange('data.profile.address.line3', v)}
+      />
+
+      <hr className="my-6" />
+
+      <TextField
+        className="mb-6"
+        label="Phone Number"
+        placeholder="+1 541 754 3010"
+        value={data.profile.phone}
+        onChange={v => onChange('data.profile.phone', v)}
+      />
+
+      <TextField
+        className="mb-6"
+        label="Website"
+        placeholder="google.com"
+        value={data.profile.website}
+        onChange={v => onChange('data.profile.website', v)}
+      />
+
+      <TextField
+        className="mb-6"
+        label="Email Address"
+        placeholder="john.doe@example.com"
+        value={data.profile.email}
+        onChange={v => onChange('data.profile.email', v)}
      />
    </div>
+  );
+};

-    <TextField
-      className="mb-6"
-      label="Subtitle"
-      placeholder="Full Stack Web Developer"
-      value={data.profile.subtitle}
-      onChange={v => onChange('data.profile.subtitle', v)}
-    />
-
-    <hr className="my-6" />
-
-    <TextField
-      className="mb-6"
-      label="Address Line 1"
-      placeholder="Palladium Complex"
-      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"
-      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"
-      value={data.profile.address.line3}
-      onChange={v => onChange('data.profile.address.line3', v)}
-    />
-
-    <hr className="my-6" />
-
-    <TextField
-      className="mb-6"
-      label="Phone Number"
-      placeholder="+1 541 754 3010"
-      value={data.profile.phone}
-      onChange={v => onChange('data.profile.phone', v)}
-    />
-
-    <TextField
-      className="mb-6"
-      label="Website"
-      placeholder="google.com"
-      value={data.profile.website}
-      onChange={v => onChange('data.profile.website', v)}
-    />
-
-    <TextField
-      className="mb-6"
-      label="Email Address"
-      placeholder="john.doe@example.com"
-      value={data.profile.email}
-      onChange={v => onChange('data.profile.email', v)}
-    />
-  </div>
-);
 export default ProfileTab;
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@ -0,0 +1,19 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import leftSidebarEn from './locales/en/leftSidebar.json';
+
+i18n.use(initReactI18next).init({
+  lng: 'en',
+  fallbackLng: 'en',
+  debug: true,
+  resources: {
+    en: {
+      translations: leftSidebarEn,
+    },
+  },
+  ns: ['translations'],
+  defaultNS: 'translations',
+});
+
+export default i18n;
--- a/src/i18n/locales/en/leftSidebar.json
+++ b/src/i18n/locales/en/leftSidebar.json
@ -0,0 +1,5 @@
+{
+  "profile": {
+    "photoUrl": "Photo URL"
+  }
+}
--- a/src/index.js
+++ b/src/index.js
@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';

+import './i18n';
 import './assets/tailwind/tailwind.css';
 import './index.css';