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

Qual link do Heroku devo usar

Estou usando o o fetch da seguinte forma:

        fetch(`https://instalura-api.herokuapp.com/api/fotos/${this.props.foto.id}}/like?X-AUTH-TOKEN=${localStorage.getItem('auth-token')}`, {method: "POST"})

Dessa forma eu não estou conseguindo receber no console o responsável pelo like. Qual o link do Heroku que devo usar nessa fase do curso?

4 respostas

Fala aí Hugo, tudo bem? Desculpa mas não entendi muito bem. O que está retornando da API?

O link do Heroku se não me engano(faz tempo que já fiz) é o mesmo para os cursos de React.

Fico no aguardo.

Na atividade 1 da aula 5 de React 2, quando eu chego na parte de implementar a função "like()", meu console retorna:

×
Unhandled Rejection (Error): Não foi possível realizar o like
(anonymous function)
src/componentes/Foto.js:18
  15 |         return response.json();
  16 |     } else{
  17 | 
> 18 |         throw new Error("Não foi possível realizar o like");
     | ^  19 |     }
  20 | })
  21 | .then(liker => {
POST https://instalura-api.herokuapp.com/api/fotos/3%7D/like?X-AUTH-TOKEN=eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhbG90cyJ9.AQrl-JRJg39KeKYxMfNpnljXwxu0WOa8iYxT1Ih9Be-832MQBrJ5DxHwJzyQ-P-wp9lP49fSCmr_St-kl97nPw 400
Foto.js:18 Uncaught (in promise) Error: Não foi possível realizar o like
    at Foto.js:18

Nesse mesmo momento o console do professor retorna um objeto com o responsável por realizar o like. O meu arquivo Foto está assim:

import React, { Component } from 'react';
import {Link} from "react-router";

class FotoAtualizacoes extends Component {

    like(event){

        event.preventDefault();

        fetch(`https://instalura-api.herokuapp.com/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");
            }
        })
        .then(liker => {

            console.log(liker);
        });
    }

    render(){
        return (
            <section className="fotoAtualizacoes">
              <a onClick={this.like.bind(this)} href="#" className="fotoAtualizacoes-like">Likar</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 {
    render(){
        return (
            <div className="foto-in fo">
              <div className="foto-info-likes">
                {
                  this.props.foto.likers.map(liker => {
                    return (<Link href={`/timeline/${liker.login}`} key={liker.login}>{liker.login},</Link>)
                  })
                }

                 curtiram

              </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>            
        );
    }
}

Não sei onde to errando, talvez esteja faltando alguma coisa no link do Heroku, porque aparentemente o resto do meu código está igual ao do professor no momento em que ele implementa a função "like".

Esse erro 400 no POST que está impossibilitando que funcione quando eu clico no like. Ou seja, não estou conseguindo fazer o "POST" com esse link que estou usando do Heroku. Não sei se estou usando o endereço correto.

solução!

Descobri meu erro, estou usando "}" duas vezes no link. Valeu pela ajuda!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software