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/components/ControlPane.js

@@ -6,11 +6,13 @@ export default class ControlPane extends React.Component {
   controlFor(field) {
     const { entry, getMedia, onChange, onAddMedia, onRemoveMedia } = this.props;
     const widget = resolveWidget(field.get('widget'));
+    const value = entry.getIn(['data', field.get('name')]);
+    if (!value) return null;
     return <div className="cms-control">
       <label>{field.get('label')}</label>
       {React.createElement(widget.control, {
         field: field,
-        value: entry.getIn(['data', field.get('name')]),
+        value: value,
         onChange: (value) => onChange(entry.setIn(['data', field.get('name')], value)),
         onAddMedia: onAddMedia,
         onRemoveMedia: onRemoveMedia,

src/components/EntryListing.js

@@ -1,6 +1,8 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import { Map } from 'immutable';
 import Bricks from 'bricks.js';
+import Waypoint from 'react-waypoint';
 import history from '../routing/history';
 import Cards from './Cards';
 import _ from 'lodash';
@@ -23,6 +25,7 @@ export default class EntryListing extends React.Component {
     };
 
     this.updateBricks = _.throttle(this.updateBricks.bind(this), 30);
+    this.handleLoadMore = this.handleLoadMore.bind(this);
   }
 
   componentDidMount() {
@@ -58,7 +61,6 @@ export default class EntryListing extends React.Component {
   }
 
   cardFor(collection, entry, link) {
-    //const { entry, getMedia, onChange, onAddMedia, onRemoveMedia } = this.props;
     const cartType = collection.getIn(['card', 'type']) || 'alltype';
     const card = Cards[cartType] || Cards._unknown;
     return React.createElement(card, {
@@ -72,23 +74,47 @@ export default class EntryListing extends React.Component {
     });
   }
 
-  render() {
-    const { collection, entries } = this.props;
-    const name = collection.get('name');
+  handleLoadMore() {
+    this.props.onPaginate(this.props.page + 1);
+  }
 
+  renderCards = () => {
+    const { collections, entries } = this.props;
+    if (Map.isMap(collections)) {
+      const collectionName = collections.get('name');
+      return entries.map((entry) => {
+        const path = `/collections/${collectionName}/entries/${entry.get('slug')}`;
+        return this.cardFor(collections, entry, path);
+      });
+    } else {
+      return entries.map((entry) => {
+        const collection = collections.filter(collection => collection.get('name') === entry.get('collection')).first();
+        const path = `/collections/${collection.get('name')}/entries/${entry.get('slug')}`;
+        return this.cardFor(collection, entry, path);
+      });
+    }
+  };
+
+  render() {
+    const { children } = this.props;
+    const cards = this.renderCards();
     return <div>
-      <h1>Listing {name}</h1>
+      <h1>{children}</h1>
       <div ref={(c) => this._entries = c}>
-        {entries.map((entry) => {
-          const path = `/collections/${name}/entries/${entry.get('slug')}`;
-          return this.cardFor(collection, entry, path);
-        })}
+        {cards}
+        <Waypoint onEnter={this.handleLoadMore} />
       </div>
     </div>;
   }
 }
 
 EntryListing.propTypes = {
-  collection: ImmutablePropTypes.map.isRequired,
+  children: PropTypes.node.isRequired,
+  collections: PropTypes.oneOfType([
+    ImmutablePropTypes.map,
+    ImmutablePropTypes.iterable
+  ]).isRequired,
   entries: ImmutablePropTypes.list,
+  onPaginate: PropTypes.func.isRequired,
+  page: PropTypes.number,
 };

src/components/Widgets/MarkdownControlElements/RawEditor/index.js

@@ -2,8 +2,6 @@ import React, { PropTypes } from 'react';
 import { Editor, Plain, Mark } from 'slate';
 import Prism from 'prismjs';
 import marks from './prismMarkdown';
-import styles from './index.css';
-
 
 Prism.languages.markdown = Prism.languages.extend('markup', {});
 Prism.languages.insertBefore('markdown', 'prolog', marks);
@@ -75,7 +73,6 @@ const SCHEMA = {
 class RawEditor extends React.Component {
   constructor(props) {
     super(props);
-
     const content = props.value ? Plain.deserialize(props.value) : Plain.deserialize('');
 
     this.state = {

src/components/Widgets/MarkdownControlElements/VisualEditor/index.js

@@ -8,7 +8,7 @@ import { DEFAULT_NODE, SCHEMA } from './schema';
 import { getNodes, getSyntaxes, getPlugins } from '../../richText';
 import StylesMenu from './StylesMenu';
 import BlockTypesMenu from './BlockTypesMenu';
-import styles from './index.css';
+//import styles from './index.css';
 
 /**
  * Slate Render Configuration

src/components/Widgets/MarkdownControlElements/plugins.js

@@ -17,7 +17,7 @@ const EditorComponent = Record({
 });
 
 
-class Plugin extends Component {
+class Plugin extends Component { // eslint-disable-line
   static propTypes = {
     children: PropTypes.element.isRequired
   };