gistfile1.txt

var React = require('react');
var ReactDOM = require('react-dom');
var ReactRouter = require('react-router');
var useRouterHistory = ReactRouter.useRouterHistory;
var History = require('history');
var createHashHistory = History.createHashHistory;
var histories = useRouterHistory(createHashHistory)({ queryKey: false });
var Link = ReactRouter.Link;

module.exports = React.createClass({
    getInitialState: function(){
        this.haikuElementsNodeList = document.getElementsByClassName('haiku');
        this.viewportHeight = document.documentElement.clientHeight;
        this.userIdleTimer = null;
        return({
            message: null
        });
    },
    componentDidMount: function(){
        window.addEventListener('scroll', this.checkIfScrollingHasStopped);
    },
    componentWillUnmount: function(){
        window.removeEventListener('scroll', this.checkIfScrollingHasStopped);
    },
    checkIfInMiddle: function(element, index){
        var pos = element.getBoundingClientRect().top;
        if( pos > this.viewportHeight/7 && pos < this.viewportHeight/3 ){
            element.classList.add('active-haiku');
            return false;
        } else {
            element.classList.remove('active-haiku');
        }
    },
    checkIfScrollingHasStopped: function(){
        if(this.userIdleTimer !== null){
            clearTimeout(this.userIdleTimer);
        }
        this.userIdleTimer = setTimeout(function(){
            console.log('timer');
        }, 5000);
    },
    handleScroll: function(){
        var haikuElements = Array.prototype.slice.call(this.haikuElementsNodeList);
        haikuElements.forEach(this.checkIfInMiddle);
    },
    getDate: function(){
        return this.props.haiku.date;
    },
    render: function(){
        var haiku = this.props.haiku.haiku.split("/").map(function(haikuString, key){
            return (
                <span key={key}>
                    {haikuString}
                    <br/>
                </span>
            )
        });
        return (
            <div className="ph3 ph5-ns pv4 haiku" id={`haiku${this.props.haiku.id}`}>
                <p className="f3 f2-ns lh-title">
                    <Link to={`/haiku/${this.props.haiku.id}`} className="link dark-gray hover-gray">
                        {haiku}
                    </Link>
                </p>
                <time>{this.getDate()}</time>
            </div>
        );
    }
});