Merge pull request #2237 from ClearlyClaire/glitch-soc/merge-upstream

Merge upstream changes

.eslintrc.js

@@ -98,10 +98,17 @@ module.exports = {
     'react/jsx-filename-extension': ['error', { extensions: ['.jsx', 'tsx'] }],
     'react/jsx-boolean-value': 'error',
     'react/display-name': 'off',
+    'react/jsx-fragments': ['error', 'syntax'],
     'react/jsx-equals-spacing': 'error',
     'react/jsx-no-bind': 'error',
+    'react/jsx-no-useless-fragment': 'error',
     'react/jsx-no-target-blank': 'off',
+    'react/jsx-tag-spacing': 'error',
+    'react/jsx-uses-react': 'off', // not needed with new JSX transform
+    'react/jsx-wrap-multilines': 'error',
+    'react/no-deprecated': 'off',
     'react/no-unknown-property': 'off',
+    'react/react-in-jsx-scope': 'off', // not needed with new JSX transform
     'react/self-closing-comp': 'error',
 
     // recommended values found in https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/src/index.js
@@ -191,6 +198,55 @@ module.exports = {
     'import/no-useless-path-segments': 'error',
     'import/no-webpack-loader-syntax': 'error',
 
+    'import/order': [
+      'error',
+      {
+        alphabetize: { order: 'asc' },
+        'newlines-between': 'always',
+        groups: [
+          'builtin',
+          'external',
+          'internal',
+          'parent',
+          ['index', 'sibling'],
+          'object',
+        ],
+        pathGroups: [
+          // React core packages
+          {
+            pattern: '{react,react-dom,react-dom/client,prop-types}',
+            group: 'builtin',
+            position: 'after',
+          },
+          // I18n
+          {
+            pattern: '{react-intl,intl-messageformat}',
+            group: 'builtin',
+            position: 'after',
+          },
+          // Common React utilities
+          {
+            pattern: '{classnames,react-helmet,react-router-dom}',
+            group: 'external',
+            position: 'before',
+          },
+          // Immutable / Redux / data store
+          {
+            pattern: '{immutable,react-redux,react-immutable-proptypes,react-immutable-pure-component,reselect}',
+            group: 'external',
+            position: 'before',
+          },
+          // Internal packages
+          {
+            pattern: '{mastodon/**,flavours/glitch-soc/**}',
+            group: 'internal',
+            position: 'after',
+          },
+        ],
+        pathGroupsExcludedImportTypes: [],
+      },
+    ],
+
     'promise/always-return': 'off',
     'promise/catch-or-return': [
       'error',
@@ -279,55 +335,6 @@ module.exports = {
       rules: {
         'import/consistent-type-specifier-style': ['error', 'prefer-top-level'],
 
-        'import/order': [
-          'error',
-          {
-            alphabetize: { order: 'asc' },
-            'newlines-between': 'always',
-            groups: [
-              'builtin',
-              'external',
-              'internal',
-              'parent',
-              ['index', 'sibling'],
-              'object',
-            ],
-            pathGroups: [
-              // React core packages
-              {
-                pattern: '{react,react-dom,prop-types}',
-                group: 'builtin',
-                position: 'after',
-              },
-              // I18n
-              {
-                pattern: 'react-intl',
-                group: 'builtin',
-                position: 'after',
-              },
-              // Common React utilities
-              {
-                pattern: '{classnames,react-helmet}',
-                group: 'external',
-                position: 'before',
-              },
-              // Immutable / Redux / data store
-              {
-                pattern: '{immutable,react-redux,react-immutable-proptypes,react-immutable-pure-component,reselect}',
-                group: 'external',
-                position: 'before',
-              },
-              // Internal packages
-              {
-                pattern: '{mastodon/**,flavours/glitch-soc/**}',
-                group: 'internal',
-                position: 'after',
-              },
-            ],
-            pathGroupsExcludedImportTypes: [],
-          },
-        ],
-
         '@typescript-eslint/consistent-type-definitions': ['warn', 'interface'],
         '@typescript-eslint/consistent-type-exports': 'error',
         '@typescript-eslint/consistent-type-imports': 'error',
@@ -339,6 +346,9 @@ module.exports = {
         'import/no-default-export': 'warn',
         'react/prefer-stateless-function': 'warn',
         'react/function-component-definition': ['error', { namedComponents: 'arrow-function' }],
+        'react/jsx-uses-react': 'off', // not needed with new JSX transform
+        'react/react-in-jsx-scope': 'off', // not needed with new JSX transform
+        'react/prop-types': 'off',
       },
     },
     {

.rubocop.yml

@@ -43,7 +43,7 @@ Layout/LineLength:
     - !ruby/regexp / \# .*$/
     - !ruby/regexp /^\# .*$/
   Exclude:
-    - lib/**/*cli*.rb
+    - 'lib/mastodon/cli/*.rb'
     - db/*migrate/**/*
     - db/seeds/**/*
 
@@ -57,7 +57,7 @@ Lint/UselessAccessModifier:
 # https://docs.rubocop.org/rubocop/cops_metrics.html#metricsabcsize
 Metrics/AbcSize:
   Exclude:
-    - 'lib/**/*cli*.rb'
+    - 'lib/mastodon/cli/*.rb'
     - db/*migrate/**/*
 
 # Reason: Some functions cannot be broken up, but others may be refactor candidates
@@ -66,7 +66,7 @@ Metrics/BlockLength:
   CountAsOne: ['array', 'hash', 'heredoc', 'method_call']
   Exclude:
     - 'config/routes.rb'
-    - 'lib/mastodon/*_cli.rb'
+    - 'lib/mastodon/cli/*.rb'
     - 'lib/tasks/*.rake'
     - 'app/models/concerns/account_associations.rb'
     - 'app/models/concerns/account_interactions.rb'
@@ -95,14 +95,14 @@ Metrics/BlockLength:
 # https://docs.rubocop.org/rubocop/cops_metrics.html#metricsblocknesting
 Metrics/BlockNesting:
   Exclude:
-    - 'lib/mastodon/*_cli.rb'
+    - 'lib/mastodon/cli/*.rb'
 
 # Reason: Some Excluded files would be candidates for refactoring but not currently addressed
 # https://docs.rubocop.org/rubocop/cops_metrics.html#metricsclasslength
 Metrics/ClassLength:
   CountAsOne: ['array', 'hash', 'heredoc', 'method_call']
   Exclude:
-    - 'lib/mastodon/*_cli.rb'
+    - 'lib/mastodon/cli/*.rb'
     - 'app/controllers/admin/accounts_controller.rb'
     - 'app/controllers/api/base_controller.rb'
     - 'app/controllers/api/v1/admin/accounts_controller.rb'
@@ -146,7 +146,7 @@ Metrics/ClassLength:
 # https://docs.rubocop.org/rubocop/cops_metrics.html#metricscyclomaticcomplexity
 Metrics/CyclomaticComplexity:
   Exclude:
-    - lib/mastodon/*cli*.rb
+    - lib/mastodon/cli/*.rb
     - db/*migrate/**/*
 
 # Reason: Currently disabled in .rubocop_todo.yml
@@ -154,7 +154,7 @@ Metrics/CyclomaticComplexity:
 Metrics/MethodLength:
   CountAsOne: [array, heredoc]
   Exclude:
-    - 'lib/mastodon/*_cli.rb'
+    - 'lib/mastodon/cli/*.rb'
 
 # Reason:
 # https://docs.rubocop.org/rubocop/cops_metrics.html#metricsmodulelength
@@ -171,13 +171,12 @@ Rails/FilePath:
 Rails/HttpStatus:
   EnforcedStyle: numeric
 
-# Reason: Allowed only in the `tootctl` CLI application code
+# Reason: Allowed in `tootctl` CLI code and in boot ENV checker
 # https://docs.rubocop.org/rubocop-rails/cops_rails.html#railsexit
 Rails/Exit:
   Exclude:
-    - 'lib/mastodon/*_cli.rb'
+    - 'config/boot.rb'
-    - 'lib/mastodon/cli_helper.rb'
+    - 'lib/mastodon/cli/*.rb'
-    - 'lib/cli.rb'
 
 # Reason: Some single letter camel case files shouldn't be split
 # https://docs.rubocop.org/rubocop-rspec/cops_rspec.html#rspecfilepath

.rubocop_todo.yml

@@ -379,29 +379,6 @@ RSpec/EmptyExampleGroup:
 RSpec/ExampleLength:
   Max: 22
 
-# This cop supports unsafe autocorrection (--autocorrect-all).
-# Configuration parameters: EnforcedStyle.
-# SupportedStyles: method_call, block
-RSpec/ExpectChange:
-  Exclude:
-    - 'spec/controllers/admin/account_moderation_notes_controller_spec.rb'
-    - 'spec/controllers/admin/custom_emojis_controller_spec.rb'
-    - 'spec/controllers/admin/invites_controller_spec.rb'
-    - 'spec/controllers/admin/report_notes_controller_spec.rb'
-    - 'spec/controllers/concerns/accountable_concern_spec.rb'
-    - 'spec/controllers/invites_controller_spec.rb'
-    - 'spec/controllers/settings/two_factor_authentication/webauthn_credentials_controller_spec.rb'
-    - 'spec/models/admin/account_action_spec.rb'
-    - 'spec/services/suspend_account_service_spec.rb'
-    - 'spec/services/unsuspend_account_service_spec.rb'
-    - 'spec/workers/scheduler/accounts_statuses_cleanup_scheduler_spec.rb'
-
-RSpec/ExpectInHook:
-  Exclude:
-    - 'spec/controllers/api/v1/media_controller_spec.rb'
-    - 'spec/controllers/settings/applications_controller_spec.rb'
-    - 'spec/lib/status_filter_spec.rb'
-
 # This cop supports safe autocorrection (--autocorrect).
 # Configuration parameters: EnforcedStyle.
 # SupportedStyles: implicit, each, example
@@ -554,26 +531,10 @@ RSpec/MultipleMemoizedHelpers:
 RSpec/NestedGroups:
   Max: 6
 
-# Configuration parameters: AllowedPatterns.
-# AllowedPatterns: ^expect_, ^assert_
-RSpec/NoExpectationExample:
-  Exclude:
-    - 'spec/controllers/auth/registrations_controller_spec.rb'
-    - 'spec/services/precompute_feed_service_spec.rb'
-
 RSpec/PendingWithoutReason:
   Exclude:
     - 'spec/models/account_spec.rb'
 
-# This cop supports unsafe autocorrection (--autocorrect-all).
-# Configuration parameters: Strict, EnforcedStyle, AllowedExplicitMatchers.
-# SupportedStyles: inflected, explicit
-RSpec/PredicateMatcher:
-  Exclude:
-    - 'spec/controllers/api/v1/accounts/notes_controller_spec.rb'
-    - 'spec/models/user_spec.rb'
-    - 'spec/services/post_status_service_spec.rb'
-
 RSpec/StubbedMock:
   Exclude:
     - 'spec/controllers/api/base_controller_spec.rb'
@@ -715,12 +676,6 @@ Rails/DuplicateAssociation:
     - 'app/serializers/activitypub/collection_serializer.rb'
     - 'app/serializers/activitypub/note_serializer.rb'
 
-# Configuration parameters: Include.
-# Include: app/**/*.rb, config/**/*.rb, lib/**/*.rb
-Rails/Exit:
-  Exclude:
-    - 'config/boot.rb'
-
 # Configuration parameters: Include.
 # Include: app/models/**/*.rb
 Rails/HasAndBelongsToMany:
@@ -855,9 +810,9 @@ Rails/SkipsModelValidations:
     - 'db/post_migrate/20220617202502_migrate_roles.rb'
     - 'db/post_migrate/20221101190723_backfill_admin_action_logs.rb'
     - 'db/post_migrate/20221206114142_backfill_admin_action_logs_again.rb'
-    - 'lib/cli.rb'
+    - 'lib/mastodon/cli/accounts.rb'
-    - 'lib/mastodon/accounts_cli.rb'
+    - 'lib/mastodon/cli/main.rb'
-    - 'lib/mastodon/maintenance_cli.rb'
+    - 'lib/mastodon/cli/maintenance.rb'
     - 'spec/controllers/api/v1/admin/accounts_controller_spec.rb'
     - 'spec/lib/activitypub/activity/follow_spec.rb'
     - 'spec/services/follow_service_spec.rb'
@@ -939,7 +894,7 @@ Rails/WhereExists:
     - 'app/validators/vote_validator.rb'
     - 'app/workers/move_worker.rb'
     - 'db/migrate/20190529143559_preserve_old_layout_for_existing_users.rb'
-    - 'lib/mastodon/email_domain_blocks_cli.rb'
+    - 'lib/mastodon/cli/email_domain_blocks.rb'
     - 'lib/tasks/tests.rake'
     - 'spec/controllers/api/v1/accounts/notes_controller_spec.rb'
     - 'spec/controllers/api/v1/tags_controller_spec.rb'
@@ -1001,7 +956,7 @@ Style/FormatStringToken:
   Exclude:
     - 'app/models/privacy_policy.rb'
     - 'config/initializers/devise.rb'
-    - 'lib/mastodon/maintenance_cli.rb'
+    - 'lib/mastodon/cli/maintenance.rb'
     - 'lib/paperclip/color_extractor.rb'
 
 # This cop supports unsafe autocorrection (--autocorrect-all).
@@ -1446,9 +1401,9 @@ Style/GuardClause:
     - 'db/post_migrate/20220704024901_migrate_settings_to_user_roles.rb'
     - 'lib/devise/two_factor_ldap_authenticatable.rb'
     - 'lib/devise/two_factor_pam_authenticatable.rb'
-    - 'lib/mastodon/accounts_cli.rb'
+    - 'lib/mastodon/cli/accounts.rb'
-    - 'lib/mastodon/maintenance_cli.rb'
+    - 'lib/mastodon/cli/maintenance.rb'
-    - 'lib/mastodon/media_cli.rb'
+    - 'lib/mastodon/cli/media.rb'
     - 'lib/paperclip/attachment_extensions.rb'
     - 'lib/tasks/repo.rake'
 

Gemfile.lock

@@ -151,7 +151,7 @@ GEM
     bundler-audit (0.9.1)
       bundler (>= 1.2.0, < 3)
       thor (~> 1.0)
-    capistrano (3.17.2)
+    capistrano (3.17.3)
       airbrussh (>= 1.0.0)
       i18n
       rake (>= 10.0.0)
@@ -269,7 +269,7 @@ GEM
     faraday-rack (1.0.0)
     faraday-retry (1.0.3)
     fast_blank (1.0.1)
-    fastimage (2.2.6)
+    fastimage (2.2.7)
     ffi (1.15.5)
     ffi-compiler (1.0.1)
       ffi (>= 1.0.0)

app/controllers/api/v1/featured_tags_controller.rb

@@ -31,8 +31,4 @@ class Api::V1::FeaturedTagsController < Api::BaseController
   def set_featured_tags
     @featured_tags = current_account.featured_tags.order(statuses_count: :desc)
   end
-
-  def featured_tag_params
-    params.require(:name)
-  end
 end

app/controllers/media_controller.rb

@@ -46,7 +46,7 @@ class MediaController < ApplicationController
   end
 
   def allow_iframing
-    response.headers['X-Frame-Options'] = 'ALLOWALL'
+    response.headers.delete('X-Frame-Options')
   end
 
   def set_pack

app/controllers/statuses_controller.rb

@@ -46,7 +46,7 @@ class StatusesController < ApplicationController
     return not_found if @status.hidden? || @status.reblog?
 
     expires_in 180, public: true
-    response.headers['X-Frame-Options'] = 'ALLOWALL'
+    response.headers.delete('X-Frame-Options')
 
     render layout: 'embedded'
   end

app/helpers/application_helper.rb

@@ -52,7 +52,7 @@ module ApplicationHelper
     if closed_registrations? || omniauth_only?
       'https://joinmastodon.org/#getting-started'
     else
-      new_user_registration_path
+      ENV.fetch('SSO_ACCOUNT_SIGN_UP', new_user_registration_path)
     end
   end
 

app/javascript/core/admin.js

@@ -2,6 +2,7 @@
 
 import 'packs/public-path';
 import { delegate } from '@rails/ujs';
+
 import ready from '../mastodon/ready';
 
 const setAnnouncementEndsAttributes = (target) => {

app/javascript/core/settings.js

@@ -1,9 +1,9 @@
 //  This file will be loaded on settings pages, regardless of theme.
 
 import 'packs/public-path';
+import { delegate } from '@rails/ujs';
 import escapeTextContentForBrowser from 'escape-html';
 
-import { delegate } from '@rails/ujs';
 
 import emojify from '../mastodon/features/emoji/emoji';
 

app/javascript/core/two_factor_authentication.js

@@ -1,6 +1,8 @@
 import 'packs/public-path';
-import axios from 'axios';
+
 import * as WebAuthnJSON from '@github/webauthn-json';
+import axios from 'axios';
+
 import ready from '../mastodon/ready';
 import 'regenerator-runtime/runtime';
 

app/javascript/flavours/glitch/actions/accounts.js

@@ -1,4 +1,5 @@
 import api, { getLinks } from '../api';
+
 import { importFetchedAccount, importFetchedAccounts } from './importer';
 
 export const ACCOUNT_FETCH_REQUEST = 'ACCOUNT_FETCH_REQUEST';

app/javascript/flavours/glitch/actions/announcements.js

@@ -1,4 +1,5 @@
 import api from '../api';
+
 import { normalizeAnnouncement } from './importer/normalizer';
 
 export const ANNOUNCEMENTS_FETCH_REQUEST = 'ANNOUNCEMENTS_FETCH_REQUEST';

app/javascript/flavours/glitch/actions/blocks.js

@@ -1,4 +1,5 @@
 import api, { getLinks } from '../api';
+
 import { fetchRelationships } from './accounts';
 import { importFetchedAccounts } from './importer';
 import { openModal } from './modal';
@@ -94,6 +95,6 @@ export function initBlockModal(account) {
       account,
     });
 
-    dispatch(openModal('BLOCK'));
+    dispatch(openModal({ modalType: 'BLOCK' }));
   };
 }

app/javascript/flavours/glitch/actions/bookmarks.js

@@ -1,4 +1,5 @@
 import api, { getLinks } from '../api';
+
 import { importFetchedStatuses } from './importer';
 
 export const BOOKMARKED_STATUSES_FETCH_REQUEST = 'BOOKMARKED_STATUSES_FETCH_REQUEST';

app/javascript/flavours/glitch/actions/boosts.js

@@ -14,7 +14,10 @@ export function initBoostModal(props) {
       privacy,
     });
 
-    dispatch(openModal('BOOST', props));
+    dispatch(openModal({
+      modalType: 'BOOST',
+      modalProps: props,
+    }));
   };
 }
 

