diff --git a/package-lock.json b/package-lock.json index b4affcf7..2fc75a1a 100644 --- 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", diff --git a/package.json b/package.json index 9a51bdb6..dc9913b3 100644 --- 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", diff --git a/src/components/LeftSidebar/tabs/Profile.js b/src/components/LeftSidebar/tabs/Profile.js index d2336a8e..5e4d5bca 100644 --- 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 }) => ( -
- onChange('data.profile.photo', v)} - /> +const ProfileTab = ({ data, onChange }) => { + const { t } = useTranslation(); -
+ return ( +
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)} + /> + +
+ onChange('data.profile.firstName', v)} + /> + + onChange('data.profile.lastName', v)} + /> +
+ + onChange('data.profile.subtitle', v)} + /> + +
+ + onChange('data.profile.address.line1', 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)} + /> + + onChange('data.profile.address.line3', v)} + /> + +
+ + onChange('data.profile.phone', v)} + /> + + onChange('data.profile.website', v)} + /> + + onChange('data.profile.email', v)} />
+ ); +}; - onChange('data.profile.subtitle', v)} - /> - -
- - onChange('data.profile.address.line1', v)} - /> - - onChange('data.profile.address.line2', v)} - /> - - onChange('data.profile.address.line3', v)} - /> - -
- - onChange('data.profile.phone', v)} - /> - - onChange('data.profile.website', v)} - /> - - onChange('data.profile.email', v)} - /> -
-); export default ProfileTab; diff --git a/src/i18n/index.js b/src/i18n/index.js new file mode 100644 index 00000000..32668a13 --- /dev/null +++ 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; diff --git a/src/i18n/locales/en/leftSidebar.json b/src/i18n/locales/en/leftSidebar.json new file mode 100644 index 00000000..5e4a9bc4 --- /dev/null +++ b/src/i18n/locales/en/leftSidebar.json @@ -0,0 +1,5 @@ +{ + "profile": { + "photoUrl": "Photo URL" + } +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index ef5d94ae..3bec1015 100644 --- 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';