Merge remote-tracking branch 'upstream/main'

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';
@@ -422,7 +425,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', {
-    statusId: status?.get('id'),
-    contextType: contextType,
+  dispatch(openModal({
+    modalType: 'FILTER',
+    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', {
-        settings: changed_settings,
-        onConfirm: () => dispatch(clearDeprecatedLocalSettings()),
+      dispatch(openModal({
+        modalType: 'DEPRECATED_SETTINGS',
+        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', {
-    accountId: account.get('id'),
-    statusId: status?.get('id'),
+  dispatch(openModal({
+    modalType: 'REPORT',
+    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 ImmutablePureComponent from 'react-immutable-pure-component';
-import { me } from 'flavours/glitch/initial_state';
+import Permalink from './permalink';
 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 { FormattedNumber } from 'react-intl';
-import { roundTo10 } from 'flavours/glitch/utils/numbers';
-import { Skeleton } from 'flavours/glitch/components/skeleton';
+import { PureComponent } from 'react';
 
-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 { IconButton } from './icon_button';
-import Overlay from 'react-overlays/Overlay';
-import { supportsPassiveEvents } from 'detect-passive-events';
+import { PureComponent, cloneElement, Children } from 'react';
+
 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 Permalink from './permalink';
-import ShortNumber from 'flavours/glitch/components/short_number';
-import { Skeleton } from 'flavours/glitch/components/skeleton';
+import { Component } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
 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 getRectFromEntry from '../features/ui/util/get_rect_from_entry';
+import { cloneElement, Component } from 'react';
 
+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 { IconButton } from './icon_button';
+import { PureComponent } from 'react';
+
 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 { createBrowserHistory } from 'history';
-import { multiply } from 'color-blend';
+import { PureComponent } from 'react';
 
-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 && (
-      <>
-        <div className='flex-spacer' />
-        <Trends />
-      </>
-    )}
-  </>
+  showTrends ? (
+    <>
+      <div className='flex-spacer' />
+      <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 { removePictureInPicture } from 'flavours/glitch/actions/picture_in_picture';
-import { connect } from 'react-redux';
+import { PureComponent } from 'react';
+
 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 { RelativeTimestamp } from './relative_timestamp';
+import spring from 'react-motion/lib/spring';
+
 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 = () => (

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Component } from 'react';
 
 import type { InjectedIntl } from 'react-intl';
 import { injectIntl, defineMessages } from 'react-intl';
@@ -199,7 +199,7 @@ interface Props {
 interface States {
   now: number;
 }
-class RelativeTimestamp extends React.Component<Props, States> {
+class RelativeTimestamp extends Component<Props, States> {
   state = {
     now: this.props.intl.now(),
   };

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

@@ -1,17 +1,23 @@
-import React, { PureComponent } from 'react';
-import ScrollContainer from 'flavours/glitch/containers/scroll_container';
 import PropTypes from 'prop-types';
+import { Children, cloneElement, PureComponent } from 'react';
+
+import classNames from 'classnames';
+
+import { List as ImmutableList } from 'immutable';
+import { connect } from 'react-redux';
+
+import { supportsPassiveEvents } from 'detect-passive-events';
+import { throttle } from 'lodash';
+
 import IntersectionObserverArticleContainer from 'flavours/glitch/containers/intersection_observer_article_container';
+import ScrollContainer from 'flavours/glitch/containers/scroll_container';
+import IntersectionObserverWrapper from 'flavours/glitch/features/ui/util/intersection_observer_wrapper';
+
+import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../features/ui/util/fullscreen';
+
 import LoadMore from './load_more';
 import LoadPending from './load_pending';
-import IntersectionObserverWrapper from 'flavours/glitch/features/ui/util/intersection_observer_wrapper';
-import { throttle } from 'lodash';
-import { List as ImmutableList } from 'immutable';
-import classNames from 'classnames';
-import { supportsPassiveEvents } from 'detect-passive-events';
-import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../features/ui/util/fullscreen';
 import LoadingIndicator from './loading_indicator';
-import { connect } from 'react-redux';
 
 const MOUSE_IDLE_DELAY = 300;
 
@@ -184,8 +190,8 @@ class ScrollableList extends PureComponent {
   };
 
   getSnapshotBeforeUpdate (prevProps) {
-    const someItemInserted = React.Children.count(prevProps.children) > 0 &&
-      React.Children.count(prevProps.children) < React.Children.count(this.props.children) &&
+    const someItemInserted = Children.count(prevProps.children) > 0 &&
+      Children.count(prevProps.children) < Children.count(this.props.children) &&
       this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props);
     const pendingChanged = (prevProps.numPending > 0) !== (this.props.numPending > 0);
 
@@ -293,7 +299,7 @@ class ScrollableList extends PureComponent {
   render () {
     const { children, scrollKey, trackScroll, showLoading, isLoading, hasMore, numPending, prepend, alwaysPrepend, append, emptyMessage, onLoadMore } = this.props;
     const { fullscreen } = this.state;
-    const childrenCount = React.Children.count(children);
+    const childrenCount = Children.count(children);
 
     const loadMore     = (hasMore && onLoadMore) ? <LoadMore visible={!isLoading} onClick={this.handleLoadMore} /> : null;
     const loadPending  = (numPending > 0) ? <LoadPending count={numPending} onClick={this.handleLoadPending} /> : null;
@@ -319,7 +325,7 @@ class ScrollableList extends PureComponent {
 
             {loadPending}
 
-            {React.Children.map(this.props.children, (child, index) => (
+            {Children.map(this.props.children, (child, index) => (
               <IntersectionObserverArticleContainer
                 key={child.key}
                 id={child.key}
@@ -328,7 +334,7 @@ class ScrollableList extends PureComponent {
                 intersectionObserverWrapper={this.intersectionObserverWrapper}
                 saveHeightKey={trackScroll ? `${this.context.router.route.location.key}:${scrollKey}` : null}
               >
-                {React.cloneElement(child, {
+                {cloneElement(child, {
                   getScrollPosition: this.getScrollPosition,
                   updateScrollBottom: this.updateScrollBottom,
                   cachedMediaWidth: this.state.cachedMediaWidth,

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

@@ -1,14 +1,18 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import { PureComponent } from 'react';
+
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+
+import { Link } from 'react-router-dom';
+
 import { connect } from 'react-redux';
+
 import { fetchServer } from 'flavours/glitch/actions/server';
+import { ServerHeroImage } from 'flavours/glitch/components/server_hero_image';
 import ShortNumber from 'flavours/glitch/components/short_number';
 import { Skeleton } from 'flavours/glitch/components/skeleton';
 import Account from 'flavours/glitch/containers/account_container';
 import { domain } from 'flavours/glitch/initial_state';
-import { ServerHeroImage } from 'flavours/glitch/components/server_hero_image';
-import { Link } from 'react-router-dom';
 
 const messages = defineMessages({
   aboutActiveUsers: { id: 'server_banner.about_active_users', defaultMessage: 'People using this server during the last 30 days (Monthly Active Users)' },
@@ -18,7 +22,7 @@ const mapStateToProps = state => ({
   server: state.getIn(['server', 'server']),
 });
 
-class ServerBanner extends React.PureComponent {
+class ServerBanner extends PureComponent {
 
   static propTypes = {
     server: PropTypes.object,

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

@@ -1,4 +1,5 @@
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
+import * as React from 'react';
 
 import classNames from 'classnames';
 

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

@@ -1,8 +1,9 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
+
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
-export default class SettingText extends React.PureComponent {
+export default class SettingText extends PureComponent {
 
   static propTypes = {
     settings: ImmutablePropTypes.map.isRequired,

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

@@ -1,7 +1,9 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import { toShortNumber, pluralReady, DECIMAL_UNITS } from '../utils/numbers';
+import { memo } from 'react';
+
 import { FormattedMessage, FormattedNumber } from 'react-intl';
+
+import { toShortNumber, pluralReady, DECIMAL_UNITS } from '../utils/numbers';
 // @ts-check
 
 /**
@@ -109,4 +111,4 @@ ShortNumberCounter.propTypes = {
   value: PropTypes.arrayOf(PropTypes.number),
 };
 
-export default React.memo(ShortNumber);
+export default memo(ShortNumber);

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 interface Props {
   width?: number | string;

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

@@ -1,28 +1,31 @@
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import StatusPrepend from './status_prepend';
+
+import { injectIntl, FormattedMessage } from 'react-intl';
+
+import classNames from 'classnames';
+
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+
+import { HotKeys } from 'react-hotkeys';
+
+import PictureInPicturePlaceholder from 'flavours/glitch/components/picture_in_picture_placeholder';
+import PollContainer from 'flavours/glitch/containers/poll_container';
+import NotificationOverlayContainer from 'flavours/glitch/features/notifications/containers/overlay_container';
+import { displayMedia, visibleReactions } from 'flavours/glitch/initial_state';
+import { autoUnfoldCW } from 'flavours/glitch/utils/content_warning';
+
+import Card from '../features/status/components/card';
+import Bundle from '../features/ui/components/bundle';
+import { MediaGallery, Video, Audio } from '../features/ui/util/async-components';
+
+import AttachmentList from './attachment_list';
+import StatusActionBar from './status_action_bar';
+import StatusContent from './status_content';
 import StatusHeader from './status_header';
 import StatusIcons from './status_icons';
-import StatusContent from './status_content';
-import StatusActionBar from './status_action_bar';
+import StatusPrepend from './status_prepend';
 import StatusReactions from './status_reactions';
-import AttachmentList from './attachment_list';
-import Card from '../features/status/components/card';
-import { injectIntl, FormattedMessage } from 'react-intl';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { MediaGallery, Video, Audio } from '../features/ui/util/async-components';
-import { HotKeys } from 'react-hotkeys';
-import NotificationOverlayContainer from 'flavours/glitch/features/notifications/containers/overlay_container';
-import classNames from 'classnames';
-import { autoUnfoldCW } from 'flavours/glitch/utils/content_warning';
-import PollContainer from 'flavours/glitch/containers/poll_container';
-import { displayMedia, visibleReactions } from 'flavours/glitch/initial_state';
-import PictureInPicturePlaceholder from 'flavours/glitch/components/picture_in_picture_placeholder';
-
-// We use the component (and not the container) since we do not want
-// to use the progress bar to show download progress
-import Bundle from '../features/ui/components/bundle';
 
 export const textForScreenReader = (intl, status, rebloggedByText = false, expanded = false) => {
   const displayName = status.getIn(['account', 'display_name']);