Add featured tags selector for WebUI (#19358)
* Add featured tags selector for WebUI * Add title to tag countlocal
parent
c618d3a0a5
commit
4c7b5fb6c1
9 changed files with 194 additions and 20 deletions
@ -0,0 +1,34 @@ |
||||
import api from '../api'; |
||||
|
||||
export const FEATURED_TAGS_FETCH_REQUEST = 'FEATURED_TAGS_FETCH_REQUEST'; |
||||
export const FEATURED_TAGS_FETCH_SUCCESS = 'FEATURED_TAGS_FETCH_SUCCESS'; |
||||
export const FEATURED_TAGS_FETCH_FAIL = 'FEATURED_TAGS_FETCH_FAIL'; |
||||
|
||||
export const fetchFeaturedTags = (id) => (dispatch, getState) => { |
||||
if (getState().getIn(['user_lists', 'featured_tags', id, 'items'])) { |
||||
return; |
||||
} |
||||
|
||||
dispatch(fetchFeaturedTagsRequest(id)); |
||||
|
||||
api(getState).get(`/api/v1/accounts/${id}/featured_tags`) |
||||
.then(({ data }) => dispatch(fetchFeaturedTagsSuccess(id, data))) |
||||
.catch(err => dispatch(fetchFeaturedTagsFail(id, err))); |
||||
}; |
||||
|
||||
export const fetchFeaturedTagsRequest = (id) => ({ |
||||
type: FEATURED_TAGS_FETCH_REQUEST, |
||||
id, |
||||
}); |
||||
|
||||
export const fetchFeaturedTagsSuccess = (id, tags) => ({ |
||||
type: FEATURED_TAGS_FETCH_SUCCESS, |
||||
id, |
||||
tags, |
||||
}); |
||||
|
||||
export const fetchFeaturedTagsFail = (id, error) => ({ |
||||
type: FEATURED_TAGS_FETCH_FAIL, |
||||
id, |
||||
error, |
||||
}); |
@ -0,0 +1,71 @@ |
||||
import React from 'react'; |
||||
import { connect } from 'react-redux'; |
||||
import PropTypes from 'prop-types'; |
||||
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||
import ImmutablePureComponent from 'react-immutable-pure-component'; |
||||
import { defineMessages, injectIntl } from 'react-intl'; |
||||
import classNames from 'classnames'; |
||||
import Permalink from 'mastodon/components/permalink'; |
||||
import ShortNumber from 'mastodon/components/short_number'; |
||||
import { List as ImmutableList } from 'immutable'; |
||||
|
||||
const messages = defineMessages({ |
||||
hashtag_all: { id: 'account.hashtag_all', defaultMessage: 'All' }, |
||||
hashtag_all_description: { id: 'account.hashtag_all_description', defaultMessage: 'All posts (deselect hashtags)' }, |
||||
hashtag_select_description: { id: 'account.hashtag_select_description', defaultMessage: 'Select hashtag #{name}' }, |
||||
statuses_counter: { id: 'account.statuses_counter', defaultMessage: '{count, plural, one {{counter} Post} other {{counter} Posts}}' }, |
||||
}); |
||||
|
||||
const mapStateToProps = (state, { account }) => ({ |
||||
featuredTags: state.getIn(['user_lists', 'featured_tags', account.get('id'), 'items'], ImmutableList()), |
||||
}); |
||||
|
||||
export default @connect(mapStateToProps) |
||||
@injectIntl |
||||
class FeaturedTags extends ImmutablePureComponent { |
||||
|
||||
static contextTypes = { |
||||
router: PropTypes.object, |
||||
}; |
||||
|
||||
static propTypes = { |
||||
account: ImmutablePropTypes.map, |
||||
featuredTags: ImmutablePropTypes.list, |
||||
tagged: PropTypes.string, |
||||
intl: PropTypes.object.isRequired, |
||||
}; |
||||
|
||||
render () { |
||||
const { account, featuredTags, tagged, intl } = this.props; |
||||
|
||||
if (!account || featuredTags.isEmpty()) { |
||||
return null; |
||||
} |
||||
|
||||
const suspended = account.get('suspended'); |
||||
|
||||
return ( |
||||
<div className={classNames('account__header', 'advanced', { inactive: !!account.get('moved') })}> |
||||
<div className='account__header__extra'> |
||||
<div className='account__header__extra__hashtag-links'> |
||||
<Permalink key='all' className={classNames('account__hashtag-link', { active: !tagged })} title={intl.formatMessage(messages.hashtag_all_description)} href={account.get('url')} to={`/@${account.get('acct')}`}>{intl.formatMessage(messages.hashtag_all)}</Permalink> |
||||
{!suspended && featuredTags.map(featuredTag => { |
||||
const name = featuredTag.get('name'); |
||||
const url = featuredTag.get('url'); |
||||
const to = `/@${account.get('acct')}/tagged/${name}`; |
||||
const desc = intl.formatMessage(messages.hashtag_select_description, { name }); |
||||
const count = featuredTag.get('statuses_count'); |
||||
|
||||
return ( |
||||
<Permalink key={`#${name}`} className={classNames('account__hashtag-link', { active: this.context.router.history.location.pathname === to })} title={desc} href={url} to={to}> |
||||
#{name} <span title={intl.formatMessage(messages.statuses_counter, { count: count, counter: intl.formatNumber(count) })}>({<ShortNumber value={count} />})</span> |
||||
</Permalink> |
||||
); |
||||
})} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
} |
Loading…
Reference in new issue