#100 added redux to todolist implementation

tutify/package.json

@@ -36,6 +36,7 @@
     "react": "^16.9.0",
     "react-bootstrap": "^1.0.0-beta.14",
     "react-dom": "^16.9.0",
+    "react-redux": "^7.1.3",
     "react-router-config": "^5.0.1",
     "react-router-dom": "^5.0.1",
     "react-scripts": "3.1.1",

tutify/src/components/UserDashboardPage/Todo/TodoList.js

@@ -12,6 +12,7 @@ import AddTodo from "./AddTodo";
 import Todos from "./Todos";
 import axios from "axios";
 import uuid from 'uuid';
+import PropTypes from 'prop-types';
 
 
 class TodoList extends React.Component {
@@ -76,4 +77,12 @@ class TodoList extends React.Component {
         );
     }
 }
+TodoList.propTypes = {
+    todos: PropTypes.arrayOf(PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      completed: PropTypes.bool.isRequired,
+      text: PropTypes.string.isRequired
+    }).isRequired).isRequired,
+    toggleTodo: PropTypes.func.isRequired
+  }
 export default withStyles(UserDashboardStyles.styles, { withTheme: true })(TodoList);

tutify/src/components/UserDashboardPage/UserDashboard.js

@@ -8,7 +8,10 @@ import { withStyles } from "@material-ui/core/styles";
 import Sidebar from '../ProfilePage/StudentSidebar';
 import Drawer from "@material-ui/core/Drawer";
 import MyCourseList from "./MyCourseList";
-import TodoList from "./Todo/TodoList";
+import { createStore } from 'redux';
+import { Provider } from 'react-redux';
+import rootReducer from "../../redux/reducers";
+import VisibleTodoList from '../../redux/containers/visibleTodoList'
 
 class UserDashboard extends React.Component {
     constructor(props) {
@@ -20,7 +23,6 @@ class UserDashboard extends React.Component {
         };
     }
 
-
     componentDidMount() {
         this.checkSession();
     }
@@ -57,10 +59,12 @@ class UserDashboard extends React.Component {
     }
 
     render() {
+        const store = createStore(rootReducer)
         const { classes } = this.props;
         const { courses, tutors } = this.state;
 
         return (
+            <Provider store={store}>
             <React.Fragment>
                 <NavBar />
                 <Drawer
@@ -76,7 +80,7 @@ class UserDashboard extends React.Component {
                             <Notifications />
                         </Grid>
                         <Grid item xs={4} sm={6} className={classes.gridItem}>
-                            <TodoList/>
+                            <VisibleTodoList/>
                         </Grid>
                     </Grid>
                     <Grid container className={classes.container}>
@@ -87,6 +91,7 @@ class UserDashboard extends React.Component {
                     <Footer />
                 </main>
             </React.Fragment>
+            </Provider>
         );
     }
 }

tutify/src/actions/todolist.js → tutify/src/redux/actions/todolist_action.js

@@ -1,3 +1,4 @@
+let nextTodoId = 0
 export const addTodo = title => ({
   type: 'ADD_TODO',
   id: nextTodoId++,

tutify/src/redux/containers/VisibleTodoList.js

@@ -0,0 +1,29 @@
+import { connect } from 'react-redux'
+import TodoList from '/Users/jasminelatendresse/TutifySoen490/tutify/src/components/UserDashboardPage/Todo/TodoList.js'
+import { VisibilityFilters, markComplete } from '../actions/todolist_action'
+
+const getVisibleTodos = (todos, filter) => {
+  switch (filter) {
+    case VisibilityFilters.SHOW_ALL:
+      return todos
+    case VisibilityFilters.SHOW_COMPLETED:
+      return todos.filter(t => t.completed)
+    case VisibilityFilters.SHOW_ACTIVE:
+      return todos.filter(t => !t.completed)
+    default:
+      throw new Error('Unknown filter: ' + filter)
+  }
+}
+
+const mapStateToProps = state => ({
+  todos: getVisibleTodos(state.todos, state.visibilityFilter)
+})
+
+const mapDispatchToProps = dispatch => ({
+  markComplete: id => dispatch(markComplete(id))
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TodoList)

tutify/src/redux/reducers/index.js

@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux'
+import todos from './todos'
+import visibilityFilter from './visibilityFilter'
+
+export default combineReducers({
+  todos,
+  visibilityFilter
+})

tutify/src/redux/reducers/todos.js

@@ -0,0 +1,29 @@
+const todos = (state = [], action) => {
+  switch (action.type) {
+    case 'ADD_TODO':
+      return [
+        ...state,
+        {
+          id: action.id,
+          text: action.text,
+          completed: false
+        }
+      ]
+    case 'MARK_COMPLETE':
+      return state.map(todo =>
+        (todo.id === action.id)
+          ? { ...todo, completed: !todo.completed }
+          : todo
+      )
+    case 'DEL_TODO':
+      return Object.assign({}, state, {
+        todos: state.todos.filter((todo) => {
+          return todo.id !== action.id
+        })
+      })
+    default:
+      return state
+  }
+}
+
+export default todos

tutify/src/redux/reducers/visibilityFilter.js

@@ -0,0 +1,12 @@
+import { VisibilityFilters } from '../actions/todolist_action'
+
+const visibilityFilter = (state = VisibilityFilters.SHOW_ALL, action) => {
+  switch (action.type) {
+    case 'SET_VISIBILITY_FILTER':
+      return action.filter
+    default:
+      return state
+  }
+}
+
+export default visibilityFilter