import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { actions } from 'redux-ghost';

import JsonTree from 'react-json-tree';

import './app.css';

const App = ({ actions, blog }) => {
  return (
    <div className="wrapper">
      <h1>Redux Ghost Blog</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
      <h2>Posts</h2>
      <button onClick={actions.getPosts}>Load Posts</button>
      <button onClick={() => actions.getPost(1)}>Load Post</button>

      <h2>Tags</h2>
      <button onClick={actions.getTags}>Load Tags</button>
      <button onClick={() => actions.getTag(1)}>Load Tag</button>

      <h2>Users</h2>
      <button onClick={actions.getUsers}>Load Users</button>
      <button onClick={() => actions.getUser(1)}>Load User</button>

      <h2>Reset</h2>
      <button onClick={actions.reset}>Reset</button>

      <JsonTree data={blog} theme="monokai" />
    </div>
  );
}

const mapStateToProps = ({ blog }) => ({
  blog,
});

const mapDispatchToProps = (dispatch) => ({
  actions: bindActionCreators(actions, dispatch)
});

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

@@ -587,32 +587,38 @@
 button onClick=%7B
+() =%3E 
 actions.getPosts
@@ -617,16 +617,18 @@
 getPosts
+()
 %7D%3ELoad P
@@ -685,26 +685,163 @@
 .getPost
-(1
+s(%7B fields: 'title, slug' %7D)%7D%3ELoad Posts (title & slug only)%3C/button%3E%0A      %3Cbutton onClick=%7B() =%3E actions.getPost(1, %7B include: 'author' %7D
 )%7D%3ELoad 
 Post%3C/bu
@@ -828,24 +828,31 @@
 r' %7D)%7D%3ELoad 
+Single 
 Post%3C/button
@@ -844,32 +844,149 @@
 le Post%3C/button%3E
+%0A      %3Cbutton onClick=%7B() =%3E actions.getPost(1, %7B include: 'author' %7D)%7D%3ELoad Single Post (with author data)%3C/button%3E
 %0A%0A      %3Ch2%3ETags
@@ -1006,32 +1006,38 @@
 button onClick=%7B
+() =%3E 
 actions.getTags%7D
@@ -1035,16 +1035,18 @@
 .getTags
+()
 %7D%3ELoad T
@@ -1111,16 +1111,23 @@
 )%7D%3ELoad 
+Single 
 Tag%3C/but
@@ -1168,32 +1168,38 @@
 button onClick=%7B
+() =%3E 
 actions.getUsers
@@ -1198,16 +1198,18 @@
 getUsers
+()
 %7D%3ELoad U
@@ -1272,24 +1272,31 @@
 er(1)%7D%3ELoad 
+Single 
 User%3C/button
@@ -1342,16 +1342,22 @@
 nClick=%7B
+() =%3E 
 actions.

Add and fix action buttons in example