Preload data for Posts and Books, fix language

Turbo · Turbo · commit 8380d0ff9b7a · 2018-12-29T05:15:26.000+01:00
diff --git a/package.json b/package.json
@@ -26,7 +26,6 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.0.0",
     "@babel/runtime": "^7.2.0",
-    "accepts": "^1.3.5",
     "babel-loader": "^8.0.4",
     "babel-plugin-inline-dotenv": "^1.2.0",
     "babel-plugin-module-resolver": "^3.1.1",
diff --git a/src/App/AppWrapper.js b/src/App/AppWrapper.js
@@ -15,12 +15,8 @@ const AppWrapper = ({ lang }) => (
   </ThemeProvider>
 );
 
-AppWrapper.defaultProps = {
-  lang: 'en',
-};
-
 AppWrapper.propTypes = {
-  lang: PropTypes.string,
+  lang: PropTypes.string.isRequired,
 };
 
 export default AppWrapper;
diff --git a/src/App/Client.js b/src/App/Client.js
@@ -3,6 +3,7 @@ import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import AppWrapper from 'src/App/AppWrapper';
 import ScrollToTop from 'src/Components/ScrollToTop';
+import { getLocaleOnClient } from 'src/i18n/helpers';
 
 /* eslint-disable no-restricted-globals */
 export default class extends React.Component {
@@ -12,13 +13,13 @@ export default class extends React.Component {
   }
 
   render() {
-    const isEn = location.pathname.substr(1, 2) === 'en' && 'en';
-    const isVi = location.pathname.substr(1, 2) === 'vi' && 'vi';
-    const currentLang = isEn || isVi || 'en';
+    // Determine current language by name
+    const currentLang = getLocaleOnClient(location);
+
     return (
       <Router>
         <ScrollToTop>
-          <AppWrapper lang={navigator && currentLang} />
+          <AppWrapper lang={currentLang} />
         </ScrollToTop>
       </Router>
     );
diff --git a/src/App/index.js b/src/App/index.js
@@ -47,7 +47,7 @@ export default ({ lang }) => (
       />
 
       {/* Define Redirect logic if any */}
-      <RedirectWithStatus httpStatus={301} exact from="/:lang" to={`/${lang}`} />
+      <RedirectWithStatus httpStatus={301} from="/:lang" to={`/${lang}`} />
       <RedirectWithStatus httpStatus={301} from="/:lang/users" to="/" />
       <RedirectWithStatus httpStatus={302} from="/:lang/courses" to="/:lang/404" />
 
@@ -56,6 +56,5 @@ export default ({ lang }) => (
     </Switch>
 
     <Footer />
-    {/* Footer here */}
   </React.Fragment>
 );
diff --git a/src/Pages/Books/index.js b/src/Pages/Books/index.js
@@ -1,44 +1,46 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import loadData from 'src/helpers/loadData';
+import { fetchAllBooks } from 'src/helpers/loadData';
 import Head from 'src/Components/Head';
-import Footer from 'src/Components/Footer';
+import FlexBox from 'src/Components/FlexBox';
+import { H3 } from 'src/Components/Typo';
 
-class Books extends React.Component {
-  constructor(props) {
-    super(props);
-
-    // Check if staticContext exists
-    // because it will be undefined if rendered through a BrowserRouter
-    this.state = (props.staticContext && props.staticContext.data) ? {
-      data: props.staticContext.data,
-    } : { data: [] };
-  }
 
-  componentDidMount() {
-    setTimeout(() => {
-      if (window.ROUTE_LOADED_DATA) {
+class Books extends React.Component {
+  // Check if staticContext exists
+  // because it will be undefined if rendered through a BrowserRouter
+  state = {
+    books: (this.props.staticContext && this.props.staticContext.data)
+      ? this.props.staticContext.data : [],
+  };
+
+  async componentDidMount() {
+    if (window.ROUTE_LOADED_DATA) {
+      // console.log('Data preloaded');
+      this.setState({
+        books: window.ROUTE_LOADED_DATA,
+      });
+      delete window.ROUTE_LOADED_DATA;
+    } else {
+      // console.log('Data not preloaded. Fetching...');
+      await fetchAllBooks().then((data) => {
         this.setState({
-          data: window.ROUTE_LOADED_DATA,
-        });
-        delete window.ROUTE_LOADED_DATA;
-      } else {
-        loadData('posts').then((data) => {
-          this.setState({
-            data,
-          });
+          books: data,
         });
-      }
-    }, 0);
+      });
+    }
   }
 
   render() {
-    const { data } = this.state;
+    const { books } = this.state;
     return (
       <React.Fragment>
         <Head title="Books" />
-        <ul>{data.map(post => <li key={post.id}>{post.title}</li>)}</ul>
-        <Footer />
+        <FlexBox width={1/2} mx="auto" flexDirection="column" alignItems="flex-start">
+          {
+            books.map(book => <H3 key={book.id}>{book.title}</H3>)
+          }
+        </FlexBox>
       </React.Fragment>
     );
   }
diff --git a/src/Pages/Posts/index.js b/src/Pages/Posts/index.js
@@ -3,6 +3,8 @@ import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
 import truncate from 'src/helpers/truncate';
+import { fetchAllPosts } from 'src/helpers/loadData';
+
 import FlexBox from 'src/Components/FlexBox';
 import CardBox from 'src/Components/CardBox';
 import { H3, Span } from 'src/Components/Typo';
@@ -12,21 +14,30 @@ import Badge from 'src/Components/Badge';
 // Import all files inside `data` via Webpack require.context
 // Read more:
 // https://goo.gl/315fi3 - Importing Multiple Markdown files into a React Component with Webpack
-const postContext = require.context('../../../content', false, /\.md$/);
-const postFiles = postContext
-  .keys()
-  .map(filename => postContext(filename));
-
 class Posts extends React.Component {
   state = {
-    posts: [],
-    lang: 'en',
+    posts: (this.props.staticContext && this.props.staticContext.data)
+      ? this.props.staticContext.data : [],
   }
 
-  componentDidMount() {
-    const posts = postFiles;
+  async componentDidMount() {
     const { lang } = this.props.match.params;
-    this.setState(state => ({ ...state, posts, lang }));
+
+    if (window.ROUTE_LOADED_DATA) {
+      // console.log('Data preloaded');
+      this.setState({
+        posts: window.ROUTE_LOADED_DATA,
+      });
+      delete window.ROUTE_LOADED_DATA;
+    } else {
+      // console.log('Data not preloaded. Fetching...');
+      await fetchAllPosts().then((data) => {
+        this.setState({
+          lang,
+          posts: data,
+        });
+      });
+    }
   }
 
   render() {
@@ -46,8 +57,8 @@ class Posts extends React.Component {
         >
           {
             posts.map((post, i) => (
-              <CardBox width={[1, 1/3]} px={[1, 2, 3]} py={[0, 1, 2]} mx={[1, 2, 3]}>
-                <Link key={i} to={`/${lang}/posts/${post.slug}`}>
+              <CardBox key={i} width={[1, 1/3]} px={[1, 2, 3]} py={[0, 1, 2]} mx={[1, 2, 3]}>
+                <Link to={`/${lang}/posts/${post.slug}`}>
                   <H3 dangerouslySetInnerHTML={{ __html: post.title }} />
                 </Link>
                 <Span dangerouslySetInnerHTML={{ __html: truncate(post.__content) }} />
@@ -71,6 +82,14 @@ Posts.propTypes = {
       lang: PropTypes.string.isRequired,
     }),
   }).isRequired,
+
+  staticContext: PropTypes.shape({
+    data: PropTypes.array,
+  }),
+};
+
+Posts.defaultProps = {
+  staticContext: {},
 };
 
 export default Posts;
diff --git a/src/client-locale/constants.js b/src/client-locale/constants.js
diff --git a/src/client-locale/extractLocalesFromReq.js b/src/client-locale/extractLocalesFromReq.js
diff --git a/src/client-locale/guessLocale.js b/src/client-locale/guessLocale.js
diff --git a/src/helpers/getCookie.js b/src/helpers/getCookie.js
@@ -0,0 +1,6 @@
+const getCookie = (name) => {
+  const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]+)`));
+  return (match) ? match[2] : null;
+};
+
+export default getCookie;
diff --git a/src/helpers/loadData.js b/src/helpers/loadData.js
@@ -1,5 +1,13 @@
 import 'isomorphic-fetch';
 
-export default resourceType => fetch(`https://jsonplaceholder.typicode.com/${resourceType}`)
+export const fetchAllBooks = () => fetch('https://jsonplaceholder.typicode.com/posts')
   .then(res => res.json())
   .then(data => data.filter((_, idx) => idx < 10));
+
+export const fetchAllPosts = async () => {
+  const postContext = require.context('../../content', false, /\.md$/);
+  const postFiles = await postContext
+    .keys()
+    .map(filename => postContext(filename));
+  return postFiles;
+};
diff --git a/src/i18n/helpers/constants.js b/src/i18n/helpers/constants.js
@@ -0,0 +1,6 @@
+export const LOCALE_COOKIE_NAME = 'locale';
+export const COOKIE_MAX_AGE = 2592000; // 30 days
+
+export const STORAGE_LOCALE_NAME = 'locale';
+export const LOCALE_AVAILABLE = ['vi', 'en'];
+export const LOCALE_DEFAULT = 'en';
diff --git a/src/i18n/helpers/getLocale.js b/src/i18n/helpers/getLocale.js
@@ -0,0 +1,26 @@
+import getCookie from 'src/helpers/getCookie';
+import { LOCALE_DEFAULT, LOCALE_COOKIE_NAME, LOCALE_AVAILABLE } from './constants';
+
+// Get Locale from request server
+const getLocaleOnServer = (req) => {
+  // Check if locale has been chosen before via Cookie
+  let currentLocale = req.cookies[LOCALE_COOKIE_NAME];
+
+  // Check if locale belongs to available locales
+  currentLocale = (LOCALE_AVAILABLE.includes(currentLocale)) ? currentLocale : LOCALE_DEFAULT;
+
+  return currentLocale;
+};
+
+// Get Locale on client side
+const getLocaleOnClient = (location) => {
+  let currentLocale = getCookie('locale');
+  if (!currentLocale) location.pathname.substr(1, 2);
+  currentLocale = (LOCALE_AVAILABLE.includes(currentLocale)) ? currentLocale : LOCALE_DEFAULT;
+  return currentLocale;
+};
+
+export {
+  getLocaleOnServer,
+  getLocaleOnClient,
+};
diff --git a/src/i18n/helpers/index.js b/src/i18n/helpers/index.js
@@ -0,0 +1,8 @@
+import { getLocaleOnClient, getLocaleOnServer } from './getLocale';
+import setLocale from './setLocale';
+
+export {
+  getLocaleOnClient,
+  getLocaleOnServer,
+  setLocale,
+};
diff --git a/src/i18n/helpers/setLocale.js b/src/i18n/helpers/setLocale.js
diff --git a/src/index.js b/src/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { hydrate } from 'react-dom';
 import { AppContainer } from 'react-hot-loader';
-import AppRoot from './App/AppRoot';
+import Client from './App/Client';
 
 const render = (Component) => {
   hydrate(
@@ -11,12 +11,12 @@ const render = (Component) => {
     document.getElementById('app'),
   );
 };
-render(AppRoot);
+render(Client);
 
 // Enable Hot Module Replacement
 if (module.hot) {
-  module.hot.accept('./App/AppRoot.js', () => {
-    const NewAppRoot = require('./App/AppRoot.js').default; // eslint-disable-line global-require
-    render(NewAppRoot);
+  module.hot.accept('./App/Client.js', () => {
+    const NewClient = require('./App/Client.js').default; // eslint-disable-line global-require
+    render(NewClient);
   });
 }
diff --git a/src/routes.js b/src/routes.js
@@ -4,13 +4,13 @@ import NotFound404 from 'src/Pages/404';
 import Posts from 'src/Pages/Posts';
 import Books from 'src/Pages/Books';
 
-import loadData from 'src/helpers/loadData';
+import { fetchAllBooks, fetchAllPosts } from 'src/helpers/loadData';
 
-const routes = [
-  { path: '/', exact: true, component: Home },
-  { path: '/login', component: Login },
-  { path: '/books', component: Books },
-  { path: '/posts', component: Posts, loadData: () => loadData('posts') },
+const routes = lang => [
+  { path: `/${lang}/`, exact: true, component: Home },
+  { path: `/${lang}/login`, component: Login },
+  { path: `/${lang}/books`, component: Books, loadData: () => fetchAllBooks() },
+  { path: `/${lang}/posts`, component: Posts, loadData: () => fetchAllPosts() },
   { component: NotFound404 },
 ];
 
diff --git a/src/server/render.js b/src/server/render.js
@@ -10,9 +10,13 @@ import serialize from 'serialize-javascript';
 import AppWrapper from 'src/App/AppWrapper';
 import Markup from 'src/Components/HTML';
 
-import extractLocalesFromReq from 'src/client-locale/extractLocalesFromReq';
-import guessLocale from 'src/client-locale/guessLocale';
-import { LOCALE_COOKIE_NAME, COOKIE_MAX_AGE } from 'src/client-locale/constants';
+import { getLocaleOnServer } from 'src/i18n/helpers';
+import {
+  LOCALE_COOKIE_NAME,
+  COOKIE_MAX_AGE,
+  LOCALE_AVAILABLE,
+  LOCALE_DEFAULT,
+} from 'src/i18n/helpers/constants';
 import {
   log, error, warning,
 } from 'src/Components/Logger';
@@ -24,20 +28,19 @@ import Sitemap from './sitemap';
 
 export default ({ clientStats }) => (req, res) => {
   // Prepare Language
-  const userLocales = extractLocalesFromReq(req);
-  let lang = guessLocale(['vi', 'en'], userLocales, 'en');
-
-  if (req.originalUrl.substr(1, 2) === 'vi') lang = 'vi';
-  if (req.originalUrl.substr(1, 2) === 'en') lang = 'en';
+  // TODO: Properly redirect language to preveous use
+  let lang = getLocaleOnServer(req);
+  lang = req.originalUrl.substr(1, 2);
+  lang = (LOCALE_AVAILABLE.includes(lang)) ? lang : LOCALE_DEFAULT;
+  // console.log(lang);
 
   // Match current route and check if loadData is required
-  const currentRoute = routes.find(route => matchPath(req.url, route)) || {};
+  const currentRoute = routes(lang).find(route => matchPath(req.url, route)) || {};
   const promise = (currentRoute.loadData) ? currentRoute.loadData() : Promise.resolve(null);
 
   // Prepare out stylesheets and apply to DOM
   const stylesheet = new ServerStyleSheet();
 
-  // TODO: Fetch isomorphic-data
   promise.then((data) => {
     // Prepare data
     const context = { data };
diff --git a/src/styles/global-styles.js b/src/styles/global-styles.js
