Lab4 upload

backend/todo/urls.py

@@ -4,5 +4,5 @@
 
 urlpatterns = [
     path('', views.index),
-    path('<int:id>', views.index),
+    path('<int:id>/', views.index),
 ]

backend/todo/views.py

@@ -28,6 +28,7 @@ def index(request, id=None):
     if request.method == 'POST':
         try:
             body = request.body.decode()
+            print("hello", body)
             title = json.loads(body)['title']
             content = json.loads(body)['content']
         except (KeyError, JSONDecodeError) as e:

package.json

@@ -2,12 +2,19 @@
   "name": "swppfront",
   "version": "0.1.0",
   "private": true,
+  "proxy": "http://localhost:8000",
+
   "dependencies": {
+    "axios": "^0.20.0",
+    "connected-react-router": "^6.8.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
+    "react-redux": "^7.2.1",
     "react-router": "^5.0.1",
     "react-router-dom": "^5.0.1",
-    "react-scripts": "3.1.1"
+    "react-scripts": "3.1.1",
+    "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -1,25 +1,29 @@
 import React from 'react';
 import './App.css';
+import {ConnectedRouter} from 'connected-react-router';
 
 import TodoList from './containers/TodoList/TodoList';
 import RealDetail from './containers/TodoList/RealDetail/RealDetail';
 import NewTodo from './containers/TodoList/NewTodo/NewTodo';
 
-import { BrowserRouter, Route, Redirect, Switch } from 'react-router-dom';
+import {Route, Redirect, Switch } from 'react-router-dom';
 
-function App() {
+
+
+
+function App(props) {
   return (
-    <BrowserRouter>
+    <ConnectedRouter history={props.history}>
       <div className="App" >
         <Switch>
-          <Route path='/todos' exact render={() => <TodoList title="My TODOs!" />} />
+          <Route path='/todos' exact render={(props) => <TodoList title="My TODOs!" />} />
           <Route path='/todos/:id' exact component={RealDetail} />
           <Route path='/new-todo' exact component={NewTodo} />
           <Redirect exact from='/' to='todos' />
           <Route render={() => <h1>Not Found</h1>} />
         </Switch>
       </div >
-    </BrowserRouter>
+    </ConnectedRouter>
   );
 }
 

src/components/Todo/Todo.js

@@ -3,15 +3,16 @@ import React from 'react';
 import './Todo.css';
 
 const Todo = (props) => {
-
   return (
     <div className="Todo">
       <div
         className={`text ${props.done && 'done'}`}
-        onClick={props.clicked}>
+        onClick={props.clickDetail}>
         {props.title}
       </div>
       {props.done && <div className="done-mark">&#x2713;</div>}
+      <button onClick={props.clickDone}>{(props.done) ? 'Undone' : 'Done'}</button>
+      <button onClick={props.clickDelete}>Delete</button>
     </div>
   );
 };

src/containers/TodoList/NewTodo/NewTodo.js

@@ -1,7 +1,10 @@
 import React, { Component } from 'react';
+import {connect} from 'react-redux';
+// import {render} from 'react-dom';
 
-import { Redirect } from 'react-router-dom';
-
+// import * as actionTypes from '../../../store/actions/actionTypes';
+// import { Redirect } from 'react-router-dom';
+import * as actionCreators from '../../../store/actions/index';
 import './NewTodo.css';
 
 class NewTodo extends Component {
@@ -12,19 +15,20 @@ class NewTodo extends Component {
   }
 
   postTodoHandler = () => {
-    const data =
-      { title: this.state.title, content: this.state.content }
-    alert('submitted' + data.title);
-    // this.props.history.push('/todos');
-    this.props.history.goBack();
-    this.setState({ submitted: true });
+    // const data = 
+    //   { title: this.state.title, content: this.state.content }
+    // // this.props.history.push('/todos');
+    // this.props.history.goBack();
+    // this.setState({ submitted: true });
+    this.props.onStoreTodo(this.state.title, this.state.content);
+    // alert("new todo submitted"); 
   }
 
   render() {
-    let redirect = null;
-    if (this.state.submitted) {
-      redirect = <Redirect to='/todos' />
-    }
+    // let redirect = null;
+    // if (this.state.submitted) {
+    //   redirect = <Redirect to='/todos' />
+    // }
     return (
       <div className="NewTodo">
         <h1>Add a New Todo!</h1>
@@ -36,7 +40,7 @@ class NewTodo extends Component {
         ></input>
         <label>Content</label>
         <textarea rows="4" type="text" value={this.state.content}
-          onChange={(event) => this.setState({ content: event.target.content })}
+          onChange={(event) => this.setState({ content: event.target.value })}
         >
         </textarea>
         <button onClick={() => this.postTodoHandler()}>Submit</button>
@@ -45,4 +49,12 @@ class NewTodo extends Component {
   }
 }
 
-export default NewTodo;
+const mapDispatchToProps = dispatch => {
+  return {
+    onStoreTodo: (title, content)=> {
+      dispatch(actionCreators.postTodo({title:title, content:content}))
+      // dispatch({type:actionTypes.ADD_TODO, title, content})
+    }
+  };
+};
+export default connect(null, mapDispatchToProps)(NewTodo);

src/containers/TodoList/RealDetail/RealDetail.js

@@ -1,28 +1,58 @@
 import React, { Component } from 'react';
-
+import {connect} from 'react-redux';
 import './RealDetail.css';
+import * as actionCreators from '../../../store/actions/index';
+// import * as actionTypes from '../../../store/actions/actionTypes';
 
 class RealDetail extends Component {
+  componentDidMount() {
+    this.props.onGetTodo(parseInt(this.props.match.params.id));
+  }
+
   render() {
+    let title = '', content = '';
+    if (this.props.selectedTodo) {
+      title= this.props.selectedTodo.title;
+      content = this.props.selectedTodo.content;
+    }
+    // const { content, title } = this.props.selectedTodo;
     return (
+
       <div className="RealDetail" >
         <div className="row">
           <div className="left">
             Name:
         </div>
           <div className="right">
+            {title}
           </div>
         </div>
         <div className="row">
           <div className="left">
-            Content:
+            Content: 
         </div>
           <div className="right">
+            {content}
           </div>
         </div>
       </div>
     );
   }
 };
 
-export default RealDetail;
+const mapStateToProps = state => {
+  return {
+    selectedTodo: state.td.selectedTodo,
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onGetTodo: (id) => 
+      // dispatch({type: actionTypes.GET_TODO, targetID: id}),
+      // dispatch(actionCreators.onGetTodo(id)),
+      dispatch(actionCreators.getTodo(id)),
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(RealDetail);

src/containers/TodoList/TodoList.js

@@ -1,49 +1,70 @@
 import React, { Component } from 'react';
 
 import Todo from '../../components/Todo/Todo';
-import TodoDetail from '../../components/TodoDetail/TodoDetail';
+// import TodoDetail from '../../components/TodoDetail/TodoDetail';
 
 import { NavLink } from 'react-router-dom';
 
 import './TodoList.css';
+import {connect} from 'react-redux';
+// import * as actionTypes from '../../store/actions/actionTypes';
+import {withRouter} from 'react-router';
+import axios from 'axios';
+import * as actionCreators from '../../store/actions/index';
+//chrome extension에서 redux 탭이 있는지 확인한다. 
+
+
+
+const mapStateToProps = state => {
+  return {
+   // debugger 를 통해서 breakpoint를 만든다. 
+    storedTodos: state.td.todos,
+    selectedTodo: state.td.selectedTodo
+  };
+}
 
 class TodoList extends Component {
-  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 }
-    ],
-    selectedTodo: null,
+  componentDidMount() {
+    axios.get('/api/todo/')
+      .then(result => console.log(result.data))
+      .then(err => console.log(err));
+    this.props.onGetAll();
   }
 
   clickTodoHandler = (td) => {
-    if (this.state.selectedTodo === td) {
-      this.setState({ ...this.state, selectedTodo: null });
-    } else {
-      this.setState({ ...this.state, selectedTodo: td });
-    }
+    // if (this.state.selectedTodo === td) {
+    //   this.setState({ ...this.state, selectedTodo: null });
+    // } else {
+    //   this.setState({ ...this.state, selectedTodo: td });
+    // }
+    this.props.history.push('/todos/' + td.id); 
+    // `/todos/${td.id}`
   }
 
   render() {
-    const todos = this.state.todos.map(td => {
+    const todos = this.props.storedTodos.map((td) => {
+
       return (
         <Todo
           key={td.id}
           title={td.title}
+          content={td.content}
           done={td.done}
-          clicked={() => this.clickTodoHandler(td)}
+          // clicked={() => this.clickTodoHandler(td)}
+          clickDetail={() => this.clickTodoHandler(td)}
+          clickDone={() => this.props.onToggleTodo(td.id)}
+          clickDelete={() => this.props.onDeleteTodo(td.id)}
         />
       );
     });
 
-    let todo = null;
-    if (this.state.selectedTodo) {
-      todo = <TodoDetail
-        title={this.state.selectedTodo.title}
-        content={this.state.selectedTodo.content}
-      />
-    }
+    // let todo = null;
+    // if (this.props.selectedTodo) {
+    //   todo = <TodoDetail
+    //     title={this.props.selectedTodo.title}
+    //     content={this.props.selectedTodo.content}
+    //   />
+    // }
     return (
       <div className="TodoList">
         <div className='title'>
@@ -52,11 +73,26 @@ class TodoList extends Component {
         <div className='todos'>
           {todos}
         </div>
-        {todo}
+        {/* {todo} */}
         <NavLink to='/new-todo' exact>New Todo</NavLink>
       </div>
     )
   }
 }
 
-export default TodoList;
+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)),
+    // onToggleTodo: (id) => 
+      // dispatch(actionCreators.toggleTodo(id)),
+    onGetAll: () =>
+      dispatch(actionCreators.getTodos()),
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(withRouter(TodoList));

src/index.js

@@ -3,9 +3,45 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
+import {Provider} from 'react-redux';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+import {createStore, combineReducers, applyMiddleware, compose} from 'redux';
+import todoReducer from './store/reducers/todo';
+import thunk from 'redux-thunk';
+import {connectRouter, routerMiddleware} from 'connected-react-router';
+import {createBrowserHistory} from 'history';
 
+
+const history = createBrowserHistory();
+const rootReducer = combineReducers({
+  td: todoReducer, router:connectRouter(history)
+});
+
+// const store = createStore((state = {}, action) => state); // TODO 
+// 
+const logger = store => {
+  return next => {
+    return action => {
+      console.log('[Middleware] Dispatching', action);
+      const reusult = next(action);
+      console.log('[Middleware] Next State', store.getState());
+      return reusult;
+    }
+  }
+}
+const composeEnhancers = window.__REDUX__REDUX_DEVTOOLS_EXTENSION_COMPOSE__||compose;
+// const store = createStore(rootReducer, applyMiddleware(logger, thunk, routerMiddleware(history))) ;
+const store = createStore(rootReducer, 
+  composeEnhancers(
+      applyMiddleware(logger, thunk, routerMiddleware(history)))
+  );
+  //  applyMiddleware(thunk, routerMiddleware(history)));
+// applyMiddleware(thunk, routerMiddleware(history))
+// const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
+
+ReactDOM.render(
+  <Provider store={store}><App history={history} /></Provider>, 
+  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.
 // Learn more about service workers: https://bit.ly/CRA-PWA