Enforce stricter rules for Typescript files (#24910)

app/javascript/mastodon/components/__tests__/avatar-test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { fromJS } from 'immutable';
-import Avatar from '../avatar';
+import { Avatar } from '../avatar';
 
 describe('<Avatar />', () => {
   const account = fromJS({

app/javascript/mastodon/components/__tests__/avatar_overlay-test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { fromJS } from 'immutable';
-import AvatarOverlay from '../avatar_overlay';
+import { AvatarOverlay } from '../avatar_overlay';
 
 describe('<AvatarOverlay', () => {
   const account = fromJS({

app/javascript/mastodon/components/account.jsx

@@ -1,19 +1,19 @@
 import React 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 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 '../initial_state';
-import RelativeTimestamp from './relative_timestamp';
+import { RelativeTimestamp } from './relative_timestamp';
 import Skeleton from 'mastodon/components/skeleton';
 import { Link } from 'react-router-dom';
 import { counterRenderer } from 'mastodon/components/common_counter';
 import ShortNumber from 'mastodon/components/short_number';
 import classNames from 'classnames';
-import VerifiedBadge from 'mastodon/components/verified_badge';
+import { VerifiedBadge } from 'mastodon/components/verified_badge';
 
 const messages = defineMessages({
   follow: { id: 'account.follow', defaultMessage: 'Follow' },

app/javascript/mastodon/components/animated_number.tsx

@@ -54,5 +54,3 @@ export const AnimatedNumber: React.FC<Props> = ({
     </TransitionMotion>
   );
 };
-
-export default AnimatedNumber;

app/javascript/mastodon/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 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 
 const filename = url => url.split('/').pop().split('#')[0].split('?')[0];
 

app/javascript/mastodon/components/avatar.tsx

@@ -45,5 +45,3 @@ export const Avatar: React.FC<Props> = ({
     </div>
   );
 };
-
-export default Avatar;

app/javascript/mastodon/components/avatar_composite.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { autoPlayGif } from '../initial_state';
-import Avatar from './avatar';
+import { Avatar } from './avatar';
 
 export default class AvatarComposite extends React.PureComponent {
 

app/javascript/mastodon/components/avatar_overlay.tsx

@@ -47,5 +47,3 @@ export const AvatarOverlay: React.FC<Props> = ({
     </div>
   );
 };
-
-export default AvatarOverlay;

app/javascript/mastodon/components/blurhash.tsx

@@ -9,13 +9,13 @@ type Props = {
   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/mastodon/components/check.tsx

@@ -5,5 +5,3 @@ export const Check: React.FC = () => (
     <path fillRule='evenodd' d='M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z' clipRule='evenodd' />
   </svg>
 );
-
-export default Check;

app/javascript/mastodon/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 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 import { createPortal } from 'react-dom';
 
 export default class ColumnBackButton extends React.PureComponent {

app/javascript/mastodon/components/column_back_button_slim.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import ColumnBackButton from './column_back_button';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 
 export default class ColumnBackButtonSlim extends ColumnBackButton {
 

app/javascript/mastodon/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 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 
 const messages = defineMessages({
   show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },

app/javascript/mastodon/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 'mastodon/settings';

app/javascript/mastodon/components/domain.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import IconButton from './icon_button';
+import { IconButton } from './icon_button';
 import { InjectedIntl, defineMessages, injectIntl } from 'react-intl';
 
 const messages = defineMessages({

app/javascript/mastodon/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/mastodon/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 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 import DropdownMenu from './containers/dropdown_menu_container';
 import { connect } from 'react-redux';
 import { openModal } from 'mastodon/actions/modal';
-import RelativeTimestamp from 'mastodon/components/relative_timestamp';
+import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
 import InlineAccount from 'mastodon/components/inline_account';
 
 const mapDispatchToProps = (dispatch, { statusId }) => ({

app/javascript/mastodon/components/gifv.tsx

@@ -64,5 +64,3 @@ export const GIFV: React.FC<Props> = ({
     </div>
   );
 };
-
-export default GIFV;

app/javascript/mastodon/components/icon.tsx

@@ -10,5 +10,3 @@ type Props = {
 }
 export const Icon: React.FC<Props> = ({ id, className, fixedWidth, ...other }) =>
   <i className={classNames('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })} {...other} />;
-
-export default Icon;

app/javascript/mastodon/components/icon_button.tsx

@@ -30,7 +30,7 @@ type States = {
   activate: boolean,
   deactivate: boolean,
 }
-export default class IconButton extends React.PureComponent<Props, States> {
+export class IconButton extends React.PureComponent<Props, States> {
 
   static defaultProps = {
     size: 18,

app/javascript/mastodon/components/icon_with_badge.tsx

@@ -9,12 +9,10 @@ type Props = {
   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>}
     {issueBadge && <i className='icon-with-badge__issue-badge' />}
   </i>
 );
-
-export default IconWithBadge;

app/javascript/mastodon/components/image.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react';
-import Blurhash from './blurhash';
+import { Blurhash } from './blurhash';
 import classNames from 'classnames';
 
 type Props = {
@@ -23,5 +23,3 @@ export const Image: React.FC<Props> = ({ src, srcSet, blurhash, className }) =>
     </div>
   );
 };
-
-export default Image;

app/javascript/mastodon/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 'mastodon/selectors';
-import Avatar from 'mastodon/components/avatar';
+import { Avatar } from 'mastodon/components/avatar';
 
 const makeMapStateToProps = () => {
   const getAccount = makeGetAccount();

app/javascript/mastodon/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 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 
 const messages = defineMessages({
   load_more: { id: 'status.load_more', defaultMessage: 'Load more' },

app/javascript/mastodon/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, cropImages, displayMedia, useBlurhash } from '../initial_state';
 import { debounce } from 'lodash';
-import Blurhash from 'mastodon/components/blurhash';
+import { Blurhash } from 'mastodon/components/blurhash';
 
 const messages = defineMessages({
   toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: '{number, plural, one {Hide image} other {Hide images}}' },

app/javascript/mastodon/components/not_signed_in_indicator.tsx

@@ -8,5 +8,3 @@ export const NotSignedInIndicator: React.FC = () => (
     </div>
   </div>
 );
-
-export default NotSignedInIndicator;

app/javascript/mastodon/components/picture_in_picture_placeholder.jsx

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

app/javascript/mastodon/components/poll.jsx

@@ -8,8 +8,8 @@ import Motion from 'mastodon/features/ui/util/optional_motion';
 import spring from 'react-motion/lib/spring';
 import escapeTextContentForBrowser from 'escape-html';
 import emojify from 'mastodon/features/emoji/emoji';
-import RelativeTimestamp from './relative_timestamp';
-import Icon from 'mastodon/components/icon';
+import { RelativeTimestamp } from './relative_timestamp';
+import { Icon }  from 'mastodon/components/icon';
 
 const messages = defineMessages({
   closed: {

app/javascript/mastodon/components/radio_button.tsx

@@ -26,5 +26,3 @@ export const RadioButton: React.FC<Props> = ({ name, value, checked, onChange, l
     </label>
   );
 };
-
-export default RadioButton;

app/javascript/mastodon/components/relative_timestamp.tsx

@@ -200,4 +200,6 @@ class RelativeTimestamp extends React.Component<Props, States> {
 
 }
 
-export default injectIntl(RelativeTimestamp);
+const RelativeTimestampWithIntl = injectIntl(RelativeTimestamp);
+
+export { RelativeTimestampWithIntl as RelativeTimestamp };

app/javascript/mastodon/components/server_banner.jsx

@@ -7,7 +7,7 @@ import ShortNumber from 'mastodon/components/short_number';
 import Skeleton from 'mastodon/components/skeleton';
 import Account from 'mastodon/containers/account_container';
 import { domain } from 'mastodon/initial_state';
-import Image from 'mastodon/components/image';
+import { Image } from 'mastodon/components/image';
 import { Link } from 'react-router-dom';
 
 const messages = defineMessages({

app/javascript/mastodon/components/status.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import Avatar from './avatar';
-import AvatarOverlay from './avatar_overlay';
-import RelativeTimestamp from './relative_timestamp';
+import { Avatar } from './avatar';
+import { AvatarOverlay } from './avatar_overlay';
+import { RelativeTimestamp } from './relative_timestamp';
 import DisplayName from './display_name';
 import StatusContent from './status_content';
 import StatusActionBar from './status_action_bar';
@@ -14,7 +14,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { MediaGallery, Video, Audio } from '../features/ui/util/async-components';
 import { HotKeys } from 'react-hotkeys';
 import classNames from 'classnames';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 import { displayMedia } from '../initial_state';
 import PictureInPicturePlaceholder from 'mastodon/components/picture_in_picture_placeholder';
 

app/javascript/mastodon/components/status_action_bar.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import IconButton from './icon_button';
+import { IconButton } from './icon_button';
 import DropdownMenuContainer from '../containers/dropdown_menu_container';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';

app/javascript/mastodon/components/status_content.jsx

@@ -6,7 +6,7 @@ import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
 import PollContainer from 'mastodon/containers/poll_container';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 import { autoPlayGif, languages as preloadedLanguages } from 'mastodon/initial_state';
 
 const MAX_HEIGHT = 706; // 22px * 32 (+ 2px padding at the top)

app/javascript/mastodon/components/verified_badge.tsx

@@ -10,5 +10,3 @@ export const VerifiedBadge: React.FC<Props> = ({ link }) => (
     <span dangerouslySetInnerHTML={{ __html: link }} />
   </span>
 );
-
-export default VerifiedBadge;