Bug 1150273 - Use eslint for the react files for Loop. r=dmose

browser/components/loop/.eslintrc

@@ -66,6 +66,28 @@
     "space-infix-ops": 0,
     "space-return-throw-case": 0,
     "strict": 0,
-    "yoda": 0
+    "yoda": 0,
+    // eslint-plugin-react rules. These are documented at
+    // <https://github.com/yannickcr/eslint-plugin-react#list-of-supported-rules>
+    "react/jsx-quotes": [2, "double", "avoid-escape"],
+    "react/jsx-no-undef": 2,
+    // Need to fix instances where this is failing.
+    "react/jsx-sort-props": 0,
+    "react/jsx-uses-vars": 2,
+    // Need to fix the couple of instances which don't
+    // currently pass this rule.
+    "react/no-did-mount-set-state": 0,
+    "react/no-did-update-set-state": 2,
+    "react/no-unknown-property": 2,
+    // Need to fix instances where this is currently failing
+    "react/prop-types": 0,
+    "react/self-closing-comp": 2,
+    "react/wrap-multilines": 2,
+    // Not worth it: React is defined globally
+    "react/jsx-uses-react": 0,
+    "react/react-in-jsx-scope": 0,
+    // These ones we don't want to ever enable
+    "react/display-name": 0,
+    "react/no-multi-comp": 0
   }
 }

browser/components/loop/README.txt

@@ -54,7 +54,7 @@ If you install eslint and the react plugin globally:
 
 You can also run it by hand in the browser/components/loop directory:
 
-  eslint .
+  eslint -ext .js -ext .jsx .
 
 Front-End Unit Tests
 ====================

browser/components/loop/content/js/contacts.js

