React eslint fixes

.eslintrc

@@ -22,6 +22,7 @@
             2, 
             { "skipBlankLines": true }
         ],
+        "max-len": [1, 180, 2],
         "no-unexpected-multiline": 2,
         "block-scoped-var": 2,
         "consistent-return": 2,
@@ -50,7 +51,23 @@
         "no-var": 2,
         "object-shorthand": 2,
         "prefer-const": 2,
-        "prefer-template": 2
+        "prefer-template": 2,
+        "react/jsx-closing-bracket-location": 2,
+        "react/jsx-curly-spacing": 2,
+        "react/jsx-indent-props": [2, 2],
+        "react/jsx-key": 2,
+        "react/jsx-no-duplicate-props": 2,
+        "react/jsx-no-undef": 2,
+        "react/jsx-pascal-case": 2,
+        "react/jsx-uses-react": 2,
+        "react/jsx-uses-vars": 2,
+        "react/no-did-mount-set-state": 2,
+        "react/no-did-update-set-state": 2,
+        "react/no-direct-mutation-state": 2,
+        "react/no-unknown-property": 2,
+        "react/prefer-es6-class": 2,
+        "react/require-extension": [2, { "extensions": [".js", ".jsx"] }],
+        "react/self-closing-comp": 2
     },
     "env": {
         "es6": true,

client/scripts/HttpUtils.js

@@ -18,7 +18,7 @@
 
 import defaults from 'superagent-defaults';
 import cookies from 'cookies-js';
-import {UNAUTHORIZED} from './HTTPStatusCodes';
+import {UNAUTHORIZED} from '../../HTTPStatusCodes';
 
 export function processResponse(callback) {
   return (err, res) => {

client/scripts/components/Admin/DetailView/AdminDeclarationsSummary.jsx

@@ -149,7 +149,8 @@ export class AdminDeclarationsSummary extends React.Component {
 
         return (
           <div key={`proj${project.id}`}
-            style={index === uniqueProjects.length - 1 ? styles.lastrelationship : styles.relationship}>
+            style={index === uniqueProjects.length - 1 ? styles.lastrelationship : styles.relationship}
+          >
             <div style={styles.name}>{project.name}</div>
             <div style={styles.field}>
               <label style={styles.label}>Project Type:</label>

client/scripts/components/Admin/DetailView/DetailView.jsx

@@ -132,7 +132,8 @@ export class DetailView extends React.Component {
       sidePanel = (
         <AdditionalReviewPanel
           managementPlan={managementPlan}
-          readonly={readOnly}/>
+          readonly={readOnly}
+        />
       );
     }
     else if (this.state.applicationState.commentSummaryShowing) {

client/scripts/components/Admin/DetailView/DisclosureDetail.jsx

@@ -207,11 +207,15 @@ export class DisclosureDetail extends React.Component {
           </span>
           <span style={{display: 'inline-block'}}>
             <ApprovalConfirmation id={this.props.disclosure.id} style={styles.confirmation} />
-            <RejectionConfirmation id={this.props.disclosure.id} canReject={piComments.length > 0 } style={styles.rejection} />
+            <RejectionConfirmation id={this.props.disclosure.id} canReject={piComments.length > 0} style={styles.rejection} />
             <ActionButtons
               style={styles.actionButtons}
               showAttachments={this.props.disclosure.files.length > 0}
-              readonly={this.props.disclosure.statusCd === COIConstants.DISCLOSURE_STATUS.UP_TO_DATE || this.props.disclosure.statusCd === COIConstants.DISCLOSURE_STATUS.UPDATES_REQUIRED}/>
+              readonly={
+                this.props.disclosure.statusCd === COIConstants.DISCLOSURE_STATUS.UP_TO_DATE ||
+                this.props.disclosure.statusCd === COIConstants.DISCLOSURE_STATUS.UPDATES_REQUIRED
+              }
+            />
           </span>
         </div>
       </div>

client/scripts/components/Admin/DetailView/EntitySummary.jsx

@@ -183,7 +183,8 @@ export default class EntitySummary extends React.Component {
               color: window.colorBlindModeOn ? 'black' : '#0095A0',
               borderBottom: `1px dotted ${window.colorBlindModeOn ? 'black' : '#0095A0'}`
             }}
-            href={`/api/coi/files/${encodeURIComponent(file.id)}`}>
+            href={`/api/coi/files/${encodeURIComponent(file.id)}`}
+          >
               {file.name}
           </a>
         </div>

client/scripts/components/Config/Declarations/DeclarationType.jsx

@@ -113,7 +113,15 @@ export default class DeclarationType extends React.Component {
     if (this.typeIsBeingEdited(type)) {
       jsx = (
         <span>
-          <input ref="typeName" type="text" style={styles.textbox} defaultValue={type.description} value={this.getNewValue(type)} onKeyUp={this.lookForEnter} onChange={this.nameChanged} />
+          <input
+            ref="typeName"
+            type="text"
+            style={styles.textbox}
+            defaultValue={type.description}
+            value={this.getNewValue(type)}
+            onKeyUp={this.lookForEnter}
+            onChange={this.nameChanged}
+          />
           <DoneLink style={styles.editLink} onClick={this.doneEditing} />
         </span>
       );

client/scripts/components/Config/General/NewNotification.jsx

@@ -68,7 +68,8 @@ export default class NewNotifications extends React.Component {
           onChange={this.setReminderText}
           style={styles.expirationMessage}
           placeholder="Enter the reminder text here"
-          value={this.props.reminderText}>
+          value={this.props.reminderText}
+        >
         </textarea>
       </div>
     );

client/scripts/components/Config/General/Notification.jsx

@@ -102,7 +102,8 @@ export default class Notification extends React.Component {
           ref="reminderText"
           style={styles.reminderTextbox}
           placeholder="Enter the reminder text here"
-          defaultValue={this.props.reminderText}>
+          defaultValue={this.props.reminderText}
+        >
         </textarea>
       );
 

client/scripts/components/Config/General/NotificationDetails.jsx

@@ -125,13 +125,15 @@ export default class NotificationDetails extends React.Component {
     let notifications;
     if (this.props.notifications && this.props.notifications.length > 0) {
       notifications = this.props.notifications.map((notification, index) => {
-        return <Notification
-                  key={index}
-                  id={notification.id}
-                  warningValue={notification.warningValue}
-                  warningPeriod={notification.warningPeriod}
-                  reminderText={notification.reminderText}
-               />;
+        return (
+          <Notification
+            key={index}
+            id={notification.id}
+            warningValue={notification.warningValue}
+            warningPeriod={notification.warningPeriod}
+            reminderText={notification.reminderText}
+          />
+        );
       });
     }
 

client/scripts/components/Config/NewQuestion.jsx

@@ -198,7 +198,14 @@ export default class NewQuestion extends React.Component {
         <span style={styles.requiredSelectionsSection}>
           <label style={styles.label} htmlFor="requiredNumSelections">SELECTIONS REQUIRED</label>
           <div>
-            <input style={styles.textbox} type="number" id="requiredNumSelections" ref="requiredNumSelections" onChange={this.requiredSelectionsChanged} value={this.props.question.question.requiredNumSelections} />
+            <input
+              style={styles.textbox}
+              type="number"
+              id="requiredNumSelections"
+              ref="requiredNumSelections"
+              onChange={this.requiredSelectionsChanged}
+              value={this.props.question.question.requiredNumSelections}
+            />
           </div>
         </span>
       );

client/scripts/components/Config/QuestionnaireConfig.jsx

@@ -342,7 +342,8 @@ class QuestionnaireConfig extends React.Component {
           text={question.question.text}
           isSubQuestion={false}
           top={question.question.top}
-          style={questionStyle} />
+          style={questionStyle}
+        />
       );
 
       this.findSubQuestions(question.id).forEach(subQuestion => {
@@ -362,7 +363,8 @@ class QuestionnaireConfig extends React.Component {
             isSubQuestion={true}
             top={subQuestion.question.top}
             style={{cursor: 'move'}}
-            displayCriteria={subQuestion.question.displayCriteria} />
+            displayCriteria={subQuestion.question.displayCriteria}
+          />
         );
       });
     });

client/scripts/components/DatePicker.jsx

@@ -87,15 +87,17 @@ export class DatePicker extends ResponsiveComponent {
           value={this.props.value ? formatDate(this.props.value) : ''}
           placeholder="Select a date"
           onFocus={this.showCalendar}
-          style={merge(styles.textField, this.props.textFieldStyle)} />
+          style={merge(styles.textField, this.props.textFieldStyle)}
+        />
 
         <DayPicker
           style={styles.calendar}
           ref="daypicker"
           enableOutsideDays={true}
           numberOfMonths={1}
           canChangeMonth={true}
-          onDayClick={this.dayClicked} />
+          onDayClick={this.dayClicked}
+        />
       </div>
     );
   }

client/scripts/components/DynamicIcons/CheckmarkIcon.jsx

@@ -17,6 +17,8 @@
     along with this program.  If not, see <http://www.gnu.org/licenses/>
 */
 
+/* eslint-disable max-len */
+
 import React from 'react';
 
 export default function CheckmarkIcon(props: Object): React.Element {

client/scripts/components/DynamicIcons/CompletedStepIcon.jsx

@@ -17,6 +17,8 @@
     along with this program.  If not, see <http://www.gnu.org/licenses/>
 */
 
+/* eslint-disable react/jsx-closing-bracket-location */
+
 import React from 'react';
 
 export function CompletedStepIcon(props: Object): React.Element {

client/scripts/components/DynamicIcons/CurrentStepIcon.jsx

@@ -17,6 +17,8 @@
     along with this program.  If not, see <http://www.gnu.org/licenses/>
 */
 
+/* eslint-disable */
+
 import React from 'react';
 
 export function CurrentStepIcon(props: Object): React.Element {

client/scripts/components/DynamicIcons/FEPlaceHolder.jsx

@@ -17,6 +17,8 @@
     along with this program.  If not, see <http://www.gnu.org/licenses/>
 */
 
+/* eslint-disable react/jsx-closing-bracket-location, react/jsx-pascal-case */
+
 import React from 'react';
 
 export function FEPlaceHolder(props: Object): React.Element {

client/scripts/components/DynamicIcons/Gripper.jsx

@@ -17,6 +17,8 @@
     along with this program.  If not, see <http://www.gnu.org/licenses/>
 */
 
+/* eslint-disable max-len */
+
 import React from 'react';
 
 export default function Gripper(props: Object): React.Element {

client/scripts/components/DynamicIcons/ManualPlaceholder.jsx

@@ -17,6 +17,8 @@
     along with this program.  If not, see <http://www.gnu.org/licenses/>
 */
 
+/* eslint-disable react/jsx-closing-bracket-location, react/jsx-pascal-case */
+
 import React from 'react';
 
 export function ManualPlaceholder(props: Object): React.Element {

client/scripts/components/DynamicIcons/PlusIcon.jsx

@@ -17,6 +17,8 @@
     along with this program.  If not, see <http://www.gnu.org/licenses/>
 */
 
+/* eslint-disable max-len, react/jsx-closing-bracket-location */
+
 import React from 'react';
 
 export function PlusIcon(props: Object): React.Element {

client/scripts/components/GreyButton.jsx

@@ -16,6 +16,8 @@
     along with this program.  If not, see <http://www.gnu.org/licenses/>
 */
 
+/* eslint-disable react/jsx-key */
+
 import React from 'react'; // eslint-disable-line no-unused-vars
 import {merge} from '../merge';
 

client/scripts/components/User/Archive/ArchiveDetail.jsx

@@ -66,7 +66,8 @@ export default class extends React.Component {
             declarations={disclosure.declarations}
             projectTypes={this.props.config.projectTypes}
             declarationTypes={this.props.config.declarationTypes}
-            id={disclosure.id} />
+            id={disclosure.id}
+          />
         </div>
       );
     }

client/scripts/components/User/Archive/DeclarationsSummary.jsx

@@ -149,8 +149,10 @@ export default class extends React.Component {
         });
 
         return (
-          <div key={`proj${project.id}`}
-            style={index === uniqueProjects.length - 1 ? styles.lastrelationship : styles.relationship}>
+          <div
+            key={`proj${project.id}`}
+            style={index === uniqueProjects.length - 1 ? styles.lastrelationship : styles.relationship}
+          >
             <div style={styles.name}>{project.name}</div>
             <div style={styles.field}>
               <label style={styles.label}>Project Type:</label>

client/scripts/components/User/CurrencyField.jsx

@@ -56,11 +56,20 @@ export default class NumericField extends TextField {
 
     return (
       <div style={this.props.styles.container}>
-        <label htmlFor={this.props.id} style={this.getLabelStyle(this.props.invalid, this.props.styles.label)}>{this.props.label}</label>
+        <label htmlFor={this.props.id} style={this.getLabelStyle(this.props.invalid, this.props.styles.label)}>
+          {this.props.label}
+        </label>
         <div style={{position: 'relative'}}>
           <span style={styles.currency}>$</span>
-          <input id={this.props.id} type='text' onChange={this.onChange} name={this.props.name} style={this.getInputStyle(this.props.invalid, inputStyle)}
-                 value={this.props.value} onKeyPress={this.validateNumeric}/>
+          <input
+            id={this.props.id}
+            type='text'
+            onChange={this.onChange}
+            name={this.props.name}
+            style={this.getInputStyle(this.props.invalid, inputStyle)}
+            value={this.props.value}
+            onKeyPress={this.validateNumeric}
+          />
         </div>
       </div>
     );

client/scripts/components/User/DateRangeField.jsx

@@ -63,9 +63,21 @@ export default class TextField extends React.Component {
       <div style={this.props.styles.container}>
         <label htmlFor={this.props.id} style={this.getLabelStyle(invalid, this.props.styles.label)}>{this.props.label}</label>
         <div id={this.props.id} style={{width: '98%'}}>
-          <DatePicker id="startDate" onChange={this.onStartDateChange} value={this.props.startDate} style={styles.date} textFieldStyle={this.getInputStyle(this.props.startDateInvalid, this.props.styles.input)}/>
+          <DatePicker
+            id="startDate"
+            onChange={this.onStartDateChange}
+            value={this.props.startDate}
+            style={styles.date}
+            textFieldStyle={this.getInputStyle(this.props.startDateInvalid, this.props.styles.input)}
+          />
           <span style={styles.dateMiddle}>TO</span>
-          <DatePicker id="endDate" onChange={this.onEndDateChange} value={this.props.endDate} style={styles.date} textFieldStyle={this.getInputStyle(this.props.endDateInvalid, this.props.styles.input)}/>
+          <DatePicker
+            id="endDate"
+            onChange={this.onEndDateChange}
+            value={this.props.endDate}
+            style={styles.date}
+            textFieldStyle={this.getInputStyle(this.props.endDateInvalid, this.props.styles.input)}
+          />
         </div>
       </div>
     );