Upgrade prettier before it will be removed forever

2025-05-31 14:11:58 +05:30 · 2020-05-20 19:35:52 +03:00
parent 39576c0480
commit 2d903f96fc
108 changed files with 422 additions and 547 deletions
--- a/packages/app/components/accounts/AccountSwitcher.tsx
+++ b/packages/app/components/accounts/AccountSwitcher.tsx
@@ -57,7 +57,9 @@ export class AccountSwitcher extends React.Component<Props> {
    let { available } = accounts;

    if (highlightActiveAccount) {
-      available = available.filter(account => account.id !== activeAccount.id);
+      available = available.filter(
+        (account) => account.id !== activeAccount.id,
+      );
    }

    return (
@@ -152,7 +154,7 @@ export class AccountSwitcher extends React.Component<Props> {
              className={styles.addAccount}
              label={
                <Message {...messages.addAccount}>
-                  {message => (
+                  {(message) => (
                    <span>
                      <div className={styles.addIcon} />
                      {message}
@@ -178,7 +180,7 @@ export class AccountSwitcher extends React.Component<Props> {
      .then(() => this.props.onSwitch(account))
      // we won't sent any logs to sentry, because an error should be already
      // handled by external logic
-      .catch(error => console.warn('Error switching account', { error }))
+      .catch((error) => console.warn('Error switching account', { error }))
      .finally(() => loader.hide());
  };

--- a/packages/app/components/accounts/actions.test.ts
+++ b/packages/app/components/accounts/actions.test.ts
@@ -48,7 +48,7 @@ describe('components/accounts/actions', () => {

  beforeEach(() => {
    dispatch = sinon
-      .spy(arg => (typeof arg === 'function' ? arg(dispatch, getState) : arg))
+      .spy((arg) => (typeof arg === 'function' ? arg(dispatch, getState) : arg))
      .named('store.dispatch');
    getState = sinon.stub().named('store.getState');

@@ -146,7 +146,7 @@ describe('components/accounts/actions', () => {
      ));

    it('resolves with account', () =>
-      authenticate(account)(dispatch, getState, undefined).then(resp =>
+      authenticate(account)(dispatch, getState, undefined).then((resp) =>
        expect(resp, 'to equal', account),
      ));

--- a/packages/app/components/accounts/actions.ts
+++ b/packages/app/components/accounts/actions.ts
@@ -53,7 +53,7 @@ export function authenticate(
    }

    const knownAccount = getState().accounts.available.find(
-      item => item.id === accountId,
+      (item) => item.id === accountId,
    );

    if (knownAccount) {
@@ -246,10 +246,10 @@ export function requestNewToken(): ThunkAction<Promise<void>> {
    }

    return requestToken(refreshToken)
-      .then(token => {
+      .then((token) => {
        dispatch(updateToken(token));
      })
-      .catch(resp => {
+      .catch((resp) => {
        // all the logic to get the valid token was failed,
        // looks like we have some problems with token
        // lets redirect to login page
@@ -313,7 +313,7 @@ export function logoutAll(): ThunkAction<Promise<void>> {
      accounts: { available },
    } = getState();

-    available.forEach(account =>
+    available.forEach((account) =>
      logout(account.token).catch(() => {
        // we don't care
      }),
@@ -345,10 +345,12 @@ export function logoutStrangers(): ThunkAction<Promise<void>> {
      !refreshToken && !sessionStorage.getItem(`stranger${id}`);

    if (available.some(isStranger)) {
-      const accountToReplace = available.find(account => !isStranger(account));
+      const accountToReplace = available.find(
+        (account) => !isStranger(account),
+      );

      if (accountToReplace) {
-        available.filter(isStranger).forEach(account => {
+        available.filter(isStranger).forEach((account) => {
          dispatch(remove(account));
          logout(account.token);
        });
--- a/packages/app/components/accounts/reducer.ts
+++ b/packages/app/components/accounts/reducer.ts
@@ -17,7 +17,7 @@ export function getActiveAccount(state: { accounts: State }): Account | null {
  const accountId = state.accounts.active;

  return (
-    state.accounts.available.find(account => account.id === accountId) || null
+    state.accounts.available.find((account) => account.id === accountId) || null
  );
 }

@@ -43,7 +43,7 @@ export default function accounts(
      const { payload } = action;

      state.available = state.available
-        .filter(account => account.id !== payload.id)
+        .filter((account) => account.id !== payload.id)
        .concat(payload);

      state.available.sort((account1, account2) => {
@@ -65,7 +65,7 @@ export default function accounts(
      const { payload } = action;

      return {
-        available: state.available.map(account => {
+        available: state.available.map((account) => {
          if (account.id === payload.id) {
            return { ...payload };
          }
@@ -91,7 +91,9 @@ export default function accounts(

      return {
        ...state,
-        available: state.available.filter(account => account.id !== payload.id),
+        available: state.available.filter(
+          (account) => account.id !== payload.id,
+        ),
      };
    }

@@ -104,7 +106,7 @@ export default function accounts(

      return {
        ...state,
-        available: state.available.map(account => {
+        available: state.available.map((account) => {
          if (account.id === state.active) {
            return {
              ...account,
--- a/packages/app/components/auth/AuthTitle.tsx
+++ b/packages/app/components/auth/AuthTitle.tsx
@@ -5,7 +5,7 @@ import { FormattedMessage as Message, MessageDescriptor } from 'react-intl';
 export default function AuthTitle({ title }: { title: MessageDescriptor }) {
  return (
    <Message {...title}>
-      {msg => (
+      {(msg) => (
        <span>
          {msg}
          <Helmet title={msg as string} />
--- a/packages/app/components/auth/PanelTransition.tsx
+++ b/packages/app/components/auth/PanelTransition.tsx
@@ -1,4 +1,9 @@
-import React, { CSSProperties, MouseEventHandler, ReactElement, ReactNode } from 'react';
+import React, {
+  CSSProperties,
+  MouseEventHandler,
+  ReactElement,
+  ReactNode,
+} from 'react';
 import { AccountsState } from 'app/components/accounts';
 import { User } from 'app/components/user';
 import { connect } from 'react-redux';
@@ -64,7 +69,7 @@ if (process.env.NODE_ENV !== 'production') {
  // TODO: it may be moved to tests in future

  contexts.reduce((acc, context) => {
-    context.forEach(panel => {
+    context.forEach((panel) => {
      if (acc[panel]) {
        throw new Error(
          `Panel ${panel} is already exists in context ${JSON.stringify(
@@ -186,7 +191,7 @@ class PanelTransition extends React.PureComponent<Props, State> {
  }

  componentWillUnmount() {
-    this.timerIds.forEach(id => clearTimeout(id));
+    this.timerIds.forEach((id) => clearTimeout(id));
    this.timerIds = [];
  }

@@ -262,7 +267,7 @@ class PanelTransition extends React.PureComponent<Props, State> {
          willEnter={this.willEnter}
          willLeave={this.willLeave}
        >
-          {items => {
+          {(items) => {
            const panels = items.filter(({ key }) => key !== 'common');
            const [common] = items.filter(({ key }) => key === 'common');

@@ -289,7 +294,7 @@ class PanelTransition extends React.PureComponent<Props, State> {
              >
                <Panel>
                  <PanelHeader>
-                    {panels.map(config => this.getHeader(config))}
+                    {panels.map((config) => this.getHeader(config))}
                  </PanelHeader>
                  <div style={contentHeight}>
                    <MeasureHeight
@@ -298,11 +303,11 @@ class PanelTransition extends React.PureComponent<Props, State> {
                    >
                      <PanelBody>
                        <div style={bodyHeight}>
-                          {panels.map(config => this.getBody(config))}
+                          {panels.map((config) => this.getBody(config))}
                        </div>
                      </PanelBody>
                      <PanelFooter>
-                        {panels.map(config => this.getFooter(config))}
+                        {panels.map((config) => this.getFooter(config))}
                      </PanelFooter>
                    </MeasureHeight>
                  </div>
@@ -311,7 +316,7 @@ class PanelTransition extends React.PureComponent<Props, State> {
                  className={helpLinksStyles}
                  data-testid="auth-controls-secondary"
                >
-                  {panels.map(config => this.getLinks(config))}
+                  {panels.map((config) => this.getLinks(config))}
                </div>
              </Form>
            );
@@ -356,7 +361,7 @@ class PanelTransition extends React.PureComponent<Props, State> {
    const fromLeft = -1;
    const fromRight = 1;

-    const currentContext = contexts.find(context => context.includes(key));
+    const currentContext = contexts.find((context) => context.includes(key));

    if (!currentContext) {
      throw new Error(`Can not find settings for ${key} panel`);
@@ -377,7 +382,7 @@ class PanelTransition extends React.PureComponent<Props, State> {
  }

  getDirection(next: PanelId, prev: PanelId): 'X' | 'Y' {
-    const context = contexts.find(item => item.includes(prev));
+    const context = contexts.find((item) => item.includes(prev));

    if (!context) {
      throw new Error(`Can not find context for transition ${prev} -> ${next}`);
@@ -521,11 +526,11 @@ class PanelTransition extends React.PureComponent<Props, State> {
        key={`body/${key}`}
        style={transitionStyle}
        state={this.shouldMeasureHeight()}
-        onMeasure={height => this.onUpdateHeight(height, key)}
+        onMeasure={(height) => this.onUpdateHeight(height, key)}
      >
        {React.cloneElement(Body, {
          // @ts-ignore
-          ref: body => {
+          ref: (body) => {
            this.body = body;
          },
        })}
@@ -596,7 +601,7 @@ class PanelTransition extends React.PureComponent<Props, State> {
  }

  requestRedraw = (): Promise<void> =>
-    new Promise(resolve =>
+    new Promise((resolve) =>
      this.setState({ isHeightDirty: true }, () => {
        this.setState({ isHeightDirty: false });

--- a/packages/app/components/auth/RejectionLink.tsx
+++ b/packages/app/components/auth/RejectionLink.tsx
@@ -25,7 +25,7 @@ const RejectionLink: ComponentType<Props> = ({
  return (
    <a
      href="#"
-      onClick={event => {
+      onClick={(event) => {
        event.preventDefault();

        context.reject(payload);
--- a/packages/app/components/auth/actions.test.ts
+++ b/packages/app/components/auth/actions.test.ts
@@ -176,7 +176,7 @@ describe('components/auth/actions', () => {

      (request.post as any).returns(Promise.reject(resp));

-      return callThunk(oAuthComplete).catch(error => {
+      return callThunk(oAuthComplete).catch((error) => {
        expect(error.acceptRequired, 'to be true');
        expectDispatchCalls([[requirePermissionsAccept()]]);
      });
--- a/packages/app/components/auth/actions.ts
+++ b/packages/app/components/auth/actions.ts
@@ -87,10 +87,10 @@ export function login({
  totp?: string;
  rememberMe?: boolean;
 }) {
-  return wrapInLoader(dispatch =>
+  return wrapInLoader((dispatch) =>
    loginEndpoint({ login, password, totp, rememberMe })
      .then(authHandler(dispatch))
-      .catch(resp => {
+      .catch((resp) => {
        if (resp.errors) {
          if (resp.errors.password === PASSWORD_REQUIRED) {
            return dispatch(setLogin(login));
@@ -118,7 +118,7 @@ export function login({
 }

 export function acceptRules() {
-  return wrapInLoader(dispatch =>
+  return wrapInLoader((dispatch) =>
    dispatch(userAcceptRules()).catch(validationErrorsHandler(dispatch)),
  );
 }
@@ -152,7 +152,7 @@ export function recoverPassword({
  newPassword: string;
  newRePassword: string;
 }) {
-  return wrapInLoader(dispatch =>
+  return wrapInLoader((dispatch) =>
    recoverPasswordEndpoint(key, newPassword, newRePassword)
      .then(authHandler(dispatch))
      .catch(validationErrorsHandler(dispatch, '/forgot-password')),
@@ -205,7 +205,7 @@ export function activate({
 }: {
  key: string;
 }): ThunkAction<Promise<Account>> {
-  return wrapInLoader(dispatch =>
+  return wrapInLoader((dispatch) =>
    activateEndpoint(key)
      .then(authHandler(dispatch))
      .catch(validationErrorsHandler(dispatch, '/resend-activation')),
@@ -219,9 +219,9 @@ export function resendActivation({
  email: string;
  captcha: string;
 }) {
-  return wrapInLoader(dispatch =>
+  return wrapInLoader((dispatch) =>
    resendActivationEndpoint(email, captcha)
-      .then(resp => {
+      .then((resp) => {
        dispatch(
          updateUser({
            email,
@@ -368,17 +368,17 @@ const KNOWN_SCOPES: ReadonlyArray<string> = [
 export function oAuthValidate(oauthData: OauthData) {
  // TODO: move to oAuth actions?
  // test request: /oauth?client_id=ely&redirect_uri=http%3A%2F%2Fely.by&response_type=code&scope=minecraft_server_session&description=foo
-  return wrapInLoader(dispatch =>
+  return wrapInLoader((dispatch) =>
    oauth
      .validate(oauthData)
-      .then(resp => {
+      .then((resp) => {
        const { scopes } = resp.session;
        const invalidScopes = scopes.filter(
-          scope => !KNOWN_SCOPES.includes(scope),
+          (scope) => !KNOWN_SCOPES.includes(scope),
        );
        let prompt = (oauthData.prompt || 'none')
          .split(',')
-          .map(item => item.trim());
+          .map((item) => item.trim());

        if (prompt.includes('none')) {
          prompt = ['none'];
@@ -415,7 +415,7 @@ export function oAuthValidate(oauthData: OauthData) {
 /**
 * @param {object} params
 * @param {bool} params.accept=false
- *
+ * @param params.accept
 * @returns {Promise}
 */
 export function oAuthComplete(params: { accept?: boolean } = {}) {
@@ -638,12 +638,12 @@ function wrapInLoader<T>(fn: ThunkAction<Promise<T>>): ThunkAction<Promise<T>> {
    const endLoading = () => dispatch(setLoadingState(false));

    return fn(dispatch, getState, undefined).then(
-      resp => {
+      (resp) => {
        endLoading();

        return resp;
      },
-      resp => {
+      (resp) => {
        endLoading();

        return Promise.reject(resp);
@@ -668,7 +668,7 @@ function authHandler(dispatch: Dispatch) {
        token: oAuthResp.access_token,
        refreshToken: oAuthResp.refresh_token || null,
      }),
-    ).then(resp => {
+    ).then((resp) => {
      dispatch(setLogin(null));

      return resp;
@@ -684,7 +684,7 @@ function validationErrorsHandler(
    data?: Record<string, any>;
  }>,
 ) => Promise<never> {
-  return resp => {
+  return (resp) => {
    if (resp.errors) {
      const [firstError] = Object.keys(resp.errors);
      const firstErrorObj: ValidationError = {
@@ -711,7 +711,7 @@ function validationErrorsHandler(
      }

      // TODO: can I clone the object or its necessary to catch modified errors list on corresponding catches?
-      const errors: Record<string, ValidationError> = resp.errors;
+      const { errors } = resp;
      errors[firstError] = firstErrorObj;

      dispatch(setErrors(errors));
--- a/packages/app/components/auth/factory.tsx
+++ b/packages/app/components/auth/factory.tsx
@@ -25,7 +25,7 @@ interface FactoryParams {
  links?: RejectionLinkProps | Array<RejectionLinkProps>;
 }

-export default function({
+export default function ({
  title,
  body,
  footer,
--- a/packages/app/components/auth/finish/Finish.tsx
+++ b/packages/app/components/auth/finish/Finish.tsx
@@ -84,7 +84,7 @@ class Finish extends React.Component<Props> {
    );
  }

-  onCopyClick: MouseEventHandler = event => {
+  onCopyClick: MouseEventHandler = (event) => {
    event.preventDefault();

    const { code } = this.props;
--- a/packages/app/components/auth/login/Login.ts
+++ b/packages/app/components/auth/login/Login.ts
@@ -10,7 +10,7 @@ export default factory({
    label: messages.next,
  },
  links: {
-    isAvailable: context => !context.user.isGuest,
+    isAvailable: (context) => !context.user.isGuest,
    label: messages.createNewAccount,
  },
 });
--- a/packages/app/components/auth/permissions/PermissionsBody.tsx
+++ b/packages/app/components/auth/permissions/PermissionsBody.tsx
@@ -41,7 +41,7 @@ export default class PermissionsBody extends BaseAuthBody {
            <Message {...messages.theAppNeedsAccess2} />
          </div>
          <ul className={styles.permissionsList}>
-            {scopes.map(scope => {
+            {scopes.map((scope) => {
              const key = `scope_${scope}`;
              const message = messages[key];

@@ -50,7 +50,7 @@ export default class PermissionsBody extends BaseAuthBody {
                  {message ? (
                    <Message {...message} />
                  ) : (
-                    scope.replace(/^\w|_/g, match =>
+                    scope.replace(/^\w|_/g, (match) =>
                      match.replace('_', ' ').toUpperCase(),
                    )
                  )}
--- a/packages/app/components/contact/ContactForm.test.tsx
+++ b/packages/app/components/contact/ContactForm.test.tsx
@@ -40,7 +40,7 @@ describe('ContactForm', () => {
        type: 'TextArea',
        name: 'message',
      },
-    ].forEach(el => {
+    ].forEach((el) => {
      it(`should have ${el.name} field`, () => {
        expect(component.find(`${el.type}[name="${el.name}"]`), 'to satisfy', {
          length: 1,
@@ -107,7 +107,7 @@ describe('ContactForm', () => {

      wrapper = mount(
        <IntlProvider locale="en" defaultLocale="en">
-          <ContactForm user={user} ref={el => (component = el!)} />
+          <ContactForm user={user} ref={(el) => (component = el!)} />
        </IntlProvider>,
      );
    });
@@ -143,7 +143,7 @@ describe('ContactForm', () => {
      // TODO: try to rewrite with unexpected-react
      wrapper = mount(
        <IntlProvider locale="en" defaultLocale="en">
-          <ContactForm user={user} ref={el => (component = el!)} />
+          <ContactForm user={user} ref={(el) => (component = el!)} />
        </IntlProvider>,
      );

--- a/packages/app/components/contact/ContactForm.tsx
+++ b/packages/app/components/contact/ContactForm.tsx
@@ -187,7 +187,7 @@ export class ContactForm extends React.Component<
          lastEmail: this.form.value('email'),
        }),
      )
-      .catch(resp => {
+      .catch((resp) => {
        if (resp.errors) {
          this.form.setErrors(resp.errors);

--- a/packages/app/components/contact/ContactLink.tsx
+++ b/packages/app/components/contact/ContactLink.tsx
@@ -12,7 +12,7 @@ function ContactLink({ createContactPopup, ...props }: Props) {
    <a
      href="#"
      data-e2e-button="feedbackPopup"
-      onClick={event => {
+      onClick={(event) => {
        event.preventDefault();

        createContactPopup();
--- a/packages/app/components/dev/apps/actions.ts
+++ b/packages/app/components/dev/apps/actions.ts
@@ -22,11 +22,11 @@ export function getApp(
  state: { apps: Apps },
  clientId: string,
 ): OauthAppResponse | null {
-  return state.apps.available.find(app => app.clientId === clientId) || null;
+  return state.apps.available.find((app) => app.clientId === clientId) || null;
 }

 export function fetchApp(clientId: string): ThunkAction<Promise<void>> {
-  return async dispatch => {
+  return async (dispatch) => {
    const app = await oauth.getApp(clientId);

    dispatch(addApp(app));
@@ -88,7 +88,7 @@ export function resetApp(
  clientId: string,
  resetSecret: boolean,
 ): ThunkAction<Promise<void>> {
-  return async dispatch => {
+  return async (dispatch) => {
    const { data: app } = await oauth.reset(clientId, resetSecret);

    if (resetSecret) {
--- a/packages/app/components/dev/apps/applicationForm/ApplicationTypeSwitcher.tsx
+++ b/packages/app/components/dev/apps/applicationForm/ApplicationTypeSwitcher.tsx
@@ -19,7 +19,7 @@ const ApplicationTypeSwitcher: ComponentType<Props> = ({
 }) => (
  <div>
    {((Object.keys(appTypes) as unknown) as Array<ApplicationType>).map(
-      type => (
+      (type) => (
        <div className={styles.radioContainer} key={type}>
          <Radio
            onChange={() => setType(type)}
--- a/packages/app/components/dev/apps/list/ApplicationItem.tsx
+++ b/packages/app/components/dev/apps/list/ApplicationItem.tsx
@@ -151,7 +151,7 @@ export default class ApplicationItem extends React.Component<

            <div
              className={styles.appActionContainer}
-              ref={el => {
+              ref={(el) => {
                this.actionContainer = el;
              }}
            >
--- a/packages/app/components/dev/apps/list/ApplicationsList.tsx
+++ b/packages/app/components/dev/apps/list/ApplicationsList.tsx
@@ -55,10 +55,10 @@ export default class ApplicationsList extends React.Component<Props, State> {
          />
        </div>
        <div className={styles.appsListContainer}>
-          {applications.map(app => (
+          {applications.map((app) => (
            <div
              key={app.clientId}
-              ref={elem => {
+              ref={(elem) => {
                this.appsRefs[app.clientId] = elem;
              }}
            >
@@ -83,7 +83,7 @@ export default class ApplicationsList extends React.Component<Props, State> {
    if (
      clientId &&
      expandedApp !== clientId &&
-      applications.some(app => app.clientId === clientId)
+      applications.some((app) => app.clientId === clientId)
    ) {
      requestAnimationFrame(() =>
        this.onTileClick(clientId, { noReset: true }),
--- a/packages/app/components/dev/apps/reducer.ts
+++ b/packages/app/components/dev/apps/reducer.ts
@@ -21,7 +21,9 @@ export default function apps(state: Apps = defaults, action: Action): Apps {
    case 'apps:addApp': {
      const { payload } = action;
      const available = [...state.available];
-      let index = available.findIndex(app => app.clientId === payload.clientId);
+      let index = available.findIndex(
+        (app) => app.clientId === payload.clientId,
+      );

      if (index === -1) {
        index = available.length;
@@ -39,7 +41,7 @@ export default function apps(state: Apps = defaults, action: Action): Apps {
      return {
        ...state,
        available: state.available.filter(
-          app => app.clientId !== action.payload,
+          (app) => app.clientId !== action.payload,
        ),
      };
  }
--- a/packages/app/components/footerMenu/FooterMenu.tsx
+++ b/packages/app/components/footerMenu/FooterMenu.tsx
@@ -12,7 +12,7 @@ import messages from './footerMenu.intl.json';
 const FooterMenu: ComponentType = () => {
  const dispatch = useDispatch();
  const onLanguageSwitcherClick = useCallback<MouseEventHandler>(
-    event => {
+    (event) => {
      event.preventDefault();
      dispatch(createPopup({ Popup: LanguageSwitcher }));
    },
--- a/packages/app/components/i18n/actions.ts
+++ b/packages/app/components/i18n/actions.ts
@@ -3,7 +3,7 @@ import i18n from 'app/services/i18n';
 import { ThunkAction } from 'app/reducers';

 export function setLocale(desiredLocale: string): ThunkAction<Promise<string>> {
-  return async dispatch => {
+  return async (dispatch) => {
    const locale = i18n.detectLanguage(desiredLocale);

    dispatch(_setLocale(locale));
--- a/packages/app/components/i18n/localeFlags.ts
+++ b/packages/app/components/i18n/localeFlags.ts
@@ -15,7 +15,7 @@ const SUPPORTED_LANGUAGES: string[] = Object.keys(supportedLocales);
 export default {
  getCountryList(): string[] {
    return SUPPORTED_LANGUAGES.map(
-      locale => localeToCountryCode[locale] || locale,
+      (locale) => localeToCountryCode[locale] || locale,
    );
  },

@@ -29,9 +29,9 @@ export default {
   */
  getIconUrl(locale: string): string {
    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const mod = require(`flag-icon-css/flags/4x3/${localeToCountryCode[
-      locale
-    ] || locale}.svg`);
+    const mod = require(`flag-icon-css/flags/4x3/${
+      localeToCountryCode[locale] || locale
+    }.svg`);

    return mod.default || mod;
  },
--- a/packages/app/components/i18n/reducer.ts
+++ b/packages/app/components/i18n/reducer.ts
@@ -10,7 +10,7 @@ const defaultState: State = {
  locale: i18n.detectLanguage(),
 };

-export default function(
+export default function (
  state: State = defaultState,
  { type, payload }: Action,
 ): State {
--- a/packages/app/components/languageSwitcher/LanguageList.tsx
+++ b/packages/app/components/languageSwitcher/LanguageList.tsx
@@ -71,7 +71,7 @@ export default class LanguageList extends React.Component<{
        willLeave={this.willLeave}
        willEnter={this.willEnter}
      >
-        {items => (
+        {(items) => (
          <div className={styles.languagesList} data-testid="language-list">
            <div
              className={clsx(styles.emptyLanguagesListWrapper, {
@@ -125,7 +125,7 @@ export default class LanguageList extends React.Component<{
  }

  onChangeLang(lang: string): MouseEventHandler {
-    return event => {
+    return (event) => {
      event.preventDefault();

      this.props.onChangeLang(lang);
--- a/packages/app/components/profile/ProfileField.tsx
+++ b/packages/app/components/profile/ProfileField.tsx
@@ -19,11 +19,11 @@ function ProfileField({
  let Action: React.ElementType | null = null;

  if (link) {
-    Action = props => <Link to={link} {...props} />;
+    Action = (props) => <Link to={link} {...props} />;
  }

  if (onChange) {
-    Action = props => <a {...props} onClick={onChange} href="#" />;
+    Action = (props) => <a {...props} onClick={onChange} href="#" />;
  }

  return (
--- a/packages/app/components/profile/changeEmail/ChangeEmail.tsx
+++ b/packages/app/components/profile/changeEmail/ChangeEmail.tsx
@@ -88,7 +88,7 @@ export default class ChangeEmail extends React.Component<Props, State> {
          <div className={styles.form}>
            <div className={styles.formBody}>
              <Message {...messages.changeEmailTitle}>
-                {pageTitle => (
+                {(pageTitle) => (
                  <h3 className={styles.violetTitle}>
                    <Helmet title={pageTitle as string} />
                    {pageTitle}
@@ -347,7 +347,7 @@ export default class ChangeEmail extends React.Component<Props, State> {
          code: '',
        });
      },
-      resp => {
+      (resp) => {
        if (resp.errors) {
          form.setErrors(resp.errors);
          this.forceUpdate();
--- a/packages/app/components/profile/changePassword/ChangePassword.tsx
+++ b/packages/app/components/profile/changePassword/ChangePassword.tsx
@@ -36,7 +36,7 @@ export default class ChangePassword extends React.Component<Props> {
          <div className={styles.form}>
            <div className={styles.formBody}>
              <Message {...messages.changePasswordTitle}>
-                {pageTitle => (
+                {(pageTitle) => (
                  <h3 className={styles.title}>
                    <Helmet title={pageTitle as string} />
                    {pageTitle}
@@ -105,7 +105,7 @@ export default class ChangePassword extends React.Component<Props> {
  onFormSubmit = () => {
    const { form } = this.props;

-    this.props.onSubmit(form).catch(resp => {
+    this.props.onSubmit(form).catch((resp) => {
      if (resp.errors) {
        form.setErrors(resp.errors);
      } else {
--- a/packages/app/components/profile/changeUsername/ChangeUsername.tsx
+++ b/packages/app/components/profile/changeUsername/ChangeUsername.tsx
@@ -32,7 +32,7 @@ export default class ChangeUsername extends React.Component<Props> {
          <div className={styles.form}>
            <div className={styles.formBody}>
              <Message {...messages.changeUsernameTitle}>
-                {pageTitle => (
+                {(pageTitle) => (
                  <h3 className={styles.title}>
                    <Helmet title={pageTitle as string} />
                    {pageTitle}
@@ -82,7 +82,7 @@ export default class ChangeUsername extends React.Component<Props> {
  onFormSubmit = () => {
    const { form } = this.props;

-    this.props.onSubmit(form).catch(resp => {
+    this.props.onSubmit(form).catch((resp) => {
      if (resp.errors) {
        form.setErrors(resp.errors);
      } else {
--- a/packages/app/components/profile/multiFactorAuth/MfaDisable.tsx
+++ b/packages/app/components/profile/multiFactorAuth/MfaDisable.tsx
@@ -46,7 +46,7 @@ export default class MfaDisable extends React.Component<
        return disableMFA(this.context.userId, totp, password);
      })
      .then(() => this.props.onComplete())
-      .catch(resp => {
+      .catch((resp) => {
        const { errors } = resp || {};

        if (errors) {
--- a/packages/app/components/profile/multiFactorAuth/MfaEnable.tsx
+++ b/packages/app/components/profile/multiFactorAuth/MfaEnable.tsx
@@ -122,7 +122,7 @@ export default class MfaEnable extends React.PureComponent<Props, State> {
        <Confirmation
          key="step3"
          form={this.props.confirmationForm}
-          formRef={el => (this.confirmationFormEl = el)}
+          formRef={(el) => (this.confirmationFormEl = el)}
          onSubmit={this.onTotpSubmit}
          onInvalid={() => this.forceUpdate()}
        />
@@ -136,7 +136,7 @@ export default class MfaEnable extends React.PureComponent<Props, State> {
    if (props.step === 1 && !isLoading && !qrCodeSrc) {
      this.setState({ isLoading: true });

-      getSecret(this.context.userId).then(resp => {
+      getSecret(this.context.userId).then((resp) => {
        this.setState({
          isLoading: false,
          secret: resp.secret,
@@ -164,7 +164,7 @@ export default class MfaEnable extends React.PureComponent<Props, State> {
        return enableMFA(this.context.userId, data.totp, data.password);
      })
      .then(() => this.props.onComplete())
-      .catch(resp => {
+      .catch((resp) => {
        const { errors } = resp || {};

        if (errors) {
--- a/packages/app/components/profile/multiFactorAuth/MultiFactorAuth.tsx
+++ b/packages/app/components/profile/multiFactorAuth/MultiFactorAuth.tsx
@@ -32,7 +32,7 @@ class MultiFactorAuth extends React.Component<{
        <div className={styles.form}>
          <div className={styles.formBody}>
            <Message {...messages.mfaTitle}>
-              {pageTitle => (
+              {(pageTitle) => (
                <h3 className={styles.title}>
                  <Helmet title={pageTitle as string} />
                  {pageTitle}
--- a/packages/app/components/profile/multiFactorAuth/instructions/Instructions.tsx
+++ b/packages/app/components/profile/multiFactorAuth/instructions/Instructions.tsx
@@ -48,19 +48,19 @@ export default class Instructions extends React.Component<{}, State> {
                className={styles.androidTile}
                logo={androidLogo}
                label="Google Play"
-                onClick={event => this.onChangeOs(event, 'android')}
+                onClick={(event) => this.onChangeOs(event, 'android')}
              />
              <OsTile
                className={styles.appleTile}
                logo={appleLogo}
                label="App Store"
-                onClick={event => this.onChangeOs(event, 'ios')}
+                onClick={(event) => this.onChangeOs(event, 'ios')}
              />
              <OsTile
                className={styles.windowsTile}
                logo={windowsLogo}
                label="Windows Store"
-                onClick={event => this.onChangeOs(event, 'windows')}
+                onClick={(event) => this.onChangeOs(event, 'windows')}
              />
            </div>

--- a/packages/app/components/profile/multiFactorAuth/instructions/OsInstruction.tsx
+++ b/packages/app/components/profile/multiFactorAuth/instructions/OsInstruction.tsx
@@ -87,7 +87,7 @@ export default function OsInstruction({ os }: { os: OS }) {
      </h3>

      <ul className={styles.appList}>
-        {linksByOs[os].featured.map(item => (
+        {linksByOs[os].featured.map((item) => (
          <li key={item.label}>
            <a href={item.link} target="_blank">
              {item.label}
--- a/packages/app/components/profile/multiFactorAuth/status/MfaStatus.tsx
+++ b/packages/app/components/profile/multiFactorAuth/status/MfaStatus.tsx
@@ -31,7 +31,7 @@ export default function MfaStatus({ onProceed }: { onProceed: () => void }) {
        <p className={styles.description}>
          <a
            href="#"
-            onClick={event => {
+            onClick={(event) => {
              event.preventDefault();
              onProceed();
            }}
--- a/packages/app/components/ui/bsod/Box.ts
+++ b/packages/app/components/ui/bsod/Box.ts
@@ -91,7 +91,7 @@ export default class Box {
      endY: number;
    }> = [];

-    Object.values(boxPoints).forEach(point => {
+    Object.values(boxPoints).forEach((point) => {
      const angle = Math.atan2(light.y - point.y, light.x - point.x);
      const endX = point.x + shadowLength * Math.sin(-angle - Math.PI / 2);
      const endY = point.y + shadowLength * Math.cos(-angle - Math.PI / 2);
--- a/packages/app/components/ui/bsod/BoxesField.ts
+++ b/packages/app/components/ui/bsod/BoxesField.ts
@@ -160,7 +160,7 @@ export default class BoxesField {

  bindWindowListeners() {
    window.addEventListener('resize', this.resize.bind(this));
-    window.addEventListener('mousemove', event => {
+    window.addEventListener('mousemove', (event) => {
      this.light.x = event.clientX;
      this.light.y = event.clientY;
    });
--- a/packages/app/components/ui/bsod/BsodMiddleware.test.ts
+++ b/packages/app/components/ui/bsod/BsodMiddleware.test.ts
@@ -4,7 +4,7 @@ import sinon from 'sinon';
 import BsodMiddleware from 'app/components/ui/bsod/BsodMiddleware';

 describe('BsodMiddleware', () => {
-  [500, 503, 555].forEach(code =>
+  [500, 503, 555].forEach((code) =>
    it(`should dispatch for ${code}`, () => {
      const resp = {
        originalResponse: { status: code },
@@ -27,7 +27,7 @@ describe('BsodMiddleware', () => {
    }),
  );

-  [200, 404].forEach(code =>
+  [200, 404].forEach((code) =>
    it(`should not dispatch for ${code}`, () => {
      const resp = {
        originalResponse: { status: code },
--- a/packages/app/components/ui/bsod/reducer.ts
+++ b/packages/app/components/ui/bsod/reducer.ts
@@ -2,7 +2,7 @@ import { Action } from './actions';

 export type State = boolean;

-export default function(state: State = false, { type }: Action): State {
+export default function (state: State = false, { type }: Action): State {
  if (type === 'BSOD') {
    return true;
  }
--- a/packages/app/components/ui/bsod/styles.scss
+++ b/packages/app/components/ui/bsod/styles.scss
@@ -1,6 +1,7 @@
@import '~app/components/ui/colors.scss';

-$font-family-monospaced: 'Consolas', 'Menlo', 'DejaVu Sans Mono', 'Roboto Mono', monospace;
+$font-family-monospaced: 'Consolas', 'Menlo', 'DejaVu Sans Mono', 'Roboto Mono',
+  monospace;

 .body {
  height: 100%;
--- a/packages/app/components/ui/form/Captcha.tsx
+++ b/packages/app/components/ui/form/Captcha.tsx
@@ -36,10 +36,10 @@ export default class Captcha extends FormInputComponent<
            skin: this.props.skin,
            onSetCode: this.setCode,
          })
-          .then(captchaId => {
+          .then((captchaId) => {
            this.captchaId = captchaId;
          })
-          .catch(error => {
+          .catch((error) => {
            logger.error('Failed rendering captcha', {
              error,
            });
--- a/packages/app/components/ui/form/Dropdown.tsx
+++ b/packages/app/components/ui/form/Dropdown.tsx
@@ -101,7 +101,7 @@ export default class Dropdown extends FormInputComponent<Props, State> {
  }

  onSelectItem(item: OptionItem): MouseEventHandler {
-    return event => {
+    return (event) => {
      event.preventDefault();

      this.setState({
@@ -143,7 +143,7 @@ export default class Dropdown extends FormInputComponent<Props, State> {
    this.toggle();
  };

-  onBodyClick: MouseEventHandler = event => {
+  onBodyClick: MouseEventHandler = (event) => {
    if (this.state.isActive) {
      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
      const el = ReactDOM.findDOMNode(this)!;
--- a/packages/app/components/ui/form/FormModel.ts
+++ b/packages/app/components/ui/form/FormModel.ts
@@ -130,7 +130,7 @@ export default class FormModel {
    const oldErrors = this.errors;
    this.errors = errors;

-    Object.keys(this.fields).forEach(fieldId => {
+    Object.keys(this.fields).forEach((fieldId) => {
      if (this.renderErrors) {
        if (oldErrors[fieldId] || errors[fieldId]) {
          this.fields[fieldId].setError(errors[fieldId] || null);
@@ -192,7 +192,7 @@ export default class FormModel {
   * @param {Function} fn
   */
  removeLoadingListener(fn: LoadingListener): void {
-    this.handlers = this.handlers.filter(handler => handler !== fn);
+    this.handlers = this.handlers.filter((handler) => handler !== fn);
  }

  /**
@@ -212,6 +212,6 @@ export default class FormModel {
  }

  private notifyHandlers(): void {
-    this.handlers.forEach(fn => fn(this._isLoading));
+    this.handlers.forEach((fn) => fn(this._isLoading));
  }
 }
--- a/packages/app/components/ui/form/Input.test.tsx
+++ b/packages/app/components/ui/form/Input.test.tsx
@@ -14,7 +14,7 @@ describe('Input', () => {
        <Input
          defaultValue="foo"
          name="test"
-          ref={el => {
+          ref={(el) => {
            component = el;
          }}
        />
--- a/packages/app/components/ui/form/LinkButton.tsx
+++ b/packages/app/components/ui/form/LinkButton.tsx
@@ -11,7 +11,7 @@ export default function LinkButton(

  return (
    <Button
-      component={linkProps => <Link {...linkProps} to={to} />}
+      component={(linkProps) => <Link {...linkProps} to={to} />}
      {...restProps}
    />
  );
--- a/packages/app/components/ui/loader/loader.html
+++ b/packages/app/components/ui/loader/loader.html
@@ -1,12 +1,12 @@
 <div id="loader" class="loader-overlay is-first-launch">
-    <div class="loader">
-        <div class="loader__cube loader__cube--1"></div>
-        <div class="loader__cube loader__cube--2"></div>
-        <div class="loader__cube loader__cube--3"></div>
-        <div class="loader__cube loader__cube--4"></div>
-        <div class="loader__cube loader__cube--5"></div>
-        <div class="loader__cube loader__cube--6"></div>
-        <div class="loader__cube loader__cube--7"></div>
-        <div class="loader__cube loader__cube--8"></div>
-    </div>
+  <div class="loader">
+    <div class="loader__cube loader__cube--1"></div>
+    <div class="loader__cube loader__cube--2"></div>
+    <div class="loader__cube loader__cube--3"></div>
+    <div class="loader__cube loader__cube--4"></div>
+    <div class="loader__cube loader__cube--5"></div>
+    <div class="loader__cube loader__cube--6"></div>
+    <div class="loader__cube loader__cube--7"></div>
+    <div class="loader__cube loader__cube--8"></div>
+  </div>
 </div>
--- a/packages/app/components/ui/motion/SlideMotion.tsx
+++ b/packages/app/components/ui/motion/SlideMotion.tsx
@@ -67,7 +67,7 @@ class SlideMotion extends React.PureComponent<Props, State> {

    return (
      <Motion style={motionStyle}>
-        {interpolatingStyle => (
+        {(interpolatingStyle) => (
          <div
            style={{
              overflow: 'hidden',
--- a/packages/app/components/ui/popup/PopupStack.test.tsx
+++ b/packages/app/components/ui/popup/PopupStack.test.tsx
@@ -69,10 +69,7 @@ describe('<PopupStack />', () => {
    };
    const component = shallow(<PopupStack {...props} />);

-    component
-      .find(DummyPopup)
-      .last()
-      .prop('onClose')();
+    component.find(DummyPopup).last().prop('onClose')();

    expect(props.destroy, 'was called once');
    expect(props.destroy, 'to have a call satisfying', [
--- a/packages/app/components/ui/popup/reducer.ts
+++ b/packages/app/components/ui/popup/reducer.ts
@@ -27,7 +27,7 @@ function popups(state: Array<PopupConfig> = [], { type, payload }: Action) {

      return state.concat(payload);
    case 'POPUP_DESTROY':
-      return state.filter(popup => popup !== payload);
+      return state.filter((popup) => popup !== payload);
    default:
      return state;
  }
--- a/packages/app/components/ui/scroll/ScrollIntoView.tsx
+++ b/packages/app/components/ui/scroll/ScrollIntoView.tsx
@@ -31,7 +31,7 @@ class ScrollIntoView extends React.PureComponent<Props> {
      return null;
    }

-    return <span ref={el => el && restoreScroll(el)} />;
+    return <span ref={(el) => el && restoreScroll(el)} />;
  }
 }

--- a/packages/app/components/user/actions.ts
+++ b/packages/app/components/user/actions.ts
@@ -80,7 +80,7 @@ export function acceptRules(): ThunkAction<Promise<{ success: boolean }>> {
      );
    }

-    return acceptRulesEndpoint(id).then(resp => {
+    return acceptRulesEndpoint(id).then((resp) => {
      dispatch(
        updateUser({
          shouldAcceptRules: false,
--- a/packages/app/components/user/middlewares/refreshTokenMiddleware.test.ts
+++ b/packages/app/components/user/middlewares/refreshTokenMiddleware.test.ts
@@ -32,7 +32,7 @@ describe('refreshTokenMiddleware', () => {

    getState = sinon.stub().named('store.getState');
    dispatch = sinon
-      .spy(arg => (typeof arg === 'function' ? arg(dispatch, getState) : arg))
+      .spy((arg) => (typeof arg === 'function' ? arg(dispatch, getState) : arg))
      .named('store.dispatch');

    middleware = refreshTokenMiddleware({ getState, dispatch } as any);
@@ -94,7 +94,7 @@ describe('refreshTokenMiddleware', () => {
          Promise.resolve(validToken),
        );

-        return middleware.before!(data).then(resp => {
+        return middleware.before!(data).then((resp) => {
          expect(resp, 'to satisfy', data);

          expect(authentication.requestToken, 'to have a call satisfying', [
--- a/packages/app/components/userbar/LoggedInPanel.tsx
+++ b/packages/app/components/userbar/LoggedInPanel.tsx
@@ -42,7 +42,7 @@ export default class LoggedInPanel extends React.Component<
    const { isAccountSwitcherActive } = this.state;

    return (
-      <div ref={el => (this.el = el)} className={clsx(styles.loggedInPanel)}>
+      <div ref={(el) => (this.el = el)} className={clsx(styles.loggedInPanel)}>
        <div
          className={clsx(styles.activeAccount, {
            [styles.activeAccountExpanded]: isAccountSwitcherActive,
@@ -111,7 +111,7 @@ function createOnOutsideComponentClickHandler(
  // TODO: we have the same logic in LangMenu
  // Probably we should decouple this into some helper function
  // TODO: the name of function may be better...
-  return event => {
+  return (event) => {
    const el = getEl();

    if (isActive() && el) {