fix: order imports and remove circular dependencies (#41824)

* fix: remove circular dependency

redux depended on templates/Challenges/redux and vice versa.  This
meant that import order mattered and confusing bugs could arise.

(cherry picked from commit 7d67a4e70922bbb3051f2f9982dcc69e240d43dc)

* feat: require imports to be in alphabetical order

Import order generally does not matter, but there are edge cases
(circular  imports and css imports, for example) where changing order
changes behaviour

(cherry picked from commit b8d1393a91ec6e068caf8e8498a5c95df68c2b2c)

* chore: order imports

* fix: lift up challenge description + title comps

This brings the classic Show closer to the others as they
now all create the description and title components

* fix: remove donation-saga/index circular import

(cherry picked from commit 51a44ca668a700786d2744feffeae4fdba5fd207)

* refactor: extract action-types from settings

(cherry picked from commit 25e26124d691c84a0d0827d41dafb761c686fadd)

* fix: lint errors

* feat: prevent useless renames

.eslintrc-base.json

@@ -32,6 +32,7 @@
     "import/newline-after-import": 2,
     "import/no-duplicates": 2,
     "import/no-unresolved": [2, { "commonjs": true }],
+    "import/order": [2, { "alphabetize": { "order": "asc" } }],
     "import/unambiguous": 2,
     "import/no-anonymous-default-export": 2,
     "jsx-quotes": [2, "prefer-single"],
@@ -122,6 +123,7 @@
     "no-unused-expressions": 2,
     "no-unused-vars": 2,
     "no-use-before-define": 0,
+    "no-useless-rename": 2,
     "no-void": 0,
     "no-warning-comments": [2, { "terms": ["fixme"], "location": "start" }],
     "no-with": 2,

api-server/src/common/models/User-Credential.js

@@ -1,11 +1,11 @@
-import { Observable } from 'rx';
 import debug from 'debug';
+import { Observable } from 'rx';
 
-import { observeMethod, observeQuery } from '../../server/utils/rx';
 import {
   createUserUpdatesFromProfile,
   getSocialProvider
 } from '../../server/utils/auth';
+import { observeMethod, observeQuery } from '../../server/utils/rx';
 
 const log = debug('fcc:models:UserCredential');
 module.exports = function (UserCredential) {

api-server/src/common/models/User-Identity.js

@@ -1,10 +1,10 @@
+import dedent from 'dedent';
 import { Observable } from 'rx';
 // import debug from 'debug';
-import dedent from 'dedent';
 import { isEmail } from 'validator';
 
-import { observeMethod, observeQuery } from '../../server/utils/rx';
 import { wrapHandledError } from '../../server/utils/create-handled-error.js';
+import { observeMethod, observeQuery } from '../../server/utils/rx';
 
 // const log = debug('fcc:models:userIdent');
 

api-server/src/common/models/user.js

@@ -5,18 +5,31 @@
  *
  */
 
+import badwordFilter from 'bad-words';
+import debugFactory from 'debug';
+import dedent from 'dedent';
+import _ from 'lodash';
+import moment from 'moment';
+import generate from 'nanoid/generate';
 import { Observable } from 'rx';
 import uuid from 'uuid/v4';
-import moment from 'moment';
-import dedent from 'dedent';
-import debugFactory from 'debug';
 import { isEmail } from 'validator';
-import _ from 'lodash';
-import generate from 'nanoid/generate';
-import badwordFilter from 'bad-words';
 
+import { blocklistedUsernames } from '../../../../config/constants';
 import { apiLocation } from '../../../../config/env.json';
 
+import { wrapHandledError } from '../../server/utils/create-handled-error.js';
+import {
+  setAccessTokenToResponse,
+  removeCookies
+} from '../../server/utils/getSetAccessToken';
+import {
+  normaliseUserFields,
+  getProgress,
+  publicUserProps
+} from '../../server/utils/publicUserProps';
+import { saveUser, observeMethod } from '../../server/utils/rx.js';
+import { getEmailSender } from '../../server/utils/url-utils';
 import {
   fixCompletedChallengeItem,
   getEncodedEmail,
@@ -26,20 +39,6 @@ import {
   renderSignInEmail
 } from '../utils';
 
-import { blocklistedUsernames } from '../../../../config/constants';
-import { wrapHandledError } from '../../server/utils/create-handled-error.js';
-import { saveUser, observeMethod } from '../../server/utils/rx.js';
-import { getEmailSender } from '../../server/utils/url-utils';
-import {
-  normaliseUserFields,
-  getProgress,
-  publicUserProps
-} from '../../server/utils/publicUserProps';
-import {
-  setAccessTokenToResponse,
-  removeCookies
-} from '../../server/utils/getSetAccessToken';
-
 const log = debugFactory('fcc:models:user');
 const BROWNIEPOINTS_TIMEOUT = [1, 'hour'];
 const nanoidCharSet =

api-server/src/development-start.js

@@ -1,9 +1,9 @@
 const path = require('path');
 require('dotenv').config({ path: path.resolve(__dirname, '../../.env') });
 
+const createDebugger = require('debug');
 const nodemon = require('nodemon');
 const SmeeClient = require('smee-client');
-const createDebugger = require('debug');
 
 const log = createDebugger('fcc:start:development');
 

api-server/src/production-start.js

@@ -1,6 +1,6 @@
 // this ensures node understands the future
-const _ = require('lodash');
 const createDebugger = require('debug');
+const _ = require('lodash');
 
 const log = createDebugger('fcc:server:production-start');
 const startTime = Date.now();

api-server/src/server/boot/authentication.js

@@ -1,20 +1,20 @@
-import passport from 'passport';
 import dedent from 'dedent';
 import { check } from 'express-validator';
-import { isEmail } from 'validator';
 import jwt from 'jsonwebtoken';
+import passport from 'passport';
+import { isEmail } from 'validator';
 
 import { jwtSecret } from '../../../../config/secrets';
 
+import { decodeEmail } from '../../common/utils';
 import {
   createPassportCallbackAuthenticator,
   devSaveResponseAuthCookies,
   devLoginRedirect
 } from '../component-passport';
-import { ifUserRedirectTo, ifNoUserRedirectHome } from '../utils/middleware';
 import { wrapHandledError } from '../utils/create-handled-error.js';
 import { removeCookies } from '../utils/getSetAccessToken';
-import { decodeEmail } from '../../common/utils';
+import { ifUserRedirectTo, ifNoUserRedirectHome } from '../utils/middleware';
 import { getRedirectParams } from '../utils/redirection';
 
 const passwordlessGetValidators = [

api-server/src/server/boot/certificate.js

@@ -1,17 +1,10 @@
+import path from 'path';
+import debug from 'debug';
+import dedent from 'dedent';
 import _ from 'lodash';
 import loopback from 'loopback';
-import path from 'path';
-import dedent from 'dedent';
 import { Observable } from 'rx';
-import debug from 'debug';
 import { isEmail } from 'validator';
-import { reportError } from '../middlewares/sentry-error-handler.js';
-
-import { ifNoUser401 } from '../utils/middleware';
-import { observeQuery } from '../utils/rx';
-
-import { getChallenges } from '../utils/get-curriculum';
-
 import {
   completionHours,
   certTypes,
@@ -22,6 +15,11 @@ import {
   oldDataVizId,
   superBlockCertTypeMap
 } from '../../../../config/certification-settings';
+import { reportError } from '../middlewares/sentry-error-handler.js';
+
+import { getChallenges } from '../utils/get-curriculum';
+import { ifNoUser401 } from '../utils/middleware';
+import { observeQuery } from '../utils/rx';
 
 const {
   legacyFrontEndChallengeId,

api-server/src/server/boot/challenge.js

@@ -4,17 +4,17 @@
  * a db migration to fix all completedChallenges
  *
  */
-import { Observable } from 'rx';
-import { isEmpty, pick, omit, find, uniqBy } from 'lodash';
 import debug from 'debug';
 import dedent from 'dedent';
+import { isEmpty, pick, omit, find, uniqBy } from 'lodash';
 import { ObjectID } from 'mongodb';
+import { Observable } from 'rx';
 import isNumeric from 'validator/lib/isNumeric';
 import isURL from 'validator/lib/isURL';
 
-import { ifNoUserSend } from '../utils/middleware';
 import { fixCompletedChallengeItem } from '../../common/utils';
 import { getChallenges } from '../utils/get-curriculum';
+import { ifNoUserSend } from '../utils/middleware';
 import {
   getRedirectParams,
   normalizeParams,

api-server/src/server/boot/donate.js

@@ -1,11 +1,11 @@
 import debug from 'debug';
+import keys from '../../../../config/secrets';
 import {
   getAsyncPaypalToken,
   verifyWebHook,
   updateUser,
   verifyWebHookType
 } from '../utils/donation';
-import keys from '../../../../config/secrets';
 
 const log = debug('fcc:boot:donate');
 

api-server/src/server/boot/settings.js

@@ -1,10 +1,10 @@
 import debug from 'debug';
 import { check } from 'express-validator';
 
-import { ifNoUser401, createValidatorErrorHandler } from '../utils/middleware';
-import { themes } from '../../common/utils/themes.js';
-import { alertTypes } from '../../common/utils/flash.js';
 import { isValidUsername } from '../../../../utils/validate';
+import { alertTypes } from '../../common/utils/flash.js';
+import { themes } from '../../common/utils/themes.js';
+import { ifNoUser401, createValidatorErrorHandler } from '../utils/middleware';
 
 const log = debug('fcc:boot:settings');
 

api-server/src/server/boot/user.js

@@ -1,19 +1,19 @@
-import dedent from 'dedent';
 import debugFactory from 'debug';
+import dedent from 'dedent';
+import { body } from 'express-validator';
 import { pick } from 'lodash';
 import { Observable } from 'rx';
-import { body } from 'express-validator';
 
+import { fixCompletedChallengeItem } from '../../common/utils';
+import { removeCookies } from '../utils/getSetAccessToken';
+import { ifNoUser401, ifNoUserRedirectHome } from '../utils/middleware';
 import {
   getProgress,
   normaliseUserFields,
   userPropsForSession
 } from '../utils/publicUserProps';
-import { fixCompletedChallengeItem } from '../../common/utils';
-import { ifNoUser401, ifNoUserRedirectHome } from '../utils/middleware';
-import { removeCookies } from '../utils/getSetAccessToken';
-import { trimTags } from '../utils/validators';
 import { getRedirectParams } from '../utils/redirection';
+import { trimTags } from '../utils/validators';
 
 const log = debugFactory('fcc:boot:user');
 const sendNonUserToHome = ifNoUserRedirectHome();

api-server/src/server/component-passport.js

@@ -1,12 +1,13 @@
-import passport from 'passport';
 // eslint-disable-next-line
 import {
   // prettier ignore
   PassportConfigurator
 } from '@freecodecamp/loopback-component-passport';
 import dedent from 'dedent';
+import passport from 'passport';
 
-import { getUserById } from './utils/user-stats';
+import { availableLangs } from '../../../config/i18n/all-langs';
+import { jwtSecret } from '../../../config/secrets';
 import passportProviders from './passport-providers';
 import { setAccessTokenToResponse } from './utils/getSetAccessToken';
 import {
@@ -15,8 +16,7 @@ import {
   getRedirectParams,
   haveSamePath
 } from './utils/redirection';
-import { jwtSecret } from '../../../config/secrets';
-import { availableLangs } from '../../../config/i18n/all-langs';
+import { getUserById } from './utils/user-stats';
 
 const passportOptions = {
   emailOptional: true,

api-server/src/server/index.js

@@ -1,12 +1,12 @@
 const path = require('path');
 require('dotenv').config({ path: path.resolve(__dirname, '../../../.env') });
 
+const Sentry = require('@sentry/node');
+const createDebugger = require('debug');
 const _ = require('lodash');
 const loopback = require('loopback');
 const boot = require('loopback-boot');
-const createDebugger = require('debug');
 const morgan = require('morgan');
-const Sentry = require('@sentry/node');
 
 const { sentry } = require('../../../config/secrets');
 const { setupPassport } = require('./component-passport');

api-server/src/server/middlewares/constant-headers.js

@@ -1,5 +1,5 @@
-import { homeLocation } from '../../../../config/env.json';
 import { allowedOrigins } from '../../../../config/cors-settings';
+import { homeLocation } from '../../../../config/env.json';
 
 export default function constantHeaders() {
   return function (req, res, next) {

api-server/src/server/middlewares/passport-login.js

@@ -1,6 +1,6 @@
 import _ from 'lodash';
-import { Observable } from 'rx';
 import { login } from 'passport/lib/http/request';
+import { Observable } from 'rx';
 
 // make login polymorphic
 // if supplied callback it works as normal

api-server/src/server/middlewares/request-authorization.js

@@ -1,15 +1,15 @@
 import { isEmpty } from 'lodash';
 
-import { getUserById as _getUserById } from '../utils/user-stats';
+import { jwtSecret as _jwtSecret } from '../../../../config/secrets';
+
+import { wrapHandledError } from '../utils/create-handled-error';
 import {
   getAccessTokenFromRequest,
   errorTypes,
   authHeaderNS
 } from '../utils/getSetAccessToken';
-import { jwtSecret as _jwtSecret } from '../../../../config/secrets';
-
-import { wrapHandledError } from '../utils/create-handled-error';
 import { getRedirectParams } from '../utils/redirection';
+import { getUserById as _getUserById } from '../utils/user-stats';
 
 const authRE = /^\/auth\//;
 const confirmEmailRE = /^\/confirm-email$/;

api-server/src/server/middlewares/request-authorization.test.js

@@ -1,7 +1,7 @@
-import { mockReq as mockRequest, mockRes } from '../boot_tests/challenge.test';
 import jwt from 'jsonwebtoken';
 
 import { homeLocation } from '../../../../config/env.json';
+import { mockReq as mockRequest, mockRes } from '../boot_tests/challenge.test';
 import createRequestAuthorization, {
   isAllowedPath
 } from './request-authorization';

api-server/src/server/middlewares/sessions.js

@@ -1,5 +1,5 @@
-import session from 'express-session';
 import MongoStoreFactory from 'connect-mongo';
+import session from 'express-session';
 
 const MongoStore = MongoStoreFactory(session);
 const sessionSecret = process.env.SESSION_SECRET;

api-server/src/server/models/donation.js

@@ -1,5 +1,5 @@
-import { Observable } from 'rx';
 import debug from 'debug';
+import { Observable } from 'rx';
 
 import { reportError } from '../middlewares/sentry-error-handler.js';
 import InMemoryCache from '../utils/in-memory-cache';

api-server/src/server/passport-providers.js

@@ -1,5 +1,5 @@
-import { auth0 } from '../../../config/secrets';
 import { homeLocation, apiLocation } from '../../../config/env.json';
+import { auth0 } from '../../../config/secrets';
 
 const { clientID, clientSecret, domain } = auth0;
 

api-server/src/server/rss/index.js

@@ -1,6 +1,6 @@
-import _ from 'lodash';
 import compareDesc from 'date-fns/compare_desc';
 import debug from 'debug';
+import _ from 'lodash';
 
 import { getLybsynFeed } from './lybsyn';
 

api-server/src/server/utils/donation.test.js

@@ -1,14 +1,6 @@
 /* eslint-disable camelcase */
 import axios from 'axios';
 import keys from '../../../../config/secrets';
-import {
-  getAsyncPaypalToken,
-  verifyWebHook,
-  updateUser,
-  capitalizeKeys,
-  createDonationObj
-} from './donation';
-import { mockActivationHook, mockCancellationHook } from './__mocks__/donation';
 import {
   mockApp,
   createDonationMockFn,
@@ -16,6 +8,14 @@ import {
   updateDonationAttr,
   updateUserAttr
 } from '../boot_tests/fixtures';
+import { mockActivationHook, mockCancellationHook } from './__mocks__/donation';
+import {
+  getAsyncPaypalToken,
+  verifyWebHook,
+  updateUser,
+  capitalizeKeys,
+  createDonationObj
+} from './donation';
 
 jest.mock('axios');
 

api-server/src/server/utils/getSetAccessToken.js

@@ -1,5 +1,5 @@
-import jwt from 'jsonwebtoken';
 import { isBefore } from 'date-fns';
+import jwt from 'jsonwebtoken';
 
 import { jwtSecret as _jwtSecret } from '../../../../config/secrets';
 

api-server/src/server/utils/getSetAccessToken.test.js

@@ -1,11 +1,11 @@
+import jwt from 'jsonwebtoken';
+import { mockReq, mockRes } from '../boot_tests/challenge.test';
 import {
   getAccessTokenFromRequest,
   errorTypes,
   setAccessTokenToResponse,
   removeCookies
 } from './getSetAccessToken';
-import { mockReq, mockRes } from '../boot_tests/challenge.test';
-import jwt from 'jsonwebtoken';
 
 describe('getSetAccessToken', () => {
   const validJWTSecret = 'this is a super secret string';

api-server/src/server/utils/publicUserProps.js

@@ -1,11 +1,11 @@
 import { isURL } from 'validator';
 
-import { addPlaceholderImage } from './';
 import {
   prepUniqueDaysByHours,
   calcCurrentStreak,
   calcLongestStreak
 } from '../utils/user-stats';
+import { addPlaceholderImage } from './';
 
 export const publicUserProps = [
   'about',

api-server/src/server/utils/redirection.js

@@ -1,9 +1,9 @@
 const jwt = require('jsonwebtoken');
-const { availableLangs } = require('../../../../config/i18n/all-langs');
 const { allowedOrigins } = require('../../../../config/cors-settings');
 // homeLocation is being used as a fallback here. If the one provided by the
 // client is invalid we default to this.
 const { homeLocation } = require('../../../../config/env.json');
+const { availableLangs } = require('../../../../config/i18n/all-langs');
 
 function getReturnTo(encryptedParams, secret, _homeLocation = homeLocation) {
   let params;

api-server/src/server/utils/rx.js

@@ -1,6 +1,6 @@
-import Rx, { AsyncSubject, Observable } from 'rx';
-import moment from 'moment';
 import debugFactory from 'debug';
+import moment from 'moment';
+import Rx, { AsyncSubject, Observable } from 'rx';
 
 const debug = debugFactory('fcc:rxUtils');
 

api-server/src/server/utils/user-stats.js

@@ -1,11 +1,11 @@
-import loopback from 'loopback';
+import { isEmpty } from 'lodash';
 import compose from 'lodash/fp/compose';
+import forEachRight from 'lodash/fp/forEachRight';
+import last from 'lodash/fp/last';
 import map from 'lodash/fp/map';
 import sortBy from 'lodash/fp/sortBy';
 import trans from 'lodash/fp/transform';
-import last from 'lodash/fp/last';
-import forEachRight from 'lodash/fp/forEachRight';
-import { isEmpty } from 'lodash';
+import loopback from 'loopback';
 import moment from 'moment-timezone';
 
 import { dayCount } from '../utils/date-utils';

api-server/src/server/utils/user-stats.test.js

@@ -1,12 +1,12 @@
 import moment from 'moment-timezone';
 
+import { mockUserID, mockApp, mockUser } from '../boot_tests/fixtures';
 import {
   prepUniqueDaysByHours,
   calcCurrentStreak,
   calcLongestStreak,
   getUserById
 } from './user-stats';
-import { mockUserID, mockApp, mockUser } from '../boot_tests/fixtures';
 
 jest.useFakeTimers('modern');
 const PST = 'America/Los_Angeles';

client/gatsby-browser.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Provider } from 'react-redux';
-import { I18nextProvider } from 'react-i18next';
 import cookies from 'browser-cookies';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
 
 import i18n from './i18n/config';
-import { createStore } from './src/redux/createStore';
 import AppMountNotifier from './src/components/app-mount-notifier';
+import { createStore } from './src/redux/createStore';
 import layoutSelector from './utils/gatsby/layout-selector';
 
 const store = createStore();

client/gatsby-node.js

@@ -1,10 +1,10 @@
-const env = require('../config/env.json');
-const webpack = require('webpack');
-
 const { createFilePath } = require('gatsby-source-filesystem');
 // TODO: ideally we'd remove lodash and just use lodash-es, but we can't require
 // es modules here.
 const uniq = require('lodash/uniq');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+const webpack = require('webpack');
+const env = require('../config/env.json');
 
 const { blockNameify } = require('../utils/block-nameify');
 const {
@@ -165,8 +165,6 @@ exports.createPages = function createPages({ graphql, actions, reporter }) {
   });
 };
 
-const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
-
 exports.onCreateWebpackConfig = ({ stage, actions }) => {
   const newPlugins = [
     // We add the shims of the node globals to the global scope

client/gatsby-ssr.js

@@ -1,7 +1,7 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import { Provider } from 'react-redux';
+import React from 'react';
 import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
 
 import i18n from './i18n/config';
 import { createStore } from './src/redux/createStore';

client/i18n/schema-validation.js

@@ -1,11 +1,11 @@
 const path = require('path');
 const { availableLangs } = require('../../config/i18n/all-langs');
+const introSchema = require('./locales/english/intro.json');
+const linksSchema = require('./locales/english/links.json');
+const metaTagsSchema = require('./locales/english/meta-tags.json');
+const motivationSchema = require('./locales/english/motivation.json');
 const translationsSchema = require('./locales/english/translations.json');
 const trendingSchema = require('./locales/english/trending.json');
-const motivationSchema = require('./locales/english/motivation.json');
-const introSchema = require('./locales/english/intro.json');
-const metaTagsSchema = require('./locales/english/meta-tags.json');
-const linksSchema = require('./locales/english/links.json');
 
 /**
  * Flattens a nested object structure into a single

client/i18n/validate-keys.js

@@ -1,11 +1,11 @@
 const fs = require('fs');
 const path = require('path');
-const translationsObject = require('./locales/english/translations.json');
 const introObject = require('./locales/english/intro.json');
+const linksObject = require('./locales/english/links.json');
 const metaObject = require('./locales/english/meta-tags.json');
 const motivationObject = require('./locales/english/motivation.json');
+const translationsObject = require('./locales/english/translations.json');
 const trendingObject = require('./locales/english/trending.json');
-const linksObject = require('./locales/english/links.json');
 
 /**
  * Function to flatten a nested object. Written specifically for

client/src/analytics/index.tsx

@@ -1,9 +1,9 @@
 import ReactGA from 'react-ga';
-import envData from '../../../config/env.json';
 import {
   devAnalyticsId,
   prodAnalyticsId
 } from '../../../config/analytics-settings';
+import envData from '../../../config/env.json';
 
 const { deploymentEnv } = envData;
 

client/src/assets/icons/index.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import ResponsiveDesign from './responsive-design';
+import APIIcon from './API-icon';
+import D3Icon from './D3-icon';
 import JavaScriptIcon from './JavaScript-icon';
 import ReactIcon from './React-icon';
-import D3Icon from './D3-icon';
-import APIIcon from './API-icon';
-import Clipboard from './clipboard';
-import PythonIcon from './python-icon';
-import Analytics from './analytics';
-import Shield from './shield';
 import TensorflowIcon from './Tensorflow-icon';
 import Algorithm from './algorithm';
+import Analytics from './analytics';
+import Clipboard from './clipboard';
+import PythonIcon from './python-icon';
+import ResponsiveDesign from './responsive-design';
+import Shield from './shield';
 
 const iconMap = {
   'responsive-web-design': ResponsiveDesign,

client/src/assets/images/components/index.tsx

@@ -1,9 +1,9 @@
-import AppleLogo from './apple-logo';
 import AmazonLogo from './amazon-logo';
+import AppleLogo from './apple-logo';
+import AsSeenInText from './as-seen-in-text';
+import GoogleLogo from './google-logo';
 import MicrosoftLogo from './microsoft-logo';
 import SpotifyLogo from './spotify-logo';
-import GoogleLogo from './google-logo';
-import AsSeenInText from './as-seen-in-text';
 
 export {
   AmazonLogo,

client/src/client-only-routes/show-certification.tsx

@@ -1,14 +1,19 @@
-import React, { useEffect, useState } from 'react';
-import { bindActionCreators, Dispatch } from 'redux';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
 import { Grid, Row, Col, Image, Button } from '@freecodecamp/react-bootstrap';
+import { isEmpty } from 'lodash-es';
+import React, { useEffect, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
+import { bindActionCreators, Dispatch } from 'redux';
+import { createSelector } from 'reselect';
 
-import ShowProjectLinks from './show-project-links';
+import envData from '../../../config/env.json';
+import { langCodes } from '../../../config/i18n/all-langs';
 import FreeCodeCampLogo from '../assets/icons/FreeCodeCamp-logo';
 import DonateForm from '../components/Donation/DonateForm';
-import { Trans, useTranslation } from 'react-i18next';
 
+import { createFlashMessage } from '../components/Flash/redux';
+import { Loader, Spacer } from '../components/helpers';
+import RedirectHome from '../components/redirect-home';
 import {
   showCertSelector,
   showCertFetchStateSelector,
@@ -20,17 +25,12 @@ import {
   userByNameSelector,
   fetchProfileForUser
 } from '../redux';
-import { certMap } from '../resources/cert-and-project-map';
-import { createFlashMessage } from '../components/Flash/redux';
-import standardErrorMessage from '../utils/standard-error-message';
-import reallyWeirdErrorMessage from '../utils/really-weird-error-message';
-import { langCodes } from '../../../config/i18n/all-langs';
-import envData from '../../../config/env.json';
-
-import RedirectHome from '../components/redirect-home';
-import { Loader, Spacer } from '../components/helpers';
-import { isEmpty } from 'lodash-es';
 import { UserType } from '../redux/prop-types';
+import { certMap } from '../resources/cert-and-project-map';
+import reallyWeirdErrorMessage from '../utils/really-weird-error-message';
+import standardErrorMessage from '../utils/standard-error-message';
+
+import ShowProjectLinks from './show-project-links';
 
 const { clientLocale } = envData as { clientLocale: keyof typeof langCodes };
 

client/src/client-only-routes/show-profile-or-four-oh-four.tsx

@@ -1,17 +1,17 @@
+import { isEmpty } from 'lodash-es';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { isEmpty } from 'lodash-es';
 
+import { isBrowser } from '../../utils/index';
+import FourOhFour from '../components/FourOhFour';
 import Loader from '../components/helpers/loader';
+import Profile from '../components/profile/Profile';
 import {
   userByNameSelector,
   userProfileFetchStateSelector,
   fetchProfileForUser,
   usernameSelector
 } from '../redux';
-import FourOhFour from '../components/FourOhFour';
-import Profile from '../components/profile/Profile';
-import { isBrowser } from '../../utils/index';
 import { UserType } from '../redux/prop-types';
 
 interface IShowProfileOrFourOhFourProps {

client/src/client-only-routes/show-project-links.tsx

@@ -1,19 +1,20 @@
+import { find, first } from 'lodash-es';
 import React, { useState } from 'react';
 import '../components/layouts/project-links.css';
-import { maybeUrlRE } from '../utils';
-import { Spacer, Link } from '../components/helpers';
-import {
-  projectMap,
-  legacyProjectMap
-} from '../resources/cert-and-project-map';
-import ProjectModal from '../components/SolutionViewer/ProjectModal';
-import { find, first } from 'lodash-es';
 import { Trans, useTranslation } from 'react-i18next';
+import ProjectModal from '../components/SolutionViewer/ProjectModal';
+import { Spacer, Link } from '../components/helpers';
 import {
   ChallengeFileType,
   CompletedChallenge,
   UserType
 } from '../redux/prop-types';
+import {
+  projectMap,
+  legacyProjectMap
+} from '../resources/cert-and-project-map';
+
+import { maybeUrlRE } from '../utils';
 
 interface IShowProjectLinksProps {
   certName: string;

client/src/client-only-routes/show-settings.tsx

@@ -1,30 +1,29 @@
+import { Grid } from '@freecodecamp/react-bootstrap';
 import React from 'react';
+import Helmet from 'react-helmet';
+import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { Grid } from '@freecodecamp/react-bootstrap';
-import Helmet from 'react-helmet';
 
 import envData from '../../../config/env.json';
+import { createFlashMessage } from '../components/Flash/redux';
+import { Loader, Spacer } from '../components/helpers';
+import Certification from '../components/settings/Certification';
+import About from '../components/settings/about';
+import DangerZone from '../components/settings/danger-zone';
+import Email from '../components/settings/email';
+import Honesty from '../components/settings/honesty';
+import Internet from '../components/settings/internet';
+import Portfolio from '../components/settings/portfolio';
+import Privacy from '../components/settings/privacy';
 import {
   signInLoadingSelector,
   userSelector,
   isSignedInSelector,
   hardGoTo as navigate
 } from '../redux';
-import { submitNewAbout, updateUserFlag, verifyCert } from '../redux/settings';
-import { createFlashMessage } from '../components/Flash/redux';
-import { useTranslation } from 'react-i18next';
-
-import { Loader, Spacer } from '../components/helpers';
-import About from '../components/settings/about';
-import Privacy from '../components/settings/privacy';
-import Email from '../components/settings/email';
-import Internet from '../components/settings/internet';
-import Portfolio from '../components/settings/portfolio';
-import Honesty from '../components/settings/honesty';
-import Certification from '../components/settings/Certification';
 import { UserType } from '../redux/prop-types';
-import DangerZone from '../components/settings/danger-zone';
+import { submitNewAbout, updateUserFlag, verifyCert } from '../redux/settings';
 
 const { apiLocation } = envData;
 

client/src/client-only-routes/show-unsubscribed.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
 import { Grid, Panel, Button } from '@freecodecamp/react-bootstrap';
+import React from 'react';
 import Helmet from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 
 import envData from '../../../config/env.json';
-import FullWidthRow from '../components/helpers/full-width-row';
 import { Spacer } from '../components/helpers';
+import FullWidthRow from '../components/helpers/full-width-row';
 
 const { apiLocation } = envData;
 

client/src/client-only-routes/show-user.tsx

@@ -1,6 +1,3 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
 import {
   Panel,
   FormControl,
@@ -10,18 +7,21 @@ import {
   Col,
   Row
 } from '@freecodecamp/react-bootstrap';
+import React, { Component } from 'react';
 import Helmet from 'react-helmet';
 import { TFunction, Trans, withTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
 
 import Login from '../components/Header/components/Login';
 
+import { Spacer, Loader, FullWidthRow } from '../components/helpers';
 import {
   isSignedInSelector,
   userFetchStateSelector,
   userSelector,
   reportUser
 } from '../redux';
-import { Spacer, Loader, FullWidthRow } from '../components/helpers';
 
 interface IShowUserProps {
   email: string;

client/src/client/workers/test-evaluator.js

@@ -1,10 +1,10 @@
 import chai from 'chai';
 import '@babel/polyfill';
 import { toString as __toString } from 'lodash-es';
-import { format as __format } from '../../utils/format';
 import curriculumHelpers, {
   removeJSComments
 } from '../../utils/curriculum-helpers';
+import { format as __format } from '../../utils/format';
 
 const __utils = (() => {
   const MAX_LOGS_SIZE = 64 * 1024;

client/src/components/Donation/DonateCompletion.js

@@ -1,8 +1,8 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import { Alert, Button } from '@freecodecamp/react-bootstrap';
-import Spinner from 'react-spinkit';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
+import Spinner from 'react-spinkit';
 
 import './Donation.css';
 

client/src/components/Donation/DonateForm.js

@@ -1,8 +1,4 @@
 /* eslint-disable no-nested-ternary */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
 import {
   Col,
   Row,
@@ -11,7 +7,11 @@ import {
   ToggleButton,
   ToggleButtonGroup
 } from '@freecodecamp/react-bootstrap';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import { withTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
 
 import {
   amountsConfig,
@@ -20,9 +20,6 @@ import {
   defaultDonation,
   modalDefaultDonation
 } from '../../../../config/donation-settings';
-import Spacer from '../helpers/spacer';
-import PaypalButton from './PaypalButton';
-import DonateCompletion from './DonateCompletion';
 import {
   isSignedInSelector,
   signInLoadingSelector,
@@ -32,6 +29,9 @@ import {
   defaultDonationFormState,
   userSelector
 } from '../../redux';
+import Spacer from '../helpers/spacer';
+import DonateCompletion from './DonateCompletion';
+import PaypalButton from './PaypalButton';
 
 import './Donation.css';
 

client/src/components/Donation/DonationModal.js

@@ -1,25 +1,24 @@
 /* eslint-disable max-len */
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
 import { Modal, Button, Col, Row } from '@freecodecamp/react-bootstrap';
-import { Spacer } from '../helpers';
-import Heart from '../../assets/icons/heart';
-import Cup from '../../assets/icons/cup';
-import DonateForm from './DonateForm';
-import { modalDefaultDonation } from '../../../../config/donation-settings';
+import PropTypes from 'prop-types';
+import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
 import { goToAnchor } from 'react-scrollable-anchor';
-import { isLocationSuperBlock } from '../../utils/path-parsers';
-
+import { bindActionCreators } from 'redux';
+import { createSelector } from 'reselect';
+import { modalDefaultDonation } from '../../../../config/donation-settings';
+import Cup from '../../assets/icons/cup';
+import Heart from '../../assets/icons/heart';
 import {
   closeDonationModal,
   isDonationModalOpenSelector,
   recentlyClaimedBlockSelector,
   executeGA
 } from '../../redux';
+import { isLocationSuperBlock } from '../../utils/path-parsers';
+import { Spacer } from '../helpers';
+import DonateForm from './DonateForm';
 
 import './Donation.css';
 

client/src/components/Donation/PayPalButtonScriptLoader.js

@@ -1,11 +1,11 @@
 /* eslint-disable camelcase */
 
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
 
-import { scriptLoader, scriptRemover } from '../../utils/script-loaders';
 import { Loader } from '../../components/helpers';
+import { scriptLoader, scriptRemover } from '../../utils/script-loaders';
 
 export class PayPalButtonScriptLoader extends Component {
   state = { isSdkLoaded: window.paypal && true, isSubscription: true };

client/src/components/Donation/PaypalButton.js

@@ -1,18 +1,17 @@
 /* eslint-disable camelcase */
 
-import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import PayPalButtonScriptLoader from './PayPalButtonScriptLoader';
-import { withTranslation } from 'react-i18next';
-
-import envData from '../../../../config/env.json';
 import {
   paypalConfigurator,
   paypalConfigTypes
 } from '../../../../config/donation-settings';
+import envData from '../../../../config/env.json';
 import { signInLoadingSelector, userSelector } from '../../redux';
+import PayPalButtonScriptLoader from './PayPalButtonScriptLoader';
 
 const { paypalClientId, deploymentEnv } = envData;
 export class PaypalButton extends Component {

client/src/components/Flash/index.tsx

@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
 import { Alert } from '@freecodecamp/react-bootstrap';
-import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import PropTypes from 'prop-types';
+import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
 
 import './flash.css';
 

client/src/components/Flash/redux/index.ts

@@ -1,5 +1,5 @@
-import { createAction, handleActions } from 'redux-actions';
 import { nanoid } from 'nanoid';
+import { createAction, handleActions } from 'redux-actions';
 
 import { createTypes } from '../../../utils/create-types';
 

client/src/components/FourOhFour/index.tsx

@@ -1,11 +1,11 @@
+import { Link } from 'gatsby';
 import React from 'react';
 import Helmet from 'react-helmet';
-import { Spacer } from '../helpers';
-import { Link } from 'gatsby';
 import { useTranslation } from 'react-i18next';
 
 import notFoundLogo from '../../assets/images/freeCodeCamp-404.svg';
 import { randomQuote } from '../../utils/get-words';
+import { Spacer } from '../helpers';
 
 import './404.css';
 

client/src/components/Header/Header.test.js

@@ -1,13 +1,12 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { create } from 'react-test-renderer';
 import ShallowRenderer from 'react-test-renderer/shallow';
 
-import { UniversalNav } from './components/universal-nav';
-import { NavLinks } from './components/nav-links';
-import AuthOrProfile from './components/auth-or-profile';
-
 import envData from '../../../../config/env.json';
-import { useTranslation } from 'react-i18next';
+import AuthOrProfile from './components/auth-or-profile';
+import { NavLinks } from './components/nav-links';
+import { UniversalNav } from './components/universal-nav';
 
 const { apiLocation } = envData;
 

client/src/components/Header/components/Login.tsx

@@ -1,11 +1,11 @@
+import { Button } from '@freecodecamp/react-bootstrap';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { Button } from '@freecodecamp/react-bootstrap';
-import { useTranslation } from 'react-i18next';
 
-import { isSignedInSelector } from '../../../redux';
 import envData from '../../../../../config/env.json';
+import { isSignedInSelector } from '../../../redux';
 
 import './login.css';
 

client/src/components/Header/components/auth-or-profile.tsx

@@ -3,8 +3,8 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 // @ts-nocheck
 import React from 'react';
-import { Link, AvatarRenderer } from '../../helpers';
 import { useTranslation } from 'react-i18next';
+import { Link, AvatarRenderer } from '../../helpers';
 import Login from './Login';
 
 export interface AuthOrProfileProps {

client/src/components/Header/components/nav-links.tsx

@@ -8,10 +8,6 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 // @ts-nocheck
-import React, { Component, Fragment } from 'react';
-import { connect } from 'react-redux';
-import { TFunction, withTranslation } from 'react-i18next';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   faCheck,
   faCheckSquare,
@@ -19,15 +15,19 @@ import {
   faSquare,
   faExternalLinkAlt
 } from '@fortawesome/free-solid-svg-icons';
-import { Link } from '../../helpers';
-import { updateUserFlag } from '../../../redux/settings';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React, { Component, Fragment } from 'react';
+import { TFunction, withTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
 import envData from '../../../../../config/env.json';
-import createLanguageRedirect from '../../create-language-redirect';
 import {
   availableLangs,
   i18nextCodes,
   langDisplayNames
 } from '../../../../../config/i18n/all-langs';
+import { updateUserFlag } from '../../../redux/settings';
+import createLanguageRedirect from '../../create-language-redirect';
+import { Link } from '../../helpers';
 
 const { clientLocale, radioLocation, apiLocation } = envData;
 

client/src/components/Header/components/universal-nav.tsx

@@ -3,14 +3,14 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 /* eslint-disable react/prop-types */
 // @ts-nocheck
+import Loadable from '@loadable/component';
 import React, { Ref } from 'react';
+import { isLanding } from '../../../utils/path-parsers';
 import { Link, SkeletonSprite } from '../../helpers';
-import NavLogo from './nav-logo';
 import MenuButton from './menu-button';
 import NavLinks from './nav-links';
+import NavLogo from './nav-logo';
 import './universal-nav.css';
-import { isLanding } from '../../../utils/path-parsers';
-import Loadable from '@loadable/component';
 
 const SearchBar = Loadable(() => import('../../search/searchBar/search-bar'));
 const SearchBarOptimized = Loadable(

client/src/components/Header/components/user-state.tsx

@@ -2,12 +2,12 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import React from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
 import { Link } from 'gatsby';
-import Spinner from 'react-spinkit';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
+import Spinner from 'react-spinkit';
+import { createSelector } from 'reselect';
 
 import { isSignedInSelector, userFetchStateSelector } from '../../../redux';
 import Login from './Login';

client/src/components/Intro/Intro.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
 import { Provider } from 'react-redux';
+import renderer from 'react-test-renderer';
 import { createStore } from '../../redux/createStore';
 
 import Intro from './';

client/src/components/Intro/components/IntroDescription.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Link, Spacer } from '../../helpers';
-import envData from '../../../../../config/env.json';
 import { Trans, useTranslation } from 'react-i18next';
+import envData from '../../../../../config/env.json';
+import { Link, Spacer } from '../../helpers';
 
 import '../intro.css';
 

client/src/components/Intro/index.js

@@ -1,13 +1,13 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import { Link, Spacer, Loader, FullWidthRow } from '../helpers';
+import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 import { randomQuote } from '../../utils/get-words';
+import Login from '../Header/components/Login';
+import { Link, Spacer, Loader, FullWidthRow } from '../helpers';
 import CurrentChallengeLink from '../helpers/current-challenge-link';
 import IntroDescription from './components/IntroDescription';
-import { Trans, useTranslation } from 'react-i18next';
 
 import './intro.css';
-import Login from '../Header/components/Login';
 
 const propTypes = {
   complete: PropTypes.bool,

client/src/components/Map/Map.test.js

@@ -1,9 +1,9 @@
-import React from 'react';
-import { useStaticQuery } from 'gatsby';
 import { render } from '@testing-library/react';
+import { useStaticQuery } from 'gatsby';
+import React from 'react';
 
-import { Map } from './';
 import mockChallengeNodes from '../../__mocks__/challenge-nodes';
+import { Map } from './';
 
 beforeEach(() => {
   useStaticQuery.mockImplementationOnce(() => ({

client/src/components/Map/index.js

@@ -1,14 +1,15 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import { graphql, useStaticQuery } from 'gatsby';
 import i18next from 'i18next';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import envData from '../../../../config/env.json';
+import { isAuditedCert } from '../../../../utils/is-audited';
 import { generateIconComponent } from '../../assets/icons';
 
-import { Link, Spacer } from '../helpers';
 import LinkButton from '../../assets/icons/link-button';
+import { Link, Spacer } from '../helpers';
 import './map.css';
-import { isAuditedCert } from '../../../../utils/is-audited';
-import envData from '../../../../config/env.json';
 
 const { curriculumLocale } = envData;
 

client/src/components/SolutionViewer/ProjectModal.js

@@ -1,8 +1,8 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import SolutionViewer from './SolutionViewer';
 import { Button, Modal } from '@freecodecamp/react-bootstrap';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
+import SolutionViewer from './SolutionViewer';
 
 const propTypes = {
   files: PropTypes.arrayOf(

client/src/components/SolutionViewer/SolutionViewer.js

@@ -1,7 +1,7 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import { Panel } from '@freecodecamp/react-bootstrap';
 import Prism from 'prismjs';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 const prismLang = {
   css: 'css',

client/src/components/app-mount-notifier.test.tsx

@@ -1,12 +1,12 @@
+import { render, waitFor } from '@testing-library/react';
 import React from 'react';
 import { I18nextProvider } from 'react-i18next';
-import { render, waitFor } from '@testing-library/react';
 import { Provider } from 'react-redux';
 
 import { i18nextCodes } from '../../../config/i18n/all-langs';
-import AppMountNotifier from './app-mount-notifier';
-import { createStore } from '../redux/createStore';
 import i18nTestConfig from '../../i18n/configForTests';
+import { createStore } from '../redux/createStore';
+import AppMountNotifier from './app-mount-notifier';
 
 jest.mock('react-ga');
 jest.unmock('react-i18next');

client/src/components/app-mount-notifier.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
-import { bindActionCreators, Dispatch } from 'redux';
-import { connect } from 'react-redux';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
+import { bindActionCreators, Dispatch } from 'redux';
 
 import { appMount } from '../redux';
 

client/src/components/formHelpers/Form.js

@@ -1,5 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import { Form } from 'react-final-form';
 
 import {

client/src/components/formHelpers/Form.test.js

@@ -1,5 +1,5 @@
-import React from 'react';
 import { render, fireEvent, screen } from '@testing-library/react';
+import React from 'react';
 
 import Form from './Form';
 

client/src/components/formHelpers/FormFields.js

@@ -1,7 +1,3 @@
-import React from 'react';
-import { kebabCase } from 'lodash-es';
-import normalizeUrl from 'normalize-url';
-import PropTypes from 'prop-types';
 import {
   Alert,
   Col,
@@ -10,6 +6,10 @@ import {
   FormGroup,
   HelpBlock
 } from '@freecodecamp/react-bootstrap';
+import { kebabCase } from 'lodash-es';
+import normalizeUrl from 'normalize-url';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { Field } from 'react-final-form';
 import {
   editorValidator,

client/src/components/formHelpers/block-save-button.test.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
+import React from 'react';
 
 import BlockSaveButton from './block-save-button';
 

client/src/components/formHelpers/block-save-button.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { Button } from '@freecodecamp/react-bootstrap';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 function BlockSaveButton(props?: Record<string, unknown>): JSX.Element {

client/src/components/formHelpers/block-save-wrapper.test.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { render } from '@testing-library/react';
+import React from 'react';
 
 import BlockSaveWrapper from './block-save-wrapper';
 

client/src/components/helpers/avatar-renderer.tsx

@@ -1,9 +1,9 @@
-import React, { useState, useEffect } from 'react';
 import { Image } from '@freecodecamp/react-bootstrap';
-import DefaultAvatar from '../../assets/icons/default-avatar';
-import { defaultUserImage } from '../../../../config/misc';
-import { borderColorPicker } from '.';
+import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
+import { defaultUserImage } from '../../../../config/misc';
+import DefaultAvatar from '../../assets/icons/default-avatar';
+import { borderColorPicker } from '.';
 
 interface AvatarRendererProps {
   isDonating?: boolean;

client/src/components/helpers/form/block-save-button.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { Button } from '@freecodecamp/react-bootstrap';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 function BlockSaveButton({

client/src/components/helpers/full-width-row.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { Row, Col } from '@freecodecamp/react-bootstrap';
+import React from 'react';
 
 function FullWidthRow({
   children,

client/src/components/helpers/link.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { Link as GatsbyLink } from 'gatsby';
+import React from 'react';
 
 interface LinkProps {
   children?: React.ReactNode;

client/src/components/helpers/loader.test.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { render, cleanup, screen } from '@testing-library/react';
+import React from 'react';
 
 import Loader from './loader';
 

client/src/components/helpers/slim-width-row.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { Row, Col } from '@freecodecamp/react-bootstrap';
+import React from 'react';
 
 interface SlimWidthRowProps {
   children: JSX.ElementChildrenAttribute;

client/src/components/helpers/toggle-button.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
 import {
   ToggleButtonGroup as BSBG,
   ToggleButton as TB
 } from '@freecodecamp/react-bootstrap';
+import React from 'react';
 
 import './toggle-button.css';
-import ToggleCheck from '../../assets/icons/toggle-check';
 import Spacer from '../../assets/icons/spacer';
+import ToggleCheck from '../../assets/icons/toggle-check';
 
 interface ButtonProps {
   name: string;

client/src/components/landing/Landing.test.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import ShallowRenderer from 'react-test-renderer/shallow';
 
-import IndexPage from '../../pages';
 import mockChallengeNodes from '../../__mocks__/challenge-nodes';
+import IndexPage from '../../pages';
 
 jest.mock('../../analytics');
 

client/src/components/landing/components/AsSeenIn.js

@@ -1,7 +1,7 @@
-import React from 'react';
 import { Col, Row } from '@freecodecamp/react-bootstrap';
-import { AsSeenInText } from '../../../assets/images/components';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { AsSeenInText } from '../../../assets/images/components';
 
 const AsSeenIn = () => {
   const { t } = useTranslation();

client/src/components/landing/components/BigCallToAction.js

@@ -1,7 +1,7 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import Login from '../../Header/components/Login';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
+import Login from '../../Header/components/Login';
 
 const propTypes = {
   page: PropTypes.string

client/src/components/landing/components/CampersImage.js

@@ -1,9 +1,9 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import Media from 'react-responsive';
-import { Spacer, ImageLoader } from '../../helpers';
-import wideImg from '../../../assets/images/landing/wide-image.png';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
+import Media from 'react-responsive';
+import wideImg from '../../../assets/images/landing/wide-image.png';
+import { Spacer, ImageLoader } from '../../helpers';
 
 const propTypes = {
   page: PropTypes.string

client/src/components/landing/components/Certifications.js

@@ -1,10 +1,10 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import { Col, Row } from '@freecodecamp/react-bootstrap';
-import { Spacer } from '../../helpers';
-import BigCallToAction from './BigCallToAction';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import Map from '../../Map/index';
+import { Spacer } from '../../helpers';
+import BigCallToAction from './BigCallToAction';
 
 const propTypes = {
   page: PropTypes.string

client/src/components/landing/components/LandingTop.js

@@ -1,7 +1,7 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import { Col, Row } from '@freecodecamp/react-bootstrap';
-import { Spacer } from '../../helpers';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   AmazonLogo,
   AppleLogo,
@@ -9,9 +9,9 @@ import {
   SpotifyLogo,
   GoogleLogo
 } from '../../../assets/images/components';
-import CampersImage from './CampersImage';
+import { Spacer } from '../../helpers';
 import BigCallToAction from './BigCallToAction';
-import { useTranslation } from 'react-i18next';
+import CampersImage from './CampersImage';
 
 const propTypes = {
   page: PropTypes.string

client/src/components/landing/components/Testimonials.js

@@ -1,11 +1,11 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 
-import { ImageLoader } from '../../helpers';
-import shawnImg from '../../../assets/images/landing/Shawn.png';
-import sarahImg from '../../../assets/images/landing/Sarah.png';
-import emmaImg from '../../../assets/images/landing/Emma.png';
 import { Trans, useTranslation } from 'react-i18next';
+import emmaImg from '../../../assets/images/landing/Emma.png';
+import sarahImg from '../../../assets/images/landing/Sarah.png';
+import shawnImg from '../../../assets/images/landing/Shawn.png';
+import { ImageLoader } from '../../helpers';
 
 const propTypes = {
   page: PropTypes.string

client/src/components/landing/index.js

@@ -1,13 +1,13 @@
-import React from 'react';
 import { Grid } from '@freecodecamp/react-bootstrap';
-import Helmet from 'react-helmet';
 import PropTypes from 'prop-types';
+import React from 'react';
+import Helmet from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 
-import Testimonials from './components/Testimonials';
-import LandingTop from './components/LandingTop';
-import Certifications from './components/Certifications';
 import AsSeenIn from './components/AsSeenIn';
+import Certifications from './components/Certifications';
+import LandingTop from './components/LandingTop';
+import Testimonials from './components/Testimonials';
 
 import './landing.css';
 

client/src/components/layouts/Certification.js

@@ -1,10 +1,10 @@
-import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Helmet from 'react-helmet';
 import { connect } from 'react-redux';
 
-import { fetchUser, isSignedInSelector, executeGA } from '../../redux';
 import { createSelector } from 'reselect';
-import Helmet from 'react-helmet';
+import { fetchUser, isSignedInSelector, executeGA } from '../../redux';
 
 const mapStateToProps = createSelector(isSignedInSelector, isSignedIn => ({
   isSignedIn

client/src/components/layouts/Default.js

@@ -1,12 +1,19 @@
-import React, { Component } from 'react';
+import fontawesome from '@fortawesome/fontawesome';
 import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Helmet from 'react-helmet';
+import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { createSelector } from 'reselect';
-import Helmet from 'react-helmet';
-import fontawesome from '@fortawesome/fontawesome';
-import { withTranslation } from 'react-i18next';
 
+import latoBoldURL from '../../../static/fonts/lato/Lato-Bold.woff';
+import latoLightURL from '../../../static/fonts/lato/Lato-Light.woff';
+import latoRegularURL from '../../../static/fonts/lato/Lato-Regular.woff';
+import robotoBoldURL from '../../../static/fonts/roboto-mono/RobotoMono-Bold.woff';
+import robotoItalicURL from '../../../static/fonts/roboto-mono/RobotoMono-Italic.woff';
+import robotoRegularURL from '../../../static/fonts/roboto-mono/RobotoMono-Regular.woff';
+import { isBrowser } from '../../../utils';
 import {
   fetchUser,
   isSignedInSelector,
@@ -17,24 +24,16 @@ import {
   usernameSelector,
   executeGA
 } from '../../redux';
+import Flash from '../Flash';
 import { flashMessageSelector, removeFlashMessage } from '../Flash/redux';
 
-import { isBrowser } from '../../../utils';
-
-import OfflineWarning from '../OfflineWarning';
-import Flash from '../Flash';
-import Header from '../Header';
 import Footer from '../Footer';
+import Header from '../Header';
+import OfflineWarning from '../OfflineWarning';
 // preload common fonts
-import latoLightURL from '../../../static/fonts/lato/Lato-Light.woff';
-import latoRegularURL from '../../../static/fonts/lato/Lato-Regular.woff';
-import latoBoldURL from '../../../static/fonts/lato/Lato-Bold.woff';
 // eslint-disable-next-line max-len
-import robotoRegularURL from '../../../static/fonts/roboto-mono/RobotoMono-Regular.woff';
 // eslint-disable-next-line max-len
-import robotoBoldURL from '../../../static/fonts/roboto-mono/RobotoMono-Bold.woff';
 // eslint-disable-next-line max-len
-import robotoItalicURL from '../../../static/fonts/roboto-mono/RobotoMono-Italic.woff';
 
 import './fonts.css';
 import './global.css';

client/src/components/layouts/learn.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
-import { createSelector } from 'reselect';
-import { connect } from 'react-redux';
 import { Helmet } from 'react-helmet';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
 import { Loader } from '../../components/helpers';
 import {
   userSelector,
@@ -9,8 +9,8 @@ import {
   isSignedInSelector,
   tryToShowDonationModal
 } from '../../redux';
-import createRedirect from '../create-redirect';
 import DonateModal from '../Donation/DonationModal';
+import createRedirect from '../create-redirect';
 
 import './prism.css';
 import './prism-night.css';

client/src/components/profile/Profile.test.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
+import React from 'react';
 
 import Profile from './Profile';
 

client/src/components/profile/Profile.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
 import { Grid, Row } from '@freecodecamp/react-bootstrap';
+import React from 'react';
 import Helmet from 'react-helmet';
 import { TFunction, useTranslation } from 'react-i18next';
 
 import { CurrentChallengeLink, FullWidthRow, Link, Spacer } from '../helpers';
 import Camper from './components/Camper';
-import HeatMap from './components/HeatMap';
 import Certifications from './components/Certifications';
+import HeatMap from './components/HeatMap';
 import Portfolio from './components/Portfolio';
 import Timeline from './components/TimeLine';
 

client/src/components/profile/components/Camper.tsx

@@ -1,22 +1,21 @@
-import React from 'react';
-import { Col, Row } from '@freecodecamp/react-bootstrap';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   faAward,
   faCalendar,
   faHeart
 } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Col, Row } from '@freecodecamp/react-bootstrap';
+import React from 'react';
 import { TFunction, useTranslation } from 'react-i18next';
 
+import envData from '../../../../../config/env.json';
+import { langCodes } from '../../../../../config/i18n/all-langs';
 import { AvatarRenderer } from '../../helpers';
-import SocialIcons from './SocialIcons';
 import Link from '../../helpers/link';
+import SocialIcons from './SocialIcons';
 
 import './camper.css';
 
-import { langCodes } from '../../../../../config/i18n/all-langs';
-import envData from '../../../../../config/env.json';
-
 const { clientLocale } = envData;
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore

client/src/components/profile/components/Certifications.tsx

@@ -1,9 +1,9 @@
-import React, { Fragment } from 'react';
-import { curry } from 'lodash-es';
-import { createSelector } from 'reselect';
-import { connect } from 'react-redux';
 import { Col, Row } from '@freecodecamp/react-bootstrap';
+import { curry } from 'lodash-es';
+import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
 
 import { certificatesByNameSelector } from '../../../redux';
 import { ButtonSpacer, FullWidthRow, Link, Spacer } from '../../helpers';

client/src/components/profile/components/HeatMap.test.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
+import React from 'react';
 
 import HeatMap from './HeatMap';
 

client/src/components/profile/components/HeatMap.tsx

@@ -1,25 +1,24 @@
-import React, { Component } from 'react';
+import { Row } from '@freecodecamp/react-bootstrap';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import CalendarHeatMap from '@freecodecamp/react-calendar-heatmap';
-import { Row } from '@freecodecamp/react-bootstrap';
-import ReactTooltip from 'react-tooltip';
 import addDays from 'date-fns/addDays';
 import addMonths from 'date-fns/addMonths';
-import startOfDay from 'date-fns/startOfDay';
 import isEqual from 'date-fns/isEqual';
+import startOfDay from 'date-fns/startOfDay';
+import React, { Component } from 'react';
 import { TFunction, useTranslation } from 'react-i18next';
-
-import FullWidthRow from '../../helpers/full-width-row';
-import Spacer from '../../helpers/spacer';
+import ReactTooltip from 'react-tooltip';
 
 import '@freecodecamp/react-calendar-heatmap/dist/styles.css';
 import './heatmap.css';
 
-import { langCodes } from '../../../../../config/i18n/all-langs';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import envData from '../../../../../config/env.json';
+import { langCodes } from '../../../../../config/i18n/all-langs';
+import FullWidthRow from '../../helpers/full-width-row';
+import Spacer from '../../helpers/spacer';
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 const { clientLocale } = envData;

client/src/components/profile/components/Portfolio.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { Media } from '@freecodecamp/react-bootstrap';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { FullWidthRow } from '../../helpers';

client/src/components/profile/components/SocialIcons.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
-import { Row, Col } from '@freecodecamp/react-bootstrap';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   faLinkedin,
   faGithub,
   faTwitter
 } from '@fortawesome/free-brands-svg-icons';
 import { faLink } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Row, Col } from '@freecodecamp/react-bootstrap';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import './social-icons.css';