chg/add-redux

Author: Matthew Foyle

package.json

@@ -20,6 +20,9 @@
     "react-router-dom": "^4.1.1",
     "react-spinkit": "^3.0.0",
     "react-tap-event-plugin": "^2.0.1",
+    "redux-logger": "^3.0.6",
+    "redux-promise": "^0.5.3",
+    "redux-thunk": "^2.2.0",
     "semantic-ui-css": "^2.2.10",
     "semantic-ui-react": "^0.68.5"
   },

src/actions/index.js

@@ -1,8 +1,18 @@
-import * as types from '../constants/ActionTypes';
-
-export function TFH() {
-  return {
-    type: types.TFH,
-    name
-  };
-}
+var api = require('../utils/moltin.js');
+
+export function fetchOrders() {
+
+  return function(dispatch) {
+
+      api.GetOrders()
+
+      .then((orders) => {
+        dispatch({type: "Fetch_Orders_End", payload: orders.data})
+      })
+
+      .catch((err) => {
+        dispatch({type: "Fetch_Orders_Error", payload: err})
+      })
+
+  }
+};

src/components/Nav.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { Menu, Icon } from 'semantic-ui-react';
+import { connect } from 'react-redux';
 import Orders from './Orders';
 import Revenue from './Revenue';
 import BestSellers from './BestSellers';
@@ -9,9 +10,34 @@ import {
   Route,
   Link
 } from 'react-router-dom';
