Daniela Archibong

package.json

@@ -6,6 +6,7 @@
     "react-scripts": "0.7.0"
   },
   "dependencies": {
+    "eslint": "^6.2.2",
     "prop-types": "^15.5.8",
     "react": "^15.3.2",
     "react-dom": "^15.3.2",

src/App.js

@@ -35,10 +35,10 @@ 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">

src/components/Comments.js

@@ -1,4 +1,5 @@
 import React from "react";
+import {connect} from 'react-redux';
 
 function Comments(props) {
   return ( 
@@ -26,4 +27,13 @@ function Comments(props) {
     </div>);
 }
 
-export default Comments;
+const mapStateToProps = function (state) {
+    return {
+      newComments: state.newComments
+    };
+  };
+
+export default connect(mapStateToProps)(Comments);
+
+
+// export default Comments;

src/components/Orders.js

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

src/components/Tasks.js

@@ -1,4 +1,5 @@
 import React from "react";
+import {connect} from "react-redux";
 
 function Tasks(props) {
   return ( <div className="col-lg-3 col-md-6">
@@ -24,6 +25,10 @@ function Tasks(props) {
                         </div>
                     </div>);
 }
-
-export default Tasks;
-
+const mapStateToProps = function (state) {
+    return {
+      newTasks: state.newTasks
+    };
+  };
+export default connect(mapStateToProps,null)(Tasks);
+// export default Tasks;

src/components/TasksPanel.js

@@ -1,5 +1,7 @@
 import React from "react";
 import TaskItem from "./TaskItem";
+import {connect} from "react-redux";
+
 function TasksPanel(props) {
   return (  <div className="panel panel-default">
                 <div className="panel-heading">
@@ -21,5 +23,10 @@ function TasksPanel(props) {
           </div>
         );
 }
-
-export default TasksPanel;
+const mapStateToProps = function (state) {
+  return {
+    tasks: state.tasks
+  };
+};
+export default connect(mapStateToProps,null)(TasksPanel);
+// export default TasksPanel;

src/components/Tickets.js

@@ -26,12 +26,13 @@ function Tickets(props) {
       </div>
     </div>);
 }
+
 const mapStateToProps = function (state) {
   return {
     tickets: state.tickets
   };
 };
-export default (Tickets);
-// export default connect(mapStateToProps,null)(Tickets);
+export default connect(mapStateToProps,null)(Tickets);
 
 
+// export default Tickets;

src/components/TopNav.js

@@ -1,5 +1,6 @@
 import React from "react";
 import MessagePreview from "./MessagePreview";
+import {connect} from "react-redux";
 
 function TopNav(props) {
   return (
@@ -65,5 +66,10 @@ function TopNav(props) {
       </li>
     </ul>);
 }
-
-export default TopNav;
+const mapStateToProps = function (state) {
+    return {
+        messages: state.messages
+    };
+  };
+export default connect(mapStateToProps,null)(TopNav);
+// export default TopNav;

src/components/TransactionsPanel.js

@@ -1,5 +1,6 @@
 import React from "react";
 import TransactionRow from "./TransactionRow";
+import {connect} from "react-redux";
 
 function TransactionsPanel(props) {
   return ( 
@@ -35,4 +36,11 @@ function TransactionsPanel(props) {
     </div> );
 }
 
-export default TransactionsPanel;
+const mapStateToProps = function (state) {
+    return {
+        orders: state.orders
+    };
+  };
+export default connect(mapStateToProps,null)(TransactionsPanel);
+
+// export default TransactionsPanel;

src/index.js

@@ -2,31 +2,13 @@ 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;
 
 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,60 @@
+import { combineReducers } from 'redux';
+
+function newComments(state = 0, action){
+    if(action.type === "SEE_COMMENTS"){
+      return action.value;
+    }
+    return state;
+  }
+
+  function newTasks(state = 0, action){
+    if(action.type === "SEE_TASKS"){
+      return action.value;
+    }
+    return state;
+  }
+
+  function newOrders(state = 0, action){
+    if(action.type === "SEE_ORDERS"){
+      return action.value;
+    }
+    return state;
+  }
+
+  function tickets(state = 0, action){
+    if(action.type === "SET_TICKETS"){
+      return action.value;
+    }
+    return state;
+  }
+
+  function orders(state = 0, action){
+    if(action.type === "SET_ORDERS"){
+      return action.value;
+    }
+    return state;
+  }
+
+  function tasks(state = 0, action){
+    if(action.type === "SET_TASKS"){
+      return action.value;
+    }
+    return state;
+  }
+
+  function messages(state = 0, action){
+    if(action.type === "SET_MESSAGES"){
+      return action.value;
+    }
+    return state;
+  }
+
+export default combineReducers({
+    newComments,
+    newTasks, 
+    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";
+
+let store = createStore(reducers, state);
+
+export default store;