@@ -59,4 +46,21 @@ class TodoList extends Component {
}
}
-export default TodoList;
\ No newline at end of file
+const mapStateToProps = state => {
+ return {
+ storedTodos: state.td.todos,
+ selectedTodo : state.td.selectedTodo
+ };
+};
+
+const mapDispatchToProps = dispatch => {
+ return {
+ onToggleTodo: (id) =>
+ dispatch(actionCreators.toggleTodo(id)),
+ onDeleteTodo: (id) =>
+ dispatch(actionCreators.deleteTodo(id)),
+ onGetAll: () => dispatch(actionCreators.getTodos()),
+ };
+};
+
+ export default connect(mapStateToProps, mapDispatchToProps)(withRouter(TodoList));
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 87d1be5..90b2cbb 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,10 +1,24 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
-ReactDOM.render(
, document.getElementById('root'));
+import {Provider} from 'react-redux';
+import {combineReducers, createStore} from 'redux';
+import { connectRouter, routerMiddleware } from 'connected-react-router' ;
+import { createBrowserHistory } from 'history' ;
+import { applyMiddleware } from 'redux';
+
+
+import thunk from 'redux-thunk';
+import todoReducer from './store/reducers/todo';
+const history = createBrowserHistory();
+const rootReducer = combineReducers({
+ td: todoReducer, router: connectRouter(history)
+});
+
+const store = createStore(rootReducer, applyMiddleware(thunk, routerMiddleware(history)));
+
+
+
,document.getElementById('root');
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
diff --git a/src/store/actions/actionsTypes.js b/src/store/actions/actionsTypes.js
new file mode 100644
index 0000000..8b4377d
--- /dev/null
+++ b/src/store/actions/actionsTypes.js
@@ -0,0 +1,5 @@
+export const GET_ALL = 'GET_ALL';
+export const GET_TODO = 'GET_TODO';
+export const TOGGLE_DONE = 'TOGGLE_DONE';
+export const DELETE_TODO = 'DELETE_TODO';
+export const ADD_TODO = 'ADD_TODO';
diff --git a/src/store/actions/index.js b/src/store/actions/index.js
new file mode 100644
index 0000000..d8bfb16
--- /dev/null
+++ b/src/store/actions/index.js
@@ -0,0 +1 @@
+export {getTodos, postTodo, deleteTodo, toggleTodo, getTodo} from './todo'
\ No newline at end of file
diff --git a/src/store/actions/todo.js b/src/store/actions/todo.js
new file mode 100644
index 0000000..3fd98d5
--- /dev/null
+++ b/src/store/actions/todo.js
@@ -0,0 +1,73 @@
+import * as actionTypes from './actionTypes';
+import { push } from 'connected-react-router';
+import axios from 'axios';
+
+export const getTodos_ = (todos) => {
+return { type: actionTypes.GET_ALL, todos: todos };
+};
+
+export const getTodos = () => {
+ return dispatch => {
+ return axios.get('/api/todo/')
+ .then(res => dispatch(getTodos_(res.data)));
+ }
+ }
+
+export const postTodo_ = (td) => {
+ return {
+ type: actionTypes.ADD_TODO, id: td.id, title: td.title, content: td.content
+ };
+};
+
+export const postTodo = (td) => {
+ return (dispatch) => {
+ return axios.post('/api/todo/', td)
+ .then(res => dispatch(postTodo_(res.data)))
+ .then(() => dispatch(push('/todos/')))
+ };
+};
+
+export const deleteTodo_ = (id) => {
+ return {
+ type: actionTypes.DELETE_TODO, targetID: id
+ };
+ };
+
+export const deleteTodo = (id) => {
+ return (dispatch) => {
+ return axios.delete('/api/todo/'+ id)
+ .then(res => {
+ dispatch(deleteTodo_(id));
+ });
+ };
+ };
+
+export const toggleTodo_ = (id) => {
+ return {
+ type: actionTypes.TOGGLE_DONE, targetID: id
+ };
+ };
+
+export const toggleTodo = (id) => {
+ return (dispatch) => {
+ return axios.put('/api/todo/'+ id)
+ .then(res => {
+ dispatch(toggleTodo_(id));
+ });
+ };
+ };
+
+export const getTodo_ = (todo) => {
+ return {
+ type: actionTypes.GET_TODO, target: todo
+ };
+ };
+
+export const getTodo = (id) => {
+ return (dispatch) => {
+ return axios.get('/api/todo/'+ id)
+ .then(res => {
+ dispatch(getTodo_(res.data));
+ });
+ };
+ };
diff --git a/src/store/reducers/todo.js b/src/store/reducers/todo.js
new file mode 100644
index 0000000..001eaa1
--- /dev/null
+++ b/src/store/reducers/todo.js
@@ -0,0 +1,44 @@
+import * as actionTypes from '../actions/actionTypes';
+
+const initialState = {
+ todos: [
+ { id: 1, title: 'SWPP', content: 'take swpp class', done: true },
+ { id: 2, title: 'Movie', content: 'watch movie', done: false },
+ { id: 3, title: 'Dinner', content: 'eat dinner', done: false },
+ ],
+ selectedTodo: null
+};
+const reducer = (state = initialState, action) => {
+ switch (action.type) {
+
+ case actionTypes.ADD_TODO:
+ const newTodo = {
+ id: action.id, title: action.title, content:
+ action.content, done: action.done
+ }
+ return {...state, todos: [...state.todos, newTodo]};
+
+ case actionTypes.DELETE_TODO:
+ const deleted = state.todos.filter((todo) => {
+ return todo.id !== action.targetID;
+ });
+ return { ...state, todos: deleted };
+ case actionTypes.TOGGLE_DONE:
+ const modified = state.todos.map((todo) => {
+ if (todo.id === action.targetID) {
+ return { ...todo, done: !todo.done };
+ } else {
+ return { ...todo };
+ }
+ });
+ return { ...state, todos: modified };
+ case actionTypes.GET_TODO:
+ return {...state, selectedTodo: action.target };
+ case actionTypes.GET_ALL:
+ return {...state, todos: action.todos };
+ default:
+ break;
+ }
+ return state;
+}
+export default reducer;
\ No newline at end of file