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 b509f48df0..0000000000 --- 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 0000000000..c6798054db --- /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 890f94928b..06cbb5d75b 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 463d2e94c1..230e4f6572 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;