import React from 'react';
import { connect } from 'react-redux';
import { createBook, fetchBooks } from '../actions/crudActions';

class BookComponent extends React.Component {
  componentDidMount() {
    this.props.fetchBooks();
  }

  render() {
    return (
        <div>
          {React.cloneElement(this.props.children, {
            books: this.props.books,
            onAddBook: this.props.onAddBook
          })}
        </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    books: state.bookReducers.books
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    onAddBook: (data) => {
      dispatch(createBook(data));
    },

    fetchBooks: () => {
      dispatch(fetchBooks());
    }
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(BookComponent);

@@ -90,16 +90,36 @@
 tchBooks
+, fetchAssignedBooks
  %7D from 
@@ -144,16 +144,16 @@
 tions';%0A
-
 %0Aclass B
@@ -206,11 +206,12 @@
 nent
-Did
+Will
 Moun
@@ -245,16 +245,53 @@
 ooks();%0A
+    this.props.fetchAssignedBooks();%0A
   %7D%0A%0A  r
@@ -417,16 +417,69 @@
 .books,%0A
+            assignedBooks: this.props.assignedBooks,%0A
         
@@ -640,16 +640,69 @@
 rs.books
+,%0A    assignedBooks: state.bookReducers.assignedBooks
 %0A  %7D;%0A%7D;
@@ -846,24 +846,24 @@
 ks: () =%3E %7B%0A
-
       dispat
@@ -876,24 +876,102 @@
 chBooks());%0A
+    %7D,%0A%0A    fetchAssignedBooks: () =%3E %7B%0A      dispatch(fetchAssignedBooks());%0A
     %7D%0A  %7D;%0A%7D

load assigned books higher up in the component hierarchy