api.js

import axios from 'axios';


let _now            = Date.now();

export function getData(_url){

    return axios.get(`${_url}?v=${_now}`)
        .catch(error => {
            console.log(error);
        });
};

banner.js

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

};

ReactDOM.render(
    <Banner />,
    document.getElementById('daily-contest-view-wrapper')
);

export default Banner;

ContestWinnerList.js

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './ContestWinnerList.scss';

export default class ContestWinnerList extends Component {

    constructor(props) {

        console.log(props.data);
        super(props);

        this.scrollPos      = 0;
        this.totalItems     = 0;
        this.el             = document.getElementById('action');
        this.docEl          = document.getElementsByTagName('HTML');
        this.scrollInit     = false;
        this.globalID       = '';


        this.state          =   {

            externalData    : props.data

        };

        // this.getPayload = this.getPayload.bind(this);

    }

    getPayload(){
        // console.log("ABOUT TO LOOP");

        this.items             = this.state.externalData.Winners;

        // console.log(this.items);

        this.totalItems        = this.items.length;

        // console.log("ABOUT TO LOOP");

        for(let i = 0; i < this.totalItems; i++){

            // console.log(this.items[i]);

            let listNode       = document.createElement("LI");

            // console.log(this.list);

            listNode.innerHTML = `<section class="img-sec"><img src="${this.items[i].imgSrc}"></section><section class="info-sec"><section class="info-top">${this.items[i].prizeDescription}</section><section class="info-bottom">${this.items[i].winnerName}</section></section>`;
            this.list           = document.querySelector('.cta-message ul');
            // console.log(this.list)

            this.list.appendChild(listNode);
            // console.log("CHILD APPENDED")
        }

        let x = this;

        window.requestAnimationFrame(this.scroller.bind(this));
    }
    scroller() {

        // Start Scrolling by adding one to last known scroll position
        this.scrollPos                 = this.scrollPos+1;

        // Next we add that updated scroll position to the scrollTop JS method
        // This should move the view...
        this.el.scrollTop              = this.scrollPos;

        this.globalID                  = requestAnimationFrame(this.scroller.bind(this));

        this.listen();
    }

    listen(){
        // console.log("LISTENER CALLED");
        // Now we listen for a scroll
        // if it is greater than 1px form the top we know we have movement
        if (!this.scrollInit) {

            // console.log(`SCROLL POSITION SHOULD BE ZERO / BUT IS === > ${this.scrollPos} && SCROLL TOP => ${this.el.scrollTop}`);
            // Change the overflow styling

            let h = document.getElementsByTagName('html')[0];
            let b = document.body;

            if(this.el.scrollTop  === 0){
                // window.scrollTop = 0;
                this.scrollInit  = true;
                b.style.overflow = 'visible';
                h.style.overflow = 'visible';
            }else if(this.el.scrollTop > 0){
                this.scrollInit  = true;
                b.style.overflow = 'scroll';
                h.style.overflow = 'scroll';
            }

        }
    }
    // componentDidMount() {
    //
    //     console.log("ContestWinnersList Component Mounted...");
    //
    //     this.getPayload();
    //
    // }

    // componentWillUnmount() {
    //
    //     if (this.asyncRequest) {
    //
    //         cancel();
    //
    //     }
    // }

    render() {

        console.log(this.state.externalData)

        if (this.state.externalData === null) {

            // Render loading state ...
            console.log(`NO DATA => ${this.state.externalData}`);

            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">
                    <ul>
                    </ul>
                </div>

                <div className="cta">

                </div>

            </div>
        );

    }

};


if (document.getElementById('daily-contest-view-wrapper')) {

    ReactDOM.render(<ContestWinnerList />, document.getElementById('daily-contest-view-wrapper'));

}

DailyContestWinners.js (root)

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: [],
            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.length > 0 && <ContestWinnerList data={this.state.externalData}/> }
                </div>
            );
        }

    }
}

if (document.getElementById('daily-contest-view-wrapper')) {

    ReactDOM.render(<DailyContestWinners/>, document.getElementById('daily-contest-view-wrapper'));

}