Skip to content

Instantly share code, notes, and snippets.

@airgead73

airgead73/ApiSearch.js

Created January 20, 2018 10:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save airgead73/fef91ad4b2f22e8e7349cff7b079641a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save airgead73/fef91ad4b2f22e8e7349cff7b079641a to your computer and use it in GitHub Desktop.
Download ZIP
Api search component
Raw
ApiSearch.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import API from '../../providers/litlist_provider';
import ResultsPlace from './ApiResultsPlaces';
import ResultsProducts from './ApiResultsProducts';
import Container from '../../components/Containers/Container';
class ApiSearch extends Component {
constructor(props){
super(props);
this.state = {
places: [],
selectValue: "",
searchString: "",
resultsArray: [],
resultsMsg: "",
profile: []
};
this.handleChange = this.handleChange.bind(this);
this.handleFormSubmit = this.handleFormSubmit.bind(this);
this.handleFormClear = this.handleFormClear.bind(this);
this.renderSearch = this.renderSearch.bind(this);
this.getSelectedResult = this.getSelectedResult.bind(this);
this.getCategory = this.getCategory.bind(this);
}
handleFormSubmit(event) {
console.log(this.state.searchString);
console.log(this.state.selectValue);
event.preventDefault();
API
.getPlaces(this.state.searchString)
.then((res) => {
let returns = [];
for (let i= 0; i < res.data.results.length; ++i)
returns.push(res.data.results[i]);
this.setState({resultsArray: returns})
console.log(this.state.resultsArray);
});
}
handleChange(event) {
this.setState({
[event.target.id]: event.target.value
});
}
handleFormClear(event) {
console.log("Clear me!");
event.preventDefault();
this.setState(this.baseState);
}
getCategory(selectValue) {
this.setState({
categoryValue: selectValue
})
}
getResultsMsg(resultCount) {
if(resultCount === 0) {
this.setState({
resultsMsg: `No results for ${this.searchString}.`
});
} else if(resultCount=== 1) {
this.setState({
resultsMsg: `1 result for ${this.searchString}.`
});
} else {
this.setState({
resultsMsg: `${resultCount} for ${this.searchString}.`
})
}
}
renderSearch() {
let currentCategory = this.state.selectValue;
if(currentCategory === "places") {
console.log("You chose PLACES");
return this.state.resultsArray.map((place, i) => {
return (
<ResultsPlace
name={place.name}
rating={place.rating}
address={place.formatted_address}
key={i}
place_id={place.place_id}
photo={place.photos[0].photo_reference}
types={place.types}
getPlace={this.getSelectedResult}
/>
);
});
} else if(currentCategory === "products") {
console.log("You chose PRODUCTS");
return this.state.resultsArray.map((product, i) => {
return (
<ResultsProducts
brand={product.ItemAttributes[0].Brand[0]}
title={product.ItemAttributes[0].Title[0]}
price={product.ItemAttributes[0].ListPrice ? product.ItemAttributes[0].ListPrice[0].FormattedPrice[0] : "expen$ive"}
upc={product.ItemAttributes[0].UPC ? product.ItemAttributes[0].UPC : "xoxoxoxoxo"}
category={product.ItemAttributes[0].Binding ? product.ItemAttributes[0].Binding : "no Category"}
img={product.MediumImage ? product.MediumImage[0].URL : "http://i1.wp.com/williamlobb.com/wp-content/uploads/2017/10/amazon-frown.jpeg"}
purchase_link={product.ItemLinks[0].ItemLink ? product.ItemLinks[0].ItemLink[0].URL[0] : "http://www.amazon.com"}
key={i}
getProduct={this.getSelectedResult}
/>
);
})
}
}
getSelectedResult(result){
const { userProfile, getProfile } = this.props.auth;
if (!userProfile) {
getProfile((err, profile) => {
this.setState({ profile });
console.log("Profile ", profile);
// return item;
if (this.state.searchType === "places") {
API.savePlace({
place_id: result.place_id,
name: result.name,
image: result.photo,
address: result.address,
category: result.category,
user_id: profile.sub,
user_nickname: profile.nickname,
user_image: profile.picture
})
.then(res => console.log(res))
.catch(err => console.log(err));
//end savePlace
} else if (this.state.searchType === "products") {
API.saveProduct({
product_id: result.product.upc.toString(),
name: result.product.title,
image: result.product.img.toString(),
category: result.product.category.toString(),
brand: result.product.brand,
url: result.product.purchase_link,
price: result.product.price,
user_id: profile.sub,
user_nickname: profile.nickname,
user_image: profile.picture
})
.then(res => console.log(res))
.catch(err => console.log(err));
//end saveProduct
}//end if/else
});
} else {
this.setState({ profile: userProfile });
}
}
render() {
return (
<Container width="container">
<div className="jumbotron">
<h2 className="text-center">Browse Api's</h2>
<form className="form-inline mt-5" onSubmit={this.handleFormSubmit}>
<select className="form-control" id="chooseCategory" onChange={this.handleChange} onClick={this.getCategory} defaultValue={this.state.selectValue}>
<option value="Choose category">Choose category</option>
<option value="products">Products</option>
<option value="places">Places</option>
</select>
<input type="text" id="searchString" onChange={this.handleChange} className="form-control" placeholder="Search term" value={this.state.searchString} />
<div className="btn-group" role="group">
<button type="reset" className="btn btn-secondary">reset</button>
<button type="submit" className="btn btn-secondary">search</button>
</div>
</form>
</div>
<div className="row" id="apiResultsDisplay">
{this.renderSearch()}
</div>
</Container>
);
}
}
export default ApiSearch;
Raw
Result.js
import React, { Component } from 'react';
class ApiResultsProducts extends Component {
render() {
return (
<div className="col-4">
<div className="card mb-5">
<img className="card-img-top" src={this.props.img} alt="image" title="image"/>
<div className="card-body">
<h5 className="card-title">{this.props.brand}</h5>
<p className="card-text">{this.props.title}</p>
<p className="card-text">category: {this.props.category} price: {this.props.price}</p>
<p className="card-text">UPC: {this.props.upc}</p>
<a href={this.props.purchase_link} className="btn btn-primary" target="_blank">buy now!</a>
<a href="#" id={this.props.itemId} onClick={() => this.props.getProduct(this.props)} className="btn btn-primary">add to favorites</a>
</div>
</div>
</div>
);
}
};
export default ApiResultsProducts;
import React, { Component } from 'react';
class ApiResultsPlaces extends Component {
render() {
return (
<div className="col-4">
<div className="card mb-5">
<img className="card-img-top" src={"https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&key=AIzaSyCntC7u_9XoHw_F9SqoNVzjYGZAkPOvO2k&photoreference=" + this.props.photo} alt="Placeholder image" title="Placeholder image"/>
<div className="card-body">
<h5 className="card-title">{this.props.name}</h5>
<p className="card-text">rating: {this.props.rating}</p>
<p className="card-text">{this.props.address}</p>
<a href="#" id={this.props.itemId} onClick={() => this.props.getPlace(this.props)}className="btn btn-primary">add to favorites</a>
</div>
</div>
</div>
);
}
};
export default ApiResultsPlaces;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment