Skip to content

Instantly share code, notes, and snippets.

@saif71
Created February 25, 2020 09:55
Show Gist options
  • Save saif71/82cd1962419d53bcc6262ee36e24a62e to your computer and use it in GitHub Desktop.
Save saif71/82cd1962419d53bcc6262ee36e24a62e to your computer and use it in GitHub Desktop.
Reading JSON response from an API [objects] [Axios] [React]
import React, { Component } from 'react';
import styled from 'styled-components'
import VendorCard from './VendorCard';
import TopHeader from '../TopHeader/TopHeader';
import back_btn from '../../img/back_btn.svg';
import axios from 'axios';
import { toaster, Pane, Spinner } from 'evergreen-ui'
const SinglePromoCodeContainer = styled.div`
height:100%;
box-shadow: 0px 4px 26px rgba(0, 0, 0, 0.24);
border-radius: 10px;
overflow:hidden;
padding: 25px;
border-left: 5px solid #27AE60
`
const SingleCodeTitle = styled.div`
font-family: Kanit;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 24px;
text-transform: uppercase;
color:#959393;
`
class SinglePromoCode extends Component {
constructor(props) {
super(props);
this.goBack = this.goBack.bind(this);
this.state = {
'promo': [],
'dataLoaded': false
}
}
goBack() {
this.props.history.goBack();
}
componentDidMount() {
axios({
method: 'get',
url: 'YOUR_API_ENDPOINTS_HERE'+this.props.match.params.vendor, //remove this.props.match.params.vendor if not using react router
})
.then(res => {
//this.setState({ promo: res.data, })
const vendors = res.data;
this.setState({ promo: vendors,
dataLoaded: true
});
})
.catch(function (error) {
toaster.danger('Something went wrong',
{
id: 'loadIndicator',
description: '' + error
})
})
axios({
method: 'get',
url: 'YOUR_API_ENDPOINTS_HERE',
})
.then(res => {
//this.setState({ promo: res.data, })
const vendorsInfo = res.data;
this.setState({
current_vendor_name: vendorsInfo.rows[0].vendorname,
current_vendor_image: vendorsInfo.rows[0].vendorimage,
current_vendor_tagline: vendorsInfo.rows[0].vendortagline
});
})
}
render() {
const data = this.state.promo.rows;
if (data == null) return null;
let promoview = (
<div className="row">
{Object.keys(data).map(key => (
<div className="col-12 mb-4" key={data[key].code}>
<SinglePromoCodeContainer>
<SingleCodeTitle>Code</SingleCodeTitle>
{data[key].code}
<hr />
<SingleCodeTitle>Description</SingleCodeTitle>
{data[key].description}
</SinglePromoCodeContainer>
</div>
))}
</div>
)
return (
<>
<TopHeader backaction={this.goBack} pageTitle={this.state.current_vendor_name} icon={back_btn} />
<div className="container mt-4">
<VendorCard
current_vendor_name={this.state.current_vendor_name}
current_vendor_image={this.state.current_vendor_image}
current_vendor_tagline={this.state.current_vendor_tagline}
/>
{!this.state.dataLoaded ? <Pane display="flex" alignItems="center" justifyContent="center" height={400}>
<Spinner />
</Pane> : null}
{promoview}
</div>
</>
);
}
}
export default SinglePromoCode;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment