add language support in ssr

im6 · Dec 18, 2019 · 173a518 · 173a518
1 parent baa412e
commit 173a518
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 22 deletions.
diff --git a/client/context/LangContainer.js b/client/context/LangContainer.js
@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { LanguageContextProvider } from './LanguageContext';
+import { LanguageContextProvider } from '../../isomorphic/LanguageContext';
 
 const mapStateToProps = ({ user }) => {
   return {

diff --git a/client/modules/color/components/OneColor/index.jsx b/client/modules/color/components/OneColor/index.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Box from '../Box';
 import style from './style.sass';
 import noop from '../../../../../isomorphic/noop';
-import { LanguageContext } from '../../../../context/LanguageContext';
+import { LanguageContext } from '../../../../../isomorphic/LanguageContext';
 
 class OneColor extends React.Component {
   constructor(props) {

diff --git a/client/modules/layout/Header/Header.jsx b/client/modules/layout/Header/Header.jsx
@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 import style from './style.sass';
 import TranslationIcon from './TranslationIcon';
 import LanguageDropdown from '../../../../isomorphic/LanguageDropdown';
-import { LanguageContext } from '../../../context/LanguageContext';
+import { LanguageContext } from '../../../../isomorphic/LanguageContext';
 
 class Header extends React.Component {
   constructor(props) {

diff --git a/client/modules/newcolor/components/NewColor/index.jsx b/client/modules/newcolor/components/NewColor/index.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { ChromePicker } from 'react-color';
 import EditCanvas from '../EditCanvas';
 import style from './style.sass';
-import { LanguageContext } from '../../../../context/LanguageContext';
+import { LanguageContext } from '../../../../../isomorphic/LanguageContext';
 
 const DEFAULTVALUE = '#81EEFF';
 

diff --git a/dist/server.js b/dist/server.js
diff --git a/client/context/LanguageContext.jsx → isomorphic/LanguageContext.jsx b/client/context/LanguageContext.jsx → isomorphic/LanguageContext.jsx
@@ -1,11 +1,12 @@
 import React from 'react';
-import { translation } from '../../isomorphic/translation';
+import { translation } from './translation';
 
 export const LanguageContext = React.createContext();
 export class LanguageContextProvider extends React.Component {
   render() {
+    const lang = translation[this.props.lang] || translation.en;
     return (
-      <LanguageContext.Provider value={translation[this.props.lang]}>
+      <LanguageContext.Provider value={lang}>
         {this.props.children}
       </LanguageContext.Provider>
     );

diff --git a/server/middlewares/render.jsx b/server/middlewares/render.jsx
@@ -5,11 +5,16 @@ import { renderToString, renderToStaticMarkup } from 'react-dom/server';
 import { PUBLIC_PATH } from '../config';
 import Html from '../modules/Html';
 import App from '../modules/App';
+import { LanguageContextProvider } from '../../isomorphic/LanguageContext';
 
 const version = uuid.v1().substring(0, 8);
 
 export default (req, res) => {
-  const app = <App url={req.path} />;
+  const app = (
+    <LanguageContextProvider lang={req.cookies.lang}>
+      <App url={req.path} />
+    </LanguageContextProvider>
+  );
   const appHtml = renderToString(app);
   const htmlDOM = (
     <Html

diff --git a/server/modules/App.jsx b/server/modules/App.jsx
@@ -4,16 +4,20 @@ import PropTypes from 'prop-types';
 
 import noop from '../../isomorphic/noop';
 import ColorLoading from '../../isomorphic/ColorLoading';
+import { LanguageContext } from '../../isomorphic/LanguageContext';
 import LanguageDropdown from '../../isomorphic/LanguageDropdown';
 import TranslationIcon from '../../client/modules/layout/Header/TranslationIcon';
 
 const selectClassName = '_1-i7j';
 
-const App = ({ url }) => {
-  const selectPopular = url === '/popular';
-  const selectLatest = url in { '/latest': true, '/': true };
+class App extends React.Component {
+  render() {
+    const { url } = this.props;
+    const selectPopular = url === '/popular';
+    const selectLatest = url in { '/latest': true, '/': true };
+    const language = this.context;
 
-  return (
+    return (
     <div className="Cqiyx">
       <nav
         className="navbar is-fixed-top"
@@ -48,33 +52,37 @@ const App = ({ url }) => {
               }`}
               href="/popular"
             >
-              Popular
+              {language.popular}
             </a>
             <a
               className={`navbar-item ${selectLatest ? selectClassName : ''}`}
               href="/latest"
             >
-              Latest
+              {language.latest}
             </a>
             <div className="navbar-item has-dropdown is-hoverable">
-              <a className="navbar-link">More</a>
+              <a className="navbar-link">
+                {language.more}
+              </a>
               <div className="navbar-dropdown">
                 <a className="navbar-item" href="//www.colorpk.com">
                   ColorPK v2.0
                 </a>
                 <a className="navbar-item" href="//www.colorpk.com/about">
-                  About
+                 {language.about}
                 </a>
                 <hr className="navbar-divider" />
                 <a className="navbar-item" href="//github.com/im6/vp/issues">
-                  Report an issue
+                  {language.reportIssue}
                 </a>
               </div>
             </div>
             <div className="navbar-item has-dropdown is-hoverable">
               <a className="navbar-link">
                 <TranslationIcon />
-                <span className="_3QtW-">Language</span>
+                <span className="_3QtW-">
+                  {language.language}
+                </span>
               </a>
               <LanguageDropdown onChange={noop} />
             </div>
@@ -83,7 +91,7 @@ const App = ({ url }) => {
             <div className="navbar-item">
               <div className="buttons">
                 <a className="button is-primary" href="/new">
-                  New Color
+                {language.newColor}
                 </a>
                 &nbsp;&nbsp;
               </div>
@@ -92,12 +100,13 @@ const App = ({ url }) => {
         </div>
       </nav>
       <ColorLoading url={url} />
-    </div>
-  );
-};
+    </div>)
+  }
+}
 
 App.propTypes = {
   url: PropTypes.string.isRequired,
 };
+App.contextType = LanguageContext;
 
 export default App;