Merge pull request #14 from DeKal/add-multi-language

Add localize component

localize/LocalizedComponent.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { withLocalize } from 'react-localize-redux'
+import enTrans from '~/public/translations/en.json'
+import vnTrans from '~/public/translations/vn.json'
+import { EN } from '~/consts/langs'
+
+const onMissingTranslation = ({ translationId }) => {
+  return translationId
+}
+const defaultLanguage = EN
+
+class LocalizedComponent extends React.Component {
+  constructor(props) {
+    super(props)
+
+    const languages = ['en', 'vn']
+
+    this.props.initialize({
+      languages,
+      options: {
+        renderToStaticMarkup,
+        defaultLanguage,
+        onMissingTranslation,
+        renderInnerHtml: true
+      }
+    })
+
+    this.props.addTranslationForLanguage(enTrans, 'en')
+    this.props.addTranslationForLanguage(vnTrans, 'vn')
+  }
+
+  render() {
+    return this.props.children
+  }
+
+  componentDidMount() {
+    const lang = window.localStorage.getItem('lang') || defaultLanguage
+    this.props.setActiveLanguage(lang)
+  }
+}
+
+LocalizedComponent.propTypes = {
+  initialize: PropTypes.func,
+  addTranslationForLanguage: PropTypes.func,
+  children: PropTypes.element,
+  setActiveLanguage: PropTypes.func
+}
+
+export default withLocalize(LocalizedComponent)

package.json

@@ -20,7 +20,7 @@
     "react": "16.12.0",
     "react-dom": "16.12.0",
     "react-icons": "^3.8.0",
