Rewrite `<AutosuggestHashtag />` as FC and TS (#25481)

app/javascript/mastodon/components/autosuggest_hashtag.jsx

-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { FormattedMessage } from 'react-intl';
-
-import ShortNumber from 'mastodon/components/short_number';
-
-export default class AutosuggestHashtag extends PureComponent {
-
-  static propTypes = {
-    tag: PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      url: PropTypes.string,
-      history: PropTypes.array,
-    }).isRequired,
-  };
-
-  render() {
-    const { tag } = this.props;
-    const weeklyUses = tag.history && (
-      <ShortNumber
-        value={tag.history.reduce((total, day) => total + day.uses * 1, 0)}
-      />
-    );
-
-    return (
-      <div className='autosuggest-hashtag'>
-        <div className='autosuggest-hashtag__name'>
-          #<strong>{tag.name}</strong>
-        </div>
-        {tag.history !== undefined && (
-          <div className='autosuggest-hashtag__uses'>
-            <FormattedMessage
-              id='autosuggest_hashtag.per_week'
-              defaultMessage='{count} per week'
-              values={{ count: weeklyUses }}
-            />
-          </div>
-        )}
-      </div>
-    );
-  }
-
-}

app/javascript/mastodon/components/autosuggest_hashtag.tsx

+import { FormattedMessage } from 'react-intl';
+
+import ShortNumber from 'mastodon/components/short_number';
+
+interface Props {
+  tag: {
+    name: string;
+    url?: string;
+    history?: Array<{
+      uses: number;
+      accounts: string;
+      day: string;
+    }>;
+    following?: boolean;
+    type: 'hashtag';
+  };
+}
+
+export const AutosuggestHashtag: React.FC<Props> = ({ tag }) => {
+  const weeklyUses = tag.history && (
+    <ShortNumber
+      value={tag.history.reduce((total, day) => total + day.uses * 1, 0)}
+    />
+  );
+
+  return (
+    <div className='autosuggest-hashtag'>
+      <div className='autosuggest-hashtag__name'>
+        #<strong>{tag.name}</strong>
+      </div>
+      {tag.history !== undefined && (
+        <div className='autosuggest-hashtag__uses'>
+          <FormattedMessage
+            id='autosuggest_hashtag.per_week'
+            defaultMessage='{count} per week'
+            values={{ count: weeklyUses }}
+          />
+        </div>
+      )}
+    </div>
+  );
+};

app/javascript/mastodon/components/autosuggest_input.jsx

@@ -8,7 +8,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import AutosuggestAccountContainer from '../features/compose/containers/autosuggest_account_container';
 
 import AutosuggestEmoji from './autosuggest_emoji';
-import AutosuggestHashtag from './autosuggest_hashtag';
+import { AutosuggestHashtag } from './autosuggest_hashtag';
 
 const textAtCursorMatchesToken = (str, caretPosition, searchTokens) => {
   let word;

app/javascript/mastodon/components/autosuggest_textarea.jsx

@@ -10,7 +10,7 @@ import Textarea from 'react-textarea-autosize';
 import AutosuggestAccountContainer from '../features/compose/containers/autosuggest_account_container';
 
 import AutosuggestEmoji from './autosuggest_emoji';
-import AutosuggestHashtag from './autosuggest_hashtag';
+import { AutosuggestHashtag } from './autosuggest_hashtag';
 
 const textAtCursorMatchesToken = (str, caretPosition) => {
   let word;