jmeas/redux-resource

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { getStatus, getResources } from 'redux-resource';

class BooksList extends Component {
  render() {
    const { state } = this.props;
    const searchStatus = getStatus(
      state,
      'books.requests.readUserBooks.status',
      true
    );
    const latestStatus = getStatus(
      state,
      'books.requests.readLatestBooks.status',
      true
    );
    const userBooks = getResources(state.books, 'userBooks');
    const latestBooks = getResources(state.books, 'latestBooks');

    return (
      <div style={{ display: 'flex' }}>
        <div style={{ width: '350px', marginRight: '50px' }}>
          <h2>Your Books</h2>
          {searchStatus.pending && 'Loading your books...'}
          {searchStatus.succeeded && (
            <div>
              {userBooks.map(book => (
                <div key={book.id}>
                  <h3>{book.title}</h3>
                  <div>
                    {book.author} - {book.releaseYear}
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
        <div style={{ width: '350px' }}>
          <h2>Recently Released</h2>
          {latestStatus.pending && 'Loading recently released books...'}
          {latestStatus.succeeded && (
            <div>
              {latestBooks.map(book => (
                <div key={book.id}>
                  <h3>{book.title}</h3>
                  <div>
                    {book.author} - {book.releaseYear}
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    );
  }

  componentDidMount() {
    const { getUserBooks, getLatestBooks } = this.props;
    getUserBooks();
    getLatestBooks();
  }
}

BooksList.propTypes = {
  getUserBooks: PropTypes.func.isRequired,
  getLatestBooks: PropTypes.func.isRequired,
  state: PropTypes.shape({
    books: PropTypes.shape({
      resources: PropTypes.object.isRequired,
      meta: PropTypes.object.isRequired,
      requests: PropTypes.object.isRequired,
      lists: PropTypes.object.isRequired
    })
  }).isRequired
};

export default BooksList;