[Glitch] Add type annotation for DisplayName component

Port 349cae0b57 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

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

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { Avatar } from './avatar';
-import DisplayName from './display_name';
+import { DisplayName } from './display_name';
 import Permalink from './permalink';
 import { IconButton } from './icon_button';
 import { defineMessages, injectIntl } from 'react-intl';

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

@@ -1,83 +0,0 @@
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { autoPlayGif } from 'flavours/glitch/initial_state';
-import Skeleton from 'flavours/glitch/components/skeleton';
-
-export default class DisplayName extends React.PureComponent {
-
-  static propTypes = {
-    account: ImmutablePropTypes.map,
-    others: ImmutablePropTypes.list,
-    localDomain: PropTypes.string,
-    inline: PropTypes.bool,
-  };
-
-  handleMouseEnter = ({ currentTarget }) => {
-    if (autoPlayGif) {
-      return;
-    }
-
-    const emojis = currentTarget.querySelectorAll('.custom-emoji');
-
-    for (var i = 0; i < emojis.length; i++) {
-      let emoji = emojis[i];
-      emoji.src = emoji.getAttribute('data-original');
-    }
-  };
-
-  handleMouseLeave = ({ currentTarget }) => {
-    if (autoPlayGif) {
-      return;
-    }
-
-    const emojis = currentTarget.querySelectorAll('.custom-emoji');
-
-    for (var i = 0; i < emojis.length; i++) {
-      let emoji = emojis[i];
-      emoji.src = emoji.getAttribute('data-static');
-    }
-  };
-
-  render () {
-    const { others, localDomain, inline } = this.props;
-
-    let displayName, suffix, account;
-
-    if (others && others.size > 1) {
-      displayName = others.take(2).map(a => <bdi key={a.get('id')}><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }} /></bdi>).reduce((prev, cur) => [prev, ', ', cur]);
-
-      if (others.size - 2 > 0) {
-        suffix = `+${others.size - 2}`;
-      }
-    } else if ((others && others.size > 0) || this.props.account) {
-      if (others && others.size > 0) {
-        account = others.first();
-      } else {
-        account = this.props.account;
-      }
-
-      let acct = account.get('acct');
-
-      if (acct.indexOf('@') === -1 && localDomain) {
-        acct = `${acct}@${localDomain}`;
-      }
-
-      displayName = <bdi><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} /></bdi>;
-      suffix      = <span className='display-name__account'>@{acct}</span>;
-    } else {
-      displayName = <bdi><strong className='display-name__html'><Skeleton width='10ch' /></strong></bdi>;
-      suffix = <span className='display-name__account'><Skeleton width='7ch' /></span>;
-    }
-
-    return (
-      <span className={classNames('display-name', { inline })} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
-        {displayName}
-        {inline ? ' ' : null}
-        {suffix}
-      </span>
-    );
-  }
-
-}

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

@@ -0,0 +1,124 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import type { List } from 'immutable';
+
+import type { Account } from 'flavours/glitch/types/resources';
+
+import { autoPlayGif } from '../initial_state';
+
+import Skeleton from './skeleton';
+
+interface Props {
+  account: Account;
+  others: List<Account>;
+  localDomain: string;
+  inline?: boolean;
+}
+export class DisplayName extends React.PureComponent<Props> {
+  handleMouseEnter: React.ReactEventHandler<HTMLSpanElement> = ({
+    currentTarget,
+  }) => {
+    if (autoPlayGif) {
+      return;
+    }
+
+    const emojis =
+      currentTarget.querySelectorAll<HTMLImageElement>('img.custom-emoji');
+
+    emojis.forEach((emoji) => {
+      const originalSrc = emoji.getAttribute('data-original');
+      if (originalSrc != null) emoji.src = originalSrc;
+    });
+  };
+
+  handleMouseLeave: React.ReactEventHandler<HTMLSpanElement> = ({
+    currentTarget,
+  }) => {
+    if (autoPlayGif) {
+      return;
+    }
+
+    const emojis =
+      currentTarget.querySelectorAll<HTMLImageElement>('img.custom-emoji');
+
+    emojis.forEach((emoji) => {
+      const staticSrc = emoji.getAttribute('data-static');
+      if (staticSrc != null) emoji.src = staticSrc;
+    });
+  };
+
+  render() {
+    const { others, localDomain, inline } = this.props;
+
+    let displayName: React.ReactNode, suffix: React.ReactNode, account: Account;
+
+    if (others && others.size > 1) {
+      displayName = others
+        .take(2)
+        .map((a) => (
+          <bdi key={a.get('id')}>
+            <strong
+              className='display-name__html'
+              dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }}
+            />
+          </bdi>
+        ))
+        .reduce((prev, cur) => [prev, ', ', cur]);
+
+      if (others.size - 2 > 0) {
+        suffix = `+${others.size - 2}`;
+      }
+    } else if ((others && others.size > 0) || this.props.account) {
+      if (others && others.size > 0) {
+        account = others.first();
+      } else {
+        account = this.props.account;
+      }
+
+      let acct = account.get('acct');
+
+      if (acct.indexOf('@') === -1 && localDomain) {
+        acct = `${acct}@${localDomain}`;
+      }
+
+      displayName = (
+        <bdi>
+          <strong
+            className='display-name__html'
+            dangerouslySetInnerHTML={{
+              __html: account.get('display_name_html'),
+            }}
+          />
+        </bdi>
+      );
+      suffix = <span className='display-name__account'>@{acct}</span>;
+    } else {
+      displayName = (
+        <bdi>
+          <strong className='display-name__html'>
+            <Skeleton width='10ch' />
+          </strong>
+        </bdi>
+      );
+      suffix = (
+        <span className='display-name__account'>
+          <Skeleton width='7ch' />
+        </span>
+      );
+    }
+
+    return (
+      <span
+        className={classNames('display-name', { inline })}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave}
+      >
+        {displayName}
+        {inline ? ' ' : null}
+        {suffix}
+      </span>
+    );
+  }
+}

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

