upgrade

Author: MacKentoch

docs/public/assets/bundle.js

@@ -1,6 +1,6 @@
 {
   "name": "react-redux-bootstrap-webpack-starter",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "react js + redux + react router + hot reload + devTools + bootstrap + webpack starter",
   "main": "src/index.js",
   "scripts": {
@@ -81,6 +81,7 @@
   },
   "dependencies": {
     "animate.css": "3.5.1",
+    "axios": "^0.15.3",
     "babel-polyfill": "^6.16.0",
     "bootstrap": "^3.3.7",
     "classnames": "^2.2.5",
@@ -89,7 +90,6 @@
     "js-base64": "^2.1.9",
     "moment": "^2.17.0",
     "react": "^15.4.1",
-    "react-addons-shallow-compare": "^15.4.1",
     "react-bootstrap": "^0.30.7",
     "react-dom": "^15.4.1",
     "react-hot-loader": "^3.0.0-beta.6",

package.json

@@ -0,0 +1,56 @@
+import React, {
+  PureComponent,
+  PropTypes
+}                   from 'react';
+import cx           from 'classnames';
+
+const ANIMATION_DELAY_MS = 500;
+
+class AnimatedView extends PureComponent {
+  state = {
+    animated: true,
+    viewEnters: false
+  };
+
+  componentDidMount() {
+    const { delay } = this.props;
+
+    this.enterAnimationTimer = setTimeout(
+      () => this.setState({viewEnters: true}),
+      delay
+    );
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.enterAnimationTimer);
+  }
+
+  render() {
+    const { animated, viewEnters } = this.state;
+    const { children } = this.props;
+
+    return (
+      <section
+        className={
+          cx({
+            'content':       true,
+            'invisible':     !viewEnters && animated,
+            'view-enter':    viewEnters && animated
+          })
+        }>
+      { children }
+    </section>
+    );
+  }
+}
+
+AnimatedView.propTypes = {
+  children: PropTypes.node,
+  delay: PropTypes.number
+};
+
+AnimatedView.defaultProps = {
+  delay: ANIMATION_DELAY_MS
+};
+
+export default AnimatedView;

src/app/components/animatedView/AnimatedView.js

@@ -1,11 +1,9 @@
 import Jumbotron          from './jumbotron/Jumbotron';
 import NavigationBar      from './navigation/NavigationBar';
 import BackToTop          from './backToTop/BackToTop';
-import WizardMotion       from './wizardMotion/WizardMotion';
 
 export {
   Jumbotron,
   NavigationBar,
-  BackToTop,
-  WizardMotion
+  BackToTop
 };

src/app/components/index.js

@@ -1,16 +1,10 @@
 import React, {
-  Component,
+  PureComponent,
   PropTypes
 }                     from 'react';
 import { Link }       from 'react-router';
-import shallowCompare from 'react-addons-shallow-compare';
-
-class LeftNavButton extends Component {
-
-  shouldComponentUpdate(nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState);
-  }
 
+class LeftNavButton extends PureComponent {
   render() {
     const { link, label } = this.props;
     return (
@@ -31,10 +25,10 @@ class LeftNavButton extends Component {
 }
 
 LeftNavButton.propTypes = {
-  link: PropTypes.string,
-  label: PropTypes.string,
+  link:     PropTypes.string,
+  label:    PropTypes.string,
   viewName: PropTypes.string,
-  onClick: PropTypes.func
+  onClick:  PropTypes.func
 };
 
 export default LeftNavButton;

src/app/components/navigation/leftNav/leftNavButton/LeftNavButton.js

@@ -1,16 +1,10 @@
 import React, {
-  Component,
+  PureComponent,
   PropTypes
 }                     from 'react';
 import { Link }       from 'react-router';
-import shallowCompare from 'react-addons-shallow-compare';
-
-class RightNavButton extends Component {
-
-  shouldComponentUpdate(nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState);
-  }
 
+class RightNavButton extends PureComponent {
   render() {
     const { link, label } = this.props;
     return (
@@ -31,10 +25,10 @@ class RightNavButton extends Component {
 }
 
 RightNavButton.propTypes = {
-  link: PropTypes.string,
-  label: PropTypes.string,
+  link:     PropTypes.string,
+  label:    PropTypes.string,
   viewName: PropTypes.string,
-  onClick: PropTypes.func
+  onClick:  PropTypes.func
 };
 
 export default RightNavButton;