app/javascript/flavours/glitch/actions/compose.js

@@ -1,11 +1,14 @@
+import { defineMessages } from 'react-intl';
+
 import axios from 'axios';
 import { throttle } from 'lodash';
-import { defineMessages } from 'react-intl';
+
 import api from 'flavours/glitch/api';
 import { search as emojiSearch } from 'flavours/glitch/features/emoji/emoji_mart_search_light';
 import { tagHistory } from 'flavours/glitch/settings';
 import { recoverHashtags } from 'flavours/glitch/utils/hashtag';
 import resizeImage from 'flavours/glitch/utils/resize_image';
+
 import { showAlert, showAlertForError } from './alerts';
 import { useEmoji } from './emojis';
 import { importFetchedAccounts, importFetchedStatus } from './importer';
@@ -413,7 +416,10 @@ export function initMediaEditModal(id) {
       id,
     });
 
-    dispatch(openModal('FOCAL_POINT', { id }));
+    dispatch(openModal({
+      modalType: 'FOCAL_POINT',
+      modalProps: { id },
+    }));
   };
 }
 

app/javascript/flavours/glitch/actions/conversations.js

@@ -1,4 +1,5 @@
 import api, { getLinks } from '../api';
+
 import {
   importFetchedAccounts,
   importFetchedStatuses,

app/javascript/flavours/glitch/actions/directory.js

@@ -1,6 +1,7 @@
 import api from '../api';
-import { importFetchedAccounts } from './importer';
+
 import { fetchRelationships } from './accounts';
+import { importFetchedAccounts } from './importer';
 
 export const DIRECTORY_FETCH_REQUEST = 'DIRECTORY_FETCH_REQUEST';
 export const DIRECTORY_FETCH_SUCCESS = 'DIRECTORY_FETCH_SUCCESS';

app/javascript/flavours/glitch/actions/favourites.js

@@ -1,4 +1,5 @@
 import api, { getLinks } from '../api';
+
 import { importFetchedStatuses } from './importer';
 
 export const FAVOURITED_STATUSES_FETCH_REQUEST = 'FAVOURITED_STATUSES_FETCH_REQUEST';

app/javascript/flavours/glitch/actions/filters.js

@@ -1,4 +1,5 @@
 import api from '../api';
+
 import { openModal } from './modal';
 
 export const FILTERS_FETCH_REQUEST = 'FILTERS_FETCH_REQUEST';
@@ -14,9 +15,12 @@ export const FILTERS_CREATE_SUCCESS = 'FILTERS_CREATE_SUCCESS';
 export const FILTERS_CREATE_FAIL    = 'FILTERS_CREATE_FAIL';
 
 export const initAddFilter = (status, { contextType }) => dispatch =>
-  dispatch(openModal('FILTER', {
+  dispatch(openModal({
-    statusId: status?.get('id'),
+    modalType: 'FILTER',
-    contextType: contextType,
+    modalProps: {
+      statusId: status?.get('id'),
+      contextType: contextType,
+    },
   }));
 
 export const fetchFilters = () => (dispatch, getState) => {

app/javascript/flavours/glitch/actions/history.js

@@ -1,4 +1,5 @@
 import api from '../api';
+
 import { importFetchedAccounts } from './importer';
 
 export const HISTORY_FETCH_REQUEST = 'HISTORY_FETCH_REQUEST';

app/javascript/flavours/glitch/actions/importer/normalizer.js

@@ -1,7 +1,8 @@
 import escapeTextContentForBrowser from 'escape-html';
+
 import emojify from 'flavours/glitch/features/emoji/emoji';
-import { unescapeHTML } from 'flavours/glitch/utils/html';
 import { autoHideCW } from 'flavours/glitch/utils/content_warning';
+import { unescapeHTML } from 'flavours/glitch/utils/html';
 
 const domParser = new DOMParser();
 

app/javascript/flavours/glitch/actions/interactions.js

@@ -1,4 +1,5 @@
 import api from '../api';
+
 import { importFetchedAccounts, importFetchedStatus } from './importer';
 
 export const REBLOG_REQUEST = 'REBLOG_REQUEST';

app/javascript/flavours/glitch/actions/lists.js

@@ -1,6 +1,7 @@
 import api from '../api';
-import { importFetchedAccounts } from './importer';
+
 import { showAlertForError } from './alerts';
+import { importFetchedAccounts } from './importer';
 
 export const LIST_FETCH_REQUEST = 'LIST_FETCH_REQUEST';
 export const LIST_FETCH_SUCCESS = 'LIST_FETCH_SUCCESS';

app/javascript/flavours/glitch/actions/local_settings.js

@@ -1,4 +1,5 @@
 import { expandSpoilers, disableSwiping } from 'flavours/glitch/initial_state';
+
 import { openModal } from './modal';
 
 export const LOCAL_SETTING_CHANGE = 'LOCAL_SETTING_CHANGE';
@@ -27,9 +28,12 @@ export function checkDeprecatedLocalSettings() {
     }
 
     if (changed_settings.length > 0) {
-      dispatch(openModal('DEPRECATED_SETTINGS', {
+      dispatch(openModal({
-        settings: changed_settings,
+        modalType: 'DEPRECATED_SETTINGS',
-        onConfirm: () => dispatch(clearDeprecatedLocalSettings()),
+        modalProps: {
+          settings: changed_settings,
+          onConfirm: () => dispatch(clearDeprecatedLocalSettings()),
+        },
       }));
     }
   };

app/javascript/flavours/glitch/actions/markers.js

@@ -1,8 +1,10 @@
-import api from '../api';
-import { debounce } from 'lodash';
-import { compareId } from '../compare_id';
 import { List as ImmutableList } from 'immutable';
 
+import { debounce } from 'lodash';
+
+import api from '../api';
+import { compareId } from '../compare_id';
+
 export const MARKERS_FETCH_REQUEST = 'MARKERS_FETCH_REQUEST';
 export const MARKERS_FETCH_SUCCESS = 'MARKERS_FETCH_SUCCESS';
 export const MARKERS_FETCH_FAIL    = 'MARKERS_FETCH_FAIL';

app/javascript/flavours/glitch/actions/modal.js

@@ -1,18 +0,0 @@
-export const MODAL_OPEN  = 'MODAL_OPEN';
-export const MODAL_CLOSE = 'MODAL_CLOSE';
-
-export function openModal(type, props) {
-  return {
-    type: MODAL_OPEN,
-    modalType: type,
-    modalProps: props,
-  };
-}
-
-export function closeModal(type, options = { ignoreFocus: false }) {
-  return {
-    type: MODAL_CLOSE,
-    modalType: type,
-    ignoreFocus: options.ignoreFocus,
-  };
-}

app/javascript/flavours/glitch/actions/modal.ts

@@ -0,0 +1,17 @@
+import { createAction } from '@reduxjs/toolkit';
+
+import type { MODAL_COMPONENTS } from '../features/ui/components/modal_root';
+
+export type ModalType = keyof typeof MODAL_COMPONENTS;
+
+interface OpenModalPayload {
+  modalType: ModalType;
+  modalProps: unknown;
+}
+export const openModal = createAction<OpenModalPayload>('MODAL_OPEN');
+
+interface CloseModalPayload {
+  modalType: ModalType | undefined;
+  ignoreFocus: boolean;
+}
+export const closeModal = createAction<CloseModalPayload>('MODAL_CLOSE');

app/javascript/flavours/glitch/actions/mutes.js

@@ -1,7 +1,9 @@
+import { openModal } from 'flavours/glitch/actions/modal';
+
 import api, { getLinks } from '../api';
+
 import { fetchRelationships } from './accounts';
 import { importFetchedAccounts } from './importer';
-import { openModal } from 'flavours/glitch/actions/modal';
 
 export const MUTES_FETCH_REQUEST = 'MUTES_FETCH_REQUEST';
 export const MUTES_FETCH_SUCCESS = 'MUTES_FETCH_SUCCESS';
@@ -96,7 +98,7 @@ export function initMuteModal(account) {
       account,
     });
 
-    dispatch(openModal('MUTE'));
+    dispatch(openModal({ modalType: 'MUTE' }));
   };
 }
 

app/javascript/flavours/glitch/actions/notifications.js

@@ -1,5 +1,15 @@
-import api, { getLinks } from '../api';
 import IntlMessageFormat from 'intl-messageformat';
+import { defineMessages } from 'react-intl';
+
+import { List as ImmutableList } from 'immutable';
+
+import { compareId } from 'flavours/glitch/compare_id';
+import { usePendingItems as preferPendingItems } from 'flavours/glitch/initial_state';
+import { unescapeHTML } from 'flavours/glitch/utils/html';
+import { requestNotificationPermission } from 'flavours/glitch/utils/notifications';
+
+import api, { getLinks } from '../api';
+
 import { fetchFollowRequests, fetchRelationships } from './accounts';
 import {
   importFetchedAccount,
@@ -9,12 +19,9 @@ import {
 } from './importer';
 import { submitMarkers } from './markers';
 import { saveSettings } from './settings';
-import { defineMessages } from 'react-intl';
+
-import { List as ImmutableList } from 'immutable';
+
-import { unescapeHTML } from 'flavours/glitch/utils/html';
+
-import { usePendingItems as preferPendingItems } from 'flavours/glitch/initial_state';
-import { compareId } from 'flavours/glitch/compare_id';
-import { requestNotificationPermission } from 'flavours/glitch/utils/notifications';
 
 export const NOTIFICATIONS_UPDATE = 'NOTIFICATIONS_UPDATE';
 export const NOTIFICATIONS_UPDATE_NOOP = 'NOTIFICATIONS_UPDATE_NOOP';

app/javascript/flavours/glitch/actions/onboarding.js

@@ -6,7 +6,9 @@ export function showOnboardingOnce() {
     const alreadySeen = getState().getIn(['settings', 'onboarded']);
 
     if (!alreadySeen) {
-      dispatch(openModal('ONBOARDING'));
+      dispatch(openModal({
+        modalType: 'ONBOARDING',
+      }));
       dispatch(changeSetting(['onboarded'], true));
       dispatch(saveSettings());
     }

app/javascript/flavours/glitch/actions/pin_statuses.js

@@ -1,7 +1,9 @@
+import { me } from 'flavours/glitch/initial_state';
+
 import api from '../api';
+
 import { importFetchedStatuses } from './importer';
 
-import { me } from 'flavours/glitch/initial_state';
 
 export const PINNED_STATUSES_FETCH_REQUEST = 'PINNED_STATUSES_FETCH_REQUEST';
 export const PINNED_STATUSES_FETCH_SUCCESS = 'PINNED_STATUSES_FETCH_SUCCESS';

app/javascript/flavours/glitch/actions/polls.js

@@ -1,4 +1,5 @@
 import api from '../api';
+
 import { importFetchedPoll } from './importer';
 
 export const POLL_VOTE_REQUEST = 'POLL_VOTE_REQUEST';

app/javascript/flavours/glitch/actions/push_notifications/index.js

@@ -1,5 +1,5 @@
-import { setAlerts } from './setter';
 import { saveSettings } from './registerer';
+import { setAlerts } from './setter';
 
 export function changeAlerts(path, value) {
   return dispatch => {

app/javascript/flavours/glitch/actions/push_notifications/registerer.js

@@ -1,5 +1,6 @@
 import api from '../../api';
 import { pushNotificationsSetting } from '../../settings';
+
 import { setBrowserSupport, setSubscription, clearSubscription } from './setter';
 
 // Taken from https://www.npmjs.com/package/web-push

app/javascript/flavours/glitch/actions/reports.js

@@ -1,4 +1,5 @@
 import api from '../api';
+
 import { openModal } from './modal';
 
 export const REPORT_SUBMIT_REQUEST = 'REPORT_SUBMIT_REQUEST';
@@ -6,9 +7,12 @@ export const REPORT_SUBMIT_SUCCESS = 'REPORT_SUBMIT_SUCCESS';
 export const REPORT_SUBMIT_FAIL    = 'REPORT_SUBMIT_FAIL';
 
 export const initReport = (account, status) => dispatch =>
-  dispatch(openModal('REPORT', {
+  dispatch(openModal({
-    accountId: account.get('id'),
+    modalType: 'REPORT',
-    statusId: status?.get('id'),
+    modalProps: {
+      accountId: account.get('id'),
+      statusId: status?.get('id'),
+    },
   }));
 
 export const submitReport = (params, onSuccess, onFail) => (dispatch, getState) => {

app/javascript/flavours/glitch/actions/search.js

@@ -1,4 +1,5 @@
 import api from '../api';
+
 import { fetchRelationships } from './accounts';
 import { importFetchedAccounts, importFetchedStatuses } from './importer';
 

app/javascript/flavours/glitch/actions/server.js

@@ -1,4 +1,5 @@
 import api from '../api';
+
 import { importFetchedAccount } from './importer';
 
 export const SERVER_FETCH_REQUEST = 'Server_FETCH_REQUEST';

app/javascript/flavours/glitch/actions/settings.js

@@ -1,5 +1,7 @@
-import api from '../api';
 import { debounce } from 'lodash';
+
+import api from '../api';
+
 import { showAlertForError } from './alerts';
 
 export const SETTING_CHANGE = 'SETTING_CHANGE';

app/javascript/flavours/glitch/actions/statuses.js

@@ -1,8 +1,8 @@
 import api from '../api';
 
-import { deleteFromTimelines } from './timelines';
-import { importFetchedStatus, importFetchedStatuses } from './importer';
 import { ensureComposeIsVisible, setComposeToStatus } from './compose';
+import { importFetchedStatus, importFetchedStatuses } from './importer';
+import { deleteFromTimelines } from './timelines';
 
 export const STATUS_FETCH_REQUEST = 'STATUS_FETCH_REQUEST';
 export const STATUS_FETCH_SUCCESS = 'STATUS_FETCH_SUCCESS';

app/javascript/flavours/glitch/actions/store.js

@@ -1,4 +1,5 @@
 import { Iterable, fromJS } from 'immutable';
+
 import { hydrateCompose } from './compose';
 import { importFetchedAccounts } from './importer';
 import { saveSettings } from './settings';

app/javascript/flavours/glitch/actions/streaming.js

@@ -1,6 +1,18 @@
 // @ts-check
 
+import { getLocale } from 'mastodon/locales';
+
 import { connectStream } from '../stream';
+
+import {
+  fetchAnnouncements,
+  updateAnnouncements,
+  updateReaction as updateAnnouncementsReaction,
+  deleteAnnouncement,
+} from './announcements';
+import { updateConversations } from './conversations';
+import { updateNotifications, expandNotifications } from './notifications';
+import { updateStatus } from './statuses';
 import {
   updateTimeline,
   deleteFromTimelines,
@@ -12,16 +24,6 @@ import {
   fillCommunityTimelineGaps,
   fillListTimelineGaps,
 } from './timelines';
-import { updateNotifications, expandNotifications } from './notifications';
-import { updateConversations } from './conversations';
-import { updateStatus } from './statuses';
-import {
-  fetchAnnouncements,
-  updateAnnouncements,
-  updateReaction as updateAnnouncementsReaction,
-  deleteAnnouncement,
-} from './announcements';
-import { getLocale } from 'mastodon/locales';
 
 const { messages } = getLocale();
 

app/javascript/flavours/glitch/actions/suggestions.js

@@ -1,6 +1,7 @@
 import api from '../api';
-import { importFetchedAccounts } from './importer';
+
 import { fetchRelationships } from './accounts';
+import { importFetchedAccounts } from './importer';
 
 export const SUGGESTIONS_FETCH_REQUEST = 'SUGGESTIONS_FETCH_REQUEST';
 export const SUGGESTIONS_FETCH_SUCCESS = 'SUGGESTIONS_FETCH_SUCCESS';

app/javascript/flavours/glitch/actions/timelines.js

@@ -1,11 +1,13 @@
-import { importFetchedStatus, importFetchedStatuses } from './importer';
-import { submitMarkers } from './markers';
-import api, { getLinks } from 'flavours/glitch/api';
 import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
+
+import api, { getLinks } from 'flavours/glitch/api';
 import { compareId } from 'flavours/glitch/compare_id';
 import { usePendingItems as preferPendingItems } from 'flavours/glitch/initial_state';
 import { toServerSideType } from 'flavours/glitch/utils/filters';
 
+import { importFetchedStatus, importFetchedStatuses } from './importer';
+import { submitMarkers } from './markers';
+
 export const TIMELINE_UPDATE  = 'TIMELINE_UPDATE';
 export const TIMELINE_DELETE  = 'TIMELINE_DELETE';
 export const TIMELINE_CLEAR   = 'TIMELINE_CLEAR';

app/javascript/flavours/glitch/actions/trends.js

@@ -1,4 +1,5 @@
 import api, { getLinks } from '../api';
+
 import { importFetchedStatuses } from './importer';
 
 export const TRENDS_TAGS_FETCH_REQUEST = 'TRENDS_TAGS_FETCH_REQUEST';

app/javascript/flavours/glitch/api.js

@@ -2,8 +2,8 @@
 
 import axios from 'axios';
 import LinkHeader from 'http-link-header';
-import ready from './ready';
 
+import ready from './ready';
 /**
  * @param {import('axios').AxiosResponse} response
  * @returns {LinkHeader}

app/javascript/flavours/glitch/components/account.jsx

@@ -1,20 +1,24 @@
-import React, { Fragment } from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
+
+import { defineMessages, injectIntl } from 'react-intl';
+
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+
+import { Skeleton } from 'flavours/glitch/components/skeleton';
+import { me } from 'flavours/glitch/initial_state';
+
 import { Avatar } from './avatar';
 import { DisplayName } from './display_name';
-import Permalink from './permalink';
 import { IconButton } from './icon_button';
-import { defineMessages, injectIntl } from 'react-intl';
+import Permalink from './permalink';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { me } from 'flavours/glitch/initial_state';
 import { RelativeTimestamp } from './relative_timestamp';
-import { Skeleton } from 'flavours/glitch/components/skeleton';
+
 
 const messages = defineMessages({
   follow: { id: 'account.follow', defaultMessage: 'Follow' },
   unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
-  requested: { id: 'account.requested', defaultMessage: 'Awaiting approval' },
+  requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' },
   unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
   unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
   mute_notifications: { id: 'account.mute_notifications', defaultMessage: 'Mute notifications from @{name}' },
@@ -97,10 +101,10 @@ class Account extends ImmutablePureComponent {
 
     if (hidden) {
       return (
-        <Fragment>
+        <>
           {account.get('display_name')}
           {account.get('username')}
-        </Fragment>
+        </>
       );
     }
 
@@ -128,10 +132,10 @@ class Account extends ImmutablePureComponent {
           hidingNotificationsButton = <IconButton active icon='bell-slash' title={intl.formatMessage(messages.mute_notifications, { name: account.get('username')  })} onClick={this.handleMuteNotifications} />;
         }
         buttons = (
-          <Fragment>
+          <>
             <IconButton active icon='volume-up' title={intl.formatMessage(messages.unmute, { name: account.get('username') })} onClick={this.handleMute} />
             {hidingNotificationsButton}
-          </Fragment>
+          </>
         );
       } else if (defaultAction === 'mute') {
         buttons = <IconButton icon='volume-off' title={intl.formatMessage(messages.mute, { name: account.get('username') })} onClick={this.handleMute} />;

app/javascript/flavours/glitch/components/admin/Counter.jsx

@@ -1,9 +1,13 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import api from 'flavours/glitch/api';
+import { PureComponent } from 'react';
+
 import { FormattedNumber } from 'react-intl';
-import { Sparklines, SparklinesCurve } from 'react-sparklines';
+
 import classNames from 'classnames';
+
+import { Sparklines, SparklinesCurve } from 'react-sparklines';
+
+import api from 'flavours/glitch/api';
 import { Skeleton } from 'flavours/glitch/components/skeleton';
 
 const percIncrease = (a, b) => {
@@ -24,7 +28,7 @@ const percIncrease = (a, b) => {
   return percent;
 };
 
-export default class Counter extends React.PureComponent {
+export default class Counter extends PureComponent {
 
   static propTypes = {
     measure: PropTypes.string.isRequired,
@@ -62,25 +66,25 @@ export default class Counter extends React.PureComponent {
 
     if (loading) {
       content = (
-        <React.Fragment>
+        <>
           <span className='sparkline__value__total'><Skeleton width={43} /></span>
           <span className='sparkline__value__change'><Skeleton width={43} /></span>
-        </React.Fragment>
+        </>
       );
     } else {
       const measure = data[0];
       const percentChange = measure.previous_total && percIncrease(measure.previous_total * 1, measure.total * 1);
 
       content = (
-        <React.Fragment>
+        <>
           <span className='sparkline__value__total'>{measure.human_value || <FormattedNumber value={measure.total} />}</span>
           {measure.previous_total && (<span className={classNames('sparkline__value__change', { positive: percentChange > 0, negative: percentChange < 0 })}>{percentChange > 0 && '+'}<FormattedNumber value={percentChange} style='percent' /></span>)}
-        </React.Fragment>
+        </>
       );
     }
 
     const inner = (
-      <React.Fragment>
+      <>
         <div className='sparkline__value'>
           {content}
         </div>
@@ -96,7 +100,7 @@ export default class Counter extends React.PureComponent {
             </Sparklines>
           )}
         </div>
-      </React.Fragment>
+      </>
     );
 
     if (href) {

app/javascript/flavours/glitch/components/admin/Dimension.jsx

@@ -1,11 +1,13 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import api from 'flavours/glitch/api';
+import { PureComponent } from 'react';
-import { FormattedNumber } from 'react-intl';
-import { roundTo10 } from 'flavours/glitch/utils/numbers';
-import { Skeleton } from 'flavours/glitch/components/skeleton';
 
-export default class Dimension extends React.PureComponent {
+import { FormattedNumber } from 'react-intl';
+
+import api from 'flavours/glitch/api';
+import { Skeleton } from 'flavours/glitch/components/skeleton';
+import { roundTo10 } from 'flavours/glitch/utils/numbers';
+
+export default class Dimension extends PureComponent {
 
   static propTypes = {
     dimension: PropTypes.string.isRequired,

app/javascript/flavours/glitch/components/admin/ReportReasonSelector.jsx

@@ -1,16 +1,19 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import api from 'flavours/glitch/api';
+import { PureComponent } from 'react';
+
 import { injectIntl, defineMessages } from 'react-intl';
+
 import classNames from 'classnames';
 
+import api from 'flavours/glitch/api';
+
 const messages = defineMessages({
   other: { id: 'report.categories.other', defaultMessage: 'Other' },
   spam: { id: 'report.categories.spam', defaultMessage: 'Spam' },
   violation: { id: 'report.categories.violation', defaultMessage: 'Content violates one or more server rules' },
 });
 
-class Category extends React.PureComponent {
+class Category extends PureComponent {
 
   static propTypes = {
     id: PropTypes.string.isRequired,
@@ -52,7 +55,7 @@ class Category extends React.PureComponent {
 
 }
 
-class Rule extends React.PureComponent {
+class Rule extends PureComponent {
 
   static propTypes = {
     id: PropTypes.string.isRequired,
@@ -84,7 +87,7 @@ class Rule extends React.PureComponent {
 
 }
 
-class ReportReasonSelector extends React.PureComponent {
+class ReportReasonSelector extends PureComponent {
 
   static propTypes = {
     id: PropTypes.string.isRequired,

app/javascript/flavours/glitch/components/admin/Retention.jsx

@@ -1,8 +1,11 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import api from 'flavours/glitch/api';
+import { PureComponent } from 'react';
+
 import { FormattedMessage, FormattedNumber, FormattedDate } from 'react-intl';
+
 import classNames from 'classnames';
+
+import api from 'flavours/glitch/api';
 import { roundTo10 } from 'flavours/glitch/utils/numbers';
 
 const dateForCohort = cohort => {
@@ -14,7 +17,7 @@ const dateForCohort = cohort => {
   }
 };
 
-export default class Retention extends React.PureComponent {
+export default class Retention extends PureComponent {
 
   static propTypes = {
     start_at: PropTypes.string,

app/javascript/flavours/glitch/components/admin/Trends.jsx

@@ -1,11 +1,14 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import api from 'flavours/glitch/api';
+import { PureComponent } from 'react';
+
 import { FormattedMessage } from 'react-intl';
+
 import classNames from 'classnames';
+
+import api from 'flavours/glitch/api';
 import Hashtag from 'flavours/glitch/components/hashtag';
 
-export default class Trends extends React.PureComponent {
+export default class Trends extends PureComponent {
 
   static propTypes = {
     limit: PropTypes.number.isRequired,

app/javascript/flavours/glitch/components/animated_number.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
+import * as React from 'react';
 
 import { TransitionMotion, spring } from 'react-motion';
 

app/javascript/flavours/glitch/components/attachment_list.jsx

@@ -1,9 +1,12 @@
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import ImmutablePureComponent from 'react-immutable-pure-component';
+
 import { FormattedMessage } from 'react-intl';
+
 import classNames from 'classnames';
+
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+
 import { Icon } from 'flavours/glitch/components/icon';
 
 const filename = url => url.split('/').pop().split('#')[0].split('?')[0];

app/javascript/flavours/glitch/components/autosuggest_emoji.jsx

@@ -1,10 +1,10 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import unicodeMapping from 'flavours/glitch/features/emoji/emoji_unicode_mapping_light';
+import { PureComponent } from 'react';
 
+import unicodeMapping from 'flavours/glitch/features/emoji/emoji_unicode_mapping_light';
 import { assetHost } from 'flavours/glitch/utils/config';
 
-export default class AutosuggestEmoji extends React.PureComponent {
+export default class AutosuggestEmoji extends PureComponent {
 
   static propTypes = {
     emoji: PropTypes.object.isRequired,

app/javascript/flavours/glitch/components/autosuggest_hashtag.jsx

@@ -1,9 +1,11 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import ShortNumber from 'flavours/glitch/components/short_number';
+import { PureComponent } from 'react';
+
 import { FormattedMessage } from 'react-intl';
 
-export default class AutosuggestHashtag extends React.PureComponent {
+import ShortNumber from 'flavours/glitch/components/short_number';
+
+export default class AutosuggestHashtag extends PureComponent {
 
   static propTypes = {
     tag: PropTypes.shape({

app/javascript/flavours/glitch/components/autosuggest_input.jsx

@@ -1,11 +1,16 @@
-import React from 'react';
+import PropTypes from 'prop-types';
+
+import classNames from 'classnames';
+
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+
 import AutosuggestAccountContainer from 'flavours/glitch/features/compose/containers/autosuggest_account_container';
+
 import AutosuggestEmoji from './autosuggest_emoji';
 import AutosuggestHashtag from './autosuggest_hashtag';
-import ImmutablePropTypes from 'react-immutable-proptypes';
+
-import PropTypes from 'prop-types';
+
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import classNames from 'classnames';
 
 const textAtCursorMatchesToken = (str, caretPosition, searchTokens) => {
   let word;

app/javascript/flavours/glitch/components/autosuggest_textarea.jsx

@@ -1,12 +1,16 @@
-import React from 'react';
+import PropTypes from 'prop-types';
+
+import classNames from 'classnames';
+
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+
+import Textarea from 'react-textarea-autosize';
+
 import AutosuggestAccountContainer from 'flavours/glitch/features/compose/containers/autosuggest_account_container';
+
 import AutosuggestEmoji from './autosuggest_emoji';
 import AutosuggestHashtag from './autosuggest_hashtag';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import PropTypes from 'prop-types';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import Textarea from 'react-textarea-autosize';
-import classNames from 'classnames';
 
 const textAtCursorMatchesToken = (str, caretPosition) => {
   let word;

app/javascript/flavours/glitch/components/avatar_composite.jsx

@@ -1,9 +1,11 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
+
 import ImmutablePropTypes from 'react-immutable-proptypes';
+
 import { autoPlayGif } from 'flavours/glitch/initial_state';
 
-export default class AvatarComposite extends React.PureComponent {
+export default class AvatarComposite extends PureComponent {
 
   static propTypes = {
     accounts: ImmutablePropTypes.list.isRequired,

app/javascript/flavours/glitch/components/avatar_overlay.jsx

@@ -1,9 +1,11 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
+
 import ImmutablePropTypes from 'react-immutable-proptypes';
+
 import { autoPlayGif } from 'flavours/glitch/initial_state';
 
-export default class AvatarOverlay extends React.PureComponent {
+export default class AvatarOverlay extends PureComponent {
 
   static propTypes = {
     account: ImmutablePropTypes.map.isRequired,

app/javascript/flavours/glitch/components/blurhash.tsx

@@ -1,4 +1,5 @@
-import React, { useRef, useEffect } from 'react';
+import { useRef, useEffect } from 'react';
+import * as React from 'react';
 
 import { decode } from 'blurhash';
 

app/javascript/flavours/glitch/components/button.jsx

@@ -1,8 +1,9 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
+
 import classNames from 'classnames';
 
-export default class Button extends React.PureComponent {
+export default class Button extends PureComponent {
 
   static propTypes = {
     text: PropTypes.node,

app/javascript/flavours/glitch/components/check.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 const Check = () => (
   <svg width='14' height='11' viewBox='0 0 14 11'>
     <path d='M11.264 0L5.26 6.004 2.103 2.847 0 4.95l5.26 5.26 8.108-8.107L11.264 0' fill='currentColor' fillRule='evenodd' />

app/javascript/flavours/glitch/components/column.jsx

@@ -1,11 +1,13 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
+
 import { supportsPassiveEvents } from 'detect-passive-events';
+
 import { scrollTop } from '../scroll';
 
 const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
 
-export default class Column extends React.PureComponent {
+export default class Column extends PureComponent {
 
   static propTypes = {
     children: PropTypes.node,

app/javascript/flavours/glitch/components/column_back_button.jsx

@@ -1,10 +1,13 @@
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
-import { Icon } from 'flavours/glitch/components/icon';
+import { PureComponent } from 'react';
 import { createPortal } from 'react-dom';
 
-export default class ColumnBackButton extends React.PureComponent {
+import { FormattedMessage } from 'react-intl';
+
+import { Icon } from 'flavours/glitch/components/icon';
+
+
+export default class ColumnBackButton extends PureComponent {
 
   static contextTypes = {
     router: PropTypes.object,

app/javascript/flavours/glitch/components/column_back_button_slim.jsx

@@ -1,9 +1,11 @@
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
 import { Icon } from 'flavours/glitch/components/icon';
 
-export default class ColumnBackButtonSlim extends React.PureComponent {
+export default class ColumnBackButtonSlim extends PureComponent {
 
   static contextTypes = {
     router: PropTypes.object,

app/javascript/flavours/glitch/components/column_header.jsx

@@ -1,8 +1,11 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
 import { createPortal } from 'react-dom';
-import classNames from 'classnames';
+
 import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
+
+import classNames from 'classnames';
+
 import { Icon } from 'flavours/glitch/components/icon';
 
 const messages = defineMessages({
@@ -12,7 +15,7 @@ const messages = defineMessages({
   moveRight: { id: 'column_header.moveRight_settings', defaultMessage: 'Move column to the right' },
 });
 
-class ColumnHeader extends React.PureComponent {
+class ColumnHeader extends PureComponent {
 
   static contextTypes = {
     router: PropTypes.object,

app/javascript/flavours/glitch/components/common_counter.jsx

@@ -1,7 +1,5 @@
 // @ts-check
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
-
 /**
  * Returns custom renderer for one of the common counter types
  * @param {"statuses" | "following" | "followers"} counterType

app/javascript/flavours/glitch/components/dismissable_banner.jsx

@@ -1,14 +1,17 @@
-import React from 'react';
-import { IconButton } from './icon_button';
 import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
+
 import { injectIntl, defineMessages } from 'react-intl';
+
 import { bannerSettings } from 'flavours/glitch/settings';
 
+import { IconButton } from './icon_button';
+
 const messages = defineMessages({
   dismiss: { id: 'dismissable_banner.dismiss', defaultMessage: 'Dismiss' },
 });
 
-class DismissableBanner extends React.PureComponent {
+class DismissableBanner extends PureComponent {
 
   static propTypes = {
     id: PropTypes.string.isRequired,

app/javascript/flavours/glitch/components/domain.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
+import * as React from 'react';
 
 import type { InjectedIntl } from 'react-intl';
 import { defineMessages, injectIntl } from 'react-intl';

app/javascript/flavours/glitch/components/dropdown_menu.jsx

@@ -1,16 +1,21 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import ImmutablePropTypes from 'react-immutable-proptypes';
+import { PureComponent, cloneElement, Children } from 'react';
-import { IconButton } from './icon_button';
+
-import Overlay from 'react-overlays/Overlay';
-import { supportsPassiveEvents } from 'detect-passive-events';
 import classNames from 'classnames';
+
+import ImmutablePropTypes from 'react-immutable-proptypes';
+
+import { supportsPassiveEvents } from 'detect-passive-events';
+import Overlay from 'react-overlays/Overlay';
+
 import { CircularProgress } from 'flavours/glitch/components/loading_indicator';
 
+import { IconButton } from './icon_button';
+
 const listenerOptions = supportsPassiveEvents ? { passive: true, capture: true } : true;
 let id = 0;
 
-class DropdownMenu extends React.PureComponent {
+class DropdownMenu extends PureComponent {
 
   static contextTypes = {
     router: PropTypes.object,
@@ -155,7 +160,7 @@ class DropdownMenu extends React.PureComponent {
 
 }
 
-export default class Dropdown extends React.PureComponent {
+export default class Dropdown extends PureComponent {
 
   static contextTypes = {
     router: PropTypes.object,
@@ -286,7 +291,7 @@ export default class Dropdown extends React.PureComponent {
 
     const open = this.state.id === openDropdownId;
 
-    const button = children ? React.cloneElement(React.Children.only(children), {
+    const button = children ? cloneElement(Children.only(children), {
       onClick: this.handleClick,
       onMouseDown: this.handleMouseDown,
       onKeyDown: this.handleButtonKeyDown,
@@ -306,7 +311,7 @@ export default class Dropdown extends React.PureComponent {
     );
 
     return (
-      <React.Fragment>
+      <>
         <span ref={this.setTargetRef}>
           {button}
         </span>
@@ -329,7 +334,7 @@ export default class Dropdown extends React.PureComponent {
             </div>
           )}
         </Overlay>
-      </React.Fragment>
+      </>
     );
   }
 

app/javascript/flavours/glitch/components/edited_timestamp/containers/dropdown_menu_container.js

@@ -1,4 +1,5 @@
 import { connect } from 'react-redux';
+
 import { openDropdownMenu, closeDropdownMenu } from 'flavours/glitch/actions/dropdown_menu';
 import { fetchHistory } from 'flavours/glitch/actions/history';
 import DropdownMenu from 'flavours/glitch/components/dropdown_menu';

app/javascript/flavours/glitch/components/edited_timestamp/index.jsx

@@ -1,22 +1,29 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
+
 import { FormattedMessage, injectIntl } from 'react-intl';
-import { Icon } from 'flavours/glitch/components/icon';
+
-import DropdownMenu from './containers/dropdown_menu_container';
 import { connect } from 'react-redux';
+
 import { openModal } from 'flavours/glitch/actions/modal';
-import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
+import { Icon } from 'flavours/glitch/components/icon';
 import InlineAccount from 'flavours/glitch/components/inline_account';
+import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
+
+import DropdownMenu from './containers/dropdown_menu_container';
 
 const mapDispatchToProps = (dispatch, { statusId }) => ({
 
   onItemClick (index) {
-    dispatch(openModal('COMPARE_HISTORY', { index, statusId }));
+    dispatch(openModal({
+      modalType: 'COMPARE_HISTORY',
+      modalProps: { index, statusId },
+    }));
   },
 
 });
 
-class EditedTimestamp extends React.PureComponent {
+class EditedTimestamp extends PureComponent {
 
   static propTypes = {
     statusId: PropTypes.string.isRequired,

app/javascript/flavours/glitch/components/error_boundary.jsx

@@ -1,12 +1,16 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
+
 import { FormattedMessage } from 'react-intl';
-import { source_url } from 'flavours/glitch/initial_state';
+
-import { preferencesLink } from 'flavours/glitch/utils/backend_links';
-import StackTrace from 'stacktrace-js';
 import { Helmet } from 'react-helmet';
 
-export default class ErrorBoundary extends React.PureComponent {
+import StackTrace from 'stacktrace-js';
+
+import { source_url } from 'flavours/glitch/initial_state';
+import { preferencesLink } from 'flavours/glitch/utils/backend_links';
+
+export default class ErrorBoundary extends PureComponent {
 
   static propTypes = {
     children: PropTypes.node,

app/javascript/flavours/glitch/components/gifv.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
+import * as React from 'react';
 
 interface Props {
   src: string;

app/javascript/flavours/glitch/components/hashtag.jsx

@@ -1,15 +1,21 @@
 // @ts-check
-import React from 'react';
-import { Sparklines, SparklinesCurve } from 'react-sparklines';
-import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
-import ImmutablePropTypes from 'react-immutable-proptypes';
+import { Component } from 'react';
-import Permalink from './permalink';
+
-import ShortNumber from 'flavours/glitch/components/short_number';
+import { FormattedMessage } from 'react-intl';
-import { Skeleton } from 'flavours/glitch/components/skeleton';
+
 import classNames from 'classnames';
 
-class SilentErrorBoundary extends React.Component {
+import ImmutablePropTypes from 'react-immutable-proptypes';
+
+import { Sparklines, SparklinesCurve } from 'react-sparklines';
+
+import ShortNumber from 'flavours/glitch/components/short_number';
+import { Skeleton } from 'flavours/glitch/components/skeleton';
+
+import Permalink from './permalink';
+
+class SilentErrorBoundary extends Component {
 
   static propTypes = {
     children: PropTypes.node,
@@ -70,7 +76,7 @@ const Hashtag = ({ name, href, to, people, uses, history, className, description
   <div className={classNames('trends__item', className)}>
     <div className='trends__item__name'>
       <Permalink href={href} to={to}>
-        {name ? <React.Fragment>#<span>{name}</span></React.Fragment> : <Skeleton width={50} />}
+        {name ? <>#<span>{name}</span></> : <Skeleton width={50} />}
       </Permalink>
 
       {description ? (

app/javascript/flavours/glitch/components/icon.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import classNames from 'classnames';
 

app/javascript/flavours/glitch/components/icon_button.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import classNames from 'classnames';
 
@@ -138,7 +138,7 @@ export class IconButton extends React.PureComponent<Props, States> {
     }
 
     let contents = (
-      <React.Fragment>
+      <>
         <Icon id={icon} fixedWidth aria-hidden='true' />{' '}
         {typeof counter !== 'undefined' && (
           <span className='icon-button__counter'>
@@ -146,7 +146,7 @@ export class IconButton extends React.PureComponent<Props, States> {
           </span>
         )}
         {this.props.label}
-      </React.Fragment>
+      </>
     );
 
     if (href != null) {

app/javascript/flavours/glitch/components/icon_with_badge.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import { Icon } from './icon';
 

app/javascript/flavours/glitch/components/inline_account.jsx

@@ -1,8 +1,10 @@
-import React from 'react';
+import { PureComponent } from 'react';
+
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
-import { makeGetAccount } from 'flavours/glitch/selectors';
+
 import { Avatar } from 'flavours/glitch/components/avatar';
+import { makeGetAccount } from 'flavours/glitch/selectors';
 
 const makeMapStateToProps = () => {
   const getAccount = makeGetAccount();
@@ -14,7 +16,7 @@ const makeMapStateToProps = () => {
   return mapStateToProps;
 };
 
-class InlineAccount extends React.PureComponent {
+class InlineAccount extends PureComponent {
 
   static propTypes = {
     account: ImmutablePropTypes.map.isRequired,

app/javascript/flavours/glitch/components/intersection_observer_article.jsx

@@ -1,12 +1,12 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import scheduleIdleTask from '../features/ui/util/schedule_idle_task';
+import { cloneElement, Component } from 'react';
-import getRectFromEntry from '../features/ui/util/get_rect_from_entry';
 
+import getRectFromEntry from '../features/ui/util/get_rect_from_entry';
+import scheduleIdleTask from '../features/ui/util/schedule_idle_task';
 // Diff these props in the "unrendered" state
 const updateOnPropsForUnrendered = ['id', 'index', 'listLength', 'cachedHeight'];
 
-export default class IntersectionObserverArticle extends React.Component {
+export default class IntersectionObserverArticle extends Component {
 
   static propTypes = {
     intersectionObserverWrapper: PropTypes.object.isRequired,
@@ -123,7 +123,7 @@ export default class IntersectionObserverArticle extends React.Component {
         tabIndex={0}
         style={style}
       >
-        {children && React.cloneElement(children, { hidden: !isIntersecting && (isHidden || !!cachedHeight) })}
+        {children && cloneElement(children, { hidden: !isIntersecting && (isHidden || !!cachedHeight) })}
       </article>
     );
   }

app/javascript/flavours/glitch/components/link.jsx

@@ -2,13 +2,13 @@
 //  ~ 😘 kibi!
 
 //  Package imports.
-import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import { PureComponent } from 'react';
+
+import classNames from 'classnames';
 
 //  Utils.
 import { assignHandlers } from 'flavours/glitch/utils/react_helpers';
-
 //  Handlers.
 const handlers = {
 
@@ -25,7 +25,7 @@ const handlers = {
 };
 
 //  The component.
-export default class Link extends React.PureComponent {
+export default class Link extends PureComponent {
 
   //  Constructor.
   constructor (props) {

app/javascript/flavours/glitch/components/load_gap.jsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { injectIntl, defineMessages } from 'react-intl';
-import { Icon } from 'flavours/glitch/components/icon';
-
-const messages = defineMessages({
-  load_more: { id: 'status.load_more', defaultMessage: 'Load more' },
-});
-
-class LoadGap extends React.PureComponent {
-
-  static propTypes = {
-    disabled: PropTypes.bool,
-    maxId: PropTypes.string,
-    onClick: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  handleClick = () => {
-    this.props.onClick(this.props.maxId);
-  };
-
-  render () {
-    const { disabled, intl } = this.props;
-
-    return (
-      <button className='load-more load-gap' disabled={disabled} onClick={this.handleClick} aria-label={intl.formatMessage(messages.load_more)}>
-        <Icon id='ellipsis-h' />
-      </button>
-    );
-  }
-
-}
-
-export default injectIntl(LoadGap);

app/javascript/flavours/glitch/components/load_gap.tsx

@@ -0,0 +1,36 @@
+import { useCallback } from 'react';
+
+import type { InjectedIntl } from 'react-intl';
+import { injectIntl, defineMessages } from 'react-intl';
+
+import { Icon } from 'flavours/glitch/components/icon';
+
+const messages = defineMessages({
+  load_more: { id: 'status.load_more', defaultMessage: 'Load more' },
+});
+
+interface Props {
+  disabled: boolean;
+  maxId: string;
+  onClick: (maxId: string) => void;
+  intl: InjectedIntl;
+}
+
+const _LoadGap: React.FC<Props> = ({ disabled, maxId, onClick, intl }) => {
+  const handleClick = useCallback(() => {
+    onClick(maxId);
+  }, [maxId, onClick]);
+
+  return (
+    <button
+      className='load-more load-gap'
+      disabled={disabled}
+      onClick={handleClick}
+      aria-label={intl.formatMessage(messages.load_more)}
+    >
+      <Icon id='ellipsis-h' />
+    </button>
+  );
+};
+
+export const LoadGap = injectIntl(_LoadGap);

app/javascript/flavours/glitch/components/load_more.jsx

@@ -1,8 +1,9 @@
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
 
-export default class LoadMore extends React.PureComponent {
+import { FormattedMessage } from 'react-intl';
+
+export default class LoadMore extends PureComponent {
 
   static propTypes = {
     onClick: PropTypes.func,

app/javascript/flavours/glitch/components/load_pending.jsx

@@ -1,8 +1,9 @@
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
 
-export default class LoadPending extends React.PureComponent {
+import { FormattedMessage } from 'react-intl';
+
+export default class LoadPending extends PureComponent {
 
   static propTypes = {
     onClick: PropTypes.func,

app/javascript/flavours/glitch/components/loading_indicator.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
 export const CircularProgress = ({ size, strokeWidth }) => {

app/javascript/flavours/glitch/components/logo.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import logo from 'mastodon/../images/logo.svg';
 
 export const WordmarkLogo = () => (

app/javascript/flavours/glitch/components/media_attachments.jsx

@@ -1,11 +1,13 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { MediaGallery, Video, Audio } from 'flavours/glitch/features/ui/util/async-components';
+
-import Bundle from 'flavours/glitch/features/ui/components/bundle';
 import noop from 'lodash/noop';
 
+import Bundle from 'flavours/glitch/features/ui/components/bundle';
+import { MediaGallery, Video, Audio } from 'flavours/glitch/features/ui/util/async-components';
+
 export default class MediaAttachments extends ImmutablePureComponent {
 
   static propTypes = {

app/javascript/flavours/glitch/components/media_gallery.jsx

@@ -1,13 +1,19 @@
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import { is } from 'immutable';
+import { PureComponent } from 'react';
-import { IconButton } from './icon_button';
+
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+
 import classNames from 'classnames';
-import { autoPlayGif, displayMedia, useBlurhash } from 'flavours/glitch/initial_state';
+
+import { is } from 'immutable';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+
 import { debounce } from 'lodash';
+
 import { Blurhash } from 'flavours/glitch/components/blurhash';
+import { autoPlayGif, displayMedia, useBlurhash } from 'flavours/glitch/initial_state';
+
+import { IconButton } from './icon_button';
 
 const messages = defineMessages({
   hidden: {
@@ -32,7 +38,7 @@ const messages = defineMessages({
   },
 });
 
-class Item extends React.PureComponent {
+class Item extends PureComponent {
 
   static propTypes = {
     attachment: ImmutablePropTypes.map.isRequired,
@@ -217,7 +223,7 @@ class Item extends React.PureComponent {
 
 }
 
-class MediaGallery extends React.PureComponent {
+class MediaGallery extends PureComponent {
 
   static propTypes = {
     sensitive: PropTypes.bool,

app/javascript/flavours/glitch/components/modal_root.jsx

@@ -1,10 +1,11 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import 'wicg-inert';
+import { PureComponent } from 'react';
-import { createBrowserHistory } from 'history';
-import { multiply } from 'color-blend';
 
-export default class ModalRoot extends React.PureComponent {
+import 'wicg-inert';
+import { multiply } from 'color-blend';
+import { createBrowserHistory } from 'history';
+
+export default class ModalRoot extends PureComponent {
 
   static contextTypes = {
     router: PropTypes.object,

app/javascript/flavours/glitch/components/navigation_portal.jsx

@@ -1,21 +1,21 @@
-import React from 'react';
+import { PureComponent } from 'react';
+
 import { Switch, Route, withRouter } from 'react-router-dom';
-import { showTrends } from 'flavours/glitch/initial_state';
+
-import Trends from 'flavours/glitch/features/getting_started/containers/trends_container';
 import AccountNavigation from 'flavours/glitch/features/account/navigation';
+import Trends from 'flavours/glitch/features/getting_started/containers/trends_container';
+import { showTrends } from 'flavours/glitch/initial_state';
 
 const DefaultNavigation = () => (
-  <>
+  showTrends ? (
-    {showTrends && (
+    <>
-      <>
+      <div className='flex-spacer' />
-        <div className='flex-spacer' />
+      <Trends />
-        <Trends />
+    </>
-      </>
+  ) : null
-    )}
-  </>
 );
 
-class NavigationPortal extends React.PureComponent {
+class NavigationPortal extends PureComponent {
 
   render () {
     return (

app/javascript/flavours/glitch/components/not_signed_in_indicator.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import { FormattedMessage } from 'react-intl';
 

app/javascript/flavours/glitch/components/notification_purge_buttons.jsx

@@ -6,13 +6,16 @@
 
 
 //  Package imports  //
-import React from 'react';
 import PropTypes from 'prop-types';
+
 import { defineMessages, injectIntl } from 'react-intl';
-import ImmutablePureComponent from 'react-immutable-pure-component';
+
-import { Icon } from 'flavours/glitch/components/icon';
 import classNames from 'classnames';
 
+import ImmutablePureComponent from 'react-immutable-pure-component';
+
+import { Icon } from 'flavours/glitch/components/icon';
+
 const messages = defineMessages({
   btnAll : { id: 'notification_purge.btn_all', defaultMessage: 'Select\nall' },
   btnNone : { id: 'notification_purge.btn_none', defaultMessage: 'Select\nnone' },

app/javascript/flavours/glitch/components/permalink.jsx

@@ -1,7 +1,7 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
 
-export default class Permalink extends React.PureComponent {
+export default class Permalink extends PureComponent {
 
   static contextTypes = {
     router: PropTypes.object,

app/javascript/flavours/glitch/components/picture_in_picture_placeholder.jsx

@@ -1,11 +1,14 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import { Icon } from 'flavours/glitch/components/icon';
+import { PureComponent } from 'react';
-import { removePictureInPicture } from 'flavours/glitch/actions/picture_in_picture';
+
-import { connect } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 
-class PictureInPicturePlaceholder extends React.PureComponent {
+import { connect } from 'react-redux';
+
+import { removePictureInPicture } from 'flavours/glitch/actions/picture_in_picture';
+import { Icon } from 'flavours/glitch/components/icon';
+
+class PictureInPicturePlaceholder extends PureComponent {
 
   static propTypes = {
     dispatch: PropTypes.func.isRequired,

app/javascript/flavours/glitch/components/poll.jsx

@@ -1,15 +1,21 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+
+import classNames from 'classnames';
+
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+
-import classNames from 'classnames';
-import Motion from 'flavours/glitch/features/ui/util/optional_motion';
-import spring from 'react-motion/lib/spring';
 import escapeTextContentForBrowser from 'escape-html';
-import emojify from 'flavours/glitch/features/emoji/emoji';
+import spring from 'react-motion/lib/spring';
-import { RelativeTimestamp } from './relative_timestamp';
+
 import { Icon } from 'flavours/glitch/components/icon';
+import emojify from 'flavours/glitch/features/emoji/emoji';
+import Motion from 'flavours/glitch/features/ui/util/optional_motion';
+
+import { RelativeTimestamp } from './relative_timestamp';
+
 
 const messages = defineMessages({
   closed: {

app/javascript/flavours/glitch/components/radio_button.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import classNames from 'classnames';
 

app/javascript/flavours/glitch/components/regeneration_indicator.jsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
+
 import illustration from 'flavours/glitch/images/elephant_ui_working.svg';
 
 const RegenerationIndicator = () => (