Skip to content

Instantly share code, notes, and snippets.

@ghardin137
Forked from vartanian/ContestWinnerList.js
Last active June 25, 2019 18:24
Show Gist options
  • Save ghardin137/8c7f44cb7f6ff32378fab57b9eb0dad2 to your computer and use it in GitHub Desktop.
Save ghardin137/8c7f44cb7f6ff32378fab57b9eb0dad2 to your computer and use it in GitHub Desktop.
import axios from 'axios';
export function getData(_url){
const _now = Date.now();
return axios.get(`${_url}?v=${_now}`)
.catch(error => {
console.log(error);
});
};
import React from 'react';
import ReactDOM from 'react-dom';
import './Banner.scss';
const Banner = () => {
return (
<header className={"contest-banner"}>
<img src="/assets/top-header-our-daily-winners.png"/>
</header>
);
};
export default Banner;
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>
);
}
}
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