David Bobb

src/App.js

@@ -1,23 +1,23 @@
 import React from "react";
-import TopNav from "./components/TopNav";
+import TopNav from "./containers/TopNav";
 import PropTypes from "prop-types";
 import AreaChart from "./components/AreaChart";
-import Comments from "./components/Comments";
+import Comments from "./containers/Comments";
 import DonutChart from "./components/DonutChart";
-import Orders from "./components/Orders";
+import Orders from "./containers/Orders";
 import SideNav from "./components/SideNav";
-import Tasks from "./components/Tasks";
-import TasksPanel from "./components/TasksPanel";
-import Tickets from "./components/Tickets";
-import TransactionsPanel from "./components/TransactionsPanel";
+import Tasks from "./containers/Tasks";
+import TasksPanel from "./containers/TasksPanel";
+import Tickets from "./containers/Tickets";
+import TransactionsPanel from "./containers/TransactionsPanel";
 
 
 function App(props) {
   return (
     <div> 
       <div id="wrapper">
         <nav className="navbar navbar-inverse navbar-fixed-top" role="navigation">
-          <TopNav messages={props.messages} />
+          <TopNav />
           <SideNav />
         </nav>
         <div id="page-wrapper">
@@ -35,19 +35,19 @@ function App(props) {
               </div>
             </div>
             <div className="row">
-              <Comments newComments={props.newComments} />
-              <Tasks newTasks={props.newTasks} />
-              <Orders newOrders={props.newOrders} />
-              <Tickets tickets={props.tickets} />
+              <Comments />
+              <Tasks />
+              <Orders />
+              <Tickets />
             </div>
             <AreaChart />
             <div className="row">
               <DonutChart />
               <div className="col-lg-4">
-                <TasksPanel tasks={props.tasks} />
+                <TasksPanel />
               </div>
               <div className="col-lg-4">
-                <TransactionsPanel orders={props.orders} />
+                <TransactionsPanel />
               </div>
             </div>
           </div>

src/components/Tasks.js

@@ -2,27 +2,27 @@ import React from "react";
 
 function Tasks(props) {
   return ( <div className="col-lg-3 col-md-6">
-                        <div className="panel panel-green">
-                            <div className="panel-heading">
-                                <div className="row">
-                                    <div className="col-xs-3">
-                                        <i className="fa fa-tasks fa-5x"></i>
-                                    </div>
-                                    <div className="col-xs-9 text-right">
-                                        <div className="huge">{props.newTasks}</div>
-                                        <div>New Tasks!</div>
-                                    </div>
-                                </div>
-                            </div>
-                            <a href="#">
-                                <div className="panel-footer">
-                                    <span className="pull-left">View Details</span>
-                                    <span className="pull-right"><i className="fa fa-arrow-circle-right"></i></span>
-                                    <div className="clearfix"></div>
-                                </div>
-                            </a>
-                        </div>
-                    </div>);
+        <div className="panel panel-green">
+            <div className="panel-heading">
+                <div className="row">
+                    <div className="col-xs-3">
+                        <i className="fa fa-tasks fa-5x"></i>
+                    </div>
+                    <div className="col-xs-9 text-right">
+                        <div className="huge">{props.newTasks}</div>
+                        <div>New Tasks!</div>
+                    </div>
+                </div>
+            </div>
+            <a href="#">
+                <div className="panel-footer">
+                    <span className="pull-left">View Details</span>
+                    <span className="pull-right"><i className="fa fa-arrow-circle-right"></i></span>
+                    <div className="clearfix"></div>
+                </div>
+            </a>
+        </div>
+    </div>);
 }
 
 export default Tasks;

src/components/Tickets.js

@@ -1,5 +1,4 @@
 import React from "react";
-import {connect} from "react-redux";
 
 function Tickets(props) {
   return(
@@ -26,12 +25,7 @@ function Tickets(props) {
       </div>
     </div>);
 }
-const mapStateToProps = function (state) {
-  return {
-    tickets: state.tickets
-  };
-};
-export default (Tickets);
-// export default connect(mapStateToProps,null)(Tickets);
+
+export default Tickets;
 
 

src/containers/Comments.js

@@ -0,0 +1,10 @@
+import Comments from '../components/Comments'
+import {connect} from 'react-redux';
+
+function mapStateToProps(state) {
+    return {
+        newComments: state.newComments
+    }
+}
+
+export default connect(mapStateToProps)(Comments)

src/containers/Orders.js

@@ -0,0 +1,10 @@
+import {connect} from 'react-redux';
+import Orders from '../components/Orders'
+
+const mapStateToProps = (state) => {
+    return {
+        orders: state.orders
+    }
+}
+
+export default connect(mapStateToProps)(Orders) 

src/containers/Tasks.js

@@ -0,0 +1,10 @@
+import {connect} from 'react-redux';
+import Tasks from '../components/Tasks';
+
+const mapStateToProps = (state) => {
+    return {
+        newTasks: state.newTasks
+    }
+}
+
+export default connect(mapStateToProps)(Tasks)

src/containers/TasksPanel.js

@@ -0,0 +1,10 @@
+import {connect} from 'react-redux';
+import TasksPanel from '../components/TasksPanel';
+
+const mapStateToProps = (state) => {
+    return {
+        tasks: state.tasks
+    }
+}
+
+export default connect(mapStateToProps)(TasksPanel)

src/containers/Tickets.js

@@ -0,0 +1,10 @@
+import {connect} from "react-redux";
+import Tickets from "../components/Tickets";
+
+const mapStateToProps = (state) => {
+    return {
+        tickets: state.tickets
+    }
+}
+
+export default connect(mapStateToProps)(Tickets)

src/containers/TopNav.js

@@ -0,0 +1,10 @@
+import {connect} from 'react-redux';
+import TopNav from '../components/TopNav';
+
+const mapStateToProps = (state) => {
+    return {
+        messages: state.messages
+    }
+}
+
+export default connect(mapStateToProps)(TopNav);

src/containers/TransactionsPanel.js

@@ -0,0 +1,10 @@
+import {connect} from 'react-redux';
+import TransactionsPanel from '../components/TransactionsPanel';
+
+const mapStateToProps = (state) => {
+    return {
+        orders: state.orders
+    }
+}
+
+export default connect(mapStateToProps)(TransactionsPanel);

src/index.js

@@ -2,31 +2,10 @@ import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
 import "./index.css";
-import state from "./state";
-
-const {
-dateTime,
-newComments,
-newTasks,
-newOrders,
-tickets,
-orders,
-taskItem,
-tasks,
-messages
-} = state;
+import {Provider} from 'react-redux';
+import store from './store';
 
 ReactDOM.render(
-  <App 
-    taskItem={taskItem}
-    dateTime={dateTime}
-    newComments={newComments}
-    newTasks={newTasks}
-    newOrders={newOrders}
-    tickets={tickets}
-    orders={orders} 
-    messages={messages}
-    tasks={tasks}
-    />,
+  <Provider store={store}><App /></Provider>,
   document.getElementById("root")
 );

src/reducers/index.js

@@ -0,0 +1,39 @@
+import {combineReducers} from 'redux';
+
+function newComments(state = 0, action) {
+    return state;
+}
+
+function newTasks(state = 0, action) {
+    return state;
+}
+
+function newOrders(state = 0, action) {
+    return state;
+}
+
+function tickets(state = 0, action) {
+    return state;
+}
+
+function tasks(state = [], action) {
+    return state;
+}
+
+function messages(state = [], action) { 
+    return state;
+}
+
+function orders(state = [], action) {
+    return state;
+}
+
+export default combineReducers({
+    newComments,
+    newTasks,
+    newOrders,
+    tickets,
+    tasks,
+    messages,
+    orders,
+})

src/store.js

@@ -0,0 +1,7 @@
+import {createStore} from 'redux';
+import state from './state';
+import reducers from './reducers/index.js';
+
+const store = createStore(reducers, state)
+
+export default store;