From fa3765d0af92d9d9b8e9f0d0b9349b66a4a656d1 Mon Sep 17 00:00:00 2001
From: gina7484 <46814676+gina7484@users.noreply.github.com>
Date: Fri, 25 Sep 2020 20:55:24 +0900
Subject: [PATCH 5/5] last
---
package.json | 4 +-
src/containers/TodoList/NewTodo/NewTodo.js | 7 +-
.../TodoList/RealDetail/RealDetail.js | 5 +-
src/containers/TodoList/TodoList.js | 19 ++---
src/index.js | 4 +-
src/store/actions/index.js | 1 +
src/store/actions/todo.js | 72 +++++++++++++++++++
src/store/reducers/todo.js | 18 +++--
yarn.lock | 5 ++
9 files changed, 106 insertions(+), 29 deletions(-)
create mode 100644 src/store/actions/index.js
create mode 100644 src/store/actions/todo.js
diff --git a/package.json b/package.json
index 225cbeb..84d3985 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,7 @@
"name": "swppfront",
"version": "0.1.0",
"private": true,
+ "proxy": "http://localhost:8000",
"dependencies": {
"react": "^16.9.0",
"react-dom": "^16.9.0",
@@ -9,7 +10,8 @@
"react-router": "^5.0.1",
"react-router-dom": "^5.0.1",
"react-scripts": "3.1.1",
- "redux": "^4.0.5"
+ "redux": "^4.0.5",
+ "redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",
diff --git a/src/containers/TodoList/NewTodo/NewTodo.js b/src/containers/TodoList/NewTodo/NewTodo.js
index 4ac88dc..01a1aa3 100644
--- a/src/containers/TodoList/NewTodo/NewTodo.js
+++ b/src/containers/TodoList/NewTodo/NewTodo.js
@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom';
import * as actionTypes from '../../../store/actions/actionTypes';
+import * as actionCreators from '../../../store/actions/index';
//all of them are inside actionTypes
import './NewTodo.css';
@@ -15,7 +16,6 @@ class NewTodo extends Component {
postTodoHandler = () => {
this.props.onStoreTodo(this.state.title, this.state.content);
- this.props.history.push('/todos');
}
render() {
@@ -42,10 +42,7 @@ class NewTodo extends Component {
const mapDispatchToProps = dispatch => {
return {
onStoreTodo: (title, content) =>
- dispatch({
- type: actionTypes.ADD_TODO,
- title: title,
- content: content, }),
+ dispatch(actionCreators.postTodo({ title: title, content: content })),
}
};
diff --git a/src/containers/TodoList/RealDetail/RealDetail.js b/src/containers/TodoList/RealDetail/RealDetail.js
index b3273fd..1d87118 100644
--- a/src/containers/TodoList/RealDetail/RealDetail.js
+++ b/src/containers/TodoList/RealDetail/RealDetail.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react';
-
+import * as actionCreators from '../../../store/actions/index';
import './RealDetail.css';
import { connect } from 'react-redux';
@@ -49,8 +49,7 @@ const mapStateToProps = state => {
const mapDispatchToProps = dispatch => {
return {
onGetTodo: id =>
- dispatch({ type: actionTypes.GET_TODO, targetID: id }),
+ dispatch(actionCreators.getTodo(id)),
}
}
-
export default connect(mapStateToProps, mapDispatchToProps)(RealDetail);
diff --git a/src/containers/TodoList/TodoList.js b/src/containers/TodoList/TodoList.js
index f1c638d..6a52a36 100644
--- a/src/containers/TodoList/TodoList.js
+++ b/src/containers/TodoList/TodoList.js
@@ -1,6 +1,6 @@
import React, { Component } from 'react';
-
+import axios from 'axios';
import Todo from '../../components/Todo/Todo';
import TodoDetail from '../../components/TodoDetail/TodoDetail';
@@ -11,14 +11,15 @@ import './TodoList.css';
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
import * as actionTypes from '../../store/actions/actionTypes';
+import * as actionTypes from '../../store/actions/index';
class TodoList extends Component {
+ componentDidMount() {
+ this.props.onGetAll();
+ }
+
state = {
- 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 }
- ],
+ todos: [],
selectedTodo: null,
}
@@ -73,9 +74,11 @@ const mapStateToProps = state => {
const mapDispatchToProps = dispatch => {
return {
onToggleTodo: (id) =>
- dispatch({ type: actionTypes.TOGGLE_DONE, targetID: id }),
+ dispatch(actionCreators.toggleTodo(id)),
onDeleteTodo: (id) =>
- dispatch({ type: actionTypes.DELETE_TODO, targetID: id }),
+ dispatch(actionCreators.deleteTodo(id)),
+ onGetAll: () =>
+ dispatch(actionCreators.getTodos())
}
}
diff --git a/src/index.js b/src/index.js
index 00dd1c5..96dcbcb 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,7 +4,7 @@ import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Provider } from 'react-redux';
-
+import thunk from 'redux-thunk';
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
//import thunk from 'redux-thunk';
//import { connectRouter, routerMiddleware } from 'connected-react-router';
@@ -16,7 +16,7 @@ const rootReducer = combineReducers({
});
-const store = createStore(rootReducer);
+const store = createStore(rootReducer,applyMiddleware(thunk));
diff --git a/src/store/actions/index.js b/src/store/actions/index.js
new file mode 100644
index 0000000..f0d56e1
--- /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..4e02f88
--- /dev/null
+++ b/src/store/actions/todo.js
@@ -0,0 +1,72 @@
+import * as actionTypes from './actionTypes';
+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 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))
+ });
+ };
+ };
+
+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));
+ });
+ };
+ };
+
+ 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)));
+ };
+ };
\ No newline at end of file
diff --git a/src/store/reducers/todo.js b/src/store/reducers/todo.js
index 791ea40..8384001 100644
--- a/src/store/reducers/todo.js
+++ b/src/store/reducers/todo.js
@@ -13,12 +13,12 @@ const reducer = (state = initialState, action) => {
switch (action.type) {
case actionTypes.ADD_TODO:
const newTodo = {
- id: state.todos.length + 1,
- title: action.title, content: action.content,
- done: false
+ id: action.id,
+ title: action.title,
+ content: action.content,
+ done: action.done,
};
- // state.todos.push(newTodo);//Bad!!
- return { ...state, todos: [...state.todos,newTodo] };
+ return { ...state, todos: state.todos.concat(newTodo) };
// concat has the same meaning
case actionTypes.TOGGLE_DONE:
const modified = state.todos.map((td) => {
@@ -35,11 +35,9 @@ const reducer = (state = initialState, action) => {
});
return { ...state, todos: deletedTodos };
case actionTypes.GET_TODO:
- /*
- const target = { ...state.todos[action.targetID - 1] };
- return { ...state, selectedTodo: target };*/
- const selectedTodo = state.todos.find(td=> td.id===action.targetID);
- return {...state, selectedTodo};
+ return { ...state, selectedTodo: action.target };
+ case actionTypes.GET_ALL:
+ return { ...state, todos: action.todos };
default:
break;
}
diff --git a/yarn.lock b/yarn.lock
index 08f6b55..685e32e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8152,6 +8152,11 @@ recursive-readdir@2.2.2:
dependencies:
minimatch "3.0.4"
+redux-thunk@^2.3.0:
+ version "2.3.0"
+ resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
+ integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==
+
redux@^4.0.5:
version "4.0.5"
resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"