Pass API data to another component react

0

I'm bringing some API data from a filter I created, it's just right that I do not know how to get this output and play the normal listing component.

Services Listing Component

/**
 * @license
 * 2018 CarFix do Brasil.
 * All Rights Reserved.
 */

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { apiFetch } from "../../../helpers/api-fetch";
// import { UncontrolledCollapse } from "reactstrap";
// import placeholder from "../../../assets/imgs/placeholders/user.png";
// import PicModal from "./picmodal";
import Filters from '../filters/filters';
import swal from "sweetalert";



class DashboardContent extends Component {
    constructor(props) {
        super(props);



        this.state = {
            quotes: [],
            isLoading: true,
            error: null,
            addressUpload:
                process.env.REACT_APP_API_PREFIX + "/images/services/"
        };



        this.sweetalertfunction = this.sweetalertfunction.bind(this);
        this.captureIdQuote = this.captureIdQuote.bind(this);
    }

    sweetalertfunction() {
        swal({
            icon: "warning",
            title: "Quer comprar este contato?",
            text: "O valor será descontado dos seus créditos",
            buttons: {
                cancel: {
                    text: "Cancelar",
                    visible: true
                },
                confirm: {
                    text: "Comprar",
                    closeModal: false
                }
            }
        });
    }

    componentDidMount() {
        this.fetchData();
    }


    captureIdQuote(id) {
        localStorage.setItem("idQuote", id);
    }

    quotes(props){
        this.setState({quotes: props.quotes.quotes})
    }

    fetchData() {
        apiFetch("/quotes")
            .then(quotes => {
                console.log(quotes);
                this.setState({ quotes, isLoading: false });
            })
            .catch(error => this.setState({ error }));
    }

    render() {
        const { isLoading, error, quotes } =  this.state;



        if (error) {
            return (
                <div className="w-100 overflow-hidden order-2 order-md-1">
                    <p>{error.message}</p>
                </div>
            );
        }

        if (isLoading) {
            return (
                <div className="w-100 overflow-hidden order-2 order-md-1">
                    <p>Loading...</p>
                </div>
            );
        }

        // if (this.state.quotes.lenght > 0) {

        return (
            <div className="w-100 overflow-hidden order-2 order-md-1">
                {/* SliderFilter.state. */}

                {quotes.map((quote, index) => (
                    <div key={'${quote}${index}'} className="card mb-1">
                        <div className="card-header header-elements-sm-inline">
                            <div className="header-elements">
                                <span
                                    className="badge badge-danger"
                                    style={{
                                        fontWeight: "600"
                                    }}
                                >
                                    {quote.executionTime.name}
                                </span>
                            </div>
                        </div>

                        <div className="card-body">
                            <div className="media align-items-center align-items-lg-start text-center text-lg-left flex-column flex-lg-row">
                                <div className="mr-lg-3 mb-3 mt-3 mb-lg-0">
                                    <img
                                        src={
                                            this.state.addressUpload +
                                            quote.service.imageName
                                        }
                                        width="96"
                                        alt=""
                                    />
                                </div>

                                <div className="media-body">
                                    <h6 className="media-title font-weight-semibold mb-2">
                                        {quote.service.name}
                                    </h6>

                                    {/* <ul className="list-inline list-inline-dotted mb-3 mb-lg-2">
                      <li className="list-inline-item">
                        <a>Ford Ka</a>
                      </li>
                      <li className="list-inline-item">
                        <a>2004</a>
                      </li>
                    </ul> */}
                                    <p className="mb-3">
                                        <strong>Nome: </strong>{" "}
                                        {quote.customer.name}
                                    </p>
                                    <p className="mb-2">
                                        <strong>Descrição: </strong>{" "}
                                        {quote.comments}
                                    </p>
                                    <p className="mb-1">
                                        <strong>Marca: </strong>{" "}
                                        {quote.vehicle.fipe.marca}
                                        <strong> Modelo: </strong>{" "}
                                        {quote.vehicle.fipe.modelo}
                                        <strong> Ano: </strong>{" "}
                                        {quote.vehicle.fipe.anomod}
                                    </p>

                                    {/* <span class="badge badge-secondary">Região</span> */}
                                    <span className="text-muted">
                                        <strong> Endereço: </strong>{" "}
                                        {quote.address.address}{" "}
                                    </span>
                                    <span className="text-muted">
                                        <strong>Bairro: </strong>{" "}
                                        {quote.address.neighborhood}{" "}
                                    </span>
                                    <span className="text-muted">
                                        <strong>Casa/Apto: </strong>{" "}
                                        {quote.address.addressLine2}{" "}
                                    </span>
                                    <span className="text-muted">
                                        <strong>CEP: </strong>{" "}
                                        {quote.address.postalCode}{" "}
                                    </span>

                                    {/* <span className="text-muted">
                                        {quote.publishedAt}
                                    </span> */}
                                </div>

                                <div className="mt-3 mt-lg-0 ml-lg-3 mr-lg-3 text-center">
                                    <h3 className="mb-0 font-weight-semibold">
                                        R$19,90
                                    </h3>

                                    <div className="text-muted">
                                        85 visualizações
                                    </div>

                                    <div class="text-center">
                                        <h6 class="m-0 font-weight-semibold">
                                            Colored with icon
                                        </h6>
                                        <p class="text-muted mb-3">
                                            Available in both directions
                                        </p>

                                        <Link
                                            to={'/servicosView/${quote.id}'}
                                            params={{ id: quote.id }}
                                            onClick={() =>
                                                this.captureIdQuote(quote.id)
                                            }
                                            class="btn btn-primary"
                                        >
                                            <i class="icon-cog3 mr-2" />{" "}
                                            Detalhes
                                        </Link>
                                    </div>

                                    <button
                                        type="button"
                                        id="serviceBuy"
                                        onClick={this.sweetalertfunction}
                                        className="btn legitRipple mt-3"
                                        style={{ backgroundColor: "#EAB801" }}
                                    >
                                        <i className="icon-cart-add mr-2" />{" "}
                                        Comprar
                                    </button>
                                </div>
                            </div>
                            <button
                                type="button"
                                id="detToggler"
                                className="btn btn-block bg-transparent"
                            >
                                {/* <i
                                    className="icon-plus3 mr-2"
                                    style={{ color: "#EAB801" }}
                                /> */}
                            </button>
                        </div>
                    </div>
                ))}
                {/* <UncontrolledCollapse toggler="detToggler" >
          <div className="card card-body">
            <div className="media align-items-center align-items-lg-start text-center text-lg-left flex-column flex-lg-row">
              <div className="mr-lg-3 mb-3 mb-lg-0">
                <img src={placeholder} className="rounded" width="100" alt="" />
              </div>

              <div className="media-body mt-3">
                <h6 className="media-title font-weight-semibold">
                  John Doe
                                    </h6>

                <ul className="list-inline list-inline-dotted mb-2">
                  <li className="list-inline-item mt-1">******@email.com</li>
                  <li className="list-inline-item">tel (11)98*******</li>
                </ul>

              </div>
              <PicModal />
            </div>
          </div>

        </UncontrolledCollapse> */}
            </div>
        );
        // }
    }
}

