-
-
Save ghardin137/8c7f44cb7f6ff32378fab57b9eb0dad2 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import axios from 'axios'; | |
export function getData(_url){ | |
const _now = Date.now(); | |
return axios.get(`${_url}?v=${_now}`) | |
.catch(error => { | |
console.log(error); | |
}); | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from 'react'; | |
import ReactDOM from 'react-dom'; | |
import './ContestWinnerList.scss'; | |
export default class ContestWinnerList extends Component { | |
state = { | |
currentTop: 0; | |
} | |
timeout = null; | |
componentDidMount() { | |
this.timeout = setInterval(() => { | |
this.setState(prevState => ({ currentTop: prevState + .1}),() => { | |
if(this.state.currentTop >= 100) { | |
clearInterval(this.timeout); | |
this.timeout = null; | |
} | |
}); | |
}, 100); | |
} | |
componentWillUnmount() { | |
if(this.timeout) clearInterval(this.timeout); | |
} | |
render() { | |
console.log(this.props.data); | |
if (!this.props.data) { | |
// Render loading state ... | |
console.log(`NO DATA => ${this.props.data}`); | |
return <img className={'loader'} src={'https://www.funnfood.com/images/loader.gif'} />; | |
} | |
// Otherwise.... | |
console.log(`DATA FOUND, next line...`); | |
return ( | |
<div className="container"> | |
<div className="cta-message" style={{ transform: `translateY(-${this.state.currentTop}%)`}}> | |
<ul> | |
{this.props.data.Winners.map((item, index) => ( | |
<li key={index}> {/* I don't really recommend using index here, but i don't actually know your data. Use something unique to each item */} | |
<section class="img-sec"> | |
<img src={item.imgSrc} /> | |
</section> | |
<section class="info-sec"> | |
<section class="info-top">{item.prizeDescription}</section> | |
<section class="info-bottom">{item.winnerName}</section> | |
</section> | |
</li> | |
))} | |
</ul> | |
</div> | |
<div className="cta" /> | |
</div> | |
); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from 'react'; | |
import ReactDOM from 'react-dom'; | |
import Banner from './stateless/Banner/Banner'; | |
import ContestWinnerList from './stateless/ContestWinnerList/ContestWinnerList'; | |
import {getData} from '../interstitials/leanplum/daily-contest-winners/api'; | |
export default class DailyContestWinners extends Component { | |
constructor(props) { | |
super(props); | |
this.state = { | |
externalData: null, | |
loading: false, | |
}; | |
this.mounted = false; | |
} | |
componentDidMount() { | |
console.log("DailyContestWinners Component Mounted..."); | |
this.setState({ loading: true }); | |
this.mounted = true; | |
// Make API request, passing this as a param to setState with exteranlData loaded... | |
getData('winners.json').then(response => { | |
console.log(response.data); | |
console.log(this.mounted); | |
if(this.mounted) this.setState({externalData: response.data, loading: false}); | |
console.log(this.state.externalData); | |
}); | |
} | |
componentWillUnmount() { | |
this.mounted = false; | |
} | |
render() { | |
if(this.state.externalData !== null){ | |
console.log("Updated state with payload. Ready to pass and render."); | |
return( | |
<div className={"view-wrapper"}> | |
<Banner/> | |
{console.log(this.state.externalData.length)} | |
{ !this.state.loading && this.state.externalData && <ContestWinnerList data={this.state.externalData}/> } | |
</div> | |
); | |
} | |
} | |
} | |
if (document.getElementById('daily-contest-view-wrapper')) { | |
ReactDOM.render(<DailyContestWinners/>, document.getElementById('daily-contest-view-wrapper')); | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment