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>
)