export default DashboardContent;

Services parent component where I put the other child components

/**
 * @license
 * 2018 CarFix do Brasil.
 * All Rights Reserved.
 */

import React from "react";
import { Redirect } from "react-router-dom";

import DashboardLayout from "./layouts/dashboard-layout";
import ServicesContent from "./pagecontent/services/servicescontent";
import Categories from "./pagecontent/filters/categories";
import Filters from "./pagecontent/filters/filters";
import { apiFetch } from "../helpers/api-fetch";

class ServicesPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            redirect: false,
            quotes: []
        };

        this.selectVehicle = this.selectVehicle.bind(this);
        this.handleSetQuote = this.handleSetQuote.bind(this);

    }



    handleSetQuote(){
        return this.state.quotes;
    }

    selectVehicle(e) {
        // if (!this.state.username || !this.state.password) return;

        let t = document.getElementById("selectMarca");
        let selectMarca = t.options[t.selectedIndex].text;


        let j = document.getElementById("selectExecucao");
        let selectExecucao = j.options[j.selectedIndex].text;

        let y = document.getElementById("selectEstado");
        let selectEstado = y.options[y.selectedIndex].text;

        let kmraio = document.getElementById("kmraio").value;


        // console.log(itemMarca);


    //    ServiceContent.setState({isLoading: true})


       apiFetch("/quotes?km=" + kmraio + '&address.city=' + selectEstado + '&vehicle.fipe.marca='+ selectMarca + '&executionTime='+ selectExecucao )
       .then(quotes => {
           console.log(quotes);
           return quotes;
       })
       .catch(error => this.setState({ error }));
    }


    render() {
        if (this.state.redirect) {
            return <Redirect to={"/login"} />;
        }

        return (
            <DashboardLayout>
                <div className="d-flex align-items-start flex-column flex-md-row">
                    <ServicesContent  handleSetQuote={this.handleSetQuote} />

                    <div className="sidebar sidebar-light bg-transparent sidebar-component sidebar-component-right border-0 shadow-0 order-1 order-md-2 sidebar-expand-md">
                        <div className="sidebar-content">
                            <Categories />
                            <Filters   selectVehicle={this.selectVehicle} />
                        </div>
                    </div>
                </div>
            </DashboardLayout>
        );
    }
}

