0

Estoy intentando que cuando un usuario siga a otro, el botón de seguir cambie a "unfollow" y viceversa.

Soy bastante nueva en programación, hasta el momento he conseguido que la funcionalidad se ejecute, pero en el momento de hacer click el botón no cambia de manera inmediata, si no que tengo que refrescar la página para que cambie.

He estado buscando en internet pero no encuentro la solución a mi problema. Alguien sabe cómo puedo solucionar esto?

Este es mi código:

Followers:

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: [], 
      followingUsers: []
    }
  }

  componentDidMount = () => {
    this.getUsers()
    this.getFollowing()
  }

  getUsers = async () => {

    try {
      const response = await axios(`http://localhost:7001/api/users`)
      this.setState({ users: response.data})
        console.log(response.data)
    } catch {
      this.setState({ error: true })
    }
  }

  getFollowing = async () => {
    const userId = this.props.user[0].id

    try {
      const response = await axios(`http://localhost:7001/api/users/${userId}/following`)

      const tempFollowing = response.data.map((follow, index) => {
        return follow.followedId
      })

      this.setState({ 
        following: response.data,
        followingUsers: tempFollowing
      })
      console.log(response.data)
    } catch (error) {
      this.setState({ error: true})
    }
  }

  followUser = async (e) => {
    e.preventDefault();
    const userId = this.props.user[0].id
    const followedId = e.target.value
    
    try {
      const response = await 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)
      })
      console.log(response.data)
      this.setState(state => ({
        loggedIn: !state.loggedIn,
        followed: true,
      })) 
    } catch(error) {
      console.log(error)
    }
  }

  unfollowUser = async (e) => {
    e.preventDefault();
    const userId = this.props.user[0].id;
    const followedId = e.target.value;
 
    try {
      const response = await axios.delete(
        `http://localhost:7001/api/users/${userId}/unfollow/${followedId}`
      );
      console.log(response);
      let array = [...this.state.following];
      let index = array.indexOf(followedId);
      if (index !== -1) {
        array.splice(index, 1);
 
        const tempFollowing = array.map((follow, index) => {
          return follow.followedId;
        });
 
        this.setState({
          following: array,
          followingUsers: tempFollowing,
        });
 
      }
    } catch (error) {
      this.setState({ error: true });
    }
  };


  render() {
    const { users, following, followingUsers } = this.state
    const userId = this.props.user[0].id
    
    //console.log(followingUsers)
    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>
                  {followingUsers.includes(user.id) ? (
                    <Button id="btn-1" value={user.id} onClick={this.unfollowUser}>Unfollow</Button>
                   ) : (
                    <Button id="btn" value={user.id} onClick={this.followUser}>follow</Button>
                   )}
                </CardBody>
              </Card>
             )}  
          })}
        </ul>
        <div>
          <h2>Following</h2>
            <ul>
              {following.map((follow, index) => {
                return (
                  <Card key= {index}>
                    <CardBody>
                      <CardTitle>{follow.followedId}</CardTitle>
                    </CardBody>
                  </Card>)
              })}
            </ul>
        </div>
      </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>

WithUser:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const fetchProfile = async () => {
  const token = localStorage.getItem('token');

  if (!token) {
    throw new Error('Missing Token');
  }

  const response = await axios('http://localhost:7001/api/profile', {
    headers: {
      'x-access-token': token,
    },
  });

  const profile = response.data;

  return profile;
};

const fetchUsers = async (userId) => {
  const response = await axios(`http://localhost:7001/api/users/${userId}`);
  const users = response.data;
  return users;
};

const withUser = (Component, options = { renderNull: true }) => (props) => {
  const [userData, setUserData] = useState();

  useEffect(() => {
    async function loadUser() {
      try {
        const profile = await fetchProfile();
        const users = await fetchUsers(profile.id);
        setUserData(users);
      } catch (error) {
        console.error(error);
      }
    }
    loadUser();
  }, []);

  if (userData === undefined && options.renderNull === true) {
    return null;
  }

  return <Component {...props} user={userData} />;
};

export default withUser;
<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>

Sería de gran ayuda, ya que ando un poco perdida y no he encontrado solución online.

Gracias ;)

2
  • Cuando escribes console.log(followingUsers) en tu función render() obtienes la lista correcta de usuarios?
    – milmal
    Commented el 27 nov. 2020 a las 7:33
  • Hola @milmal, sí, tengo la lista correcta, el problema es al añadir a otro usuario al arreglo, ahí no aparece el nuevo usuario hasta que no refresco la página, que entonces sí que se añade... no sé si me he explicado bien.... :)
    – Guerreri88
    Commented el 27 nov. 2020 a las 9:04

1 respuesta 1

0

Si te entendí correctamente el state de followingUsers no se actualiza, pero http://localhost:7001/api/users/${userId}/unfollow/${followedId} corre. Entoces me pregunto si console.log(followingUsers) retorna la lista correcta de usuarios cuando haces clic unfollow.

Creo que puedes pasar el state previo en setState.

 try {
      const response = await axios.delete(
        `http://localhost:7001/api/users/${userId}/unfollow/${followedId}`
      );
      console.log(response);
      this.setState((statePrevio) => {
          const nuevaFollowing = [...statePrevio.following];
          let tempFollowing = [...statePrevio.followingUsers];
          const index = nuevaFollowing.indexOf(followedId);
          if (index !== -1) {
             nuevaFollowing.splice(index, 1);
             tempFollowing = nuevaFollowing.map((follow, index) => {
                return follow.followedId;
             });
          }

          return { following: nuevaFollowing, followingUsers: tempFollowing };
      });
    } catch (error) {
      this.setState({ error: true });
    }

Puedes leer más sobre setState aquí.

1
  • Gracias @milmal, tampoco me funciona. El artículo me ha servido para entender un poco mejor cómo funciona State (soy nueva en esto), pero tampoco lo he podido solucionar. Voy a seguir leyendo a ver si encuentro algo porque tengo claro que el problema es que al hacer el render no añade el usuario al array....
    – Guerreri88
    Commented el 27 nov. 2020 a las 17:13

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.