yutsuo
/
mern-todo-app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

update

master
Yutsuo 6 years ago
parent
d98979f2dd
commit
731e6c0129
4 changed files with 94 additions and 119 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 31
      package-lock.json
  2. 1
      package.json
  3. 11
      src/components/create-todo.component.js
  4. 170
      src/components/todos-list.component.js

31
package-lock.json generated
Unescape View File

@ -2158,6 +2158,37 @@
"resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.1.tgz",
"integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug=="
},
"axios": {
"version": "0.19.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
"integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
"requires": {
"follow-redirects": "1.5.10"
},
"dependencies": {
"debug": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
"requires": {
"ms": "2.0.0"
}
},
"follow-redirects": {
"version": "1.5.10",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
"requires": {
"debug": "=3.1.0"
}
},
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
}
}
},
"axobject-query": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.1.1.tgz",

1
package.json
Unescape View File

@ -6,6 +6,7 @@
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.4.0",
"@testing-library/user-event": "^7.2.1",
"axios": "^0.19.2",
"bootstrap": "^4.4.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",

11
src/components/create-todo.component.js
Unescape View File

@ -1,4 +1,5 @@
import React from 'react'
import axios from 'axios'
export default class CreateTodo extends React.Component {
constructor(props) {
@ -43,6 +44,16 @@ export default class CreateTodo extends React.Component {
console.log(`Todo Responsible: ${this.state.todo_responsible}`)
console.log(`Todo Priority: ${this.state.todo_priority}`)
const newTodo = {
todo_description: this.state.todo_description,
todo_responsible: this.state.todo_responsible,
todo_priority: this.state.todo_priority,
todo_completed: this.state.todo_completed
}
axios.post('http://localhost:4000/todos/add', newTodo)
.then(res => console.log(res.data))
this.setState({
todo_description: '',
todo_responsible: '',

170
src/components/todos-list.component.js
Unescape View File

@ -1,123 +1,55 @@
import React from "react";
import React from "react"
import { Link } from "react-router-dom"
import axios from "axios"
const Todo = props => (
<tr>
<td> {props.todo.todo_description} </td>
<td> {props.todo.todo_responsible} </td>
<td> {props.todo.todo_priority} </td>
<td>
<Link to={`/edit/${props.todo._id}`}>Edit</Link>
</td>
</tr>
)
export default class TodosList extends React.Component {
constructor(props) {
super(props);
this.state = {
todo_description: "",
todo_responsible: "",
todo_priority: "",
todo_completed: false
};
this.onChangeTodoDescription = this.onChangeTodoDescription.bind(this);
this.onChangeTodoResponsible = this.onChangeTodoResponsible.bind(this);
this.onChangeTodoPriority = this.onChangeTodoPriority.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
onChangeTodoDescription(event) {
this.setState({ todo_description: event.target.value });
}
onChangeTodoResponsible(event) {
this.setState({ todo_responsible: event.target.value });
}
onChangeTodoPriority(event) {
this.setState({ todo_priority: event.target.value });
}
onSubmit(event) {
event.preventDefault();
console.log(`Form submitted:`);
console.log(`Todo Description: ${this.state.todo_description}`);
console.log(`Todo Responsible: ${this.state.todo_responsible}`);
console.log(`Todo Priority: ${this.state.todo_priority}`);
this.setState({
todo_description: "",
todo_responsible: "",
todo_priority: "",
todo_completed: false
});
}
render() {
return (
<div>
<div style={{ marginTop: 10 }}>
<h3>Create New Todo</h3>
<form onSubmit={this.onSubmit}>
<div className="form-group">
<label>Description: </label>
<input
type="text"
className="form-control"
value={this.state.todo_description}
onChange={this.onChangeTodoDescription}
/>
</div>
<div className="form-group">
<label>Responsible: </label>
<input
type="text"
className="form-control"
value={this.state.todo_responsible}
onChange={this.onChangeTodoResponsible}
/>
</div>
<div className="form-group">
<div className="form-check form-check-inline">
<input
className="form-check-input"
type="radio"
name="priorityOptions"
id="priorityLow"
value="Low"
checked={this.state.todo_priority === "Low"}
onChange={this.onChangeTodoPriority}
/>
<label className="form-check-label">Low</label>
</div>
</div>
<div className="form-group">
<div className="form-check form-check-inline">
<input
className="form-check-input"
type="radio"
name="priorityOptions"
id="priorityMedium"
value="Medium"
checked={this.state.todo_priority === "Medium"}
onChange={this.onChangeTodoPriority}
/>
<label className="form-check-label">Medium</label>
</div>
</div>
<div className="form-group">
<div className="form-check form-check-inline">
<input
className="form-check-input"
type="radio"
name="priorityOptions"
id="priorityHigh"
value="High"
checked={this.state.todo_priority === "High"}
onChange={this.onChangeTodoPriority}
/>
<label className="form-check-label">High</label>
</div>
</div>
<div className="form-group">
<input type="submit" value="Create Todo" className="btn btn-primary"/>
constructor(props) {
super(props);
this.state = { todos: [] };
}
componentDidMount() {
axios.get('http://localhost:4000/todos/')
.then(response => { this.setState({ todos: response.data }) })
.catch( error => { console.log(error) })
}
todoList() {
return this.state.todos.map((currentTodo, item) => {
return <Todo todo={currentTodo} key={item} />
})
}
render() {
return (
<div>
<h3>Todos List</h3>
<table className="table table-striped" style={{ marginTop: 20 }} >
<thead>
<tr>
<th>Description</th>
<th>Responsible</th>
<th>Priority</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{ this.todoList() }
</tbody>
</table>
</div>
</form>
</div>
</div>
);
}
)
}
}

Write Preview
Loading…
Cancel
Save