export default ServicesPage;

And the filters that performs the filter search, its API left in the same services. It's beating everything right in the API, I just do not know how to pass the quotes back to the servicescontent listing.

/** 
 * @license
 * 2018 CarFix do Brasil.
 * All Rights Reserved.
 */


/* eslint-disable no-unused-expressions */


// import "../../../assets/js/plugins/forms/selects/select2.min.js";
import React, { Component } from "react";
import { UncontrolledCollapse } from "reactstrap";
import RangeFilter from "./sliderfilter";

// import { apiFetch } from "../../../helpers/api-fetch";
import  ServiceContent from '../services/servicescontent';



export default props => (

            <div className="card">
        <div className="card-header bg-transparent header-elements-inline">
            <span className="text-uppercase font-size-sm font-weight-semibold">
                <button
                    className="btn btn-block bg-transparent"
                    id="filter-toggler"
                    type="button"
                >
                    Filtros
                </button>
            </span>
        </div>

        <UncontrolledCollapse toggler="#filter-toggler">
            <div className="card-body">
                <form action="#">
                    <div className="form-group mt-3">

                    <div class="mt-3 form-group form-group-feedback form-group-feedback-left">
                    <label for="exampleFormControlSelect1">Distância (km)</label>
                        <input type="number" class="form-control" id="kmraio"  />
                    </div>

                        <div className="mt-3 form-group form-group-feedback form-group-feedback-left">
                            <input
                                type="search"
                                className="form-control"
                                placeholder="Pesquisar por cidade"
                                id="inputCidade"
                            />
                            <div className="form-control-feedback">
                                <i className="icon-search4 font-size-base text-muted" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="exampleFormControlSelect1">Veículos</label>
                            <select class="form-control"  id="selectCidade">
                                <option value='Mato Grosso'> Mato Grosso</option>
                                <option value='Pará'>Pará</option>
                                <option value='Paraíba'>Paraíba</option>
                                <option value='Pernambuco'>Pernambuco</option>
                                <option value='Piauí'>Piauí</option>
                                <option value='Paraná'>Paraná</option>
                                <option value='Rio de Janeiro'>Rio de Janeiro</option>
                                <option value='Rio Grande do Norte'>Rio Grande do Norte</option>
                                <option value='Rio Grande do Sul'>Rio Grande do Sul</option>
                                <option value='Rondônia'>Rondônia</option>
                                <option value='Roraima'>Roraima</option>
                                <option value='Santa Catarina'>Santa Catarina</option>
                                <option value='Sergipe'>Sergipe</option>
                                <option value='São Paulo'>São Paulo</option>
                                <option value='ocantins'>Tocantins</option>
                            </select>
                        </div>



                        {/* <div class="form-group">
                        <label for="exampleFormControlSelect1">Localidades</label>
                            <select class="form-control" id="exampleFormControlSelect1">
                                <option value='Zona Leste'> Zona Leste</option>
                                <option value='Zona Sul'>Zona Sul</option>
                                <option value='Centro'>Centro</option>
                                <option value='Zona Norte'>Zona Norte</option>
                                <option value='Zona Oeste'>Zona Oeste</option>
                            </select>
                        </div> */}


                    </div>

                    <div class="form-group">
                        <label for="exampleFormControlSelect1">Veículos</label>
                            <select class="form-control"  id="selectMarca">
                                <option value='1'> Fiat</option>
                                <option value='2'>Volkswagen</option>
                                <option value='3'>Chevrolet</option>
                                <option value='F4'>Ford</option>
                                <option value='5'>Audi</option>
                            </select>
                    </div>                    



                    <div class="form-group">
                        <label for="exampleFormControlSelect1">Prazo de Execução</label>
                            <select class="form-control"  id="selectExecucao" >
                                <option value='1'>O mais rápido possível</option>

                            </select>
                    </div>

                    <button  className="btn bg-blue btn-block" onClick={props.selectVehicle}>
                        Filtrar
                    </button>
                </form>
            </div>
        </UncontrolledCollapse>
    </div>




)
    
asked by anonymous 11.12.2018 / 13:57

0 answers