Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Problemas na implementação do liker.

Boa Noite, Alberto! Estou com problemas na implementação do liker. Quando eu clico no liker, o nome do usuário só aparece se eu atualizar a página. Segue o código:

import React,{Component} from 'react';
import {Link} from 'react-router';
import Pubsub from 'pubsub-js';

class FotoAtualizacoes extends Component {
  constructor(props){
    super(props);
    this.state = {likeada: this.props.foto.likeada};   
  }

  like(event){
    event.preventDefault();

    fetch(`http://localhost:8080/api/fotos/${this.props.foto.id}/like?X-AUTH-TOKEN=${localStorage.getItem('auth-token')}`, {method:'POST'})
    .then(response =>{
      if(response.ok){
        return response.json();
      }else{
        throw new Error("não foi possível realizar o like da foto");
      }
    })
    .then(liker =>{
      this.setState({likeada:!this.state.likeada});
      Pubsub.publish('atualiza-liker',{fotoId:this.props.foto.id, liker});
    });
  }
    render(){
        return (
            <section className="fotoAtualizacoes">
              <a onClick={this.like.bind(this)} className={this.state.likeada ? 'fotoAtualizacoes-like-ativo':'fotoAtualizacoes-like'}>Apreciar</a>
              <form className="fotoAtualizacoes-form">
                <input type="text" placeholder="Adicione um comentário..." className="fotoAtualizacoes-form-campo"/>
                <input type="submit" value="Comentar!" className="fotoAtualizacoes-form-submit"/>
              </form>

            </section>            
        );
    }
}

class FotoInfo extends Component {
  constructor(props){
    super(props);
    this.state={likers : this.props.foto.likers};
  }

  componentWillMount(){
    Pubsub.subscribe('atualiza-liker',(topico, infoLiker) => {
      if(this.props.foto.id === infoLiker.fotoId){
          const possivelLiker = this.state.likers.find(liker => liker.login === infoLiker.liker.login);
          console.log(possivelLiker);
          if(possivelLiker === undefined){
            const novosLikers = this.state.likers.concat(infoLiker.liker);
            this.setState({likers:novosLikers});
          }else{
            const novosLikers = this.state.likers.filter(liker => liker.login !== infoLiker.liker.login); 
            this.setState({likers:novosLikers}); 
          }                   
      }
    });  
  }

  render(){
        return (
            <div className="foto-info">
              <div className="foto-info-likes">
                  {
                    this.props.foto.likers.map(liker => {
                       return(<Link key={liker.login} href={`/timeline/${liker.login}`}>{liker.login},</Link>)
                    })
                  }
                  apreciaram
              </div>

              <p className="foto-info-legenda">
                <a className="foto-info-autor">autor </a>
               {this.props.foto.comentario}
              </p>

              <ul className="foto-info-comentarios">
                {
                  this.props.foto.comentarios.map(comentario =>{
                    return(
                      <li className="comentario" key={comentario.id}>
                       <Link to={`/timeline/${comentario.login}`} className="foto-info-autor">{comentario.login}</Link>
                        {comentario.texto}
                      </li>    
                    );
                  })
                }                           
              </ul>
            </div>            
        );
    }
}

class FotoHeader extends Component {
    render(){
        return (
            <header className="foto-header">
              <figure className="foto-usuario">
                <img src={this.props.foto.urlPerfil} alt="foto do usuario"/>
                <figcaption className="foto-usuario">
                  <Link to={`/timeline/${this.props.foto.loginUsuario}`}>
                    {this.props.foto.loginUsuario}
                  </Link>  
                </figcaption>
              </figure>
              <time className="foto-data">{this.props.foto.horario}</time>
            </header>            
        );
    }
}

export default class FotoItem extends Component {
    render(){
        return (
          <div className="foto">
            <FotoHeader foto={this.props.foto}/>
            <img alt="foto" className="foto-src" src={this.props.foto.urlFoto}/>
            <FotoInfo foto={this.props.foto}/>
            <FotoAtualizacoes foto={this.props.foto}/>
          </div>            
        );
    }
}
2 respostas
solução!

Fala Vinicius, tudo bem ?

O problema é que o seu componente, que se inscreve no evento pra alterar a lista a cada vez que ele é publicado, tem no render um trecho iterando pelo this.props.foto.likers (props é read-only, e os novos likers sempre estarão em this.state.likers).

Se você mudar provavelmente deve funcionar.

Espero ter ajudado. Abraço!

Rafael, é exatamente isso. Muito obrigado!