JournalContainer.js

// Dependencies
import React, { Component, PropTypes } from 'react';
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux';
import Waypoint from 'react-waypoint';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

// Functional
import * as postActionCreators from '../actions/postsActionCreators';
import { responseImage, responseImageAlt, responseImageTitle } from '../helpers/images/';

// UI Components
import Posts from '../components/Posts/';
import Post from '../components/Post/';
import ContainerFlex from '../components/ContainerFlex/';
import LoadingTransition from '../components/LoadingTransition/';

class JournalContainer extends Component {
    constructor(props) {
        super(props);
        this.actions = bindActionCreators(postActionCreators, this.props.dispatch);
    }

    componentWillMount = () => {
        const { fetchPosts } = this.actions;
        fetchPosts();
    }

    _loadMoreItems = () => {
        //        const { postActions, page } = this.props;
        //        return postActions.fetchPosts(page);
    }
    
    _renderLoadingScreen = () => <LoadingTransition key="something" />;

    _renderItems = () => {
        const { posts } = this.props;
        return posts.map((post) => {
            return <Post
                key={post.id}
                id={post.id}
                url={`/journal/${post.slug}`}
                title={post.title.rendered}
                bgAlt={responseImageAlt(post)}
                bgTitle={responseImageTitle(post)}
                bgSrc={responseImage(post, 'large')} />;
        });
    }

    _renderWaypoint = () => {
        const { isLoading } = this.props;
    
        if (!isLoading) {
            return (
                <Waypoint
                    onEnter={this._loadMoreItems}
                />
            );
        } else {
            return (
                <div>Loading more items…</div>
            );
        }
    }

    render = () => {
        const { isLoading } = this.props;
        return (
            <Posts>
                {/*this._renderItems()*/}
                <div className="infinite-scroll-example__waypoint">
                    {this._renderWaypoint()}
                </div>
            </Posts>
        );
    }
}

JournalContainer.propTypes = {
    posts: PropTypes.array.isRequired,
    isLoading: PropTypes.bool.isRequired,
    receivedAt: PropTypes.string,
    onEnter: PropTypes.func,
    onLeave: PropTypes.func
}

const mapStateToProps = (state) => {
    const { isLoading, posts, page } = state.posts || {
        isLoading: true,
        page: 1,
        posts: []
    };

    return {
        posts,
        page,
        isLoading
    }
};

export default connect(mapStateToProps)(JournalContainer);

postsActionCreators.js

// import axios from 'axios';
import WPAPI from 'wpapi';
import { getParameterByName } from '../helpers/';
import flatten from 'lodash.flatten';
import { REQUEST_POSTS, RECEIVE_POSTS, REQUEST_POSTS_FAILED } from './postsActions';
import { WP_API_ALL_POSTS, WP_API_CATEGORY } from '../api';

const wp = new WPAPI({
    endpoint: window.WP_API_Settings.root,
    nonce: window.WP_API_Settings.nonce
});

/**
 * Action / ActionCreator
 * Make a request for posts
 */
export const requestPosts = (bool) => {
    return {
        type: REQUEST_POSTS,
        isLoading: bool
    }
}

/**
 * Action / ActionCreator
 * When fetching posts is successfull
 */
export const receivePosts = (posts, bool) => {
    return {
        type: RECEIVE_POSTS,
        posts,
        isLoading: bool,
        receivedAt: Date.now()
    };
};


/**
 * Action / ActionCreator
 * When fetching posts fails
 */
export const fetchPostsFailed = (error) => {
    return {
        type: REQUEST_POSTS_FAILED,
        error: error
    };
};

/**
 * Fetch posts from the api
 */

const getPosts = (request) => {
    request = !request ? wp.posts() : request;
    return request.embed().then(response => {
        if (!response._paging || !response._paging.next) {
            return response;
        }
        // request the next page and return both responses as one collection
        return Promise.all([
            response,
            getPosts(response._paging.next),
        ]).then(responses => {
            return flatten(responses);
        }).catch(err => {
            console.log(err);
        });
    }).catch(err => err);
}


export const fetchPosts = (request) => {
    return (dispatch) => {
        dispatch(requestPosts(true))
        getPosts(request).then(posts => {
            dispatch(receivePosts(posts, false));
        }).catch(err => {
            dispatch(fetchPostsFailed(err));
        });
    }
};


//export const fetchPosts = (page) => {
//    return dispatch => {
//        dispatch(requestPosts(true))
//        return wp.posts().perPage(9).page(page).embed()
//        .then(response => {
//            const slicedData = data.slice(0, data.length);
//            const nextPage = getParameterByName('page', data._paging.next._options.endpoint);
//            dispatch(receivePosts(slicedData, nextPage, false));
//        })
//        .catch(err => dispatch(fetchPostsFailed(err)));
//    } 
    //};