From 804488d38e9942280f7d320af8c7fef7860a4ee5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=9F=E3=81=84=E3=81=A1=20=E3=81=B2?=
 <taichi221228@icloud.com>
Date: Mon, 19 Jun 2023 21:11:46 +0900
Subject: [PATCH] Rewrite `<AutosuggestHashtag />` as FC and TS (#25481)

---
 .../components/autosuggest_hashtag.jsx        | 44 -------------------
 .../components/autosuggest_hashtag.tsx        | 42 ++++++++++++++++++
 .../mastodon/components/autosuggest_input.jsx |  2 +-
 .../components/autosuggest_textarea.jsx       |  2 +-
 4 files changed, 44 insertions(+), 46 deletions(-)
 delete mode 100644 app/javascript/mastodon/components/autosuggest_hashtag.jsx
 create mode 100644 app/javascript/mastodon/components/autosuggest_hashtag.tsx

diff --git a/app/javascript/mastodon/components/autosuggest_hashtag.jsx b/app/javascript/mastodon/components/autosuggest_hashtag.jsx
deleted file mode 100644
index b509f48df..000000000
--- a/app/javascript/mastodon/components/autosuggest_hashtag.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-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>
-    );
-  }
-
-}
diff --git a/app/javascript/mastodon/components/autosuggest_hashtag.tsx b/app/javascript/mastodon/components/autosuggest_hashtag.tsx
new file mode 100644
index 000000000..c6798054d
--- /dev/null
+++ b/app/javascript/mastodon/components/autosuggest_hashtag.tsx
@@ -0,0 +1,42 @@
+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>
+  );
+};
diff --git a/app/javascript/mastodon/components/autosuggest_input.jsx b/app/javascript/mastodon/components/autosuggest_input.jsx
index 890f94928..06cbb5d75 100644
--- a/app/javascript/mastodon/components/autosuggest_input.jsx
+++ b/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;
diff --git a/app/javascript/mastodon/components/autosuggest_textarea.jsx b/app/javascript/mastodon/components/autosuggest_textarea.jsx
index 463d2e94c..230e4f657 100644
--- a/app/javascript/mastodon/components/autosuggest_textarea.jsx
+++ b/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;