0

Estou desenvolvendo uma SPA em React para um evento e preciso consumir uma pasta com arquivos HTML e exibi-los em um modal do React Boostrap, basicamente tenho uma seção onde é exibida todos os palestrantes conforme ilustrado em print abaixo:

Seção onde é exibido os palestrantes

Eu precisa fazer uma requisição para a pasta com os currículos dos palestrantes (que fica na pasta public do projeto criado com create-react-app) e exibir no modal o HTML com o currículo do palestrante e tenho um exemplo que fiz em ASPNET: http://interleite.com.br/#palestrantes

Alguém pode me ajudar, preciso do axios para essa tarefa?

O objeto que estou consumindo para exibir os palestrantes está nesse formato:

const infoPalestrante = {
        pt: [
            {   nome: "Daniel Pelissari",
                descricaoCurta: "CEO NectarJs",
                foto: "DanielPelissari.jpg", 
                cv: 'dp.html' 
             },

            { nome: "Lucas da Silva",
              descricaoCurta: "Diretor da Viva Lácteos",
               foto: "avatar.jpg",
               cv: "ls.html" },
        ]
    }

Tentei fazer a requisição usando axios dessa forma, até consegui capturar os htmls mas não consigo exibi-los e o que passar para exibir o correto:

axios.get('../cvs')
    .then((res)=>{
      console.log(res.data);
       this.setState({ cv: res.data})
     }).catch((err)=>{
       console.log(err);
 })

O código completo do meu componente:

import React from 'react';
import { Container, Row, Col, Card, Modal, ButtonToolbar, OverlayTrigger, Tooltip, Button } from 'react-bootstrap';
import axios from 'axios';

export default class Palestrantes extends React.Component {
    constructor(props) {
        super(props);
        // armeza o estado  do objeto contendo os palestrantes e os cvs
        this.state = { modal: false, palestrantes: {}, cvPalestrante: {}, infoPalestrante: {}, infoSecao: {}, html: {} };
        this.toggle = this.toggle.bind(this);
    }

toggle() { this.setState(prevState => ({ modal: !prevState.modal })); }

// metodo executado assim que o componente é exibido em tela
componentDidMount() { this.carregarPalestrantes(); }

carregarPalestrantes = async () => {

    const infoSecao = { pt: { lblPalestrante: "Palestrantes" } }

    // informacoes dos palestrantes

    const infoPalestrante = {
        pt: [
            {   
                nome: "Daniel Pelissari",
                descricaoCurta: "CEO NectarJS",
                foto: "avatar.jpg", 
                cv: 'mpc.html' 
             },
            { 
                nome: "Marcelo Costa Martins",
                descricaoCurta: "Diretor da Viva Lácteos",
                foto: "avatar.jpg",
                cv: "AnaRaquel.html" 
            },
        ]
    }

    // alimenta
    this.setState({ palestrantes: infoPalestrante.pt, infoSecao: infoSecao.pt });
};

abriModal(palestrante) {

    // seta um estado para o objeto cvpalestrante de acordo com o palestrante clicado
    this.setState({ cvPalestrante: palestrante });

    axios.get('../cvs')
    .then((res)=>{
      console.log(res.data);
      this.setState({ cv: res.data})
    }).catch((err)=>{
      console.log(err);
    })

    // chama a funcao responssavel por abrir o modal
    this.toggle();   
}

render() {

    // armeza o estado do objeto para uso
    const { palestrantes, cvPalestrante, infoSecao } = this.state;

    // caminho das fotos dos palestrantes 
    const caminho = "http://interleite.com.br/sul/assets/img/palestrantes/";

    return (
        <div id="palestrantes" className="cont">

            <Row>
                <Container><Col md={12} xs={12}><h1 className="titulo-secao">{infoSecao.lblPalestrante}</h1></Col></Container>
            </Row>
            <Row>
                <Container>
                    <Col md={12}>
                        <Row>
                            {Object.keys(palestrantes).map((i) => {
                                return (
                                    <Col xs={12} md={3} sm={6} className="palestrante-item" key={palestrantes[i].nome}>
                                        <Card onClick={() => this.abriModal(palestrantes[i])}>
                                            <img className="foto-palestrante" width="100%" src={caminho + palestrantes[i].foto} alt={palestrantes[i].nome}/>
                                            <div className="palestrante-info">
                                                <p className="nome-palestrante">{palestrantes[i].nome}</p>
                                                <p className="cargo-palestrante">{palestrantes[i].descricaoCurta}</p>
                                            </div>
                                        </Card>
                                    </Col>
                                )
                            })}
                        </Row>
                    </Col>
                </Container>
            </Row>

            <Modal show={this.state.modal} onHide={this.toggle} centered size="lg" unmountOnClose={true} className={this.props.className} >
                <Modal.Header closeButton />
                <Modal.Body className="text-center">
                    <img className="foto-palestrante-modal" src={caminho + cvPalestrante.foto} alt={this.state.cvPalestrante.nome} />
                    <h1 className="nome-palestrante">{this.state.cvPalestrante.nome}</h1>
                    <h2 className="descricao-palestrante">{this.state.cvPalestrante.descricaoCurta}</h2>
                    <div dangerouslySetInnerHTML={{__html: this.state.cvPalestrante.cv}} className="text-justify" /> 

                </Modal.Body>
                <Modal.Footer>
                    <div className="text-center">
                        <ButtonToolbar>
                            <OverlayTrigger overlay={ <Tooltip>Voltar ao site</Tooltip> }>
                                <Button onClick={this.toggle} className="btn btn-primary btn-circle btn-circle-lg m-1"><i className="fa fa-undo"></i></Button>
                            </OverlayTrigger> 
                        </ButtonToolbar>
                    </div>        
                </Modal.Footer>
            </Modal>
        </div>
    )
    }
}

Obrigado, qualquer ajuda será de grande importância.

12
  • Não entendi a sua duvida, poderia ser mais claro?
    – novic
    16/10/2019 às 12:57
  • Eu preciso abrir um HTML no modal que é aberto quando clico em algum palestrante, eu tenho uma pasta chamada "CVS" na pasta public do meu projeto com os arquivos html. 16/10/2019 às 13:02
  • que seria no caso essa configuração: cv: "AnaRaquel.html"? esse layout por exemplo é padrão?
    – novic
    16/10/2019 às 13:06
  • Nesse campo cv eu informo qual html deve ser usado, eu preciso fazer uma requisição para pasta com os cvs e alterar o estado this.cvPalestrante.cv para o conteudo desse html. Esse layout é a seção onde é mostrado os palestrantes do evento, quando clicar em algum deles eu preciso trazer o html que está na pasta ./public/cvs 16/10/2019 às 13:11
  • O Layout é padrão e as informações podem ser transferida pra um JSON? OU NÃO?
    – novic
    16/10/2019 às 13:26

1 Resposta 1

0

Consegui resolver fazendo uma requisição a pasta cvs dessa forma com axios:

   abriModal(palestrante) {

    // seta um estado para o objeto cvpalestrante de acordo com o palestrante clicado
    this.setState({ cvPalestrante: palestrante });

    axios.get(`/cvs/${palestrante.cv}`)
        .then((res)=>{
            console.log(res.data);
            this.setState({ cv: res.data})
        }).catch((err)=>{
            console.log(err);
        })

    // chama a funcao responssavel por abrir o modal
    this.toggle();   
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .