Merge pull request #3 from netlify/eslint_compliance

Eslint compliance (mainly proptype validations)

.eslintrc

@@ -57,6 +57,7 @@ rules:
   no-mixed-spaces-and-tabs: 2
   no-multiple-empty-lines: [2, {max: 2}]
   no-trailing-spaces: 2
+  object-curly-spacing: [1, "always"]
   quotes: [2, "single", "avoid-escape"]
   semi: 2
   space-after-keywords: 2
@@ -84,6 +85,7 @@ rules:
   no-unused-vars: [2, {"args": "none"}]
 
 
+  react/prop-types: 1
   react/forbid-prop-types: 1
   react/jsx-boolean-value: 1
   react/jsx-closing-bracket-location: 1
@@ -109,6 +111,7 @@ rules:
   react/no-string-refs: 1
   react/no-unknown-property: 1
   react/prefer-es6-class: 1
+  react/prefer-stateless-function: 1
   react/react-in-jsx-scope: 1
   react/require-extension: 1
   react/self-closing-comp: 1

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",
@@ -38,8 +38,8 @@
     "mocha": "^2.4.5",
     "moment": "^2.11.2",
     "normalizr": "^2.0.0",
-    "react": "^0.14.7",
-    "react-dom": "^0.14.7",
+    "react": "^15.1.0",
+    "react-dom": "^15.1.0",
     "react-immutable-proptypes": "^1.6.0",
     "react-lazy-load": "^3.0.3",
     "react-pure-render": "^1.0.2",
@@ -53,7 +53,7 @@
     "webpack": "^1.12.13",
     "webpack-dev-server": "^1.14.1",
     "webpack-postcss-tools": "^1.1.1",
-    "whatwg-fetch": "^0.11.0"
+    "whatwg-fetch": "^1.0.0"
   },
   "dependencies": {
     "commonmark": "^0.24.0",

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,11 +1,9 @@
-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;
+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>
@@ -27,7 +25,6 @@ export default class EntryEditor extends React.Component {
     <button onClick={onPersist}>Save</button>
   </div>;
 }
-}
 
 const styles = {
   container: {
@@ -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,11 +1,9 @@
 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;
+export default function EntryListing({ collection, entries }) {
   const name = collection.get('name');
-
   return <div>
     <h2>Listing entries!</h2>
     {entries.map((entry) => {
@@ -16,4 +14,8 @@ export default class EntryListing extends React.Component {
     })}
   </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 {
-  constructor(props) {
-    super(props);
+export default function ImagePreview({ value, getMedia }) {
+  return <span>
+    {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,4 +1,4 @@
-import React from 'react';
+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';
@@ -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';
-
-export default class StringPreview extends React.Component {
-  render() {
-    const { value } = this.props;
+import React, { PropTypes } from 'react';
 
+export default function StringPreview({ value }) {
   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 {
-  render() {
-    const { field } = this.props;
-
+export default function UnknownControl({ field }) {
   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 {
-  render() {
-    const { field } = this.props;
+export default function UnknownPreview({ field }) {
+  return <div>No preview for widget '{field.get('widget')}'.</div>;
+}
 
-    return <div>No preview for widget '{field.widget}'.</div>;
-  }
-}
+UnknownPreview.propTypes = {
+  field: ImmutablePropTypes.map,
+};

src/containers/CollectionPage.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Link } from 'react-router';
 import { connect } from 'react-redux';
 import { loadEntries } from '../actions/entries';
@@ -23,7 +24,6 @@ class DashboardPage extends React.Component {
 
   render() {
     const { collections, collection, entries } = this.props;
-
     if (collections == null) {
       return <h1>No collections defined in your config.yml</h1>;
     }
@@ -44,6 +44,13 @@ class DashboardPage extends React.Component {
   }
 }
 
+DashboardPage.propTypes = {
+  collection: ImmutablePropTypes.map.isRequired,
+  collections: ImmutablePropTypes.orderedMap.isRequired,
+  dispatch: PropTypes.func.isRequired,
+  entries: ImmutablePropTypes.list,
+};
+
 function mapStateToProps(state, ownProps) {
   const { collections } = state;
   const { name, slug } = ownProps.params;

src/containers/EntryPage.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 import {
   loadEntry,
@@ -39,6 +40,7 @@ class EntryPage extends React.Component {
   }
 
   render() {
+
     const {
       entry, entryDraft, boundGetMedia, collection, changeDraft, addMedia, removeMedia
     } = this.props;
@@ -60,6 +62,21 @@ class EntryPage extends React.Component {
   }
 }
 
+EntryPage.propTypes = {
+  addMedia: PropTypes.func.isRequired,
+  boundGetMedia: PropTypes.func.isRequired,
+  changeDraft: PropTypes.func.isRequired,
+  collection: ImmutablePropTypes.map.isRequired,
+  createDraft: PropTypes.func.isRequired,
+  discardDraft: PropTypes.func.isRequired,
+  entry: ImmutablePropTypes.map.isRequired,
+  entryDraft: ImmutablePropTypes.map.isRequired,
+  loadEntry: PropTypes.func.isRequired,
+  persist: PropTypes.func.isRequired,
+  removeMedia: PropTypes.func.isRequired,
+  slug: PropTypes.string.isRequired,
+};
+
 function mapStateToProps(state, ownProps) {
   const { collections, entryDraft } = state;
   const collection = collections.get(ownProps.params.name);