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 }) => (