eslint compliance on presentational components

.eslintrc

@@ -57,7 +57,7 @@ rules:
   no-mixed-spaces-and-tabs: 2
   no-multiple-empty-lines: [2, {max: 2}]
   no-trailing-spaces: 2
-  object-curly-spacing: [1, "never"]
+  object-curly-spacing: [1, "always"]
   quotes: [2, "single", "avoid-escape"]
   semi: 2
   space-after-keywords: 2

package.json

@@ -28,7 +28,7 @@
     "babel-runtime": "^6.5.0",
     "eslint": "^1.10.3",
     "eslint-loader": "^1.2.1",
-    "eslint-plugin-react": "^3.16.1",
+    "eslint-plugin-react": "^5.1.1",
     "exports-loader": "^0.6.3",
     "express": "^4.13.4",
     "file-loader": "^0.8.5",

src/components/ControlPane.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
 import Widgets from './Widgets';
 
 export default class ControlPane extends React.Component {
@@ -6,7 +7,6 @@ export default class ControlPane extends React.Component {
     const { entry, getMedia, onChange, onAddMedia, onRemoveMedia } = this.props;
     const widget = Widgets[field.get('widget')] || Widgets._unknown;
     return React.createElement(widget.Control, {
-      key: field.get('name'),
       field: field,
       value: entry.getIn(['data', field.get('name')]),
       onChange: (value) => onChange(entry.setIn(['data', field.get('name')], value)),
@@ -19,9 +19,17 @@ export default class ControlPane extends React.Component {
   render() {
     const { collection } = this.props;
     if (!collection) { return null; }
-
     return <div>
-      {collection.get('fields').map((field) => <div key={field.get('names ')}>{this.controlFor(field)}</div>)}
+      {collection.get('fields').map((field) => <div key={field.get('name')}>{this.controlFor(field)}</div>)}
     </div>;
   }
 }
+
+ControlPane.propTypes = {
+  collection: ImmutablePropTypes.map.isRequired,
+  entry: ImmutablePropTypes.map.isRequired,
+  getMedia: PropTypes.func.isRequired,
+  onAddMedia: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onRemoveMedia: PropTypes.func.isRequired,
+};

src/components/EntryEditor.js

@@ -1,32 +1,29 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
 import ControlPane from './ControlPane';
 import PreviewPane from './PreviewPane';
 
-export default class EntryEditor extends React.Component {
+export default function EntryEditor({ collection, entry, getMedia, onChange, onAddMedia, onRemoveMedia, onPersist }) {
-
+  return <div>
-  render() {
+    <h1>Entry in {collection.get('label')}</h1>
-    const { collection, entry, getMedia, onChange, onAddMedia, onRemoveMedia, onPersist } = this.props;
+    <h2>{entry && entry.get('title')}</h2>
-    return <div>
+    <div className="cms-container" style={styles.container}>
-      <h1>Entry in {collection.get('label')}</h1>
+      <div className="cms-control-pane" style={styles.pane}>
-      <h2>{entry && entry.get('title')}</h2>
+        <ControlPane
-      <div className="cms-container" style={styles.container}>
+            collection={collection}
-        <div className="cms-control-pane" style={styles.pane}>
+            entry={entry}
-          <ControlPane
+            getMedia={getMedia}
-              collection={collection}
+            onChange={onChange}
-              entry={entry}
+            onAddMedia={onAddMedia}
-              getMedia={getMedia}
+            onRemoveMedia={onRemoveMedia}
-              onChange={onChange}
+        />
-              onAddMedia={onAddMedia}
-              onRemoveMedia={onRemoveMedia}
-          />
-        </div>
-        <div className="cms-preview-pane" style={styles.pane}>
-          <PreviewPane collection={collection} entry={entry} getMedia={getMedia} />
-        </div>
       </div>
-      <button onClick={onPersist}>Save</button>
+      <div className="cms-preview-pane" style={styles.pane}>
-    </div>;
+        <PreviewPane collection={collection} entry={entry} getMedia={getMedia} />
-  }
+      </div>
+    </div>
+    <button onClick={onPersist}>Save</button>
+  </div>;
 }
 
 const styles = {
@@ -37,3 +34,13 @@ const styles = {
     width: '50%'
   }
 };
+
+EntryEditor.propTypes = {
+  collection: ImmutablePropTypes.map.isRequired,
+  entry: ImmutablePropTypes.map.isRequired,
+  getMedia: PropTypes.func.isRequired,
+  onAddMedia: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onPersist: PropTypes.func.isRequired,
+  onRemoveMedia: PropTypes.func.isRequired,
+};

src/components/EntryListing.js

@@ -1,19 +1,21 @@
 import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Link } from 'react-router';
 
-export default class EntryListing extends React.Component {
+export default function EntryListing({ collection, entries }) {
-  render() {
+  const name = collection.get('name');
-    const { collection, entries } = this.props;
+  return <div>
-    const name = collection.get('name');
+    <h2>Listing entries!</h2>
-
+    {entries.map((entry) => {
-    return <div>
+      const path = `/collections/${name}/entries/${entry.get('slug')}`;
-      <h2>Listing entries!</h2>
+      return <Link key={entry.get('slug')} to={path}>
-      {entries.map((entry) => {
+        <h3>{entry.getIn(['data', 'title'])}</h3>
-        const path = `/collections/${name}/entries/${entry.get('slug')}`;
+      </Link>;
-        return <Link key={entry.get('slug')} to={path}>
+    })}
-          <h3>{entry.getIn(['data', 'title'])}</h3>
+  </div>;
-        </Link>;
-      })}
-    </div>;
-  }
 }
+
+EntryListing.propTypes = {
+  collection: ImmutablePropTypes.map.isRequired,
+  entries: ImmutablePropTypes.list,
+};

src/components/PreviewPane.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
 import Widgets from './Widgets';
 
 export default class PreviewPane extends React.Component {
@@ -6,7 +7,6 @@ export default class PreviewPane extends React.Component {
     const { entry, getMedia } = this.props;
     const widget = Widgets[field.get('widget')] || Widgets._unknown;
     return React.createElement(widget.Preview, {
-      key: field.get('name'),
       field: field,
       value: entry.getIn(['data', field.get('name')]),
       getMedia: getMedia,
@@ -17,8 +17,15 @@ export default class PreviewPane extends React.Component {
     const { collection } = this.props;
     if (!collection) { return null; }
 
+
     return <div>
-      {collection.get('fields').map((field) => <div>{this.previewFor(field)}</div>)}
+      {collection.get('fields').map((field) => <div key={field.get('name')}>{this.previewFor(field)}</div>)}
     </div>;
   }
 }
+
+PreviewPane.propTypes = {
+  collection: ImmutablePropTypes.map.isRequired,
+  entry: ImmutablePropTypes.map.isRequired,
+  getMedia: PropTypes.func.isRequired,
+};

src/components/Widgets/ImageControl.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import { truncateMiddle } from '../../lib/textHelper';
 import MediaProxy from '../../valueObjects/MediaProxy';
 
@@ -98,3 +98,10 @@ const styles = {
     display: 'none'
   }
 };
+
+ImageControl.propTypes = {
+  onAddMedia: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onRemoveMedia: PropTypes.func.isRequired,
+  value: PropTypes.node,
+};

src/components/Widgets/ImagePreview.js

@@ -1,12 +1,12 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 
-export default class ImagePreview extends React.Component {
+export default function ImagePreview({ value, getMedia }) {
-  constructor(props) {
+  return <span>
-    super(props);
+    {value ? <img src={getMedia(value)}/> : null}
-  }
+  </span>;
-
-  render() {
-    const { value, getMedia } = this.props;
-    return value ? <img src={getMedia(value)}/> : null;
-  }
 }
+
+ImagePreview.propTypes = {
+  getMedia: PropTypes.func.isRequired,
+  value: PropTypes.node,
+};

src/components/Widgets/MarkdownControl.js

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
-import {Editor, EditorState, RichUtils} from 'draft-js';
+import { Editor, EditorState, RichUtils } from 'draft-js';
-import {stateToMarkdown} from 'draft-js-export-markdown';
+import { stateToMarkdown } from 'draft-js-export-markdown';
-import {stateFromMarkdown} from 'draft-js-import-markdown';
+import { stateFromMarkdown } from 'draft-js-import-markdown';
 
 export default class MarkdownControl extends React.Component {
   constructor(props) {
@@ -15,7 +15,7 @@ export default class MarkdownControl extends React.Component {
 
   handleChange(editorState) {
     const content = editorState.getCurrentContent();
-    this.setState({editorState});
+    this.setState({ editorState });
     this.props.onChange(stateToMarkdown(content));
   }
 
@@ -29,7 +29,7 @@ export default class MarkdownControl extends React.Component {
   }
 
   render() {
-    const {editorState} = this.state;
+    const { editorState } = this.state;
     return (
       <Editor
           editorState={editorState}
@@ -38,3 +38,8 @@ export default class MarkdownControl extends React.Component {
       />);
   }
 }
+
+MarkdownControl.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.node,
+};

src/components/Widgets/MarkdownPreview.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import CommonMark from 'commonmark';
 import ReactRenderer from 'commonmark-react-renderer';
 
@@ -14,3 +14,7 @@ export default class MarkdownPreview extends React.Component {
     return React.createElement.apply(React, ['div', {}].concat(renderer.render(ast)));
   }
 }
+
+MarkdownPreview.propTypes = {
+  value: PropTypes.node,
+};

src/components/Widgets/StringControl.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 
 export default class StringControl extends React.Component {
   constructor(props) {
@@ -14,3 +14,8 @@ export default class StringControl extends React.Component {
     return <input value={this.props.value} onChange={this.handleChange}/>;
   }
 }
+
+StringControl.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.node,
+};

src/components/Widgets/StringPreview.js

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 
-export default class StringPreview extends React.Component {
+export default function StringPreview({ value }) {
-  render() {
+  return <span>{value}</span>;
-    const { value } = this.props;
-
-    return <span>{value}</span>;
-  }
 }
+
+StringPreview.propTypes = {
+  value: PropTypes.node,
+};

src/components/Widgets/UnknownControl.js

@@ -1,9 +1,10 @@
 import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
 
-export default class UnknownControl extends React.Component {
+export default function UnknownControl({ field }) {
-  render() {
+  return <div>No control for widget '{field.get('widget')}'.</div>;
-    const { field } = this.props;
-
-    return <div>No control for widget '{field.get('widget')}'.</div>;
-  }
 }
+
+UnknownControl.propTypes = {
+  field: ImmutablePropTypes.map,
+};

src/components/Widgets/UnknownPreview.js

@@ -1,9 +1,10 @@
 import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
 
-export default class UnknownPreview extends React.Component {
+export default function UnknownPreview({ field }) {
-  render() {
+  return <div>No preview for widget '{field.get('widget')}'.</div>;
-    const { field } = this.props;
-
-    return <div>No preview for widget '{field.widget}'.</div>;
-  }
 }
+
+UnknownPreview.propTypes = {
+  field: ImmutablePropTypes.map,
+};