I'm working on a Reactjs project. There is login/register forms after login I am able to display the user's data in an Account page.
On the Account page the user will be able to update the data he filled in when he signed up.
The form contains :
- First name
- Last name
- Phone
- Delivery address
I want to update the data using the Reactjs form.
My code
Front
class Account extends Component {
constructor() {
super();
this.state = {
first_name: "",
last_name: "",
email: "",
phone: "",
deliveryAddress: "",
errors: {}
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
componentDidMount() {
const token = localStorage.usertoken;
const decoded = jwt_decode(token);
this.setState({
first_name: decoded.first_name,
last_name: decoded.last_name,
email: decoded.email,
phone: decoded.phone,
deliveryAddress: decoded.deliveryAddress
});
}
handleChange = input => e => {
this.setState({ [input]: e.target.value });
};
handleSubmit(e) {
e.preventDefault();
const { first_name, last_name, email, phone, deliveryAddress } = this.state;
const body = {
first_name,
last_name,
email,
phone,
deliveryAddress
};
const json = JSON.stringify(body);
console.log(json);
axios.put("http://localhost:5000/users/:id", json).then(res => {
console.log(res);
});
}
UserController.ts
export const updateUser = (req, res) => {
User.update(
{
first_name: req.body.first_name,
last_name: req.body.last_name,
email: req.body.email,
phone: req.body.phone,
deliveryAddress: req.body.deliveryAddress
},
{
where: {
id: req.body.id
}
}
).then(user => {
res.json(user);
});
};
I think my issue is in my where attribute because when I click on the Save Button I got : Executing (default): UPDATE users SET updatedAt='2020-02-18 14:30:03' WHERE id = NULL and nothing happens, nothing is updated.
EDIT
UserController.ts
export const updateUser = (req, res) => {
const id = req.params.id;
User.update(
{
first_name: req.body.first_name,
last_name: req.body.last_name,
email: req.body.email,
phone: req.body.phone,
deliveryAddress: req.body.deliveryAddress
},
{
where: {
id: id
}
}
).then(user => {
if (user == 1) {
res.send({
message: "User was updated successfully"
});
} else {
res.send({
message: `Cannot update User with id=${id}. Maybe User was not found or req.body is empty!`
});
}
});
};
When I use Postman and the request PUT on http://localhost:5000/users/10 I correctly update the user. My issue is that I can't get the id if I use my Reactjs code.
EDIT 2
I added the id in the state and in the componentDidMount() function as follows :
componentDidMount() {
const token = localStorage.usertoken;
const decoded = jwt_decode(token);
this.setState({
id: decoded.id,
first_name: decoded.first_name,
last_name: decoded.last_name,
email: decoded.email,
phone: decoded.phone,
deliveryAddress: decoded.deliveryAddress
});
}
handleSubmit(e) {
e.preventDefault();
const {
id,
first_name,
last_name,
email,
phone,
deliveryAddress
} = this.state;
const body = {
first_name,
last_name,
email,
phone,
deliveryAddress
};
const json = JSON.stringify(body);
console.log(json);
axios.put(`http://localhost:5000/users/${id}`, json).then(res => {
console.log(res);
});
}
I'm now able to get the current id : Executing (default): UPDATE users SET updatedAt='2020-02-19 08:48:57' WHERE id = '15' but nothing happens because the first_name field is not modified like I do with Postman : Executing (default): UPDATE users SET first_name='Quentin',updatedAt='2020-02-19 08:50:57' WHERE id = '15'
useris equal to 1 on success? That doesn't seem right.