Joe- react-reducer-dashboard

src/App.js

@@ -1,31 +1,33 @@
 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>
       <div id="wrapper">
-        <nav className="navbar navbar-inverse navbar-fixed-top" role="navigation">
-          <TopNav messages={props.messages} />
+        <nav
+          className="navbar navbar-inverse navbar-fixed-top"
+          role="navigation"
+        >
+          <TopNav />
           <SideNav />
         </nav>
         <div id="page-wrapper">
           <div className="container-fluid">
             <div className="row">
               <div className="col-lg-12">
                 <h1 className="page-header">
-                    Dashboard <small>Statistics Overview</small>
+                  Dashboard <small>Statistics Overview</small>
                 </h1>
                 <ol className="breadcrumb">
                   <li className="active">
@@ -35,26 +37,25 @@ 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>
         </div>
       </div>
     </div>
-
   );
 }
 

src/components/Comments.js

@@ -1,29 +1,30 @@
 import React from "react";
 
 function Comments(props) {
-  return ( 
+  return (
     <div className="col-lg-3 col-md-6">
       <div className="panel panel-primary">
-          <div className="panel-heading">
-              <div className="row">
-                  <div className="col-xs-3">
-                      <i className="fa fa-comments fa-5x"></i>
-                  </div>
-                  <div className="col-xs-9 text-right">
-                      <div className="huge">{props.newComments}</div>
-                      <div>New Comments!</div>
-                  </div>
-              </div>
+        <div className="panel-heading">
+          <div className="row">
+            <div className="col-xs-3">
+              <i className="fa fa-comments fa-5x" />
+            </div>
+            <div className="col-xs-9 text-right">
+              <div className="huge">{props.newComments}</div>
+              <div>New Comments!</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>
+        <a href="#">
+          <div className="panel-footer">
+            <span className="pull-left">View Details</span>
+            <span className="pull-right">
+              <i className="fa fa-arrow-circle-right" />
+            </span>
+            <div className="clearfix" />
+          </div>
+        </a>
       </div>
-    </div>);
+    </div>
+  );
 }
-
-export default Comments;

src/containers/Comments.js

@@ -0,0 +1,12 @@
+import { connect } from "react-redux";
+import Comments from "../components/Comments";
+
+function mapStateToProps(state) {
+  return {
+    newComments: state.newComments
+  };
+}
+let connected = connect(mapStateToProps);
+let container = connected(Comments);
+
+export default container;

src/containers/Orders.js

@@ -0,0 +1,9 @@
+import { connect } from "react-redux";
+import Orders from "../components/Orders";
+
+function 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";
+
+function 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";
+
+function 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";
+
+function 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";
+
+function 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";
+
+function mapStateToProps(state) {
+  return {
+    orders: state.orders
+  };
+}
+
+export default connect(mapStateToProps)(TransactionsPanel);

src/index.js

@@ -2,31 +2,14 @@ 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
+    //app will stay but all bellow will be deleted
+    />
+  </Provider>,
   document.getElementById("root")
 );

src/reducers/index.js

@@ -0,0 +1,33 @@
+import { combineReducers } from "redux";
+
+function newComments(state = 0, action) {
+  return state;
+}
+function newTask(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,
+  newTask,
+  newOrders,
+  tickets,
+  orders,
+  tasks,
+  messages
+});

src/store.js

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