-    "recompose": "0.30.0",
+    "react-localize-redux": "^3.5.3",
     "styled-components": "4.4.1"
   },
   "devDependencies": {
@@ -39,8 +39,8 @@
     "danger": "9.2.8",
     "enzyme": "3.10.0",
     "enzyme-adapter-react-16": "1.15.1",
-    "eslint": "6.7.0",
     "enzyme-to-json": "^3.4.3",
+    "eslint": "6.7.0",
     "eslint-plugin-prettier": "3.1.1",
     "eslint-plugin-react": "7.16.0",
     "fs": "0.0.2",

pages/_app.js

@@ -1,6 +1,8 @@
 import App from 'next/app'
 import React from 'react'
 import { ThemeProvider } from 'styled-components/macro'
+import { LocalizeProvider } from 'react-localize-redux'
+import LocalizedComponent from '~/localize/LocalizedComponent'
 import { IconContext } from 'react-icons/lib/'
 
 import theme from '~/views/theme'
@@ -14,7 +16,11 @@ export default class MyApp extends App {
     return (
       <IconContext.Provider value={{ style: { verticalAlign: 'middle' } }}>
         <ThemeProvider theme={theme}>
-          <Component {...pageProps} />
+          <LocalizeProvider>
+            <LocalizedComponent>
+              <Component {...pageProps} />
+            </LocalizedComponent>
+          </LocalizeProvider>
         </ThemeProvider>
       </IconContext.Provider>
     )

public/translations/en.json

@@ -0,0 +1,11 @@
+{
+  "english": "english",
+  "vietnamese": "vietnamese",
+  "Menu": "Menu",
+  "Home": "Home",
+  "About": "About",
+  "Experiences": "Experiences",
+  "Certifications": "Certifications",
+  "Projects": "Projects",
+  "Contacts": "Contacts"
+}

public/translations/vn.json

@@ -0,0 +1,11 @@
+{
+  "english": "Tiếng Anh",
+  "vietnamese": "Tiếng Việt",
+  "Menu": "Mục lục",
+  "Home": "Trang chủ",
+  "About": "Về tôi",
+  "Experiences": "Kinh nghiệm",
+  "Certifications": "Chứng chỉ",
+  "Projects": "Dự án",
+  "Contacts": "Liên lạc"
+}

views/components/nav/NavHeader.js

@@ -1,9 +1,10 @@
 import React from 'react'
 import styled from 'styled-components/macro'
+import PropTypes from 'prop-types'
+import { Translate } from 'react-localize-redux'
 import { GiHamburgerMenu } from 'react-icons/gi'
 import { MdClose } from 'react-icons/md'
 import NavLang from '~/views/components/nav/NavLang'
-import PropTypes from 'prop-types'
 
 const NavHeader = ({ isShowNavContent, switchNav }) => (
   <NavContainer className="first-nav">
@@ -15,7 +16,8 @@ const NavHeader = ({ isShowNavContent, switchNav }) => (
         onClick={() => switchNav(!isShowNavContent)}
         href="#"
       >
-        {!isShowNavContent ? <HamburgerIcon /> : <CloseIcon />} Menu
+        {!isShowNavContent ? <HamburgerIcon /> : <CloseIcon />}{' '}
+        <Translate id="Menu" />
       </NavControl>
     </div>
   </NavContainer>

views/components/nav/NavItem.js

@@ -1,10 +1,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components/macro'
+import { Translate } from 'react-localize-redux'
 
 const NavItem = ({ page, isSelected, setSelectedPage }) => {
   return isSelected ? (
-    <SelectedContainer>{page}</SelectedContainer>
+    <SelectedContainer>
+      <Translate id={page} />
+    </SelectedContainer>
   ) : (
     <Container
       data-test-id="nav-link"
@@ -13,7 +16,7 @@ const NavItem = ({ page, isSelected, setSelectedPage }) => {
         setSelectedPage(page)
       }}
     >
-      {page}
+      <Translate id={page} />
     </Container>
   )
 }

views/components/nav/NavLink.js

@@ -2,27 +2,36 @@ import React from 'react'
 import styled from 'styled-components/macro'
 import PropTypes from 'prop-types'
 import { EN } from '~/consts/langs'
+import { Translate, withLocalize } from 'react-localize-redux'
 
-const NavLink = ({ lang, selectedLang, setSelectedLang }) => {
+const NavLink = ({
+  lang,
+  selectedLang,
+  setSelectedLang,
+  setActiveLanguage
+}) => {
   return (
     <Container
       isSelected={selectedLang === lang}
       onClick={() => {
         setSelectedLang(lang)
+        setActiveLanguage(lang)
+        window.localStorage.setItem('lang', lang)
       }}
     >
-      {lang === EN ? 'english' : 'vietnamese'}
+      {lang === EN ? <Translate id="english" /> : <Translate id="vietnamese" />}
     </Container>
   )
 }
 
 NavLink.propTypes = {
   lang: PropTypes.string,
   selectedLang: PropTypes.string,
-  setSelectedLang: PropTypes.func
+  setSelectedLang: PropTypes.func,
+  setActiveLanguage: PropTypes.func
 }
 
-export default NavLink
+export default withLocalize(NavLink)
 
 const Container = styled.a`
   color: ${props =>

views/components/nav/__test__/NavItem.spec.tsx

@@ -9,7 +9,6 @@ describe('Nav Item', () => {
     const tree = shallowWithTheme(
       <NavItem page={'Home'} isSelected setSelectedPage={setSelectedPage} />
     )
-    expect(tree.text()).toMatch('Home')
     expect(tree).toMatchSnapshot()
   })
 
@@ -19,7 +18,6 @@ describe('Nav Item', () => {
     const tree = shallowWithTheme(
       <NavItem page={'Home'} setSelectedPage={setSelectedPage} />
     )
-    expect(tree.text()).toMatch('Home')
     expect(tree).toMatchSnapshot()
   })
 

views/components/nav/__test__/NavLink.spec.tsx

@@ -1,26 +1,37 @@
 import * as React from 'react'
-import { shallowWithTheme } from '~/utils/withThemeProviders'
+import { mountWithTheme } from '~/utils/withThemeProviders'
 import NavLink from '~/views/components/nav/NavLink'
 import { EN, VN } from '~/consts/langs'
+
 describe('Nav Link', () => {
   it('should render with English selected', function() {
-    const wrap = shallowWithTheme(<NavLink lang={EN} selectedLang={EN} />)
+    const wrap = mountWithTheme(<NavLink lang={EN} selectedLang={EN} />)
     expect(wrap).toMatchSnapshot()
   })
 
   it('should render with Vietnamese selected', function() {
-    const wrap = shallowWithTheme(<NavLink lang={VN} selectedLang={VN} />)
+    const wrap = mountWithTheme(<NavLink lang={VN} selectedLang={VN} />)
     expect(wrap).toMatchSnapshot()
   })
 
   it('should change Language when clicking', function() {
     const setSelectedLang = jest.fn()
-    const wrap = shallowWithTheme(
-      <NavLink lang={VN} selectedLang={EN} setSelectedLang={setSelectedLang} />
+    const setActiveLanguage = jest.fn()
+    const wrap = mountWithTheme(
+      <NavLink
+        lang={VN}
+        selectedLang={EN}
+        setSelectedLang={setSelectedLang}
+        setActiveLanguage={setActiveLanguage}
+      />
     )
     wrap.simulate('click')
     expect(wrap).toMatchSnapshot()
+
     expect(setSelectedLang.mock.calls.length).toEqual(1)
-    expect(setSelectedLang).toHaveBeenCalledWith(VN);
+    expect(setSelectedLang).toHaveBeenCalledWith(VN)
+
+    expect(setActiveLanguage.mock.calls.length).toEqual(1)
+    expect(setActiveLanguage).toHaveBeenCalledWith(VN)
   })
 })