From dd656e3b38f5a571679b0a844efdf339afa6a67c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A1ssio=20Zen?= <cassiozen@gmail.com>
Date: Thu, 16 Jun 2016 19:20:36 -0300
Subject: [PATCH] eslint compliance on presentational components

---
 .eslintrc                                 |  2 +-
 package.json                              |  2 +-
 src/components/ControlPane.js             | 16 +++++--
 src/components/EntryEditor.js             | 57 +++++++++++++----------
 src/components/EntryListing.js            | 32 +++++++------
 src/components/PreviewPane.js             | 13 ++++--
 src/components/Widgets/ImageControl.js    |  9 +++-
 src/components/Widgets/ImagePreview.js    | 20 ++++----
 src/components/Widgets/MarkdownControl.js | 17 ++++---
 src/components/Widgets/MarkdownPreview.js |  6 ++-
 src/components/Widgets/StringControl.js   |  7 ++-
 src/components/Widgets/StringPreview.js   | 14 +++---
 src/components/Widgets/UnknownControl.js  | 13 +++---
 src/components/Widgets/UnknownPreview.js  | 13 +++---
 14 files changed, 134 insertions(+), 87 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index fcae22e8..73de372a 100644
--- a/.eslintrc
+++ b/.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
diff --git a/package.json b/package.json
index a4620af6..e47077fd 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/ControlPane.js b/src/components/ControlPane.js
index 18d4fae5..a86ecaf5 100644
--- a/src/components/ControlPane.js
+++ b/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,
+};
diff --git a/src/components/EntryEditor.js b/src/components/EntryEditor.js
index 5c344364..1ab0f003 100644
--- a/src/components/EntryEditor.js
+++ b/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 {
-
-  render() {
-    const { collection, entry, getMedia, onChange, onAddMedia, onRemoveMedia, onPersist } = this.props;
-    return <div>
-      <h1>Entry in {collection.get('label')}</h1>
-      <h2>{entry && entry.get('title')}</h2>
-      <div className="cms-container" style={styles.container}>
-        <div className="cms-control-pane" style={styles.pane}>
-          <ControlPane
-              collection={collection}
-              entry={entry}
-              getMedia={getMedia}
-              onChange={onChange}
-              onAddMedia={onAddMedia}
-              onRemoveMedia={onRemoveMedia}
-          />
-        </div>
-        <div className="cms-preview-pane" style={styles.pane}>
-          <PreviewPane collection={collection} entry={entry} getMedia={getMedia} />
-        </div>
+export default function EntryEditor({ collection, entry, getMedia, onChange, onAddMedia, onRemoveMedia, onPersist }) {
+  return <div>
+    <h1>Entry in {collection.get('label')}</h1>
+    <h2>{entry && entry.get('title')}</h2>
+    <div className="cms-container" style={styles.container}>
+      <div className="cms-control-pane" style={styles.pane}>
+        <ControlPane
+            collection={collection}
+            entry={entry}
+            getMedia={getMedia}
+            onChange={onChange}
+            onAddMedia={onAddMedia}
+            onRemoveMedia={onRemoveMedia}
+        />
       </div>
-      <button onClick={onPersist}>Save</button>
-    </div>;
-  }
+      <div className="cms-preview-pane" style={styles.pane}>
+        <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,
+};
diff --git a/src/components/EntryListing.js b/src/components/EntryListing.js
index ab1ffd40..311af02a 100644
--- a/src/components/EntryListing.js
+++ b/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 {
-  render() {
-    const { collection, entries } = this.props;
-    const name = collection.get('name');
-
-    return <div>
-      <h2>Listing entries!</h2>
-      {entries.map((entry) => {
-        const path = `/collections/${name}/entries/${entry.get('slug')}`;
-        return <Link key={entry.get('slug')} to={path}>
-          <h3>{entry.getIn(['data', 'title'])}</h3>
-        </Link>;
-      })}
-    </div>;
-  }
+export default function EntryListing({ collection, entries }) {
+  const name = collection.get('name');
+  return <div>
+    <h2>Listing entries!</h2>
+    {entries.map((entry) => {
+      const path = `/collections/${name}/entries/${entry.get('slug')}`;
+      return <Link key={entry.get('slug')} to={path}>
+        <h3>{entry.getIn(['data', 'title'])}</h3>
+      </Link>;
+    })}
+  </div>;
 }
+
+EntryListing.propTypes = {
+  collection: ImmutablePropTypes.map.isRequired,
+  entries: ImmutablePropTypes.list,
+};
diff --git a/src/components/PreviewPane.js b/src/components/PreviewPane.js
index bce60c92..2964ae93 100644
--- a/src/components/PreviewPane.js
+++ b/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,
+};
diff --git a/src/components/Widgets/ImageControl.js b/src/components/Widgets/ImageControl.js
index dbf01c67..bd9757d7 100644
--- a/src/components/Widgets/ImageControl.js
+++ b/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,
+};
diff --git a/src/components/Widgets/ImagePreview.js b/src/components/Widgets/ImagePreview.js
index 8e0a857e..1f45f84c 100644
--- a/src/components/Widgets/ImagePreview.js
+++ b/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 {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const { value, getMedia } = this.props;
-    return value ? <img src={getMedia(value)}/> : null;
-  }
+export default function ImagePreview({ value, getMedia }) {
+  return <span>
+    {value ? <img src={getMedia(value)}/> : null}
+  </span>;
 }
