Refactor application

Author: Turbo

.eslintrc.js

@@ -5,6 +5,14 @@ module.exports = {
     "node": true, //# Node.js global variables and Node.js scoping.
   },
 
+  // Specifying global variables
+  "globals": {
+    "logInfo": true,
+    "logWarning": true,
+    "logError": true,
+    "logDebug": true,
+  },
+
   "parser": "babel-eslint", // By default, ESLint expects ECMAScript 5 syntax, specify ES6 instead
 
   "parserOptions": {

package.json

@@ -5,9 +5,10 @@
   "repository": "",
   "license": "UNLICENSED",
   "scripts": {
+    "license-check": "license-checker --exclude 'MIT, MIT OR X11, BSD, ISC, Public Domain'",
     "lint": "eslint .",
     "lint-fix": "eslint . --fix",
-    "clean-babel-cache": "rimraf -rf ./node_modules/.cache/babel-loader/*",
+    "clean": "rimraf -rf ./node_modules/.cache/babel-loader/*",
     "prod": "NODE_ENV=production node src/server/index.js",
     "dev": "NODE_ENV=development nodemon --watch src/server --watch config --inspect src/server/index.js"
   },
@@ -34,7 +35,6 @@
     "babel-plugin-module-resolver": "^3.1.1",
     "babel-plugin-universal-import": "^3.1.2",
     "brotli-webpack-plugin": "^1.0.0",
-    "chalk": "^2.4.1",
     "compression-webpack-plugin": "^2.0.0",
     "cookie-parser": "^1.4.3",
     "express": "^4.16.4",
@@ -43,7 +43,6 @@
     "graphql": "^14.0.2",
     "graphql-tag": "^2.10.0",
     "import": "0.0.6",
-    "isomorphic-fetch": "^2.2.1",
     "isomorphic-unfetch": "^3.0.0",
     "markdown-with-front-matter-loader": "^0.1.0",
     "node-noop": "^1.0.0",
@@ -67,7 +66,9 @@
     "webpack-dev-middleware": "3.4.0",
     "webpack-flush-chunks": "^2.0.3",
     "webpack-hot-middleware": "2.24.3",
-    "webpack-hot-server-middleware": "^0.5.0"
+    "webpack-hot-server-middleware": "^0.5.0",
+    "winston": "^3.1.0",
+    "winston-daily-rotate-file": "^3.6.0"
   },
   "devDependencies": {
     "babel-eslint": "^10.0.1",
@@ -80,6 +81,7 @@
     "eslint-plugin-jsx-a11y": "^6.1.2",
     "eslint-plugin-react": "^7.11.1",
     "husky": "^1.2.1",
+    "license-checker": "^25.0.1",
     "lint-staged": "^8.1.0",
     "nodemon": "^1.18.9"
   },

src/App/AppWrapper.js

@@ -6,15 +6,15 @@ import { ApolloProvider } from 'react-apollo';
 
 import theme from 'src/styles/theme';
 import GlobalizeStyle from 'src/styles/global-styles';
-import App from 'src/App';
-import apolloClient from 'src/data';
+import RouteComponents from 'src/App/RouteComponents';
+import apolloClient from 'src/data/ApolloClient';
 
 const AppWrapper = ({ lang }) => (
   <ApolloProvider client={apolloClient}>
     <ThemeProvider theme={theme}>
       <React.Fragment>
         <GlobalizeStyle />
-        <App lang={lang} />
+        <RouteComponents lang={lang} />
       </React.Fragment>
     </ThemeProvider>
   </ApolloProvider>

src/App/Client.js

@@ -3,25 +3,14 @@ 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';
+import { getLocaleOnClient } from 'src/i18n/utils';
 
-/* eslint-disable no-restricted-globals */
-export default class extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
+const ClientApp = () => (
+  <Router>
+    <ScrollToTop>
+      <AppWrapper lang={getLocaleOnClient(window.location)} />
+    </ScrollToTop>
+  </Router>
+);
 
-  render() {
-    // Determine current language by name
-    const currentLang = getLocaleOnClient(location);
-
-    return (
-      <Router>
-        <ScrollToTop>
-          <AppWrapper lang={currentLang} />
-        </ScrollToTop>
-      </Router>
-    );
-  }
-}
+export default ClientApp;

src/App/index.js renamed to src/App/RouteComponents.js

@@ -6,6 +6,9 @@ import Footer from 'src/Components/Footer';
 import Loading from 'src/Components/Loading';
 import { RedirectWithStatus } from 'src/Components/SSR';
 
