~cytrogen/masto-fe

804488d38e9942280f7d320af8c7fef7860a4ee5 — たいち ひ 2 years ago e1c9d52
Rewrite `<AutosuggestHashtag />` as FC and TS (#25481)

R app/javascript/mastodon/components/autosuggest_hashtag.jsx => app/javascript/mastodon/components/autosuggest_hashtag.tsx +34 -36
@@ 1,44 1,42 @@
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,
interface Props {
  tag: {
    name: string;
    url?: string;
    history?: Array<{
      uses: number;
      accounts: string;
      day: string;
    }>;
    following?: boolean;
    type: 'hashtag';
  };
}

  render() {
    const { tag } = this.props;
    const weeklyUses = tag.history && (
      <ShortNumber
        value={tag.history.reduce((total, day) => total + day.uses * 1, 0)}
      />
    );
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>
        )}
  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>
  );
};

M app/javascript/mastodon/components/autosuggest_input.jsx => app/javascript/mastodon/components/autosuggest_input.jsx +1 -1
@@ 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;

M app/javascript/mastodon/components/autosuggest_textarea.jsx => app/javascript/mastodon/components/autosuggest_textarea.jsx +1 -1
@@ 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;