Rewrite <AutosuggestHashtag /> as FC and TS (#25481)
				
					
				
			This commit is contained in:
		@@ -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>
 | 
			
		||||
    );
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										42
									
								
								app/javascript/mastodon/components/autosuggest_hashtag.tsx
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										42
									
								
								app/javascript/mastodon/components/autosuggest_hashtag.tsx
									
									
									
									
									
										Normal file
									
								
							@@ -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>
 | 
			
		||||
  );
 | 
			
		||||
};
 | 
			
		||||
@@ -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;
 | 
			
		||||
 
 | 
			
		||||
@@ -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;
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user