finished - Jenna Gullick

src/App.js

@@ -1,23 +1,23 @@
 import React from "react";
-import TopNav from "./components/TopNav";
+import TopNav from "./container/topNavContainer";
 import PropTypes from "prop-types";
 import AreaChart from "./components/AreaChart";
-import Comments from "./components/Comments";
+import Comments from "./container/commentsContainer";
 import DonutChart from "./components/DonutChart";
-import Orders from "./components/Orders";
+import Orders from "./container/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 "./container/tasksContainer";
+import TasksPanel from "./container/taskPanelContainer";
+import Tickets from "./container/ticketsContainer";
+import TransactionsPanel from "./container/transactionPanelContainer";
 
 
 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} />
+              <Comments />
               <Tasks newTasks={props.newTasks} />
               <Orders newOrders={props.newOrders} />
-              <Tickets tickets={props.tickets} />
+              <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

@@ -27,3 +27,5 @@ function Comments(props) {
 }
 
 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,8 @@ function Tickets(props) {
       </div>
     </div>);
 }
-const mapStateToProps = function (state) {
-  return {
-    tickets: state.tickets
-  };
-};
-export default (Tickets);
+
+export default Tickets;
 // export default connect(mapStateToProps,null)(Tickets);
 
 

src/container/commentsContainer.js

@@ -0,0 +1,14 @@
+import Comments from "../components/Comments";
+
+import {connect} from "react-redux";
+function mapStateToProps(state){
+    return {
+        newComments: state.newComments
+    }
+}
+
+export default connect(mapStateToProps)(Comments);
+// the above is shorthand for the code below:
+//let connected = connect(mapStateToProps);
+//let container = connected(Comments);
+// export default container;

src/container/ordersContainer.js

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

src/container/taskPanelContainer.js

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

src/container/tasksContainer.js

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

src/container/ticketsContainer.js

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

src/container/topNavContainer.js

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

src/container/transactionPanelContainer.js

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

src/index.js

@@ -3,6 +3,8 @@ import ReactDOM from "react-dom";
 import App from "./App";
 import "./index.css";
 import state from "./state";
+import {Provider} from "react-redux";
+import store from "./store";
 
 const {
 dateTime,
@@ -17,16 +19,6 @@ 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,34 @@
+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 messages(state=[], action) {
+    return state;
+}
+
+export default combineReducers({
+    newComments,
+    newTasks,
+    newOrders,
+    tickets,
+    orders,
+    messages
+  })

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;