style: update eslint rules

.eslintrc.js

@@ -1,26 +1,27 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 const { createConfig } = require('@edx/frontend-build');
 
 module.exports = createConfig('eslint', {
   rules: {
     // Temporarily update the 'indent', 'template-curly-spacing' and
     // 'no-multiple-empty-lines' rules since they are causing eslint
-    // to fail for no apparent reason since upgrading 
+    // to fail for no apparent reason since upgrading
     // @edx/frontend-build from v3 to v5:
     // - TypeError: Cannot read property 'range' of null
-    'indent': [
+    indent: [
       'error',
       2,
-      { 'ignoredNodes': ['TemplateLiteral', 'SwitchCase'] }
+      { ignoredNodes: ['TemplateLiteral', 'SwitchCase'] },
     ],
     'template-curly-spacing': 'off',
     'jsx-a11y/label-has-associated-control': ['error', {
       labelComponents: [],
       labelAttributes: [],
       controlComponents: [],
       assert: 'htmlFor',
-      depth: 25
+      depth: 25,
     }],
-    'sort-imports': ['error', {ignoreCase: true, ignoreDeclarationSort: true}],
+    'sort-imports': ['error', { ignoreCase: true, ignoreDeclarationSort: true }],
     'import/order': [
       'error',
       {

src/base-component/index.jsx

@@ -1 +1,2 @@
+/* eslint-disable no-restricted-exports */
 export { default } from './BaseComponent';

src/common-components/FormGroup.jsx

@@ -37,7 +37,6 @@ const FormGroup = (props) => {
         onClick={handleClick}
         onChange={props.handleChange}
         controlClassName={props.borderClass}
-
         trailingElement={props.trailingElement}
         floatingLabel={props.floatingLabel}
       >
@@ -71,7 +70,7 @@ FormGroup.defaultProps = {
   className: '',
   errorMessage: '',
   handleBlur: null,
-  handleChange: () => {},
+  handleChange: () => { },
   handleClick: null,
   handleFocus: null,
   helpText: [],

src/common-components/Logistration.jsx

@@ -90,6 +90,7 @@ const Logistration = (props) => {
                   </Tabs>
                 )
                 : (
+                  // eslint-disable-next-line react/jsx-no-useless-fragment
                   <>
                     {!tpa && (
                       <Tabs defaultActiveKey={selectedPage} id="controlled-tab" onSelect={handleOnSelect}>

src/common-components/NotFoundPage.jsx

@@ -2,16 +2,16 @@ import React from 'react';
 
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
-export default function NotFoundPage() {
-  return (
-    <div className="container-fluid d-flex py-5 justify-content-center align-items-start text-center">
-      <p className="my-0 py-5 text-muted mw-32em">
-        <FormattedMessage
-          id="error.notfound.message"
-          defaultMessage="The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again."
-          description="error message when a page does not exist"
-        />
-      </p>
-    </div>
-  );
-}
+const NotFoundPage = () => (
+  <div className="container-fluid d-flex py-5 justify-content-center align-items-start text-center">
+    <p className="my-0 py-5 text-muted mw-32em">
+      <FormattedMessage
+        id="error.notfound.message"
+        defaultMessage="The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again."
+        description="error message when a page does not exist"
+      />
+    </p>
+  </div>
+);
+
+export default NotFoundPage;

src/common-components/RedirectLogistration.jsx

@@ -7,7 +7,7 @@ import { Redirect } from 'react-router-dom';
 import { WELCOME_PAGE } from '../data/constants';
 import { setCookie } from '../data/utils';
 
-function RedirectLogistration(props) {
+const RedirectLogistration = (props) => {
   const {
     finishAuthUrl, redirectUrl, redirectToWelcomePage, success, optionalFields,
   } = props;
@@ -43,8 +43,9 @@ function RedirectLogistration(props) {
 
     window.location.href = finalRedirectUrl;
   }
+  // eslint-disable-next-line react/jsx-no-useless-fragment
   return <></>;
-}
+};
 
 RedirectLogistration.defaultProps = {
   finishAuthUrl: null,

src/common-components/SocialAuthProviders.jsx

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import { LOGIN_PAGE, SUPPORTED_ICON_CLASSES } from '../data/constants';
 import messages from './messages';
 
-function SocialAuthProviders(props) {
+const SocialAuthProviders = (props) => {
   const { intl, referrer, socialAuthProviders } = props;
 
   function handleSubmit(e) {
@@ -34,13 +34,11 @@ function SocialAuthProviders(props) {
         </div>
       )
         : (
-          <>
-            <div className="font-container" aria-hidden="true">
-              <FontAwesomeIcon
-                icon={SUPPORTED_ICON_CLASSES.includes(provider.iconClass) ? ['fab', provider.iconClass] : faSignInAlt}
-              />
-            </div>
-          </>
+          <div className="font-container" aria-hidden="true">
+            <FontAwesomeIcon
+              icon={SUPPORTED_ICON_CLASSES.includes(provider.iconClass) ? ['fab', provider.iconClass] : faSignInAlt}
+            />
+          </div>
         )}
       <span id="provider-name" className="notranslate mr-auto pl-2" aria-hidden="true">{provider.name}</span>
       <span className="sr-only">
@@ -51,8 +49,9 @@ function SocialAuthProviders(props) {
     </button>
   ));
 
+  // eslint-disable-next-line react/jsx-no-useless-fragment
   return <>{socialAuth}</>;
-}
+};
 
 SocialAuthProviders.defaultProps = {
   referrer: LOGIN_PAGE,

src/common-components/SwitchContent.jsx

@@ -21,7 +21,7 @@ const onChildExit = (htmlNode) => {
   }
 };
 
-function SwitchContent({ expression, cases, className }) {
+const SwitchContent = ({ expression, cases, className }) => {
   const getContent = (caseKey) => {
     if (cases[caseKey]) {
       if (typeof cases[caseKey] === 'string') {
@@ -46,7 +46,7 @@ function SwitchContent({ expression, cases, className }) {
       {getContent(expression)}
     </TransitionReplace>
   );
-}
+};
 
 SwitchContent.propTypes = {
   expression: PropTypes.string,

src/common-components/UnAuthOnlyRoute.jsx

@@ -30,6 +30,7 @@ const UnAuthOnlyRoute = (props) => {
     return <Route {...props} />;
   }
 
+  // eslint-disable-next-line react/jsx-no-useless-fragment
   return <></>;
 };
 

src/common-components/data/reducers.js

@@ -1,3 +1,4 @@
+/* eslint-disable default-param-last */
 import { COMPLETE_STATE, PENDING_STATE } from '../../data/constants';
 import { THIRD_PARTY_AUTH_CONTEXT } from './actions';
 

src/common-components/data/sagas.js

@@ -15,14 +15,14 @@ import {
 export function* fetchThirdPartyAuthContext(action) {
   try {
     yield put(getThirdPartyAuthContextBegin());
-    const { fieldDescriptions, optionalFields, thirdPartyAuthContext } = yield call(
-      getThirdPartyAuthContext, action.payload.urlParams,
-    );
+    const {
+      fieldDescriptions,
+      optionalFields,
+      thirdPartyAuthContext,
+    } = yield call(getThirdPartyAuthContext, action.payload.urlParams);
 
     yield put(setCountryFromThirdPartyAuthContext(thirdPartyAuthContext.countryCode));
-    yield put(getThirdPartyAuthContextSuccess(
-      fieldDescriptions, optionalFields, thirdPartyAuthContext,
-    ));
+    yield put(getThirdPartyAuthContextSuccess(fieldDescriptions, optionalFields, thirdPartyAuthContext));
   } catch (e) {
     yield put(getThirdPartyAuthContextFailure());
     logError(e);

src/common-components/tests/Logistration.test.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-import-assign */
 import React from 'react';
 import { Provider } from 'react-redux';
 

src/common-components/tests/UnAuthOnlyRoute.test.jsx

@@ -1,18 +1,23 @@
+/* eslint-disable import/no-import-module-exports */
+/* eslint-disable no-import-assign */
 import React from 'react';
 
 import * as auth from '@edx/frontend-platform/auth';
 import { mount } from 'enzyme';
-import { MemoryRouter, BrowserRouter as Router, Switch } from 'react-router-dom';
 
 import { UnAuthOnlyRoute } from '..';
 import { LOGIN_PAGE } from '../../data/constants';
 
+import { MemoryRouter, BrowserRouter as Router, Switch } from 'react-router-dom';
+
 jest.mock('@edx/frontend-platform/auth');
 
 const RRD = require('react-router-dom');
 // Just render plain div with its children
 // eslint-disable-next-line react/prop-types
-RRD.BrowserRouter = ({ children }) => <div>{ children }</div>;
+RRD.BrowserRouter = function ({ children }) {
+  return <div>{children}</div>;
+};
 module.exports = RRD;
 
 const TestApp = () => (

src/data/utils/dataUtils.js

@@ -41,9 +41,7 @@ export const updatePathWithQueryParams = (path) => {
   }
 
   if (queryParams.indexOf('track=pwreset') > -1) {
-    queryParams = queryParams.replace(
-      '?track=pwreset&', '?',
-    ).replace('?track=pwreset', '').replace('&track=pwreset', '').replace('?&', '?');
+    queryParams = queryParams.replace('?track=pwreset&', '?').replace('?track=pwreset', '').replace('&track=pwreset', '').replace('?&', '?');
   }
 
   return `${path}${queryParams}`;

src/field-renderer/FieldRenderer.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 
 import { Form, Icon } from '@edx/paragon';

src/field-renderer/index.jsx

@@ -1 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
 export { default } from './FieldRenderer';

src/forgot-password/ForgotPasswordPage.jsx

@@ -96,8 +96,10 @@ const ForgotPasswordPage = (props) => {
   return (
     <BaseComponent>
       <Helmet>
-        <title>{intl.formatMessage(messages['forgot.password.page.title'],
-          { siteName: getConfig().SITE_NAME })}
+        <title>{intl.formatMessage(
+          messages['forgot.password.page.title'],
+          { siteName: getConfig().SITE_NAME },
+        )}
         </title>
       </Helmet>
       <div>

src/forgot-password/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-restricted-exports */
 export { default } from './ForgotPasswordPage';
 export { default as reducer } from './data/reducers';
 export { FORGOT_PASSWORD } from './data/actions';

src/forgot-password/tests/ForgotPasswordPage.test.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-import-assign */
 import React from 'react';
 import { Provider } from 'react-redux';
 
@@ -83,9 +84,7 @@ describe('ForgotPasswordPage', () => {
     const validationMessage = 'We were unable to contact you.Enter a valid email address below.';
     const wrapper = mount(reduxWrapper(<IntlForgotPasswordPage {...props} />));
 
-    wrapper.find('input#email').simulate(
-      'change', { target: { value: 'invalid-email', name: 'email' } },
-    );
+    wrapper.find('input#email').simulate('change', { target: { value: 'invalid-email', name: 'email' } });
     await act(async () => { await wrapper.find('button.btn-brand').simulate('click'); });
     wrapper.update();
 
@@ -97,7 +96,7 @@ describe('ForgotPasswordPage', () => {
       forgotPassword: { status: INTERNAL_SERVER_ERROR },
     });
     const expectedMessage = 'We were unable to contact you.'
-                            + 'An error has occurred. Try refreshing the page, or check your internet connection.';
+      + 'An error has occurred. Try refreshing the page, or check your internet connection.';
     const wrapper = mount(reduxWrapper(<IntlForgotPasswordPage {...props} />));
 
     expect(wrapper.find('#validation-errors').first().text()).toEqual(expectedMessage);
@@ -204,8 +203,8 @@ describe('ForgotPasswordPage', () => {
       },
     });
     const successMessage = 'Check your emailWe sent an email to  with instructions to reset your password. If you do not '
-                           + 'receive a password reset message after 1 minute, verify that you entered the correct email address,'
-                           + ' or check your spam folder. If you need further assistance, contact technical support.';
+      + 'receive a password reset message after 1 minute, verify that you entered the correct email address,'
+      + ' or check your spam folder. If you need further assistance, contact technical support.';
 
     const wrapper = mount(reduxWrapper(<IntlForgotPasswordPage {...props} />));
     expect(wrapper.find('.alert-success').text()).toEqual(successMessage);
@@ -219,8 +218,8 @@ describe('ForgotPasswordPage', () => {
       },
     });
     const successMessage = 'Invalid password reset link'
-                            + 'This password reset link is invalid. It may have been used already. '
-                            + 'Enter your email below to receive a new link.';
+      + 'This password reset link is invalid. It may have been used already. '
+      + 'Enter your email below to receive a new link.';
 
     const wrapper = mount(reduxWrapper(<IntlForgotPasswordPage {...props} />));
     expect(wrapper.find('.alert-danger').text()).toEqual(successMessage);

src/login/LoginFailure.jsx

@@ -174,7 +174,7 @@ const LoginFailureMessage = (props) => {
   return (
     <Alert id="login-failure-alert" className="mb-5" variant="danger" icon={Error}>
       <Alert.Heading>{intl.formatMessage(messages['login.failure.header.title'])}</Alert.Heading>
-      { errorList }
+      {errorList}
     </Alert>
   );
 };
@@ -188,7 +188,7 @@ LoginFailureMessage.defaultProps = {
 
 LoginFailureMessage.propTypes = {
   loginError: PropTypes.shape({
-    context: PropTypes.object,
+    context: PropTypes.shape([]),
     email: PropTypes.string,
     errorCode: PropTypes.string,
     redirectUrl: PropTypes.string,