eslint 4.8.0

ESLint 4.8.0 discovers a lot of error related to formatting. While I
tried to fix as many of them as possible, a portion of them actually go
against our coding style. In such a case, I've disabled the indent rule
which effectively leaves it as it was before ESLint 4.8.0.

Additionally, remove jshint because it's becoming a nuisance with its
lack of understanding of ES2015+.

react/.eslintrc.js

@@ -185,7 +185,6 @@ module.exports = {
         'id-blacklist': 0,
         'id-length': 0,
         'id-match': 0,
-        'indent': [ 'error', 4, { 'SwitchCase': 0 } ],
         'jsx-quotes': [ 'error', 'prefer-single' ],
         'key-spacing': 2,
         'keyword-spacing': 2,
@@ -387,7 +386,12 @@ module.exports = {
         'react/jsx-no-undef': 2,
         'react/jsx-pascal-case': 2,
         'react/jsx-sort-props': 2,
-        'react/jsx-space-before-closing': 2,
+        'react/jsx-tag-spacing': [
+            'error',
+            {
+                'beforeSelfClosing': 'always'
+            }
+        ],
         'react/jsx-uses-react': 2,
         'react/jsx-uses-vars': 2,
         'react/jsx-wrap-multilines': 2,

react/features/app/actions.js

@@ -1,3 +1,5 @@
+/* @flow */
+
 import { setRoom } from '../base/conference';
 import { loadConfigError, setConfig } from '../base/config';
 import { setLocationURL } from '../base/connection';
@@ -132,7 +134,7 @@ function _appNavigateToOptionalLocation(
  *     app: App
  * }}
  */
-export function appWillMount(app) {
+export function appWillMount(app: Object) {
     return (dispatch: Dispatch<*>) => {
         dispatch({
             type: APP_WILL_MOUNT,
@@ -159,7 +161,7 @@ export function appWillMount(app) {
  *     app: App
  * }}
  */
-export function appWillUnmount(app) {
+export function appWillUnmount(app: Object) {
     return {
         type: APP_WILL_UNMOUNT,
         app

react/features/base/conference/actions.js

@@ -256,7 +256,7 @@ export function conferenceWillLeave(conference) {
  * @returns {Function}
  */
 export function createConference() {
-    return (dispatch, getState) => {
+    return (dispatch: Dispatch<*>, getState: Function) => {
         const state = getState();
         const { connection, locationURL } = state['features/base/connection'];
 
@@ -297,7 +297,7 @@ export function createConference() {
  * @returns {Function}
  */
 export function checkIfCanJoin() {
-    return (dispatch, getState) => {
+    return (dispatch: Dispatch<*>, getState: Function) => {
         const { authRequired, password }
             = getState()['features/base/conference'];
 
@@ -412,8 +412,8 @@ export function setLastN(lastN: ?number) {
  * is to be joined or locked.
  * @returns {Function}
  */
-export function setPassword(conference, method, password) {
-    return (dispatch, getState) => {
+export function setPassword(conference, method: Function, password: string) {
+    return (dispatch: Dispatch<*>, getState: Function) => {
         switch (method) {
         case conference.join: {
             let state = getState()['features/base/conference'];
@@ -478,7 +478,7 @@ export function setPassword(conference, method, password) {
  *     receiveVideoQuality: number
  * }}
  */
-export function setReceiveVideoQuality(receiveVideoQuality) {
+export function setReceiveVideoQuality(receiveVideoQuality: number) {
     return {
         type: SET_RECEIVE_VIDEO_QUALITY,
         receiveVideoQuality
@@ -495,7 +495,7 @@ export function setReceiveVideoQuality(receiveVideoQuality) {
  *     room: string
  * }}
  */
-export function setRoom(room) {
+export function setRoom(room: ?string) {
     return {
         type: SET_ROOM,
         room

react/features/base/config/reducer.js

@@ -129,6 +129,8 @@ function _translateLegacyConfig(oldValue: Object) {
         newValue = set(newValue, 'p2p', {});
     }
 
+    /* eslint-disable indent */
+
     // Translate the old config properties into the new config.p2p properties.
     for (const [ oldKey, newKey ]
             of [
@@ -136,6 +138,9 @@ function _translateLegacyConfig(oldValue: Object) {
                 [ 'enableP2P', 'enabled' ],
                 [ 'p2pStunServers', 'stunServers' ]
             ]) {
+
+    /* eslint-enable indent */
+
         if (oldKey in newValue) {
             const v = newValue[oldKey];
 

react/features/base/connection/reducer.js

@@ -158,8 +158,8 @@ function _constructOptions(locationURL: URL) {
 
     return {
         bosh:
-            `${String(protocol)}//${domain}${locationURI.contextRoot || '/'
-                }http-bind`,
+            `${String(protocol)}//${domain}${
+                locationURI.contextRoot || '/'}http-bind`,
         hosts: {
             domain,
 

react/features/base/i18n/i18next.js

@@ -1,3 +1,5 @@
+/* @flow */
+
 import i18next from 'i18next';
 import I18nextXHRBackend from 'i18next-xhr-backend';
 

react/features/base/lib-jitsi-meet/actions.js

@@ -1,3 +1,5 @@
+/* @flow */
+
 import type { Dispatch } from 'redux';
 
 import JitsiMeetJS from './_';
@@ -95,7 +97,7 @@ export function libInitError(error: Error) {
  * @returns {Function}
  */
 export function setWebRTCReady(webRTCReady: boolean | Promise<*>) {
-    return (dispatch: Dispatch<*>, getState: Function) => {
+    return (dispatch: Function, getState: Function) => {
         if (getState()['features/base/lib-jitsi-meet'].webRTCReady
                 !== webRTCReady) {
             dispatch({

react/features/base/lib-jitsi-meet/native/RTCPeerConnection.js

@@ -18,7 +18,7 @@ import { RTCPeerConnection, RTCSessionDescription } from 'react-native-webrtc';
  */
 export default function _RTCPeerConnection(...args) {
 
-    /* eslint-disable no-invalid-this */
+    /* eslint-disable indent, no-invalid-this */
 
     RTCPeerConnection.apply(this, args);
 
@@ -44,7 +44,7 @@ export default function _RTCPeerConnection(...args) {
         }
     });
 
-    /* eslint-enable no-invalid-this */
+    /* eslint-enable indent, no-invalid-this */
 }
 
 _RTCPeerConnection.prototype = Object.create(RTCPeerConnection.prototype);

react/features/base/media/components/AbstractAudio.js

@@ -10,7 +10,9 @@ export default class AbstractAudio extends Component {
      * The (reference to the) {@link ReactElement} which actually implements
      * this {@code AbstractAudio}.
      */
-    _ref: ?Object
+    _ref: ?Object;
+
+    _setRef: Function;
 
     /**
      * {@code AbstractAudio} component's property types.
@@ -33,7 +35,7 @@ export default class AbstractAudio extends Component {
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props) {
+    constructor(props: Object) {
         super(props);
 
         // Bind event handlers so they are only bound once for every instance.

react/features/base/participants/components/Avatar.native.js

@@ -95,6 +95,7 @@ export default class Avatar extends Component {
             };
 
             if (assignState) {
+                // eslint-disable-next-line react/no-direct-mutation-state
                 this.state = nextState;
             } else {
                 this.setState(nextState);
@@ -134,6 +135,7 @@ export default class Avatar extends Component {
                         observer,
                         /* immutable */ true);
                 } else if (assignState) {
+                    // eslint-disable-next-line react/no-direct-mutation-state
                     this.state = {
                         ...this.state,
                         source: nextSource
@@ -185,7 +187,7 @@ export default class Avatar extends Component {
 
             for (let i = 0; i < uri.length; i++) {
                 hash = uri.charCodeAt(i) + ((hash << 5) - hash);
-                hash |= 0;  // Convert to 32-bit integer
+                hash |= 0; // Convert to 32-bit integer
             }
 
             /* eslint-enable no-bitwise */

react/features/base/participants/middleware.js

@@ -1,3 +1,5 @@
+/* @flow */
+
 import UIEvents from '../../../../service/UI/UIEvents';
 
 import {

react/features/base/react/components/web/InlineDialogFailure.js

@@ -1,3 +1,5 @@
+/* @flow */
+
 import AKButton from '@atlaskit/button';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';

react/features/base/react/components/web/Watermarks.js

@@ -1,5 +1,6 @@
 /* @flow */
 
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -21,6 +22,11 @@ const _RIGHT_WATERMARK_STYLE = {
  * etc.
  */
 class Watermarks extends Component {
+    static propTypes = {
+        _isGuest: PropTypes.bool,
+        t: PropTypes.func
+    };
+
     state = {
         brandWatermarkLink: String,
         jitsiWatermarkLink: String,

react/features/conference/components/Conference.native.js

@@ -203,10 +203,10 @@ class Conference extends Component {
                   * The activity/loading indicator goes above everything, except
                   * the toolbox/toolbars and the dialogs.
                   */
-                  this.props._connecting
-                      && <View style = { styles.connectingIndicator }>
-                          <LoadingIndicator />
-                      </View>
+                    this.props._connecting
+                        && <View style = { styles.connectingIndicator }>
+                            <LoadingIndicator />
+                        </View>
                 }
 
                 {/*

react/features/connection-stats/components/ConnectionStatsTable.js

@@ -311,8 +311,8 @@ class ConnectionStatsTable extends Component {
     _renderShowMoreLink() {
         const translationKey
             = this.props.shouldShowMore
-            ? 'connectionindicator.less'
-            : 'connectionindicator.more';
+                ? 'connectionindicator.less'
+                : 'connectionindicator.more';
 
         return (
             <a

react/features/contact-list/components/ContactListPanel.web.js

@@ -1,3 +1,5 @@
+/* @flow */
+
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';

react/features/desktop-picker/components/DesktopPickerPane.js

@@ -62,6 +62,8 @@ class DesktopPickerPane extends Component {
         const previews
             = sources.map(
                 source =>
+
+                    // eslint-disable-next-line react/jsx-wrap-multilines
                     <DesktopSourcePreview
                         key = { source.id }
                         onClick = { onClick }

react/features/device-selection/actions.js

@@ -81,7 +81,7 @@ function _openDeviceSelectionDialogInPopup() {
         const scope = `dialog_${API_ID}`;
         const url = `${
             window.location.origin}/static/deviceSelectionPopup.html#scope=${
-                encodeURIComponent(JSON.stringify(scope))}`;
+            encodeURIComponent(JSON.stringify(scope))}`;
         const popup
             = window.open(
                 url,

react/features/dial-out/components/CountryIcon.js

@@ -30,8 +30,9 @@ export default class CountryIcon extends Component {
      */
     render() {
         const iconClassName
-            = `flag-icon flag-icon-${this.props.countryCode
-                } flag-icon-squared ${this.props.className}`;
+            = `flag-icon flag-icon-${
+                this.props.countryCode} flag-icon-squared ${
+                this.props.className}`;
 
         return <span className = { iconClassName } />;
     }

react/features/feedback/components/FeedbackButton.web.js

@@ -23,6 +23,8 @@ class FeedbackButton extends Component {
          */
         _conference: PropTypes.object,
 
+        dispatch: PropTypes.func,
+
         /**
          * Invoked to obtain translated strings.
          */

react/features/feedback/components/FeedbackDialog.web.js

@@ -12,8 +12,8 @@ import { cancelFeedback, submitFeedback } from '../actions';
 
 declare var interfaceConfig: Object;
 
-const scoreAnimationClass = interfaceConfig.ENABLE_FEEDBACK_ANIMATION
-    ? 'shake-rotate' : '';
+const scoreAnimationClass
+    = interfaceConfig.ENABLE_FEEDBACK_ANIMATION ? 'shake-rotate' : '';
 
 /**
  * The scores to display for selecting. The score is the index in the array and

react/features/filmstrip/components/Filmstrip.native.js

@@ -53,19 +53,22 @@ class Filmstrip extends Component {
                 visible = { this.props._visible }>
                 <ScrollView
 
-                    // eslint-disable-next-line react/jsx-curly-spacing
-                    contentContainerStyle = {
-                        styles.filmstripScrollViewContentContainer
-                    } // eslint-disable-line react/jsx-curly-spacing
+                    contentContainerStyle
+                        = { styles.filmstripScrollViewContentContainer }
                     horizontal = { true }
                     showsHorizontalScrollIndicator = { false }
                     showsVerticalScrollIndicator = { false }>
                     {
+
+                        /* eslint-disable react/jsx-wrap-multilines */
+
                         this._sort(this.props._participants)
                             .map(p =>
                                 <Thumbnail
                                     key = { p.id }
                                     participant = { p } />)
+
+                        /* eslint-enable react/jsx-wrap-multilines */
                     }
                 </ScrollView>
             </Container>

react/features/filmstrip/functions.js

@@ -1,3 +1,5 @@
+/* @flow */
+
 declare var interfaceConfig: Object;
 
 import {
@@ -12,7 +14,7 @@ import {
  * @param {Object} state - The full redux state.
  * @returns {boolean} - True if remote video thumbnails should be displayed.
  */
-export function shouldRemoteVideosBeVisible(state) {
+export function shouldRemoteVideosBeVisible(state: Object) {
     const participants = state['features/base/participants'];
     const participantsCount = participants.length;
 

react/features/invite/components/AddPeopleDialog.web.js

@@ -334,7 +334,7 @@ function _mapStateToProps(state) {
         inviteServiceUrl,
         peopleSearchQueryTypes,
         peopleSearchUrl
-     } = state['features/base/config'];
+    } = state['features/base/config'];
 
     return {
         _conference: conference,

react/features/invite/functions.js

@@ -10,12 +10,11 @@ declare var $: Function;
  * executed - "conferenceRooms" | "user" | "room".
  * @returns {Promise} - The promise created by the request.
  */
-export function searchPeople(// eslint-disable-line max-params
-    serviceUrl,
-    jwt,
-    text,
-    queryTypes = [ 'conferenceRooms', 'user', 'room' ]
-) {
+export function searchPeople( // eslint-disable-line max-params
+        serviceUrl,
+        jwt,
+        text,
+        queryTypes = [ 'conferenceRooms', 'user', 'room' ]) {
     const queryTypesString = JSON.stringify(queryTypes);
 
     return new Promise((resolve, reject) => {

react/features/mobile/background/actions.js

@@ -1,3 +1,5 @@
+/* @flow */
+
 import { setLastN } from '../../base/conference';
 import { setVideoMuted, VIDEO_MUTISM_AUTHORITY } from '../../base/media';
 
@@ -31,7 +33,7 @@ export function _setAppStateListener(listener: ?Function) {
  * @returns {Function}
  */
 export function _setBackgroundVideoMuted(muted: boolean) {
-    return (dispatch, getState) => {
+    return (dispatch: Dispatch<*>, getState: Function) => {
         // Disable remote video when we mute by setting lastN to 0. Skip it if
         // the conference is in audio-only mode, as it's already configured to
         // have no video. Leave it as undefined when unmuting, the default value

react/features/mobile/background/middleware.js

@@ -74,7 +74,7 @@ MiddlewareRegistry.register(store => next => action => {
  * @private
  * @returns {void}
  */
-function _appStateChanged(dispatch: Dispatch<*>, appState: string) {
+function _appStateChanged(dispatch: Function, appState: string) {
     let muted;
 
     switch (appState) {

react/features/mobile/permissions/middleware.js

@@ -47,11 +47,18 @@ function _alertPermissionErrorWithSettings(trackType) {
     // TODO i18n
     const deviceType = trackType === 'video' ? 'Camera' : 'Microphone';
 
+    /* eslint-disable indent */
+
+    const message
+        = `${deviceType
+            } permission is required to participate in conferences with ${
+            trackType}. Please grant it in Settings.`;
+
+    /* eslint-ensable indent */
+
     Alert.alert(
         'Permission required',
-        `${deviceType
-            } permission is required to participate in conferences with ${
-            trackType}. Please grant it in Settings.`,
+        message,
         [
             { text: 'Cancel' },
             {

react/features/overlay/components/ReloadButton.js

@@ -1,3 +1,5 @@
+/* @flow */
+
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';

react/features/remote-control/components/RemoteControlAuthorizationDialog.js

@@ -2,10 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
-import {
-    Dialog,
-    hideDialog
-} from '../../base/dialog';
+import { Dialog, hideDialog } from '../../base/dialog';
 import { translate } from '../../base/i18n';
 import { getParticipantById } from '../../base/participants';
 

react/features/toolbox/components/Toolbar.web.js

@@ -123,8 +123,7 @@ class Toolbar extends Component {
      * @private
      * @returns {ReactElement} A toolbar button.
      */
-    _renderToolbarButton(
-                         keyValuePair: Array<*>): ReactElement<*> {
+    _renderToolbarButton(keyValuePair: Array<*>): ReactElement<*> {
         const [ key, button ] = keyValuePair;
 
         if (button.component) {

react/features/welcome/components/LocalVideoTrackUnderlay.native.js

@@ -72,6 +72,7 @@ class LocalVideoTrackUnderlay extends Component {
             };
 
             if (assignState) {
+                // eslint-disable-next-line react/no-direct-mutation-state
                 this.state = nextState;
             } else {
                 this.setState(nextState);