+
+ImagePreview.propTypes = {
+  getMedia: PropTypes.func.isRequired,
+  value: PropTypes.node,
+};
diff --git a/src/components/Widgets/MarkdownControl.js b/src/components/Widgets/MarkdownControl.js
index 0475a4e7..20210b9f 100644
--- a/src/components/Widgets/MarkdownControl.js
+++ b/src/components/Widgets/MarkdownControl.js
@@ -1,7 +1,7 @@
-import React from 'react';
-import {Editor, EditorState, RichUtils} from 'draft-js';
-import {stateToMarkdown} from 'draft-js-export-markdown';
-import {stateFromMarkdown} from 'draft-js-import-markdown';
+import React, { PropTypes } from 'react';
+import { Editor, EditorState, RichUtils } from 'draft-js';
+import { stateToMarkdown } from 'draft-js-export-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,
+};
diff --git a/src/components/Widgets/MarkdownPreview.js b/src/components/Widgets/MarkdownPreview.js
index 72f6c420..37fe084a 100644
--- a/src/components/Widgets/MarkdownPreview.js
+++ b/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,
+};
diff --git a/src/components/Widgets/StringControl.js b/src/components/Widgets/StringControl.js
index fb4d1b3a..b159a6e9 100644
--- a/src/components/Widgets/StringControl.js
+++ b/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,
+};
diff --git a/src/components/Widgets/StringPreview.js b/src/components/Widgets/StringPreview.js
index 95804209..972e068c 100644
--- a/src/components/Widgets/StringPreview.js
+++ b/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 {
-  render() {
-    const { value } = this.props;
-
-    return <span>{value}</span>;
-  }
+export default function StringPreview({ value }) {
+  return <span>{value}</span>;
 }
+
+StringPreview.propTypes = {
+  value: PropTypes.node,
+};
diff --git a/src/components/Widgets/UnknownControl.js b/src/components/Widgets/UnknownControl.js
index 4599523d..2787f34a 100644
--- a/src/components/Widgets/UnknownControl.js
+++ b/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 {
-  render() {
-    const { field } = this.props;
-
-    return <div>No control for widget '{field.get('widget')}'.</div>;
-  }
+export default function UnknownControl({ field }) {
+  return <div>No control for widget '{field.get('widget')}'.</div>;
 }
+
+UnknownControl.propTypes = {
+  field: ImmutablePropTypes.map,
+};
diff --git a/src/components/Widgets/UnknownPreview.js b/src/components/Widgets/UnknownPreview.js
index d3204959..10b08e26 100644
--- a/src/components/Widgets/UnknownPreview.js
+++ b/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 {
-  render() {
-    const { field } = this.props;
-
-    return <div>No preview for widget '{field.widget}'.</div>;
-  }
+export default function UnknownPreview({ field }) {
+  return <div>No preview for widget '{field.get('widget')}'.</div>;
 }
+
+UnknownPreview.propTypes = {
+  field: ImmutablePropTypes.map,
+};