Load, display and edit entries from test repo and github

src/containers/CollectionPage.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Link } from 'react-router';
 import { connect } from 'react-redux';
 import { loadEntries } from '../actions/entries';
+import { selectEntries } from '../reducers/entries';
 import EntryListing from '../components/EntryListing';
 
 class DashboardPage extends React.Component {
@@ -21,14 +22,12 @@ class DashboardPage extends React.Component {
   }
 
   render() {
-    const { collections, collection } = this.props;
+    const { collections, collection, entries } = this.props;
 
     if (collections == null) {
       return <h1>No collections defined in your config.yml</h1>;
     }
 
-    const entries = collection.get('entries');
-
     return <div>
       <h1>Dashboard</h1>
       <div>
@@ -39,7 +38,7 @@ class DashboardPage extends React.Component {
         )).toArray()}
       </div>
       <div>
-        {entries ? <EntryListing collection={collection} entries={entries}/> : 'No entries...'}
+        {entries ? <EntryListing collection={collection} entries={entries}/> : 'Loading entries...'}
       </div>
     </div>;
   }
@@ -49,8 +48,9 @@ function mapStateToProps(state, ownProps) {
   const { collections } = state;
   const { name, slug } = ownProps.params;
   const collection = name ? collections.get(name) : collections.first();
+  const entries = selectEntries(state, collection.get('name'));
 
-  return {slug, collection, collections};
+  return {slug, collection, collections, entries};
 }
 
 export default connect(mapStateToProps)(DashboardPage);

src/containers/EntryPage.js

@@ -1,21 +1,38 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { Map } from 'immutable';
+import { loadEntry } from '../actions/entries';
+import { selectEntry } from '../reducers/entries';
 import EntryEditor from '../components/EntryEditor';
 
 class EntryPage extends React.Component {
-  render() {
-    const { collection, entry } = this.props;
+  constructor(props) {
+    super(props);
+    this.props.dispatch(loadEntry(props.collection, props.slug));
+  }
 
-    return <EntryEditor entry={entry || new Map()} collection={collection}/>;
+  render() {
+    const { entry, collection } = this.props;
+    if (entry == null || entry.get('isFetching')) {
+      return <div>Loading...</div>;
+    }
+
+    return (
+      <EntryEditor
+          entry={entry || new Map()}
+          collection={collection}
+      />
+    );
   }
 }
 
 function mapStateToProps(state, ownProps) {
-  const { collections, media } = state;
+  const { collections } = state;
   const collection = collections.get(ownProps.params.name);
+  const slug = ownProps.params.slug;
+  const entry = selectEntry(state, collection.get('name'), slug);
 
-  return {media, collection, collections};
+  return {collection, collections, slug, entry};
 }
 
 export default connect(mapStateToProps)(EntryPage);