Estoy intentando implementar un mismo botón para seguir y dejar de seguir a un usuario.
Tengo una lista donde aparecen todos los usuarios con su respectivo botón para seguir, el problema es que cuando le doy a uno de los usuarios se me cambian todos los botones de todos los usuarios a "unfollow" en vez de cambiarse solo el que le hago click.
Tengo una tabla relacional que es donde se almacenan los ids de los usuarios cuando se siguen (no sé si esto es relevante).
Este es mi código:
Backend:
//follow user
routes.post("/users/:id/follow/:followId", (req, res) => {
const { id, followId } = req.params
const { followed, createdAt, updatedAt } = req.body
db(`INSERT INTO relationships (followerId, followedId, followed, createdAt, updatedAt)
VALUES ('${id}', '${followId}', '${followed}', '${createdAt}', '${updatedAt}')`)
.then(results => {
if(!results.error) {
res.status(201).send({})
}
res.send(results)
})
.catch(err => res.status(500).send(err))
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Frontend:
import React from "react";
import axios from "axios";
import withUser from "./Withuser"
import { Button, Card, CardBody, CardTitle } from 'reactstrap'
class Followers extends React.Component {
constructor(props) {
super(props)
this.state = {
users: [],
follower: [],
following: [],
followed: false
}
}
componentDidMount = () => {
this.getUsers()
}
getUsers = () => {
axios(`http://localhost:7001/api/users`)
.then(response => {
this.setState({ users: response.data})
console.log(response.data)
})
.catch(error => {
this.setState({ error: true })
})
}
followUser = (e) => {
e.preventDefault();
const userId = this.props.user[0].id
const followedId = e.target.value
axios.post(`http://localhost:7001/api/users/${userId}/follow/${followedId}`, {
userId,
followedId,
followed: 1,
createdAt: new Date().toISOString().slice(0, 10),
updatedAt: new Date().toISOString().slice(0, 10)
})
.then(response => {
console.log(response.data)
this.setState(state => ({
loggedIn: !state.loggedIn,
followed: true,
}))
})
.catch(error => {
console.log(error)
})
}
unfollowUser = (e) => {
e.preventDefault();
const userId = this.props.user[0].id
const followedId = e.target.value
axios.delete(`http://localhost:7001/api/users/${userId}/unfollow/${followedId}`)
.then(response => {
console.log(response)
this.setState({ followed: false })
})
.catch(error => {
this.setState({ error: true })
})
}
render() {
const { users, followed } = this.state
const userId = this.props.user[0].id
return (
<div>
<h2>Users in Unax</h2>
<ul>
{users.map((user, index) => {
if(user.id !== userId) {
return (
<Card className="users" key= {index}>
<CardBody>
<CardTitle>{user.user_name}</CardTitle>
{followed ? (
<Button id="btn" value={user.id} onClick={this.unfollowUser}>Unfollow</Button>
) : (
<Button id="btn" value={user.id} onClick={this.followUser}>follow</Button>
)}
</CardBody>
</Card>
)}
})}
</ul>
</div>
)
}
}
export default withUser(Followers);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Me podríais ayudar? No entiendo dónde puede estar el error.