Simple todo list: React frontend, Express backend. I am new to React and I got stuck into some sort of anti-pattern when firing a function to update a single todo contained in the array.
I logged the result of the request in the console, you can see it below. I will also share the React code and Express one, I really don't understand where things go wrong and I have been stuck for quite a while.
When making a PATCH call, an OPTIONS one is actually made, with the following
Request URL: http://ec2-3-11-68-236.eu-west-2.compute.amazonaws.com:3001/3
Request Method: OPTIONS
Status Code: 200 OK
Remote Address: 3.11.68.236:3001
Referrer Policy: no-referrer-when-downgrade
Access-Control-Allow-Headers: *
Access-Control-Allow-Methods: *
Access-Control-Allow-Origin: *
Allow: PATCH,GET,HEAD,DELETE
Connection: keep-alive
Content-Length: 21
Content-Type: text/html; charset=utf-8
Date: Mon, 22 Jun 2020 11:58:53 GMT
ETag: W/"15-jHsDAtM3pLnwtbz4TiFr85EHmew"
X-Powered-By: Express
Provisional headers are shown
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: PATCH
Origin: http://ec2-3-11-68-236.eu-west-2.compute.amazonaws.com:5000
Referer: http://ec2-3-11-68-236.eu-west-2.compute.amazonaws.com:5000/?
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36
after which, a PATCH call is made with:
Request URL: http://ec2-3-11-68-236.eu-west-2.compute.amazonaws.com:3001/3
Request Method: PATCH
Status Code: 404 Not Found
Remote Address: 3.11.68.236:3001
Referrer Policy: no-referrer-when-downgrade
Access-Control-Allow-Headers: *
Access-Control-Allow-Methods: *
Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Length: 0
Date: Mon, 22 Jun 2020 11:58:53 GMT
X-Powered-By: Express
Request Headers
Provisional headers are shown
Accept: application/json
Content-type: application/json
Origin: http://ec2-3-11-68-236.eu-west-2.compute.amazonaws.com:5000
Referer: http://ec2-3-11-68-236.eu-west-2.compute.amazonaws.com:5000/?
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36
Request Payload
{title: "new todo"}
title: "new todo"
I understand that the OPTIONS call is made as a means to check whether the http request is legitimate, but why is my actual PATCH request contained in the OPTIONS call (as shown in the content-length: 21), while the PATCH request has content length: 0?
Also, I don't understand why I am experiencing this behaviour where the content length in the PATCH call is 0, but there is actual content in the request payload.
Here is the React code:
import React, {Component} from 'react';
class App extends Component {
constructor(){
super();
this.state = { todos:[],
currentItem: ''
}
this.handleInputChange = this.handleInputChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.deleteItem=this.deleteItem.bind(this);
this.updateTodo=this.updateTodo.bind(this);
}
handleInputChange = (e) => this.setState({ currentItem: e.target.value });
handleSubmit(event) {
event.preventDefault();
fetch('http://ec2-3-11-68-236.eu-west-2.compute.amazonaws.com:3001/post', {
method: 'POST',
headers:{
'Accept': 'application/json',
'Content-type': 'application/json'},
body: JSON.stringify({title: this.state.currentItem})
})
.then(res => res.json())
//.then(data => console.log(data))
.then(data => {
this.setState({
todos: [...this.state.todos, data.todo]
})
})
//console.log(this.state)
}
updateTodo(y){
fetch('http://ec2-3-11-68-236.eu-west-2.compute.amazonaws.com:3001/' + y, {
method: 'PATCH',
headers:{
'Accept': 'application/json',
'Content-type': 'application/json'},
body: JSON.stringify({title: this.state.currentItem}),
})
.then(res => console.log(res))
//.then(data => {
// this.setState({
// todos: this.state.todos.forEach(
// item => {
// if(item.key === y){item.title = this.state.currentItem}
// })
// })
// })
}
deleteItem(x){
fetch('http://ec2-3-11-68-236.eu-west-2.compute.amazonaws.com:3001/' + x, {
method: 'DELETE',
headers:{
'Accept': 'application/json',
'Content-type': 'application/json'}
})
.then(res => res.json())
.then(data => {
this.setState({
todos: this.state.todos.filter (t => t.key !== x)
})
})
}
componentDidMount(){
fetch('http://ec2-3-11-68-236.eu-west-2.compute.amazonaws.com:3001/list')
.then(res => res.json())
.then((todos) => {
this.setState({todos: todos});
});
}
render() {
return(
<div>
<h1> Todo List </h1>
<form onSubmit={this.handleSubmit}>
<input
type ="text"
value = {this.state.currentItem}
onChange = {this.handleInputChange}
/>
<input type="submit" value="ADD TODO" />
</form>
<ul>
{this.state.todos.map((todo) => (
<li key = {todo.key}> {todo.title}
<button onClick = {() => this.deleteItem(todo.key)}>x</button>
<button onClick = {() => this.updateTodo(todo.key)}>update</button>
</li>
))}
</ul>
</div>
)
}
}
export default App
I think the parts commented out would work if the response contained a proper json response, for now I have commented them out because I don't seem to manage to make the PATCH request properly. The curious thing is that the correct todo (the one with the id contained in the request) does get updated correctly. I also tried with the verb PUT, with no difference in output.
While this is the express code:
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
var counter = 3
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "*");
res.header("Access-Control-Allow-Methods", "*")
next();
});
var todos = [{key:1, title:'eat'}, {key:2, title:'pray'}, {key:3, title:'love'}];
app.listen(3001, function (err) {
if (err) {
console.error('Cannot listen at port 3001', err);}
console.log('Todo app listening at port 3001');
});
app.use(bodyParser.urlencoded({ extended: false }));
// parse application/json
app.use(bodyParser.json());
//GET the whole todos list
app.get('/list', (req, res) => res.status(200).json(todos));
//POST a new todo to the list
app.post('/post', (req, res) => {
if(!req.body.title) {
return res.status(400).send({
success: 'false',
message: 'title is required'
});
}
counter ++;
const todo = {
key: counter,
title: req.body.title
}
todos.push(todo);
return res.send({todo})
});
//PUT to UPDATE a single item
app.patch('/:key', (req, res) => {
var title = req.body.title
var key = parseInt(req.params.key, 10);
for (var i = 0; i < todos.length; i++){
if (todos[i].key === key){
todos[i].title = title;
break;
res.status(200).send({
success: 'true',
message: 'Todo updated successfully'
})
}else {res.status(404, 'The task was not found').send()}
};
});
//GET a single item
app.get('/:key', (req, res) => {
const key = parseInt(req.params.key, 10);
todos.map((todo) => {
if (todo.key === key) {
return res.status(200).send({todo});
}
});
return res.status(404).send({
success: 'false',
message: 'todo does not exist',
});
});
//DELETE an item by its ID
app.delete('/:key', (req, res) => {
const key = parseInt(req.params.key, 10);
todos.map((todo, index) => {
if (todo.key === key) {
todos.splice(index, 1);
return res.status(200).send({
success: 'true',
message: 'Todo deleted successfully',
});
}
});
return res.status(404).send({
success: 'false',
message: 'todo not found',
});
});
module.exports = app;