0

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.

1 respuesta 1

0

Tienes una lista de usuarios a los que sigues en el estado de tu componente following: [], pero solamente tienes una variable para controlar todos los botones, que es la variable de estado followed. Por eso es que todos se cambian cuando le das unfollow a uno con this.setState({ followed: false }), debes de agregar una nueva lógica para ver si estás siguiendo al usuario, algo como así:

{ followed(usuario) ? (
   <Button id="btn" value={user.id} onClick={this.unfollowUser}>Unfollow</Button>
   ) : (
   <Button id="btn" value={user.id} onClick={this.followUser}>follow</Button>
 )}

En donde followed(usuario) es una nueva función que revisa si el usuario que estás iterando a través de map está siendo seguido o no.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.