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
This commit is contained in:
Cássio Souza
2016-10-10 15:34:21 -03:00
committed by GitHub
parent 45d810a25f
commit 2815a86e0c
25 changed files with 493 additions and 111 deletions

View File

@ -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,

View File

@ -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,
};

View File

@ -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 = {

View File

@ -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

View File

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