+/*
+* Create a Universal Component template, allowing SSR a component + Code Splitting
+*/
 const UniversalComponent = universal(props => import(`../Pages/${props.page}`), {
   loading: () => <Loading />,
   ignoreBabelRename: true,
@@ -16,43 +19,21 @@ export default ({ lang }) => (
     <Header lang={lang} />
 
     <Switch>
-      <Route
-        exact
-        path="/:lang"
-        render={routeProps => <UniversalComponent page="Home" {...routeProps} />}
-      />
-
-      <Route
-        exact
-        path="/:lang/login"
-        render={routeProps => <UniversalComponent page="Login" {...routeProps} />}
-      />
-
-      <Route
-        exact
-        path="/:lang/books"
-        render={routeProps => <UniversalComponent page="Books" {...routeProps} />}
-      />
-
-      <Route
-        exact
-        path="/:lang/posts"
-        render={routeProps => <UniversalComponent page="Posts" {...routeProps} />}
-      />
-
-      <Route
-        exact
-        path="/:lang/posts/:slug"
-        render={routeProps => <UniversalComponent page="Post" {...routeProps} />}
-      />
+      <Route exact path="/:lang" render={props => <UniversalComponent page="Home" {...props} />} />
+      <Route exact path="/:lang/login" render={props => <UniversalComponent page="Login" {...props} />} />
+
+      <Route exact path="/:lang/books" render={props => <UniversalComponent page="Books" {...props} />} />
+
+      <Route exact path="/:lang/posts" render={props => <UniversalComponent page="Posts" {...props} />} />
+      <Route exact path="/:lang/posts/:slug" render={props => <UniversalComponent page="Post" {...props} />} />
 
       {/* Define Redirect logic if any */}
       <RedirectWithStatus httpStatus={301} from="/:lang" to={`/${lang}`} />
       <RedirectWithStatus httpStatus={301} from="/:lang/users" to="/" />
       <RedirectWithStatus httpStatus={302} from="/:lang/courses" to="/:lang/404" />
 
       {/* If url is not defined, go 404 */}
-      <Route render={routeProps => <UniversalComponent page="404" {...routeProps} />} />
+      <Route render={props => <UniversalComponent page="404" {...props} />} />
     </Switch>
 
     <Footer />

src/Components/Footer/index.js

@@ -4,7 +4,7 @@ import { Image, Box } from 'rebass';
 import FlexBox from 'src/Components/FlexBox';
 import { TextBlock } from 'src/Components/Typo';
 
-const imagePath = require('src/assets/images/full-logo.svg');
+const imagePath = require('src/static/images/full-logo.svg');
 
 const BoxWithFooter = Box.withComponent('footer');
 

src/Components/Head/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
 import PropTypes from 'prop-types';
-import favicon from 'src/assets/images/favicon.png';
+import favicon from 'src/static/images/favicon.png';
 
 const isProd = process.env.NODE_ENV === 'production';
 

src/Components/Header/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Anchor, NavLink } from 'src/Components/Navigation';
 import PropTypes from 'prop-types';
 
-import logo from 'src/assets/images/full-logo.svg';
+import logo from 'src/static/images/full-logo.svg';
 
 import Head from 'src/Components/Head';
 import FlexBox from 'src/Components/FlexBox';

src/Components/Logger/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-// import icon from 'assets/images/react-icon.png';
+// import icon from 'static/images/react-icon.png';
 import styled from 'styled-components';
 
 const Component = ({ message, appName }) => (

src/Components/Welcome/index.js

@@ -3,7 +3,7 @@ import { Query } from 'react-apollo';
 import gql from 'graphql-tag';
 import PropTypes from 'prop-types';
 
-import { fetchAllBooks } from 'src/helpers/loadData';
+import { fetchAllBooks } from 'src/utils/loadData';
 import Head from 'src/Components/Head';
 import FlexBox from 'src/Components/FlexBox';
 import { H3 } from 'src/Components/Typo';
@@ -31,13 +31,13 @@ class Books extends React.Component {
 
   async componentDidMount() {
     if (window.ROUTE_LOADED_DATA) {
-      // console.log('Data preloaded');
+      console.log('Data preloaded');
       this.setState({
         books: window.ROUTE_LOADED_DATA,
       });
       delete window.ROUTE_LOADED_DATA;
     } else {
-      // console.log('Data not preloaded. Fetching...');
+      console.log('Data not preloaded. Fetching...');
       await fetchAllBooks().then((data) => {
         this.setState({
           books: data,

src/Pages/Books/index.js

@@ -2,8 +2,8 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
-import truncate from 'src/helpers/truncate';
-import { fetchAllPosts } from 'src/helpers/loadData';
+import truncate from 'src/utils/truncate';
+import { fetchAllPosts } from 'src/utils/loadData';
 
 import FlexBox from 'src/Components/FlexBox';
 import CardBox from 'src/Components/CardBox';
@@ -24,13 +24,13 @@ class Posts extends React.Component {
     const { lang } = this.props.match.params;
 
     if (window.ROUTE_LOADED_DATA) {
-      // console.log('Data preloaded');
+      console.log('Data preloaded');
       this.setState({
         posts: window.ROUTE_LOADED_DATA,
       });
       delete window.ROUTE_LOADED_DATA;
     } else {
-      // console.log('Data not preloaded. Fetching...');
+      console.log('Data not preloaded. Fetching...');
       await fetchAllPosts().then((data) => {
         this.setState({
           lang,

src/Pages/Posts/index.js

@@ -1,4 +1,4 @@
-import getCookie from 'src/helpers/getCookie';
+import getCookie from 'src/utils/getCookie';
 import { LOCALE_DEFAULT, LOCALE_COOKIE_NAME, LOCALE_AVAILABLE } from './constants';
 
 // Get Locale from request server

src/data/index.js renamed to src/data/ApolloClient.js

@@ -1,9 +1,13 @@
 import React from 'react';
 import { hydrate } from 'react-dom';
 import { AppContainer } from 'react-hot-loader';
-
 import Client from './App/Client';
 
+/*
+* Define a render method to make another component wrapped inside
+* <AppContainer/> for to allow Hot Loader for development via `hydrate`
+* Then render inside a HTML element called #app
+*/
 const render = (Component) => {
   hydrate(
     <AppContainer>
@@ -12,12 +16,13 @@ const render = (Component) => {
     document.getElementById('app'),
   );
 };
+
+// By default, render a client
 render(Client);
 
-// Enable Hot Module Replacement
-if (module.hot) {
-  module.hot.accept('./App/Client.js', () => {
-    const NewClient = require('./App/Client.js').default; // eslint-disable-line global-require
-    render(NewClient);
-  });
-}
+/*
+* If Hot Module Replacement has been enabled via the HotModuleReplacementPlugin
+* Accept update for Client app
+* Then render a new Client app with predefined `render` method
+*/
+if (module.hot) module.hot.accept('./App/Client.js', () => render(Client));

src/i18n/helpers/constants.js renamed to src/i18n/utils/constants.js

@@ -4,7 +4,7 @@ import NotFound404 from 'src/Pages/404';
 import Posts from 'src/Pages/Posts';
 import Books from 'src/Pages/Books';
 
-import { fetchAllBooks, fetchAllPosts } from 'src/helpers/loadData';
+import { fetchAllBooks, fetchAllPosts } from 'src/utils/loadData';
 
 const routes = lang => [
   { path: `/${lang}/`, exact: true, component: Home },

src/i18n/helpers/getLocale.js renamed to src/i18n/utils/getLocale.js

@@ -4,10 +4,6 @@ import webpackHotServerMiddleware from 'webpack-hot-server-middleware';
 import configDevClient from 'config/webpack.dev-client';
 import configDevServer from 'config/webpack.dev-server';
 
-import {
-  log, info,
-} from 'src/Components/Logger';
-
 /* eslint-disable global-require */
 const bundleDev = (server, callback) => {
   const compiler = webpack([configDevClient, configDevServer]);
@@ -29,7 +25,7 @@ const bundleDev = (server, callback) => {
   server.use(webpackDevMiddleware);
   server.use(webpackHotMiddlware);
   server.use(webpackHotServerMiddleware(compiler));
-  log(info('Middleware enabled'));
+  console.log('Middleware enabled');
   callback();
 };
 

src/i18n/helpers/index.js renamed to src/i18n/utils/index.js

@@ -3,14 +3,13 @@ import expressStaticGzip from 'express-static-gzip';
 
 import configProdClient from 'config/webpack.prod-client';
 import configProdServer from 'config/webpack.prod-server';
-import { log } from 'src/Components/Logger';
 
 /* eslint-disable global-require */
 const bundleProd = (server, callback) => {
   webpack([configProdClient, configProdServer]).run((err, stats) => {
     const clientStats = stats.toJson().children[0];
     const render = require('build/server/prod-server-bundle.js').default;
-    log(stats.toString({ colors: true }));
+    console.log(stats.toString({ colors: true }));
 
     server.use(expressStaticGzip('build/client', { enableBrotli: true }));
     server.use(render({ clientStats }));

src/i18n/helpers/setLocale.js renamed to src/i18n/utils/setLocale.js

@@ -1,10 +1,6 @@
 import express from 'express';
+import 'src/utils/logger';
 import cookieParser from 'cookie-parser';
-
-import {
-  log, success,
-} from 'src/Components/Logger';
-
 import bundleDev from './bundleSettings/dev';
 import bundleProd from './bundleSettings/prod';
 
@@ -19,14 +15,10 @@ let isBuilt = false;
 
 server.listen(PORT, () => {
   isBuilt = true;
-  log([
-    'Server listening on ',
-    `${success(`http://localhost:${PORT}`)} in `,
-    `${success(process.env.NODE_ENV)} 🌎...`,
-  ].join(''));
+  logInfo(`Server listening on http://localhost:${PORT} ${process.env.NODE_ENV}`);
 });
 
-const done = () => !isBuilt && log(success('App is built'));
+const done = () => !isBuilt && console.log('App is built');
 
 
 // If Development environment