Feature: Babel + Webpack enhancements (#51)

* chore: move todos into fixture and add async/await

* chore: import todo actions separately

* chore: update deps

* chore: remove uncessary deps

* feat: massive babel and webpack rehaul

- .babelrc now only contains configuration for server files
- webpack-built files are now configured by passing options directly to
babel-loader and skipping .babelrc

* feat: more babel and webpack improvements

Author: calvinl

.babelrc

@@ -0,0 +1,26 @@
+{
+  "presets": [
+    [
+      "env",
+      {
+        "targets": {
+          "node": "current",
+          "uglify": false
+        }
+      }
+    ]
+  ],
+  "plugins": [
+    "transform-es2015-modules-commonjs",
+    "transform-class-properties",
+    "transform-export-extensions",
+    "transform-object-rest-spread"
+  ],
+  "env": {
+    "test": {
+      "presets": [
+        "react"
+      ]
+    }
+  }
+}

client/index.js

@@ -1,4 +1,3 @@
-import 'babel-polyfill';
 import './styles';
 import React from 'react';
 import ReactDOM from 'react-dom';

common/js/components/common/Loading/index.js

@@ -4,8 +4,6 @@ import PropTypes from 'prop-types';
 const Loading = (props) => {
   const { error, timedOut, pastDelay } = props;
 
-  console.log(props);
-
   if (error) {
     // When the loader has errored
     return (

common/js/containers/Todos/index.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Helmet } from 'react-helmet';
-import * as actions from '@actions/todos';
+import { fetchTodos, addTodo, toggleTodo, removeTodo } from '@actions/todos';
 import { Container } from 'semantic-ui-react';
 import { TodoList, TodoForm } from '@components/todos';
 
@@ -16,28 +16,28 @@ class TodosContainer extends Component {
     const { dispatch, todos: { isFetched } } = this.props;
 
     if (!isFetched) {
-      dispatch(actions.fetchTodos());
+      dispatch(fetchTodos());
     }
   }
 
   submitTodo = text => {
     const { dispatch } = this.props;
 
     if (text) {
-      dispatch(actions.addTodo(text));
+      dispatch(addTodo(text));
     }
   };
 
   checkTodo = id => {
     const { dispatch } = this.props;
 
-    dispatch(actions.toggleTodo(id));
+    dispatch(toggleTodo(id));
   };
 
   removeTodo = id => {
     const { dispatch } = this.props;
 
-    dispatch(actions.removeTodo(id));
+    dispatch(removeTodo(id));
   };
 
   render() {

common/js/pages/Todos/index.js

@@ -1,14 +1,13 @@
 import React, { Component } from 'react';
-import Loadable from 'react-loadable';
-import { Loading } from '@components/common';
 import { fetchTodos } from '@actions/todos';
-
-// NOTE: To turn off dynamic imports, import this container normally using:
-// import TodosContainer from '@containers/Todos';
-const TodosContainer = Loadable({
-  loader: () => import('../../containers/Todos'),
-  loading: Loading
-});
+import TodosContainer from '@containers/Todos';
+// NOTE: To turn on dynamic imports, uncomment this
+// import Loadable from 'react-loadable';
+// import { Loading } from '@components/common';
+// const TodosContainer = Loadable({
+//   loader: () => import('../../containers/Todos'),
+//   loading: Loading
+// });
 
 class TodosPage extends Component {
   static fetchData = ({ store }) => {