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

Merge upstream changes

.eslintrc.js

@@ -4,10 +4,12 @@ module.exports = {
   extends: [
     'eslint:recommended',
     'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
     'plugin:jsx-a11y/recommended',
     'plugin:import/recommended',
     'plugin:promise/recommended',
     'plugin:jsdoc/recommended',
+    'plugin:prettier/recommended',
   ],
 
   env: {
@@ -61,20 +63,9 @@ module.exports = {
   },
 
   rules: {
-    'brace-style': 'warn',
-    'comma-dangle': ['error', 'always-multiline'],
-    'comma-spacing': [
-      'warn',
-      {
-        before: false,
-        after: true,
-      },
-    ],
-    'comma-style': ['warn', 'last'],
     'consistent-return': 'error',
     'dot-notation': 'error',
     eqeqeq: ['error', 'always', { 'null': 'ignore' }],
-    indent: ['warn', 2],
     'jsx-quotes': ['error', 'prefer-single'],
     'no-case-declarations': 'off',
     'no-catch-shadow': 'error',
@@ -94,7 +85,6 @@ module.exports = {
       { property: 'substr', message: 'Use .slice instead of .substr.' },
     ],
     'no-self-assign': 'off',
-    'no-trailing-spaces': 'warn',
     'no-unused-expressions': 'error',
     'no-unused-vars': 'off',
     '@typescript-eslint/no-unused-vars': [
@@ -102,32 +92,18 @@ module.exports = {
       {
         vars: 'all',
         args: 'after-used',
+        destructuredArrayIgnorePattern: '^_',
         ignoreRestSiblings: true,
       },
     ],
-    'object-curly-spacing': ['error', 'always'],
-    'padded-blocks': [
-      'error',
-      {
-        classes: 'always',
-      },
-    ],
-    quotes: ['error', 'single'],
-    semi: 'error',
     'valid-typeof': 'error',
 
     'react/jsx-filename-extension': ['error', { extensions: ['.jsx', 'tsx'] }],
     'react/jsx-boolean-value': 'error',
-    'react/jsx-closing-bracket-location': ['error', 'line-aligned'],
-    'react/jsx-curly-spacing': 'error',
     'react/display-name': 'off',
     'react/jsx-equals-spacing': 'error',
-    'react/jsx-first-prop-new-line': ['error', 'multiline-multiprop'],
-    'react/jsx-indent': ['error', 2],
     'react/jsx-no-bind': 'error',
     'react/jsx-no-target-blank': 'off',
-    'react/jsx-tag-spacing': 'error',
-    'react/jsx-wrap-multilines': 'error',
     'react/no-deprecated': 'off',
     'react/no-unknown-property': 'off',
     'react/self-closing-comp': 'error',
@@ -208,6 +184,9 @@ module.exports = {
         ],
       },
     ],
+    'import/no-amd': 'error',
+    'import/no-commonjs': 'error',
+    'import/no-import-module-exports': 'error',
     'import/no-webpack-loader-syntax': 'error',
 
     'promise/always-return': 'off',
@@ -255,6 +234,7 @@ module.exports = {
         '*.config.js',
         '.*rc.js',
         'ide-helper.js',
+        'config/webpack/**/*',
       ],
 
       env: {
@@ -264,6 +244,10 @@ module.exports = {
       parserOptions: {
         sourceType: 'script',
       },
+
+      rules: {
+        'import/no-commonjs': 'off',
+      },
     },
     {
       files: [
@@ -275,17 +259,25 @@ module.exports = {
         'eslint:recommended',
         'plugin:@typescript-eslint/recommended',
         'plugin:react/recommended',
+        'plugin:react-hooks/recommended',
         'plugin:jsx-a11y/recommended',
         'plugin:import/recommended',
         'plugin:import/typescript',
         'plugin:promise/recommended',
         'plugin:jsdoc/recommended',
+        'plugin:prettier/recommended',
       ],
 
       rules: {
         '@typescript-eslint/no-explicit-any': 'off',
 
         'jsdoc/require-jsdoc': 'off',
+
+        // Those rules set stricter rules for TS files
+        // to enforce better practices when converting from JS
+        'import/no-default-export': 'warn',
+        'react/prefer-stateless-function': 'warn',
+        'react/function-component-definition': ['error', { namedComponents: 'arrow-function' }],
       },
     },
     {
@@ -298,5 +290,13 @@ module.exports = {
         jest: true,
       },
     },
+    {
+      files: [
+        'streaming/**/*',
+      ],
+      rules: {
+        'import/no-commonjs': 'off',
+      },
+    },
   ],
 };

.prettierignore

@@ -70,8 +70,6 @@ app/javascript/styles/mastodon/reset.scss
 # Ignore Javascript pending https://github.com/mastodon/mastodon/pull/23631
 *.js
 *.jsx
-*.ts
-*.tsx
 
 # Ignore HTML till cleaned and included in CI
 *.html

.prettierrc.js

@@ -1,3 +1,4 @@
 module.exports = {
-  singleQuote: true
+  singleQuote: true,
+  jsxSingleQuote: true
 }

.rubocop.yml

@@ -157,7 +157,7 @@ Metrics/MethodLength:
     - 'lib/mastodon/*_cli.rb'
 
 # Reason:
-# https://docs.rubocop.org/rubocop/cops_style.html#stylerescuestandarderror
+# https://docs.rubocop.org/rubocop/cops_metrics.html#metricsmodulelength
 Metrics/ModuleLength:
   CountAsOne: [array, heredoc]
 

app/javascript/core/mailer.js

@@ -1,3 +1,3 @@
-require('../styles/mailer.scss');
+import '../styles/mailer.scss';
 
 require.context('../icons');

app/javascript/core/public.js

@@ -2,7 +2,7 @@
 
 import 'packs/public-path';
 
-const { delegate } = require('@rails/ujs');
+import { delegate } from '@rails/ujs';
 
 const getProfileAvatarAnimationHandler = (swapTo) => {
   //animate avatar gifs on the profile page when moused over

app/javascript/core/settings.js

@@ -3,7 +3,7 @@
 import 'packs/public-path';
 import escapeTextContentForBrowser from 'escape-html';
 
-const { delegate } = require('@rails/ujs');
+import { delegate } from '@rails/ujs';
 
 import emojify from '../mastodon/features/emoji/emoji';
 

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

@@ -1,7 +1,8 @@
 import { createAction } from '@reduxjs/toolkit';
+import type { LayoutType } from '../is_mobile';
 
 type ChangeLayoutPayload = {
-  layout: 'mobile' | 'single-column' | 'multi-column';
+  layout: LayoutType;
 };
 export const changeLayout =
   createAction<ChangeLayoutPayload>('APP_LAYOUT_CHANGE');

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

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

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

@@ -13,7 +13,7 @@ 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 { compareId } from 'flavours/glitch/compare_id';
 import { requestNotificationPermission } from 'flavours/glitch/utils/notifications';
 
 export const NOTIFICATIONS_UPDATE = 'NOTIFICATIONS_UPDATE';

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

@@ -52,8 +52,10 @@ export const connectTimelineStream = (timelineId, channelName, params = {}, opti
     /**
      * @param {function(Function, Function): void} fallback
      */
+
     const useFallback = fallback => {
       fallback(dispatch, () => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks -- this is not a react hook
         pollingId = setTimeout(() => useFallback(fallback), 20000 + randomUpTo(20000));
       });
     };

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

@@ -2,7 +2,7 @@ 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 compareId from 'flavours/glitch/compare_id';
+import { compareId } from 'flavours/glitch/compare_id';
 import { usePendingItems as preferPendingItems } from 'flavours/glitch/initial_state';
 import { toServerSideType } from 'flavours/glitch/utils/filters';
 

app/javascript/flavours/glitch/blurhash.ts

@@ -98,9 +98,9 @@ export const decode83 = (str: string) => {
 };
 
 export const intToRGB = (int: number) => ({
-  r: Math.max(0, (int >> 16)),
+  r: Math.max(0, int >> 16),
   g: Math.max(0, (int >> 8) & 255),
-  b: Math.max(0, (int & 255)),
+  b: Math.max(0, int & 255),
 });
 
 export const getAverageFromBlurhash = (blurhash: string) => {

app/javascript/flavours/glitch/compare_id.ts

@@ -1,4 +1,4 @@
-export default function compareId (id1: string, id2: string) {
+export function compareId(id1: string, id2: string) {
   if (id1 === id2) {
     return 0;
   }

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

@@ -1,14 +1,14 @@
 import React, { Fragment } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import Avatar from './avatar';
+import { Avatar } from './avatar';
 import DisplayName from './display_name';
 import Permalink from './permalink';
-import IconButton from './icon_button';
+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 RelativeTimestamp from './relative_timestamp';
+import { RelativeTimestamp } from './relative_timestamp';
 import Skeleton from 'flavours/glitch/components/skeleton';
 
 const messages = defineMessages({

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

@@ -16,13 +16,10 @@ const obfuscatedCount = (count: number) => {
 type Props = {
   value: number;
   obfuscate?: boolean;
-}
+};
-export const AnimatedNumber: React.FC<Props> = ({
+export const AnimatedNumber: React.FC<Props> = ({ value, obfuscate }) => {
-  value,
-  obfuscate,
-})=> {
   const [previousValue, setPreviousValue] = useState(value);
-  const [direction, setDirection] = useState<1|-1>(1);
+  const [direction, setDirection] = useState<1 | -1>(1);
 
   if (previousValue !== value) {
     setPreviousValue(value);
@@ -30,29 +27,48 @@ export const AnimatedNumber: React.FC<Props> = ({
   }
 
   const willEnter = useCallback(() => ({ y: -1 * direction }), [direction]);
-  const willLeave = useCallback(() => ({ y: spring(1 * direction, { damping: 35, stiffness: 400 }) }), [direction]);
+  const willLeave = useCallback(
+    () => ({ y: spring(1 * direction, { damping: 35, stiffness: 400 }) }),
+    [direction]
+  );
 
   if (reduceMotion) {
-    return obfuscate ? <>{obfuscatedCount(value)}</> : <ShortNumber value={value} />;
+    return obfuscate ? (
+      <>{obfuscatedCount(value)}</>
+    ) : (
+      <ShortNumber value={value} />
+    );
   }
 
-  const styles = [{
+  const styles = [
+    {
       key: `${value}`,
       data: value,
       style: { y: spring(0, { damping: 35, stiffness: 400 }) },
-  }];
+    },
+  ];
 
   return (
-    <TransitionMotion styles={styles} willEnter={willEnter} willLeave={willLeave}>
+    <TransitionMotion
-      {items => (
+      styles={styles}
+      willEnter={willEnter}
+      willLeave={willLeave}
+    >
+      {(items) => (
         <span className='animated-number'>
           {items.map(({ key, data, style }) => (
-            <span key={key} style={{ position: (direction * style.y) > 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}>{obfuscate ? obfuscatedCount(data) : <ShortNumber value={data} />}</span>
+            <span
+              key={key}
+              style={{
+                position: direction * style.y > 0 ? 'absolute' : 'static',
+                transform: `translateY(${style.y * 100}%)`,
+              }}
+            >
+              {obfuscate ? obfuscatedCount(data) : <ShortNumber value={data} />}
+            </span>
           ))}
         </span>
       )}
     </TransitionMotion>
   );
 };
-
-export default AnimatedNumber;

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

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

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { autoPlayGif } from 'flavours/glitch/initial_state';
-import { useHovering } from 'hooks/useHovering';
+import { useHovering } from 'flavours/glitch/hooks/useHovering';
 import type { Account } from 'flavours/glitch/types/resources';
 
 type Props = {
@@ -10,7 +10,7 @@ type Props = {
   size: number;
   style?: React.CSSProperties;
   inline?: boolean;
-}
+};
 
 export const Avatar: React.FC<Props> = ({
   account,
@@ -19,7 +19,8 @@ export const Avatar: React.FC<Props> = ({
   inline = false,
   style: styleFromParent,
 }) => {
-  const { hovering, handleMouseEnter, handleMouseLeave } = useHovering(autoPlayGif);
+  const { hovering, handleMouseEnter, handleMouseLeave } =
+    useHovering(autoPlayGif);
 
   const style = {
     ...styleFromParent,
@@ -29,12 +30,18 @@ export const Avatar: React.FC<Props> = ({
   };
 
   if (account) {
-    style.backgroundImage = `url(${account.get(hovering ? 'avatar' : 'avatar_static')})`;
+    style.backgroundImage = `url(${account.get(
+      hovering ? 'avatar' : 'avatar_static'
+    )})`;
   }
 
   return (
     <div
-      className={classNames('account__avatar', { 'account__avatar-inline': inline }, className)}
+      className={classNames(
+        'account__avatar',
+        { 'account__avatar-inline': inline },
+        className
+      )}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       style={style}
@@ -44,5 +51,3 @@ export const Avatar: React.FC<Props> = ({
     />
   );
 };
-
-export default Avatar;

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

@@ -8,14 +8,14 @@ type Props = {
   dummy?: boolean; // Whether dummy mode is enabled. If enabled, nothing is rendered and canvas left untouched
   children?: never;
   [key: string]: any;
-}
+};
-function Blurhash({
+const Blurhash: React.FC<Props> = ({
   hash,
   width = 32,
   height = width,
   dummy = false,
   ...canvasProps
-}: Props) {
+}) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
   useEffect(() => {
@@ -40,6 +40,8 @@ function Blurhash({
   return (
     <canvas {...canvasProps} ref={canvasRef} width={width} height={height} />
   );
-}
+};
 
-export default React.memo(Blurhash);
+const MemoizedBlurhash = React.memo(Blurhash);
+
+export { MemoizedBlurhash as Blurhash };

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import { createPortal } from 'react-dom';
 
 export default class ColumnBackButton extends React.PureComponent {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 export default class ColumnBackButtonSlim extends React.PureComponent {
 

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 const messages = defineMessages({
   show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import IconButton from './icon_button';
+import { IconButton } from './icon_button';
 import PropTypes from 'prop-types';
 import { injectIntl, defineMessages } from 'react-intl';
 import { bannerSettings } from 'flavours/glitch/settings';

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

@@ -1,43 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import IconButton from './icon_button';
-import { defineMessages, injectIntl } from 'react-intl';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-
-const messages = defineMessages({
-  unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unblock domain {domain}' },
-});
-
-class Account extends ImmutablePureComponent {
-
-  static propTypes = {
-    domain: PropTypes.string,
-    onUnblockDomain: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  handleDomainUnblock = () => {
-    this.props.onUnblockDomain(this.props.domain);
-  };
-
-  render () {
-    const { domain, intl } = this.props;
-
-    return (
-      <div className='domain'>
-        <div className='domain__wrapper'>
-          <span className='domain__domain-name'>
-            <strong>{domain}</strong>
-          </span>
-
-          <div className='domain__buttons'>
-            <IconButton active icon='unlock' title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={this.handleDomainUnblock} />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-}
-
-export default injectIntl(Account);

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

@@ -0,0 +1,42 @@
+import React, { useCallback } from 'react';
+import { IconButton } from './icon_button';
+import { InjectedIntl, defineMessages, injectIntl } from 'react-intl';
+
+const messages = defineMessages({
+  unblockDomain: {
+    id: 'account.unblock_domain',
+    defaultMessage: 'Unblock domain {domain}',
+  },
+});
+
+type Props = {
+  domain: string;
+  onUnblockDomain: (domain: string) => void;
+  intl: InjectedIntl;
+};
+const _Domain: React.FC<Props> = ({ domain, onUnblockDomain, intl }) => {
+  const handleDomainUnblock = useCallback(() => {
+    onUnblockDomain(domain);
+  }, [domain, onUnblockDomain]);
+
+  return (
+    <div className='domain'>
+      <div className='domain__wrapper'>
+        <span className='domain__domain-name'>
+          <strong>{domain}</strong>
+        </span>
+
+        <div className='domain__buttons'>
+          <IconButton
+            active
+            icon='unlock'
+            title={intl.formatMessage(messages.unblockDomain, { domain })}
+            onClick={handleDomainUnblock}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const Domain = injectIntl(_Domain);

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import IconButton from './icon_button';
+import { IconButton } from './icon_button';
 import Overlay from 'react-overlays/Overlay';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import classNames from 'classnames';

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, injectIntl } from 'react-intl';
-import Icon from 'flavours/glitch/components/icon';
+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 { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
 import InlineAccount from 'flavours/glitch/components/inline_account';
 
 const mapDispatchToProps = (dispatch, { statusId }) => ({

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

@@ -8,7 +8,7 @@ type Props = {
   width: number;
   height: number;
   onClick?: () => void;
-}
+};
 
 export const GIFV: React.FC<Props> = ({
   src,
@@ -17,19 +17,23 @@ export const GIFV: React.FC<Props> = ({
   width,
   height,
   onClick,
-})=> {
+}) => {
   const [loading, setLoading] = useState(true);
 
-  const handleLoadedData: React.ReactEventHandler<HTMLVideoElement> = useCallback(() => {
+  const handleLoadedData: React.ReactEventHandler<HTMLVideoElement> =
+    useCallback(() => {
       setLoading(false);
     }, [setLoading]);
 
-  const handleClick: React.MouseEventHandler = useCallback((e) => {
+  const handleClick: React.MouseEventHandler = useCallback(
+    (e) => {
       if (onClick) {
         e.stopPropagation();
         onClick();
       }
-  }, [onClick]);
+    },
+    [onClick]
+  );
 
   return (
     <div className='gifv' style={{ position: 'relative' }}>
@@ -64,5 +68,3 @@ export const GIFV: React.FC<Props> = ({
     </div>
   );
 };
-
-export default GIFV;

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

@@ -7,8 +7,15 @@ type Props = {
   fixedWidth?: boolean;
   children?: never;
   [key: string]: any;
-}
+};
-export const Icon: React.FC<Props> = ({ id, className, fixedWidth, ...other }) =>
+export const Icon: React.FC<Props> = ({
-  <i className={classNames('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })} {...other} />;
+  id,
-
+  className,
-export default Icon;
+  fixedWidth,
+  ...other
+}) => (
+  <i
+    className={classNames('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })}
+    {...other}
+  />
+);

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

@@ -21,18 +21,17 @@ type Props = {
   animate: boolean;
   overlay: boolean;
   tabIndex: number;
-  label: string;
+  label?: string;
   counter?: number;
   obfuscateCount?: boolean;
   href?: string;
   ariaHidden: boolean;
-}
+};
 type States = {
-  activate: boolean,
+  activate: boolean;
-  deactivate: boolean,
+  deactivate: boolean;
-}
+};
-export default class IconButton extends React.PureComponent<Props, States> {
+export class IconButton extends React.PureComponent<Props, States> {
-
   static defaultProps = {
     size: 18,
     active: false,
@@ -48,7 +47,7 @@ export default class IconButton extends React.PureComponent<Props, States> {
     deactivate: false,
   };
 
-  UNSAFE_componentWillReceiveProps (nextProps: Props) {
+  UNSAFE_componentWillReceiveProps(nextProps: Props) {
     if (!nextProps.animate) return;
 
     if (this.props.active && !nextProps.active) {
@@ -84,7 +83,7 @@ export default class IconButton extends React.PureComponent<Props, States> {
     }
   };
 
-  render () {
+  render() {
     // Hack required for some icons which have an overriden size
     let containerSize = '1.28571429em';
     if (this.props.style?.fontSize) {
@@ -120,10 +119,7 @@ export default class IconButton extends React.PureComponent<Props, States> {
       ariaHidden,
     } = this.props;
 
-    const {
+    const { activate, deactivate } = this.state;
-      activate,
-      deactivate,
-    } = this.state;
 
     const classes = classNames(className, 'icon-button', {
       active,
@@ -141,7 +137,12 @@ export default 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'><AnimatedNumber value={counter} obfuscate={obfuscateCount} /></span>}
+        <Icon id={icon} fixedWidth aria-hidden='true' />{' '}
+        {typeof counter !== 'undefined' && (
+          <span className='icon-button__counter'>
+            <AnimatedNumber value={counter} obfuscate={obfuscateCount} />
+          </span>
+        )}
         {this.props.label}
       </React.Fragment>
     );
@@ -174,5 +175,4 @@ export default class IconButton extends React.PureComponent<Props, States> {
       </button>
     );
   }
-
 }

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

@@ -1,20 +1,25 @@
 import React from 'react';
 import { Icon } from './icon';
 
-const formatNumber = (num: number): number | string => num > 40 ? '40+' : num;
+const formatNumber = (num: number): number | string => (num > 40 ? '40+' : num);
 
 type Props = {
   id: string;
   count: number;
   issueBadge: boolean;
   className: string;
-}
+};
-const IconWithBadge: React.FC<Props> = ({ id, count, issueBadge, className }) => (
+export const IconWithBadge: React.FC<Props> = ({
+  id,
+  count,
+  issueBadge,
+  className,
+}) => (
   <i className='icon-with-badge'>
     <Icon id={id} fixedWidth className={className} />
-    {count > 0 && <i className='icon-with-badge__badge'>{formatNumber(count)}</i>}
+    {count > 0 && (
+      <i className='icon-with-badge__badge'>{formatNumber(count)}</i>
+    )}
     {issueBadge && <i className='icon-with-badge__issue-badge' />}
   </i>
 );
-
-export default IconWithBadge;

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

@@ -1,33 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Blurhash from './blurhash';
-import classNames from 'classnames';
-
-export default class Image extends React.PureComponent {
-
-  static propTypes = {
-    src: PropTypes.string,
-    srcSet: PropTypes.string,
-    blurhash: PropTypes.string,
-    className: PropTypes.string,
-  };
-
-  state = {
-    loaded: false,
-  };
-
-  handleLoad = () => this.setState({ loaded: true });
-
-  render () {
-    const { src, srcSet, blurhash, className } = this.props;
-    const { loaded } = this.state;
-
-    return (
-      <div className={classNames('image', { loaded }, className)} role='presentation'>
-        {blurhash && <Blurhash hash={blurhash} className='image__preview' />}
-        <img src={src} srcSet={srcSet} alt='' onLoad={this.handleLoad} />
-      </div>
-    );
-  }
-
-}

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

@@ -0,0 +1,33 @@
+import React, { useCallback, useState } from 'react';
+import { Blurhash } from './blurhash';
+import classNames from 'classnames';
+
+type Props = {
+  src: string;
+  srcSet?: string;
+  blurhash?: string;
+  className?: string;
+};
+
+export const Image: React.FC<Props> = ({
+  src,
+  srcSet,
+  blurhash,
+  className,
+}) => {
+  const [loaded, setLoaded] = useState(false);
+
+  const handleLoad = useCallback(() => {
+    setLoaded(true);
+  }, [setLoaded]);
+
+  return (
+    <div
+      className={classNames('image', { loaded }, className)}
+      role='presentation'
+    >
+      {blurhash && <Blurhash hash={blurhash} className='image__preview' />}
+      <img src={src} srcSet={srcSet} alt='' onLoad={handleLoad} />
+    </div>
+  );
+};

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

@@ -2,7 +2,7 @@ import React 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 { Avatar } from 'flavours/glitch/components/avatar';
 
 const makeMapStateToProps = () => {
   const getAccount = makeGetAccount();

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, defineMessages } from 'react-intl';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 const messages = defineMessages({
   load_more: { id: 'status.load_more', defaultMessage: 'Load more' },

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

@@ -2,12 +2,12 @@ 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 { 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 { debounce } from 'lodash';
-import Blurhash from 'flavours/glitch/components/blurhash';
+import { Blurhash } from 'flavours/glitch/components/blurhash';
 
 const messages = defineMessages({
   hidden: {

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

@@ -1,12 +0,0 @@
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-
-const NotSignedInIndicator = () => (
-  <div className='scrollable scrollable--flex'>
-    <div className='empty-column-indicator'>
-      <FormattedMessage id='not_signed_in_indicator.not_signed_in' defaultMessage='You need to sign in to access this resource.' />
-    </div>
-  </div>
-);
-
-export default NotSignedInIndicator;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+export const NotSignedInIndicator: React.FC = () => (
+  <div className='scrollable scrollable--flex'>
+    <div className='empty-column-indicator'>
+      <FormattedMessage
+        id='not_signed_in_indicator.not_signed_in'
+        defaultMessage='You need to sign in to access this resource.'
+      />
+    </div>
+  </div>
+);

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

@@ -10,7 +10,7 @@ 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 { Icon } from 'flavours/glitch/components/icon';
 import classNames from 'classnames';
 
 const messages = defineMessages({

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import { removePictureInPicture } from 'flavours/glitch/actions/picture_in_picture';
 import { connect } from 'react-redux';
 import { FormattedMessage } from 'react-intl';

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

@@ -8,8 +8,8 @@ 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 { RelativeTimestamp } from './relative_timestamp';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 const messages = defineMessages({
   closed: {

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

@@ -1,35 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export default class RadioButton extends React.PureComponent {
-
-  static propTypes = {
-    value: PropTypes.string.isRequired,
-    checked: PropTypes.bool,
-    name: PropTypes.string.isRequired,
-    onChange: PropTypes.func.isRequired,
-    label: PropTypes.node.isRequired,
-  };
-
-  render () {
-    const { name, value, checked, onChange, label } = this.props;
-
-    return (
-      <label className='radio-button'>
-        <input
-          name={name}
-          type='radio'
-          value={value}
-          checked={checked}
-          onChange={onChange}
-        />
-
-        <span className={classNames('radio-button__input', { checked })} />
-
-        <span>{label}</span>
-      </label>
-    );
-  }
-
-}

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+  value: string;
+  checked: boolean;
+  name: string;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  label: React.ReactNode;
+};
+
+export const RadioButton: React.FC<Props> = ({
+  name,
+  value,
+  checked,
+  onChange,
+  label,
+}) => {
+  return (
+    <label className='radio-button'>
+      <input
+        name={name}
+        type='radio'
+        value={value}
+        checked={checked}
+        onChange={onChange}
+      />
+
+      <span className={classNames('radio-button__input', { checked })} />
+
+      <span>{label}</span>
+    </label>
+  );
+};

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

@@ -4,20 +4,50 @@ import { injectIntl, defineMessages, InjectedIntl } from 'react-intl';
 const messages = defineMessages({
   today: { id: 'relative_time.today', defaultMessage: 'today' },
   just_now: { id: 'relative_time.just_now', defaultMessage: 'now' },
-  just_now_full: { id: 'relative_time.full.just_now', defaultMessage: 'just now' },
+  just_now_full: {
+    id: 'relative_time.full.just_now',
+    defaultMessage: 'just now',
+  },
   seconds: { id: 'relative_time.seconds', defaultMessage: '{number}s' },
-  seconds_full: { id: 'relative_time.full.seconds', defaultMessage: '{number, plural, one {# second} other {# seconds}} ago' },
+  seconds_full: {
+    id: 'relative_time.full.seconds',
+    defaultMessage: '{number, plural, one {# second} other {# seconds}} ago',
+  },
   minutes: { id: 'relative_time.minutes', defaultMessage: '{number}m' },
-  minutes_full: { id: 'relative_time.full.minutes', defaultMessage: '{number, plural, one {# minute} other {# minutes}} ago' },
+  minutes_full: {
+    id: 'relative_time.full.minutes',
+    defaultMessage: '{number, plural, one {# minute} other {# minutes}} ago',
+  },
   hours: { id: 'relative_time.hours', defaultMessage: '{number}h' },
-  hours_full: { id: 'relative_time.full.hours', defaultMessage: '{number, plural, one {# hour} other {# hours}} ago' },
+  hours_full: {
+    id: 'relative_time.full.hours',
+    defaultMessage: '{number, plural, one {# hour} other {# hours}} ago',
+  },
   days: { id: 'relative_time.days', defaultMessage: '{number}d' },
-  days_full: { id: 'relative_time.full.days', defaultMessage: '{number, plural, one {# day} other {# days}} ago' },
+  days_full: {
-  moments_remaining: { id: 'time_remaining.moments', defaultMessage: 'Moments remaining' },
+    id: 'relative_time.full.days',
-  seconds_remaining: { id: 'time_remaining.seconds', defaultMessage: '{number, plural, one {# second} other {# seconds}} left' },
+    defaultMessage: '{number, plural, one {# day} other {# days}} ago',
-  minutes_remaining: { id: 'time_remaining.minutes', defaultMessage: '{number, plural, one {# minute} other {# minutes}} left' },
+  },
-  hours_remaining: { id: 'time_remaining.hours', defaultMessage: '{number, plural, one {# hour} other {# hours}} left' },
+  moments_remaining: {
-  days_remaining: { id: 'time_remaining.days', defaultMessage: '{number, plural, one {# day} other {# days}} left' },
+    id: 'time_remaining.moments',
+    defaultMessage: 'Moments remaining',
+  },
+  seconds_remaining: {
+    id: 'time_remaining.seconds',
+    defaultMessage: '{number, plural, one {# second} other {# seconds}} left',
+  },
+  minutes_remaining: {
+    id: 'time_remaining.minutes',
+    defaultMessage: '{number, plural, one {# minute} other {# minutes}} left',
+  },
+  hours_remaining: {
+    id: 'time_remaining.hours',
+    defaultMessage: '{number, plural, one {# hour} other {# hours}} left',
+  },
+  days_remaining: {
+    id: 'time_remaining.days',
+    defaultMessage: '{number, plural, one {# day} other {# days}} left',
+  },
 });
 
 const dateFormatOptions = {
@@ -70,7 +100,14 @@ const getUnitDelay = (units: string) => {
   }
 };
 
-export const timeAgoString = (intl: InjectedIntl, date: Date, now: number, year: number, timeGiven: boolean, short?: boolean) => {
+export const timeAgoString = (
+  intl: InjectedIntl,
+  date: Date,
+  now: number,
+  year: number,
+  timeGiven: boolean,
+  short?: boolean
+) => {
   const delta = now - date.getTime();
 
   let relativeTime;
@@ -78,27 +115,49 @@ export const timeAgoString = (intl: InjectedIntl, date: Date, now: number, year:
   if (delta < DAY && !timeGiven) {
     relativeTime = intl.formatMessage(messages.today);
   } else if (delta < 10 * SECOND) {
-    relativeTime = intl.formatMessage(short ? messages.just_now : messages.just_now_full);
+    relativeTime = intl.formatMessage(
+      short ? messages.just_now : messages.just_now_full
+    );
   } else if (delta < 7 * DAY) {
     if (delta < MINUTE) {
-      relativeTime = intl.formatMessage(short ? messages.seconds : messages.seconds_full, { number: Math.floor(delta / SECOND) });
+      relativeTime = intl.formatMessage(
+        short ? messages.seconds : messages.seconds_full,
+        { number: Math.floor(delta / SECOND) }
+      );
     } else if (delta < HOUR) {
-      relativeTime = intl.formatMessage(short ? messages.minutes : messages.minutes_full, { number: Math.floor(delta / MINUTE) });
+      relativeTime = intl.formatMessage(
+        short ? messages.minutes : messages.minutes_full,
+        { number: Math.floor(delta / MINUTE) }
+      );
     } else if (delta < DAY) {
-      relativeTime = intl.formatMessage(short ? messages.hours : messages.hours_full, { number: Math.floor(delta / HOUR) });
+      relativeTime = intl.formatMessage(
+        short ? messages.hours : messages.hours_full,
+        { number: Math.floor(delta / HOUR) }
+      );
     } else {
-      relativeTime = intl.formatMessage(short ? messages.days : messages.days_full, { number: Math.floor(delta / DAY) });
+      relativeTime = intl.formatMessage(
+        short ? messages.days : messages.days_full,
+        { number: Math.floor(delta / DAY) }
+      );
     }
   } else if (date.getFullYear() === year) {
     relativeTime = intl.formatDate(date, shortDateFormatOptions);
   } else {
-    relativeTime = intl.formatDate(date, { ...shortDateFormatOptions, year: 'numeric' });
+    relativeTime = intl.formatDate(date, {
+      ...shortDateFormatOptions,
+      year: 'numeric',
+    });
   }
 
   return relativeTime;
 };
 
-const timeRemainingString = (intl: InjectedIntl, date: Date, now: number, timeGiven = true) => {
+const timeRemainingString = (
+  intl: InjectedIntl,
+  date: Date,
+  now: number,
+  timeGiven = true
+) => {
   const delta = date.getTime() - now;
 
   let relativeTime;
@@ -108,13 +167,21 @@ const timeRemainingString = (intl: InjectedIntl, date: Date, now: number, timeGi
   } else if (delta < 10 * SECOND) {
     relativeTime = intl.formatMessage(messages.moments_remaining);
   } else if (delta < MINUTE) {
-    relativeTime = intl.formatMessage(messages.seconds_remaining, { number: Math.floor(delta / SECOND) });
+    relativeTime = intl.formatMessage(messages.seconds_remaining, {
+      number: Math.floor(delta / SECOND),
+    });
   } else if (delta < HOUR) {
-    relativeTime = intl.formatMessage(messages.minutes_remaining, { number: Math.floor(delta / MINUTE) });
+    relativeTime = intl.formatMessage(messages.minutes_remaining, {
+      number: Math.floor(delta / MINUTE),
+    });
   } else if (delta < DAY) {
-    relativeTime = intl.formatMessage(messages.hours_remaining, { number: Math.floor(delta / HOUR) });
+    relativeTime = intl.formatMessage(messages.hours_remaining, {
+      number: Math.floor(delta / HOUR),
+    });
   } else {
-    relativeTime = intl.formatMessage(messages.days_remaining, { number: Math.floor(delta / DAY) });
+    relativeTime = intl.formatMessage(messages.days_remaining, {
+      number: Math.floor(delta / DAY),
+    });
   }
 
   return relativeTime;
@@ -126,78 +193,88 @@ type Props = {
   year: number;
   futureDate?: boolean;
   short?: boolean;
-}
+};
 type States = {
   now: number;
-}
+};
 class RelativeTimestamp extends React.Component<Props, States> {
-
   state = {
     now: this.props.intl.now(),
   };
 
   static defaultProps = {
-    year: (new Date()).getFullYear(),
+    year: new Date().getFullYear(),
     short: true,
   };
 
   _timer: number | undefined;
 
-  shouldComponentUpdate (nextProps: Props, nextState: States) {
+  shouldComponentUpdate(nextProps: Props, nextState: States) {
     // As of right now the locale doesn't change without a new page load,
     // but we might as well check in case that ever changes.
-    return this.props.timestamp !== nextProps.timestamp ||
+    return (
+      this.props.timestamp !== nextProps.timestamp ||
       this.props.intl.locale !== nextProps.intl.locale ||
-      this.state.now !== nextState.now;
+      this.state.now !== nextState.now
+    );
   }
 
-  UNSAFE_componentWillReceiveProps (nextProps: Props) {
+  UNSAFE_componentWillReceiveProps(nextProps: Props) {
     if (this.props.timestamp !== nextProps.timestamp) {
       this.setState({ now: this.props.intl.now() });
     }
   }
 
-  componentDidMount () {
+  componentDidMount() {
     this._scheduleNextUpdate(this.props, this.state);
   }
 
-  UNSAFE_componentWillUpdate (nextProps: Props, nextState: States) {
+  UNSAFE_componentWillUpdate(nextProps: Props, nextState: States) {
     this._scheduleNextUpdate(nextProps, nextState);
   }
 
-  componentWillUnmount () {
+  componentWillUnmount() {
     window.clearTimeout(this._timer);
   }
 
-  _scheduleNextUpdate (props: Props, state: States) {
+  _scheduleNextUpdate(props: Props, state: States) {
     window.clearTimeout(this._timer);
 
     const { timestamp } = props;
-    const delta          = (new Date(timestamp)).getTime() - state.now;
+    const delta = new Date(timestamp).getTime() - state.now;
     const unitDelay = getUnitDelay(selectUnits(delta));
     const unitRemainder = Math.abs(delta % unitDelay);
     const updateInterval = 1000 * 10;
-    const delay          = delta < 0 ? Math.max(updateInterval, unitDelay - unitRemainder) : Math.max(updateInterval, unitRemainder);
+    const delay =
+      delta < 0
+        ? Math.max(updateInterval, unitDelay - unitRemainder)
+        : Math.max(updateInterval, unitRemainder);
 
     this._timer = window.setTimeout(() => {
       this.setState({ now: this.props.intl.now() });
     }, delay);
   }
 
-  render () {
+  render() {
     const { timestamp, intl, year, futureDate, short } = this.props;
 
     const timeGiven = timestamp.includes('T');
     const date = new Date(timestamp);
-    const relativeTime = futureDate ? timeRemainingString(intl, date, this.state.now, timeGiven) : timeAgoString(intl, date, this.state.now, year, timeGiven, short);
+    const relativeTime = futureDate
+      ? timeRemainingString(intl, date, this.state.now, timeGiven)
+      : timeAgoString(intl, date, this.state.now, year, timeGiven, short);
 
     return (
-      <time dateTime={timestamp} title={intl.formatDate(date, dateFormatOptions)}>
+      <time
+        dateTime={timestamp}
+        title={intl.formatDate(date, dateFormatOptions)}
+      >
         {relativeTime}
       </time>
     );
   }
-
 }
 
-export default injectIntl(RelativeTimestamp);
+const RelativeTimestampWithIntl = injectIntl(RelativeTimestamp);
+
+export { RelativeTimestampWithIntl as RelativeTimestamp };

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

@@ -8,6 +8,7 @@ import IntersectionObserverWrapper from 'flavours/glitch/features/ui/util/inters
 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';
@@ -236,10 +237,10 @@ class ScrollableList extends PureComponent {
   attachScrollListener () {
     if (this.props.bindToDocument) {
       document.addEventListener('scroll', this.handleScroll);
-      document.addEventListener('wheel', this.handleWheel);
+      document.addEventListener('wheel', this.handleWheel, supportsPassiveEvents ? { passive: true } : undefined);
     } else {
       this.node.addEventListener('scroll', this.handleScroll);
-      this.node.addEventListener('wheel', this.handleWheel);
+      this.node.addEventListener('wheel', this.handleWheel, supportsPassiveEvents ? { passive: true } : undefined);
     }
   }
 

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

@@ -7,7 +7,7 @@ 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 Image from 'flavours/glitch/components/image';
+import { Image } from 'flavours/glitch/components/image';
 import { Link } from 'react-router-dom';
 
 const messages = defineMessages({

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

@@ -1,12 +1,12 @@
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import IconButton from './icon_button';
+import { IconButton } from './icon_button';
 import DropdownMenuContainer from 'flavours/glitch/containers/dropdown_menu_container';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { me } from 'flavours/glitch/initial_state';
-import RelativeTimestamp from './relative_timestamp';
+import { RelativeTimestamp } from './relative_timestamp';
 import { accountAdminLink, statusAdminLink } from 'flavours/glitch/utils/backend_links';
 import classNames from 'classnames';
 import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_FEDERATION } from 'flavours/glitch/permissions';

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

@@ -5,7 +5,7 @@ import { FormattedMessage, injectIntl } from 'react-intl';
 import Permalink from './permalink';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import { autoPlayGif, languages as preloadedLanguages } from 'flavours/glitch/initial_state';
 import { decode as decodeIDNA } from 'flavours/glitch/utils/idna';
 

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

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
 //  Mastodon imports.
-import Avatar from './avatar';
+import { Avatar } from './avatar';
 import AvatarOverlay from './avatar_overlay';
 import DisplayName from './display_name';
 

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

@@ -5,9 +5,9 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { defineMessages, injectIntl } from 'react-intl';
 
 //  Mastodon imports.
-import IconButton from './icon_button';
+import { IconButton } from './icon_button';
 import VisibilityIcon from './status_visibility_icon';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import { languages } from 'flavours/glitch/initial_state';
 
 //  Messages for use with internationalization stuff.

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

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { FormattedMessage } from 'react-intl';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import { me } from 'flavours/glitch/initial_state';
 
 export default class StatusPrepend extends React.PureComponent {

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

@@ -3,7 +3,7 @@ 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 { Icon } from 'flavours/glitch/components/icon';
 
 const messages = defineMessages({
   public: { id: 'privacy.public.short', defaultMessage: 'Public' },

app/javascript/flavours/glitch/containers/compose_container.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 import PropTypes from 'prop-types';
-import { store } from 'flavours/glitch/store/configureStore';
+import { store } from 'flavours/glitch/store';
 import { hydrateStore } from 'flavours/glitch/actions/store';
 import { IntlProvider, addLocaleData } from 'react-intl';
 import { getLocale } from 'mastodon/locales';

app/javascript/flavours/glitch/containers/domain_container.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { blockDomain, unblockDomain } from '../actions/domain_blocks';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import Domain from '../components/domain';
+import { Domain } from '../components/domain';
 import { openModal } from '../actions/modal';
 
 const messages = defineMessages({

app/javascript/flavours/glitch/containers/mastodon.jsx

@@ -5,7 +5,7 @@ import { IntlProvider, addLocaleData } from 'react-intl';
 import { Provider as ReduxProvider } from 'react-redux';
 import { BrowserRouter, Route } from 'react-router-dom';
 import { ScrollContext } from 'react-router-scroll-4';
-import { store } from 'flavours/glitch/store/configureStore';
+import { store } from 'flavours/glitch/store';
 import UI from 'flavours/glitch/features/ui';
 import { fetchCustomEmojis } from 'flavours/glitch/actions/custom_emojis';
 import { hydrateStore } from 'flavours/glitch/actions/store';

app/javascript/flavours/glitch/features/about/index.jsx

@@ -9,9 +9,9 @@ import { Helmet } from 'react-helmet';
 import { fetchServer, fetchExtendedDescription, fetchDomainBlocks } from 'flavours/glitch/actions/server';
 import Account from 'flavours/glitch/containers/account_container';
 import Skeleton from 'flavours/glitch/components/skeleton';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import classNames from 'classnames';
-import Image from 'flavours/glitch/components/image';
+import { Image } from 'flavours/glitch/components/image';
 
 const messages = defineMessages({
   title: { id: 'column.about', defaultMessage: 'About' },

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

@@ -3,7 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import Textarea from 'react-textarea-autosize';
 
 const messages = defineMessages({

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

@@ -2,7 +2,7 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { NavLink } from 'react-router-dom';
 import { FormattedMessage, FormattedNumber } from 'react-intl';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 class ActionBar extends React.PureComponent {
 

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

@@ -2,7 +2,7 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 export default class FollowRequestNote extends ImmutablePureComponent {
 

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

@@ -6,9 +6,9 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { autoPlayGif, me, domain } from 'flavours/glitch/initial_state';
 import { preferencesLink, profileLink, accountAdminLink } from 'flavours/glitch/utils/backend_links';
 import classNames from 'classnames';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
-import Avatar from 'flavours/glitch/components/avatar';
+import { Avatar } from 'flavours/glitch/components/avatar';
 import Button from 'flavours/glitch/components/button';
 import DropdownMenuContainer from 'flavours/glitch/containers/dropdown_menu_container';
 import AccountNoteContainer from '../containers/account_note_container';

app/javascript/flavours/glitch/features/account_gallery/components/media_item.jsx

@@ -1,6 +1,6 @@
-import Blurhash from 'flavours/glitch/components/blurhash';
+import { Blurhash } from 'flavours/glitch/components/blurhash';
 import classNames from 'classnames';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import { autoPlayGif, displayMedia, useBlurhash } from 'flavours/glitch/initial_state';
 import PropTypes from 'prop-types';
 import React from 'react';

app/javascript/flavours/glitch/features/account_timeline/components/moved_note.jsx

@@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import AvatarOverlay from '../../../components/avatar_overlay';
 import DisplayName from '../../../components/display_name';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 export default class MovedNote extends ImmutablePureComponent {
 

app/javascript/flavours/glitch/features/audio/index.jsx

@@ -2,12 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import { formatTime, getPointerPosition, fileNameFromURL } from 'flavours/glitch/features/video';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import classNames from 'classnames';
 import { throttle, debounce } from 'lodash';
 import Visualizer from './visualizer';
 import { displayMedia, useBlurhash } from 'flavours/glitch/initial_state';
-import Blurhash from 'flavours/glitch/components/blurhash';
+import { Blurhash } from 'flavours/glitch/components/blurhash';
 import { is } from 'immutable';
 
 const messages = defineMessages({

app/javascript/flavours/glitch/features/compose/components/autosuggest_account.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Avatar from 'flavours/glitch/components/avatar';
+import { Avatar } from 'flavours/glitch/components/avatar';
 import DisplayName from 'flavours/glitch/components/display_name';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';

app/javascript/flavours/glitch/features/compose/components/dropdown.jsx

@@ -5,7 +5,7 @@ import React from 'react';
 import Overlay from 'react-overlays/Overlay';
 
 //  Components.
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
 import DropdownMenu from './dropdown_menu';
 
 //  The component.

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

@@ -4,7 +4,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 //  Components.
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 //  Utils.
 import { withPassive } from 'flavours/glitch/utils/dom_helpers';

app/javascript/flavours/glitch/features/compose/components/header.jsx

@@ -7,7 +7,7 @@ import { Link } from 'react-router-dom';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
 //  Components.
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 //  Utils.
 import { conditionalRender } from 'flavours/glitch/utils/react_helpers';

app/javascript/flavours/glitch/features/compose/components/navigation_bar.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ActionBar from './action_bar';
-import Avatar from 'flavours/glitch/components/avatar';
+import { Avatar } from 'flavours/glitch/components/avatar';
 import Permalink from 'flavours/glitch/components/permalink';
 import { FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';

app/javascript/flavours/glitch/features/compose/components/options.jsx

@@ -7,7 +7,7 @@ import Toggle from 'react-toggle';
 import { connect } from 'react-redux';
 
 //  Components.
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
 import TextIconButton from './text_icon_button';
 import DropdownContainer from '../containers/dropdown_container';
 import PrivacyDropdownContainer from '../containers/privacy_dropdown_container';

app/javascript/flavours/glitch/features/compose/components/poll_form.jsx

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import AutosuggestInput from 'flavours/glitch/components/autosuggest_input';
 import classNames from 'classnames';
 import { pollLimits } from 'flavours/glitch/initial_state';

app/javascript/flavours/glitch/features/compose/components/publisher.jsx

@@ -8,7 +8,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 
 //  Components.
 import Button from 'flavours/glitch/components/button';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 //  Utils.
 import { maxChars } from 'flavours/glitch/initial_state';

app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx

@@ -7,7 +7,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 
 //  Components.
 import AccountContainer from 'flavours/glitch/containers/account_container';
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
 import AttachmentList from 'flavours/glitch/components/attachment_list';
 
 //  Messages.

app/javascript/flavours/glitch/features/compose/components/search.jsx

@@ -9,7 +9,7 @@ import {
 import Overlay from 'react-overlays/Overlay';
 
 //  Components.
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 //  Utils.
 import { focusRoot } from 'flavours/glitch/utils/dom_helpers';

app/javascript/flavours/glitch/features/compose/components/search_results.jsx

@@ -6,7 +6,7 @@ import AccountContainer from 'flavours/glitch/containers/account_container';
 import StatusContainer from 'flavours/glitch/containers/status_container';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { ImmutableHashtag as Hashtag } from 'flavours/glitch/components/hashtag';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import { searchEnabled } from 'flavours/glitch/initial_state';
 import LoadMore from 'flavours/glitch/components/load_more';
 

app/javascript/flavours/glitch/features/compose/components/textarea_icons.jsx

@@ -6,7 +6,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
 //  Components.
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 //  Messages.
 const messages = defineMessages({

app/javascript/flavours/glitch/features/compose/components/upload.jsx

@@ -5,7 +5,7 @@ import Motion from '../../ui/util/optional_motion';
 import spring from 'react-motion/lib/spring';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { FormattedMessage } from 'react-intl';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 export default class Upload extends ImmutablePureComponent {
 

app/javascript/flavours/glitch/features/compose/components/upload_progress.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Motion from '../../ui/util/optional_motion';
 import spring from 'react-motion/lib/spring';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import { FormattedMessage } from 'react-intl';
 
 export default class UploadProgress extends React.PureComponent {

app/javascript/flavours/glitch/features/compose/containers/emoji_picker_dropdown_container.js

@@ -72,6 +72,7 @@ const mapDispatchToProps = (dispatch, { onPickEmoji }) => ({
   },
 
   onPickEmoji: emoji => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks -- this is not a react hook
     dispatch(useEmoji(emoji));
 
     if (onPickEmoji) {

app/javascript/flavours/glitch/features/compose/containers/language_dropdown_container.js

@@ -26,6 +26,7 @@ const mapDispatchToProps = dispatch => ({
   },
 
   onClose (value) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks -- this is not a react hook
     dispatch(useLanguage(value));
   },
 

app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx

@@ -8,8 +8,8 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import DropdownMenuContainer from 'flavours/glitch/containers/dropdown_menu_container';
 import AvatarComposite from 'flavours/glitch/components/avatar_composite';
 import Permalink from 'flavours/glitch/components/permalink';
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
-import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp';
+import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
 import { HotKeys } from 'react-hotkeys';
 import { autoPlayGif } from 'flavours/glitch/initial_state';
 import classNames from 'classnames';

app/javascript/flavours/glitch/features/directory/components/account_card.jsx

@@ -4,10 +4,10 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { makeGetAccount } from 'flavours/glitch/selectors';
-import Avatar from 'flavours/glitch/components/avatar';
+import { Avatar } from 'flavours/glitch/components/avatar';
 import DisplayName from 'flavours/glitch/components/display_name';
 import Permalink from 'flavours/glitch/components/permalink';
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
 import Button from 'flavours/glitch/components/button';
 import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
 import { autoPlayGif, me, unfollowModal } from 'flavours/glitch/initial_state';

app/javascript/flavours/glitch/features/directory/index.jsx

@@ -9,7 +9,7 @@ import { addColumn, removeColumn, moveColumn, changeColumnParams } from 'flavour
 import { fetchDirectory, expandDirectory } from 'flavours/glitch/actions/directory';
 import { List as ImmutableList } from 'immutable';
 import AccountCard from './components/account_card';
-import RadioButton from 'flavours/glitch/components/radio_button';
+import { RadioButton } from 'flavours/glitch/components/radio_button';
 import LoadMore from 'flavours/glitch/components/load_more';
 import ScrollContainer from 'flavours/glitch/containers/scroll_container';
 import LoadingIndicator from 'flavours/glitch/components/loading_indicator';

app/javascript/flavours/glitch/features/emoji/emoji_compressed.js

@@ -1,3 +1,5 @@
+/* eslint-disable import/no-commonjs --
+   We need to use CommonJS here due to preval */
 // @preval
 // http://www.unicode.org/Public/emoji/5.0/emoji-test.txt
 // This file contains the compressed version of the emoji data from

app/javascript/flavours/glitch/features/emoji/emoji_mart_data_light.js

@@ -1,8 +1,10 @@
 // The output of this module is designed to mimic emoji-mart's
 // "data" object, such that we can use it for a light version of emoji-mart's
 // emojiIndex.search functionality.
-const { unicodeToUnifiedName } = require('./unicode_to_unified_name');
+import { unicodeToUnifiedName } from './unicode_to_unified_name';
-const [ shortCodesToEmojiData, skins, categories, short_names ] = require('./emoji_compressed');
+import emojiCompressed from './emoji_compressed';
+
+const [ shortCodesToEmojiData, skins, categories, short_names ] = emojiCompressed;
 
 const emojis = {};
 
@@ -33,7 +35,7 @@ Object.keys(shortCodesToEmojiData).forEach((shortCode) => {
   };
 });
 
-module.exports = {
+export {
   emojis,
   skins,
   categories,

app/javascript/flavours/glitch/features/emoji/emoji_mart_search_light.js

@@ -1,7 +1,7 @@
 // This code is largely borrowed from:
 // https://github.com/missive/emoji-mart/blob/5f2ffcc/src/utils/emoji-index.js
 
-import data from './emoji_mart_data_light';
+import * as data from './emoji_mart_data_light';
 import { getData, getSanitizedData, uniq, intersect } from './emoji_utils';
 
 let originalPool = {};

app/javascript/flavours/glitch/features/emoji/emoji_unicode_mapping_light.js

@@ -2,14 +2,17 @@
 // (i.e. the svg filename) and a shortCode intended to be shown
 // as a "title" attribute in an HTML element (aka tooltip).
 
+import emojiCompressed from './emoji_compressed';
+
+import { unicodeToFilename } from './unicode_to_filename';
+
 const [
   shortCodesToEmojiData,
-  skins, // eslint-disable-line @typescript-eslint/no-unused-vars
+  _skins,
-  categories, // eslint-disable-line @typescript-eslint/no-unused-vars
+  _categories,
-  short_names, // eslint-disable-line @typescript-eslint/no-unused-vars
+  _short_names,
   emojisWithoutShortCodes,
-] = require('./emoji_compressed');
+] = emojiCompressed;
-const { unicodeToFilename } = require('./unicode_to_filename');
 
 // decompress
 const unicodeMapping = {};
@@ -32,4 +35,4 @@ Object.keys(shortCodesToEmojiData).forEach((shortCode) => {
 });
 emojisWithoutShortCodes.forEach(emojiMapData => processEmojiMapData(emojiMapData));
 
-module.exports = unicodeMapping;
+export default unicodeMapping;

app/javascript/flavours/glitch/features/emoji/emoji_utils.js

@@ -1,7 +1,7 @@
 // This code is largely borrowed from:
 // https://github.com/missive/emoji-mart/blob/5f2ffcc/src/utils/index.js
 
-import data from './emoji_mart_data_light';
+import * as data from './emoji_mart_data_light';
 
 const buildSearch = (data) => {
   const search = [];

app/javascript/flavours/glitch/features/emoji/unicode_to_filename.js

@@ -1,3 +1,6 @@
+/* eslint-disable import/no-commonjs --
+   We need to use CommonJS here as its imported into a preval file (`emoji_compressed.js`) */
+
 // taken from:
 // https://github.com/twitter/twemoji/blob/47732c7/twemoji-generator.js#L848-L866
 exports.unicodeToFilename = (str) => {

app/javascript/flavours/glitch/features/emoji/unicode_to_unified_name.js

@@ -1,3 +1,6 @@
+/* eslint-disable import/no-commonjs --
+   We need to use CommonJS here as its imported into a preval file (`emoji_compressed.js`) */
+
 function padLeft(str, num) {
   while (str.length < num) {
     str = '0' + str;

app/javascript/flavours/glitch/features/explore/components/story.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Blurhash from 'flavours/glitch/components/blurhash';
+import { Blurhash } from 'flavours/glitch/components/blurhash';
 import { accountsCountRenderer } from 'flavours/glitch/components/hashtag';
 import ShortNumber from 'flavours/glitch/components/short_number';
 import Skeleton from 'flavours/glitch/components/skeleton';

app/javascript/flavours/glitch/features/favourites/index.jsx

@@ -5,7 +5,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import ColumnHeader from 'flavours/glitch/components/column_header';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import { fetchFavourites } from 'flavours/glitch/actions/interactions';
 import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
 import ScrollableList from 'flavours/glitch/components/scrollable_list';

app/javascript/flavours/glitch/features/filters/select_filter.jsx

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { toServerSideType } from 'flavours/glitch/utils/filters';
 import { loupeIcon, deleteIcon } from 'flavours/glitch/utils/icons';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import fuzzysort from 'fuzzysort';
 
 const messages = defineMessages({

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

@@ -4,10 +4,10 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 import { makeGetAccount } from 'flavours/glitch/selectors';
-import Avatar from 'flavours/glitch/components/avatar';
+import { Avatar } from 'flavours/glitch/components/avatar';
 import DisplayName from 'flavours/glitch/components/display_name';
 import Permalink from 'flavours/glitch/components/permalink';
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
 import { injectIntl, defineMessages } from 'react-intl';
 import { followAccount, unfollowAccount } from 'flavours/glitch/actions/accounts';
 

app/javascript/flavours/glitch/features/follow_requests/components/account_authorize.jsx

@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Permalink from 'flavours/glitch/components/permalink';
-import Avatar from 'flavours/glitch/components/avatar';
+import { Avatar } from 'flavours/glitch/components/avatar';
 import DisplayName from 'flavours/glitch/components/display_name';
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 

app/javascript/flavours/glitch/features/getting_started/components/announcements.jsx

@@ -3,15 +3,15 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import ReactSwipeableViews from 'react-swipeable-views';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import { defineMessages, injectIntl, FormattedMessage, FormattedDate } from 'react-intl';
 import { autoPlayGif, reduceMotion, disableSwiping, mascot } from 'flavours/glitch/initial_state';
 import elephantUIPlane from 'mastodon/../images/elephant_ui_plane.svg';
 import unicodeMapping from 'flavours/glitch/features/emoji/emoji_unicode_mapping_light';
 import classNames from 'classnames';
 import EmojiPickerDropdown from 'flavours/glitch/features/compose/containers/emoji_picker_dropdown_container';
-import AnimatedNumber from 'flavours/glitch/components/animated_number';
+import { AnimatedNumber } from 'flavours/glitch/components/animated_number';
 import TransitionMotion from 'react-motion/lib/TransitionMotion';
 import spring from 'react-motion/lib/spring';
 import { assetHost } from 'flavours/glitch/utils/config';

app/javascript/flavours/glitch/features/hashtag_timeline/index.jsx

@@ -12,7 +12,7 @@ import { connectHashtagStream } from 'flavours/glitch/actions/streaming';
 import { injectIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { isEqual } from 'lodash';
 import { fetchHashtag, followHashtag, unfollowHashtag } from 'flavours/glitch/actions/tags';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import classNames from 'classnames';
 import { Helmet } from 'react-helmet';
 

app/javascript/flavours/glitch/features/home_timeline/index.jsx

@@ -12,8 +12,8 @@ import { Link } from 'react-router-dom';
 import { fetchAnnouncements, toggleShowAnnouncements } from 'flavours/glitch/actions/announcements';
 import AnnouncementsContainer from 'flavours/glitch/features/getting_started/containers/announcements_container';
 import classNames from 'classnames';
-import IconWithBadge from 'flavours/glitch/components/icon_with_badge';
+import { IconWithBadge } from 'flavours/glitch/components/icon_with_badge';
-import NotSignedInIndicator from 'flavours/glitch/components/not_signed_in_indicator';
+import { NotSignedInIndicator } from 'flavours/glitch/components/not_signed_in_indicator';
 import { Helmet } from 'react-helmet';
 
 const messages = defineMessages({

app/javascript/flavours/glitch/features/interaction_modal/index.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { registrationsOpen } from 'flavours/glitch/initial_state';
 import { connect } from 'react-redux';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import classNames from 'classnames';
 import { openModal, closeModal } from 'flavours/glitch/actions/modal';
 

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

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { makeGetAccount } from '../../../selectors';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import Avatar from '../../../components/avatar';
+import { Avatar } from '../../../components/avatar';
 import DisplayName from '../../../components/display_name';
 import { injectIntl } from 'react-intl';
 

app/javascript/flavours/glitch/features/list_adder/components/list.jsx

@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import IconButton from '../../../components/icon_button';
+import { IconButton } from '../../../components/icon_button';
 import { defineMessages, injectIntl } from 'react-intl';
 import { removeFromListAdder, addToListAdder } from '../../../actions/lists';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 const messages = defineMessages({
   remove: { id: 'lists.account.remove', defaultMessage: 'Remove from list' },