@@ -538,8 +538,10 @@ loop.contacts = (function(_, mozL10n) {
       let cx = React.addons.classSet;
 
       let viewForItem = item => {
-        return React.createElement(ContactDetail, {key: item._guid, contact: item, 
-                              handleContactAction: this.handleContactAction})
+        return (
+          React.createElement(ContactDetail, {key: item._guid, contact: item, 
+                         handleContactAction: this.handleContactAction})
+        );
       };
 
       let shownContacts = _.groupBy(this.contacts, function(contact) {

browser/components/loop/content/js/contacts.jsx

@@ -538,8 +538,10 @@ loop.contacts = (function(_, mozL10n) {
       let cx = React.addons.classSet;
 
       let viewForItem = item => {
-        return <ContactDetail key={item._guid} contact={item}
-                              handleContactAction={this.handleContactAction} />
+        return (
+          <ContactDetail key={item._guid} contact={item}
+                         handleContactAction={this.handleContactAction} />
+        );
       };
 
       let shownContacts = _.groupBy(this.contacts, function(contact) {

browser/components/loop/content/js/panel.js

@@ -259,11 +259,13 @@ loop.panel = (function(_, mozL10n) {
             )
           ),
         });
-        return React.createElement("div", {id: "powered-by-wrapper"}, 
-          this.renderPartnerLogo(), 
-          React.createElement("p", {className: "terms-service", 
-             dangerouslySetInnerHTML: {__html: tosHTML}})
-         );
+        return (
+          React.createElement("div", {id: "powered-by-wrapper"}, 
+            this.renderPartnerLogo(), 
+            React.createElement("p", {className: "terms-service", 
+               dangerouslySetInnerHTML: {__html: tosHTML}})
+           )
+        );
       } else {
         return React.createElement("div", null);
       }
@@ -660,10 +662,12 @@ loop.panel = (function(_, mozL10n) {
           React.createElement("h1", null, this._getListHeading()), 
           React.createElement("div", {className: "room-list"}, 
             this.state.rooms.map(function(room, i) {
-              return React.createElement(RoomEntry, {
-                key: room.roomToken, 
-                dispatcher: this.props.dispatcher, 
-                room: room}
+              return (
+                React.createElement(RoomEntry, {
+                  key: room.roomToken, 
+                  dispatcher: this.props.dispatcher, 
+                  room: room}
+                )
               );
             }, this)
           ), 

browser/components/loop/content/js/panel.jsx

@@ -259,11 +259,13 @@ loop.panel = (function(_, mozL10n) {
             </a>
           ),
         });
-        return <div id="powered-by-wrapper">
-          {this.renderPartnerLogo()}
-          <p className="terms-service"
-             dangerouslySetInnerHTML={{__html: tosHTML}}></p>
-         </div>;
+        return (
+          <div id="powered-by-wrapper">
+            {this.renderPartnerLogo()}
+            <p className="terms-service"
+               dangerouslySetInnerHTML={{__html: tosHTML}}></p>
+           </div>
+        );
       } else {
         return <div />;
       }
@@ -660,11 +662,13 @@ loop.panel = (function(_, mozL10n) {
           <h1>{this._getListHeading()}</h1>
           <div className="room-list">{
             this.state.rooms.map(function(room, i) {
-              return <RoomEntry
-                key={room.roomToken}
-                dispatcher={this.props.dispatcher}
-                room={room}
-              />;
+              return (
+                <RoomEntry
+                  key={room.roomToken}
+                  dispatcher={this.props.dispatcher}
+                  room={room}
+                />
+              );
             }, this)
           }</div>
           <div>

browser/components/loop/content/js/roomViews.js

@@ -176,9 +176,10 @@ loop.roomViews = (function(mozL10n) {
 
     _renderInvitationOverlay: function() {
       if (this.state.roomState !== ROOM_STATES.HAS_PARTICIPANTS) {
-        return React.createElement(DesktopRoomInvitationView, {
-          roomStore: this.props.roomStore, 
-          dispatcher: this.props.dispatcher}
+        return (
+          React.createElement(DesktopRoomInvitationView, {
+            roomStore: this.props.roomStore, 
+            dispatcher: this.props.dispatcher})
         );
       }
       return null;
@@ -248,13 +249,15 @@ loop.roomViews = (function(mozL10n) {
         case ROOM_STATES.FULL: {
           // Note: While rooms are set to hold a maximum of 2 participants, the
           //       FULL case should never happen on desktop.
-          return React.createElement(loop.conversationViews.GenericFailureView, {
-            cancelCall: this.closeWindow}
+          return (
+            React.createElement(loop.conversationViews.GenericFailureView, {
+              cancelCall: this.closeWindow})
           );
         }
         case ROOM_STATES.ENDED: {
-          return React.createElement(sharedViews.FeedbackView, {
-            onAfterFeedbackReceived: this.closeWindow}
+          return (
+            React.createElement(sharedViews.FeedbackView, {
+              onAfterFeedbackReceived: this.closeWindow})
           );
         }
         default: {

browser/components/loop/content/js/roomViews.jsx

@@ -176,10 +176,11 @@ loop.roomViews = (function(mozL10n) {
 
     _renderInvitationOverlay: function() {
       if (this.state.roomState !== ROOM_STATES.HAS_PARTICIPANTS) {
-        return <DesktopRoomInvitationView
-          roomStore={this.props.roomStore}
-          dispatcher={this.props.dispatcher}
-        />;
+        return (
+          <DesktopRoomInvitationView
+            roomStore={this.props.roomStore}
+            dispatcher={this.props.dispatcher} />
+        );
       }
       return null;
     },
@@ -248,14 +249,16 @@ loop.roomViews = (function(mozL10n) {
         case ROOM_STATES.FULL: {
           // Note: While rooms are set to hold a maximum of 2 participants, the
           //       FULL case should never happen on desktop.
-          return <loop.conversationViews.GenericFailureView
-            cancelCall={this.closeWindow}
-          />;
+          return (
+            <loop.conversationViews.GenericFailureView
+              cancelCall={this.closeWindow} />
+          );
         }
         case ROOM_STATES.ENDED: {
-          return <sharedViews.FeedbackView
-            onAfterFeedbackReceived={this.closeWindow}
-          />;
+          return (
+            <sharedViews.FeedbackView
+              onAfterFeedbackReceived={this.closeWindow} />
+          );
         }
         default: {
           return (

browser/components/loop/run-all-loop-tests.sh

@@ -15,7 +15,10 @@ LOOPDIR=browser/components/loop
 ESLINT=standalone/node_modules/.bin/eslint
 if [ -x "${LOOPDIR}/${ESLINT}" ]; then
   echo 'running eslint; see http://eslint.org/docs/rules/ for error info'
-  (cd ${LOOPDIR} && ./${ESLINT} .)
+  (cd ${LOOPDIR} && ./${ESLINT} --ext .js --ext .jsx .)
+  if [ $? != 0 ]; then
+    exit 1;
+  fi
   echo 'eslint run finished.'
 fi
 

browser/components/loop/standalone/content/js/webapp.js

@@ -610,10 +610,11 @@ loop.webapp = (function($, _, OT, mozL10n) {
   var StartConversationView = React.createClass({displayName: "StartConversationView",
     render: function() {
       document.title = mozL10n.get("clientShortname2");
-      return React.createElement(InitiateConversationView, React.__spread({}, 
-        this.props, 
-        {title: mozL10n.get("initiate_call_button_label2"), 
-        callButtonLabel: mozL10n.get("initiate_audio_video_call_button2")})
+      return (
+        React.createElement(InitiateConversationView, React.__spread({}, 
+          this.props, 
+          {title: mozL10n.get("initiate_call_button_label2"), 
+          callButtonLabel: mozL10n.get("initiate_audio_video_call_button2")}))
       );
     }
   });
@@ -629,10 +630,12 @@ loop.webapp = (function($, _, OT, mozL10n) {
       document.title = mozL10n.get("standalone_title_with_status",
                                    {clientShortname: mozL10n.get("clientShortname2"),
                                     currentStatus: mozL10n.get("status_error")});
-      return React.createElement(InitiateConversationView, React.__spread({}, 
-        this.props, 
-        {title: mozL10n.get("call_failed_title"), 
-        callButtonLabel: mozL10n.get("retry_call_button")}));
+      return (
+        React.createElement(InitiateConversationView, React.__spread({}, 
+          this.props, 
+          {title: mozL10n.get("call_failed_title"), 
+          callButtonLabel: mozL10n.get("retry_call_button")}))
+      );
     }
   });
 

browser/components/loop/standalone/content/js/webapp.jsx

@@ -610,11 +610,12 @@ loop.webapp = (function($, _, OT, mozL10n) {
   var StartConversationView = React.createClass({
     render: function() {
       document.title = mozL10n.get("clientShortname2");
-      return <InitiateConversationView
-        {...this.props}
-        title={mozL10n.get("initiate_call_button_label2")}
-        callButtonLabel={mozL10n.get("initiate_audio_video_call_button2")}
-      />;
+      return (
+        <InitiateConversationView
+          {...this.props}
+          title={mozL10n.get("initiate_call_button_label2")}
+          callButtonLabel={mozL10n.get("initiate_audio_video_call_button2")}/>
+      );
     }
   });
 
@@ -629,10 +630,12 @@ loop.webapp = (function($, _, OT, mozL10n) {
       document.title = mozL10n.get("standalone_title_with_status",
                                    {clientShortname: mozL10n.get("clientShortname2"),
                                     currentStatus: mozL10n.get("status_error")});
-      return <InitiateConversationView
-        {...this.props}
-        title={mozL10n.get("call_failed_title")}
-        callButtonLabel={mozL10n.get("retry_call_button")} />;
+      return (
+        <InitiateConversationView
+          {...this.props}
+          title={mozL10n.get("call_failed_title")}
+          callButtonLabel={mozL10n.get("retry_call_button")} />
+      );
     }
   });