Search integration (React Version) (#84)

* algolia integration skeleton

* Configuration Defaults

* Implemented partial entries with lazy loading of complete file

* Moved backend selection logic to actioncreators

* basic pagination for entries

* general search skeleton

* Basic search result listing

* Redo search for different search terms

* search results pagination

* Changing integration config & handling

* Changing integration config & handling

* new integration config model

src/containers/CollectionPage.js

@@ -9,6 +9,7 @@ import styles from './CollectionPage.css';
 import CollectionPageHOC from './editorialWorkflow/CollectionPageHOC';
 
 class DashboardPage extends React.Component {
+
   static propTypes = {
     collection: ImmutablePropTypes.map.isRequired,
     collections: ImmutablePropTypes.orderedMap.isRequired,
@@ -30,16 +31,21 @@ class DashboardPage extends React.Component {
     }
   }
 
+  handleLoadMore = (page) => {
+    const { collection, dispatch } = this.props;
+    dispatch(loadEntries(collection, page));
+  };
+
   render() {
-    const { collections, collection, entries } = this.props;
+    const { collections, collection, page, entries } = this.props;
     if (collections == null) {
       return <h1>No collections defined in your config.yml</h1>;
     }
-
-
     return <div className={styles.root}>
       {entries ?
-        <EntryListing collection={collection} entries={entries}/>
+        <EntryListing collections={collection} entries={entries} page={page} onPaginate={this.handleLoadMore}>
+          Listing {collection.get('name')}
+        </EntryListing>
         :
         <Loader active>{['Loading Entries', 'Caching Entries', 'This might take several minutes']}</Loader>
       }
@@ -58,9 +64,11 @@ function mapStateToProps(state, ownProps) {
   const { collections } = state;
   const { name, slug } = ownProps.params;
   const collection = name ? collections.get(name) : collections.first();
+  const page = state.entries.getIn(['pages', collection.get('name'), 'page']);
+
   const entries = selectEntries(state, collection.get('name'));
 
-  return { slug, collection, collections, entries };
+  return { slug, collection, collections, page, entries };
 }
 
 export default connect(mapStateToProps)(DashboardPage);

src/containers/EntryPage.js

@@ -33,18 +33,18 @@ class EntryPage extends React.Component {
   };
 
   componentDidMount() {
-    if (!this.props.newEntry) {
-      this.props.loadEntry(this.props.collection, this.props.slug);
+    const { entry, collection, slug } = this.props;
 
-      this.createDraft(this.props.entry);
-    } else {
+    if (this.props.newEntry) {
       this.props.createEmptyDraft(this.props.collection);
+    } else {
+      this.props.loadEntry(entry, collection, slug);
+      this.createDraft(entry);
     }
   }
 
   componentWillReceiveProps(nextProps) {
     if (this.props.entry === nextProps.entry) return;
-
     if (nextProps.entry && !nextProps.entry.get('isFetching')) {
       this.createDraft(nextProps.entry);
     } else if (nextProps.newEntry) {
@@ -86,6 +86,13 @@ class EntryPage extends React.Component {
   }
 }
 
+
+/*
+ * Instead of checking the publish mode everywhere to dispatch & render the additional editorial workflow stuff,
+ * We delegate it to a Higher Order Component
+ */
+EntryPage = EntryPageHOC(EntryPage);
+
 function mapStateToProps(state, ownProps) {
   const { collections, entryDraft } = state;
   const collection = collections.get(ownProps.params.name);
@@ -96,12 +103,6 @@ function mapStateToProps(state, ownProps) {
   return { collection, collections, newEntry, entryDraft, boundGetMedia, slug, entry };
 }
 
-/*
- * Instead of checking the publish mode everywhere to dispatch & render the additional editorial workflow stuff,
- * We delegate it to a Higher Order Component
- */
-EntryPage = EntryPageHOC(EntryPage);
-
 export default connect(
   mapStateToProps,
   {

src/containers/SearchPage.js

@@ -1,12 +1,64 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
+import { selectSearchedEntries } from '../reducers';
+import { searchEntries } from '../actions/entries';
+import { Loader } from '../components/UI';
+import EntryListing from '../components/EntryListing';
+import styles from './CollectionPage.css';
 
 class SearchPage extends React.Component {
+
+  static propTypes = {
+    isFetching: PropTypes.bool,
+    searchEntries: PropTypes.func.isRequired,
+    searchTerm: PropTypes.string.isRequired,
+    entries: ImmutablePropTypes.list
+  };
+
+  componentDidMount() {
+    const { searchTerm, searchEntries } = this.props;
+    searchEntries(searchTerm);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.searchTerm === nextProps.searchTerm) return;
+    const { searchEntries } = this.props;
+    searchEntries(nextProps.searchTerm);
+  }
+
+  handleLoadMore = (page) => {
+    const { searchTerm, searchEntries } = this.props;
+    searchEntries(searchTerm, page);
+  };
+
   render() {
-    return <div>
-      <h1>Search</h1>
+    const { collections, searchTerm, entries, isFetching, page } = this.props;
+    return <div className={styles.root}>
+      {(isFetching === true || !entries) ?
+        <Loader active>{['Loading Entries', 'Caching Entries', 'This might take several minutes']}</Loader>
+        :
+        <EntryListing collections={collections} entries={entries} page={page} onPaginate={this.handleLoadMore}>
+          Results for “{searchTerm}”
+        </EntryListing>
+      }
     </div>;
   }
 }
 
-export default connect()(SearchPage);
+
+function mapStateToProps(state, ownProps) {
+  const isFetching = state.entries.getIn(['search', 'isFetching']);
+  const page = state.entries.getIn(['search', 'page']);
+  const entries = selectSearchedEntries(state);
+  const collections = state.collections.toIndexedSeq();
+  const searchTerm = ownProps.params && ownProps.params.searchTerm;
+
+  return { isFetching, page, collections, entries, searchTerm };
+}
+
+
+export default connect(
+  mapStateToProps,
+  { searchEntries }
+)(SearchPage);