Landon Taylor

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/newCommentsContainer";
 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/tasksPanelContainer";
+import Tickets from "./container/ticketsContainer";
+import TransactionsPanel from "./container/transactionPanelContainer";
 
 
-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

@@ -1,6 +1,6 @@
 import React from "react";
 
-function Comments(props) {
+export default function Comments(props) {
   return ( 
     <div className="col-lg-3 col-md-6">
       <div className="panel panel-primary">
@@ -24,6 +24,4 @@ function Comments(props) {
           </a>
       </div>
     </div>);
-}
-
-export default Comments;
+}

src/components/TasksPanel.js

@@ -1,5 +1,6 @@
 import React from "react";
 import TaskItem from "./TaskItem";
+
 function TasksPanel(props) {
   return (  <div className="panel panel-default">
                 <div className="panel-heading">
@@ -22,4 +23,4 @@ function TasksPanel(props) {
         );
 }
 
-export default TasksPanel;
+export default TasksPanel;

src/components/Tickets.js

@@ -1,7 +1,7 @@
 import React from "react";
-import {connect} from "react-redux";
+// import {connect} from "react-redux";
 
-function Tickets(props) {
+export default function Tickets(props) {
   return(
     <div className="col-lg-3 col-md-6">
       <div className="panel panel-red">
@@ -26,12 +26,3 @@ function Tickets(props) {
       </div>
     </div>);
 }
-const mapStateToProps = function (state) {
-  return {
-    tickets: state.tickets
-  };
-};
-export default (Tickets);
-// export default connect(mapStateToProps,null)(Tickets);
-
-

src/container/newCommentsContainer.js

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

src/container/ordersContainer.js

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

src/container/tasksContainer.js

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

src/container/tasksPanelContainer.js

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

src/container/ticketsContainer.js

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

src/container/topNavContainer.js

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

src/container/transactionPanelContainer.js

@@ -0,0 +1,9 @@
+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

@@ -2,31 +2,35 @@ import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
 import "./index.css";
-import state from "./state";
+// import state from "./state";
+import { Provider } from 'react-redux';
+import store from './store';
 
-const {
-dateTime,
-newComments,
-newTasks,
-newOrders,
-tickets,
-orders,
-taskItem,
-tasks,
-messages
-} = state;
+// 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 
+      // taskItem={taskItem}
+      // dateTime={dateTime}
+      //newComments={newComments}
+      // newTasks={newTasks}
+      // newOrders={newOrders}
+      // tickets={tickets}
+      // orders={orders} 
+      // messages={messages}
+      // tasks={tasks}
+    />
+  </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 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,8 +1,8 @@
 export default {
-  newComments: 23,
-  newTasks: 12,
-  newOrders: 124,
-  tickets: 13,
+  newComments: 444,
+  newTasks: 333,
+  newOrders: 222,
+  tickets: 111,
   tasks: [{
     id: 1,
     task: "VDI",

src/store.js

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