@@ -6,7 +6,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 //  Mastodon imports.
 import { Avatar } from './avatar';
 import AvatarOverlay from './avatar_overlay';
-import DisplayName from './display_name';
+import { DisplayName } from './display_name';
 
 export default class StatusHeader extends React.PureComponent {
 

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

@@ -4,7 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 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 { DisplayName } from '../../../components/display_name';
 import { Icon } from 'flavours/glitch/components/icon';
 
 export default class MovedNote extends ImmutablePureComponent {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Avatar } from 'flavours/glitch/components/avatar';
-import DisplayName from 'flavours/glitch/components/display_name';
+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/directory/components/account_card.jsx

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { makeGetAccount } from 'flavours/glitch/selectors';
 import { Avatar } from 'flavours/glitch/components/avatar';
-import DisplayName from 'flavours/glitch/components/display_name';
+import { DisplayName } from 'flavours/glitch/components/display_name';
 import Permalink from 'flavours/glitch/components/permalink';
 import { IconButton } from 'flavours/glitch/components/icon_button';
 import Button from 'flavours/glitch/components/button';

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

@@ -5,7 +5,7 @@ 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 DisplayName from 'flavours/glitch/components/display_name';
+import { DisplayName } from 'flavours/glitch/components/display_name';
 import Permalink from 'flavours/glitch/components/permalink';
 import { IconButton } from 'flavours/glitch/components/icon_button';
 import { injectIntl, defineMessages } from 'react-intl';

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

@@ -3,7 +3,7 @@ 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 DisplayName from 'flavours/glitch/components/display_name';
+import { DisplayName } from 'flavours/glitch/components/display_name';
 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/list_adder/components/account.jsx

@@ -4,7 +4,7 @@ import { makeGetAccount } from '../../../selectors';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Avatar } from '../../../components/avatar';
-import DisplayName from '../../../components/display_name';
+import { DisplayName } from '../../../components/display_name';
 import { injectIntl } from 'react-intl';
 
 const makeMapStateToProps = () => {

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

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

app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx

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

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

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { IconButton } from 'flavours/glitch/components/icon_button';
 import { Link } from 'react-router-dom';
 import { Avatar } from 'flavours/glitch/components/avatar';
-import DisplayName from 'flavours/glitch/components/display_name';
+import { DisplayName } from 'flavours/glitch/components/display_name';
 import { defineMessages, injectIntl } from 'react-intl';
 
 const messages = defineMessages({

app/javascript/flavours/glitch/features/report/components/status_check_box.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import StatusContent from 'flavours/glitch/components/status_content';
 import { Avatar } from 'flavours/glitch/components/avatar';
-import DisplayName from 'flavours/glitch/components/display_name';
+import { DisplayName } from 'flavours/glitch/components/display_name';
 import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
 import Option from './option';
 import MediaAttachments from 'flavours/glitch/components/media_attachments';

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Avatar } from 'flavours/glitch/components/avatar';
-import DisplayName from 'flavours/glitch/components/display_name';
+import { DisplayName } from 'flavours/glitch/components/display_name';
 import StatusContent from 'flavours/glitch/components/status_content';
 import MediaGallery from 'flavours/glitch/components/media_gallery';
 import AttachmentList from 'flavours/glitch/components/attachment_list';

app/javascript/flavours/glitch/features/ui/components/actions_modal.jsx

@@ -5,7 +5,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import StatusContent from 'flavours/glitch/components/status_content';
 import { Avatar } from 'flavours/glitch/components/avatar';
 import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
-import DisplayName from 'flavours/glitch/components/display_name';
+import { DisplayName } from 'flavours/glitch/components/display_name';
 import classNames from 'classnames';
 import { IconButton } from 'flavours/glitch/components/icon_button';
 

app/javascript/flavours/glitch/features/ui/components/boost_modal.jsx

@@ -7,7 +7,7 @@ import Button from 'flavours/glitch/components/button';
 import StatusContent from 'flavours/glitch/components/status_content';
 import { Avatar } from 'flavours/glitch/components/avatar';
 import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
-import DisplayName from 'flavours/glitch/components/display_name';
+import { DisplayName } from 'flavours/glitch/components/display_name';
 import AttachmentList from 'flavours/glitch/components/attachment_list';
 import { Icon } from 'flavours/glitch/components/icon';
 import ImmutablePureComponent from 'react-immutable-pure-component';

app/javascript/flavours/glitch/features/ui/components/favourite_modal.jsx

@@ -6,7 +6,7 @@ import Button from 'flavours/glitch/components/button';
 import StatusContent from 'flavours/glitch/components/status_content';
 import { Avatar } from 'flavours/glitch/components/avatar';
 import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
-import DisplayName from 'flavours/glitch/components/display_name';
+import { DisplayName } from 'flavours/glitch/components/display_name';
 import AttachmentList from 'flavours/glitch/components/attachment_list';
 import { Icon } from 'flavours/glitch/components/icon';
 import ImmutablePureComponent from 'react-immutable-pure-component';