+var api = require('../utils/moltin.js');
+
+const mapStateToProps = state => {
+  return {
+    orders: state.orders
+  }
+}
 
 class Nav extends Component {
 
+  constructor(props) {
+    super();
+  }
+
+  componentDidMount() {
+
+    this.props.dispatch((dispatch) => {
+        dispatch({type: "Fetch_Orders_Start"})
+
+        api.GetOrders()
+
+        .then((orders) => {
+          dispatch({type: "Fetch_Orders_End", payload: orders})
+        })
+    })
+
+  }
+
   render() {
     return (
       <Router>
@@ -30,8 +56,13 @@ class Nav extends Component {
             <TimeNav />
           </Menu>
 
-          <Route exact path="/" component={Orders}/>
-          <Route path="/revenue" component={Revenue}/>
+          <Route exact path="/" render={(props) => (
+              <Orders {...props} />
+          )}/>
+          
+          <Route path="/revenue" render={(props) => (
+              <Revenue {...props} />
+          )}/>
           <Route path="/best-sellers" component={BestSellers}/>
 
         </div>
@@ -40,4 +71,4 @@ class Nav extends Component {
   }
 };
 
-export default Nav;
+export default connect(mapStateToProps)(Nav);

src/components/Orders.js

@@ -1,68 +1,58 @@
 import React, { Component } from 'react';
 import * as moment from 'moment';
+import { connect } from 'react-redux';
 import Line from './Line_Chart'
 import Bar from './Bar_Chart'
 import '../App.css';
 import {Tabs, Tab} from 'material-ui/Tabs';
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 import Center from 'react-center';
 var Spinner = require('react-spinkit');
-var api = require('../utils/moltin.js');
+
+const mapStateToProps = state => {
+  return {
+    orders: state.orders
+  }
+}
 
 class Orders extends Component {
 
   constructor(props) {
     super();
-    this.state = {orders: null};
-  }
-
-  componentDidMount() {
-    api.GetOrders()
-    .then((orders) => {
-      this.setState(() => {
-        return {
-          orders: orders
-        }
-      })
-    })
-
-    .catch((error) => {
-      console.log(error)
-    })
-
   }
 
   render() {
 
-      if(this.state.orders !== null) {
+    var orderData = this.props.orders.orders;
+      if(orderData !== null) {
 
         var past = (days) => {
           return moment().subtract(days, 'days').format('YYYY-MM-DD');
         }
         var Today = moment().format('YYYY-MM-DD');
 
-        var OrdersLessThanSevenDaysAgo = this.state.orders.data.filter(function(order) {
+        var OrdersLessThanSevenDaysAgo = orderData.data.filter(function(order) {
           return order.meta.timestamps.created_at.slice(0,10) > past(7);
         })
 
-        var Data = [0, 0, 0, 0, 0, 0, 0]
+        var Data7d = [0, 0, 0, 0, 0, 0, 0]
 
         OrdersLessThanSevenDaysAgo.forEach(function(order) {
 
           switch(order.meta.timestamps.created_at.slice(0,10)) {
-            case Today : Data[6]++;
+            case Today : Data7d[6]++;
             break;
-            case past(1) : Data[5]++;
+            case past(1) : Data7d[5]++;
             break;
-            case past(2) : Data[4]++;
+            case past(2) : Data7d[4]++;
             break;
-            case past(3) : Data[3]++;
+            case past(3) : Data7d[3]++;
             break;
-            case past(4) : Data[2]++;
+            case past(4) : Data7d[2]++;
             break;
-            case past(5) : Data[1]++;
+            case past(5) : Data7d[1]++;
             break;
-            case past(6) : Data[0]++;
+            case past(6) : Data7d[0]++;
             break;
             default : return;
           }
@@ -73,7 +63,7 @@ class Orders extends Component {
               labels: [moment(moment().subtract(6, 'days')).format("MMM Do YYYY"), moment(moment().subtract(5, 'days')).format("MMM Do YYYY"), moment(moment().subtract(4, 'days')).format("MMM Do YYYY"), moment(moment().subtract(3, 'days')).format("MMM Do YYYY"), moment(moment().subtract(2, 'days')).format("MMM Do YYYY"), moment(moment().subtract(1, 'days')).format("MMM Do YYYY"), moment().calendar()],
               datasets: [{
                   label: '# of Orders',
-                  data: Data,
+                  data: Data7d,
                   backgroundColor: [
                       'rgba(255, 99, 132, 0.2)',
                       'rgba(54, 162, 235, 0.2)',
@@ -120,11 +110,11 @@ class Orders extends Component {
           </Tabs>
         </MuiThemeProvider>
         )
-        
-      };
+
+      }
 
     else {
-      console.log('no data')
+
       return (
       <div style={{height: 100 + '%', width: 100 + '%'}}>
         <Center style={{paddingTop: 250}}>
@@ -136,4 +126,4 @@ class Orders extends Component {
   }
 }
 
-export default Orders;
+export default connect(mapStateToProps)(Orders);

src/components/Revenue.js

@@ -1,46 +1,35 @@
 import React, { Component } from 'react';
 import * as moment from 'moment';
+import { connect } from 'react-redux';
 import '../App.css';
 import Center from 'react-center';
 import { Statistic, Card, Icon } from 'semantic-ui-react'
 import * as Spinner from 'react-spinkit';
 import { Grid, Row, Col } from 'react-bootstrap';
 import {percentDiff} from 'percentage-difference';
-var api = require('../utils/moltin.js')
 var format = require('format-number');
 
+const mapStateToProps = state => {
+  return {
+    orders: state.orders
+  }
+}
+
 class Revenue extends Component {
 
   constructor(props) {
     super();
-    this.state = {orders: null};
-  }
-
-  componentDidMount() {
-    api.GetOrders()
-    .then((orders) => {
-      this.setState(() => {
-        return {
-          orders: orders
-        }
-      })
-    })
-
-    .catch((error) => {
-      console.log(error)
-    })
-
   }
 
   render() {
 
+    var revenue24h = 0;
     var revenue7 = 0;
     var revenue14 = 0;
-    var revenueMonth = 0;
-    var revenueTwoMonths = 0;
-
-    if(this.state.orders !== null) {
+    var orderData = this.props.orders.orders;
 
+    if(orderData !== null) {
+      console.log(this.props)
       var past = (num, frame) => {
         return moment().subtract(num, frame).format('YYYY-MM-DD');
       };
@@ -51,44 +40,32 @@ class Revenue extends Component {
       //   })
       // }
 
-      var OrdersLessThanSevenDaysAgo = this.state.orders.data.filter(function(order) {
+      var OrdersLessThanTwentyFourHoursAgo = orderData.data.filter(function(order) {
+        return order.meta.timestamps.created_at.slice(0,10) > past(24, 'hours');
+      });
+
+      OrdersLessThanTwentyFourHoursAgo.forEach(function(order) {
+        revenue24h = revenue24h + order.meta.display_price.with_tax.amount/100
+      });
+
+      var OrdersLessThanSevenDaysAgo = orderData.data.filter(function(order) {
         return order.meta.timestamps.created_at.slice(0,10) > past(7, 'days');
       });
 
       OrdersLessThanSevenDaysAgo.forEach(function(order) {
         revenue7 = revenue7 + order.meta.display_price.with_tax.amount/100
       });
 
-      var OrdersLessThanFourteenDaysAgo = this.state.orders.data.filter(function(order) {
+      var OrdersLessThanFourteenDaysAgo = orderData.data.filter(function(order) {
         return order.meta.timestamps.created_at.slice(0,10) > past(14, 'days') && order.meta.timestamps.created_at.slice(0,10) < past(7, 'days');
       });
 
       OrdersLessThanFourteenDaysAgo.forEach(function(order) {
         revenue14 = revenue14 + order.meta.display_price.with_tax.amount/100
       });
 
-
-      var OrdersLessThanOneMonthAgo = this.state.orders.data.filter(function(order) {
-        return order.meta.timestamps.created_at.slice(0,10) > past(1, 'month');
-      });
-
-      OrdersLessThanOneMonthAgo.forEach(function(order) {
-        revenueMonth = revenueMonth + order.meta.display_price.with_tax.amount/100
-      });
-
-      var OrdersLessThanTwoMonthAgo = this.state.orders.data.filter(function(order) {
-        return order.meta.timestamps.created_at.slice(0,10) > past(2, 'months');
-      });
-
-      OrdersLessThanTwoMonthAgo.forEach(function(order) {
-        revenueTwoMonths = revenueTwoMonths + order.meta.display_price.with_tax.amount/100
-      });
-
-      // var round_revTwoMonths = Math.round(revenueTwoMonths);
-      // var formatted_revTwoMonths = format({prefix: '$'})(round_revTwoMonths);
-      //
-      // var round_revMonth = Math.round(revenueMonth);
-      // var formatted_revMonth = format({prefix: '$'})(round_revMonth);
+      // var round_rev24h =  Math.round(revenue24h);
+      // var formatted_rev24h = format({prefix: '$'})(round_rev24h);
 
       var round_rev7 =  Math.round(revenue7);
       var formatted_rev7 = format({prefix: '$'})(round_rev7);
@@ -98,7 +75,7 @@ class Revenue extends Component {
 
       var diff = percentDiff(round_rev14, round_rev7, true);
 
-      //  console.log(round_revMonth)
+      //  console.log(round_rev24h)
       //  console.log(round_revTwoMonths)
 
       return (
@@ -155,4 +132,4 @@ class Revenue extends Component {
   }
 }
 
-  export default Revenue;
+  export default connect(mapStateToProps)(Revenue);

src/components/TimeNav.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { Menu } from 'semantic-ui-react';
+import { connect } from 'react-redux';
 
 class TimeNav extends Component {
 
@@ -8,10 +9,13 @@ class TimeNav extends Component {
       this.state = {time: null};
     }
 
-    componentDidMount() {
-    };
+  handleItemClick = (e, { name }) => {
+    this.setState({ activeItem: name })
 
-  handleItemClick = (e, { name }) => this.setState({ activeItem: name })
+    this.props.dispatch((dispatch) => {
+      dispatch({type: name, payload: name})
+    })
+  }
 
   render() {
     const { activeItem } = this.state
@@ -30,4 +34,4 @@ class TimeNav extends Component {
   }
 };
 
-export default TimeNav;
+export default connect()(TimeNav);

src/index.js

@@ -2,13 +2,10 @@ import React from 'react';
 import App from './App';
 import { Provider } from 'react-redux';
 import { render } from 'react-dom';
-//import registerServiceWorker from './registerServiceWorker';
-import { createStore } from 'redux';
-import ChartsApp from './reducers/reducers.js';
+import store from './store';
 import 'semantic-ui-css/semantic.min.css';
 import './index.css';
-
-let store = createStore(ChartsApp)
+//import registerServiceWorker from './registerServiceWorker';
 
 render(
   <Provider store={store}>