CrisSmith

src/App.js

@@ -1,23 +1,23 @@
 import React from "react";
-import TopNav from "./components/TopNav";
+import TopNav from "./containers/TopNavContainer";
 import PropTypes from "prop-types";
 import AreaChart from "./components/AreaChart";
-import Comments from "./components/Comments";
+import Comments from "./containers/CommentsContainer"
 import DonutChart from "./components/DonutChart";
-import Orders from "./components/Orders";
+import Orders from "./containers/OrdersContainer";
 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/TasksContainer";
+import TasksPanel from "./containers/TasksPanelContainer";
+import Tickets from "./containers/TicketsContainer";
+import TransactionsPanel from "./containers/TasksPanelContainer";
 
 
-function App(props) {
+function App() {
   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/Comments.js

@@ -26,4 +26,4 @@ function Comments(props) {
     </div>);
 }
 
-export default Comments;
+export default Comments

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/CommentsContainer.js

@@ -0,0 +1,12 @@
+import {connect} from 'react-redux';
+import Comments from '../components/Comments';
+
+function mapStateToProps(state){
+return{
+    newComments: state.newComments
+    }
+}
+//first- the key: what prop the component needs
+//second- the value: data from state the component needs
+
+export default connect(mapStateToProps)(Comments)

src/containers/OrdersContainer.js

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

src/containers/TasksContainer.js

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

src/containers/TasksPanelContainer.js

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

src/containers/TicketsContainer.js

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

src/containers/TopNavContainer.js

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

src/containers/TransactionPanelContainer.js

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

src/index.js

@@ -2,31 +2,12 @@ import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
 import "./index.css";
-import state from "./state";
+import store from './store';
+import {Provider} from 'react-redux';
 
-const {
-dateTime,
-newComments,
-newTasks,
-newOrders,
-tickets,
-orders,
-taskItem,
-tasks,
-messages
-} = state;
 
 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,40 @@
+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 orders(state =[], action){
+    return state;
+  }
+
+function tasks(state =[], action){
+    return state;
+  }
+
+function messages(state =[], action){
+    return state;
+  }
+
+
+export default combineReducers({
+    newComments,
+    newTasks,
+    newOrders,
+    tickets,
+    orders,
+    tasks,
+    messages
+})

src/state.js

@@ -1,11 +1,11 @@
 export default {
-  newComments: 23,
-  newTasks: 12,
-  newOrders: 124,
-  tickets: 13,
+  newComments: 230,
+  newTasks: 1200,
+  newOrders: 1240,
+  tickets: 1300,
   tasks: [{
     id: 1,
-    task: "VDI",
+    task: "TEST TASK",
     date: "11/4/2016"
   }, {
     id: 2,

src/store.js

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