Add featured tags selector for WebUI (#19358)
* Add featured tags selector for WebUI * Add title to tag count
This commit is contained in:
Takeshi Umeda
GitHub
parent
c618d3a0a5
commit
4c7b5fb6c1
9 changed files with 194 additions and 20 deletions
34
app/javascript/mastodon/actions/featured_tags.js
Normal file
34
app/javascript/mastodon/actions/featured_tags.js
Normal file
|
|
@ -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,
|
||||
});
|
||||
|
|
@ -143,8 +143,8 @@ export function fillTimelineGaps(timelineId, path, params = {}, done = noOp) {
|
|||
export const expandHomeTimeline = ({ maxId } = {}, done = noOp) => expandTimeline('home', '/api/v1/timelines/home', { max_id: maxId }, done);
|
||||
export const expandPublicTimeline = ({ maxId, onlyMedia, onlyRemote } = {}, done = noOp) => expandTimeline(`public${onlyRemote ? ':remote' : ''}${onlyMedia ? ':media' : ''}`, '/api/v1/timelines/public', { remote: !!onlyRemote, max_id: maxId, only_media: !!onlyMedia }, done);
|
||||
export const expandCommunityTimeline = ({ maxId, onlyMedia } = {}, done = noOp) => expandTimeline(`community${onlyMedia ? ':media' : ''}`, '/api/v1/timelines/public', { local: true, max_id: maxId, only_media: !!onlyMedia }, done);
|
||||
export const expandAccountTimeline = (accountId, { maxId, withReplies } = {}) => expandTimeline(`account:${accountId}${withReplies ? ':with_replies' : ''}`, `/api/v1/accounts/${accountId}/statuses`, { exclude_replies: !withReplies, max_id: maxId });
|
||||
export const expandAccountFeaturedTimeline = accountId => expandTimeline(`account:${accountId}:pinned`, `/api/v1/accounts/${accountId}/statuses`, { pinned: true });
|
||||
export const expandAccountTimeline = (accountId, { maxId, withReplies, tagged } = {}) => expandTimeline(`account:${accountId}${withReplies ? ':with_replies' : ''}${tagged ? `:${tagged}` : ''}`, `/api/v1/accounts/${accountId}/statuses`, { exclude_replies: !withReplies, tagged, max_id: maxId });
|
||||
export const expandAccountFeaturedTimeline = (accountId, { tagged } = {}) => expandTimeline(`account:${accountId}:pinned${tagged ? `:${tagged}` : ''}`, `/api/v1/accounts/${accountId}/statuses`, { pinned: true, tagged });
|
||||
export const expandAccountMediaTimeline = (accountId, { maxId } = {}) => expandTimeline(`account:${accountId}:media`, `/api/v1/accounts/${accountId}/statuses`, { max_id: maxId, only_media: true, limit: 40 });
|
||||
export const expandListTimeline = (id, { maxId } = {}, done = noOp) => expandTimeline(`list:${id}`, `/api/v1/timelines/list/${id}`, { max_id: maxId }, done);
|
||||
export const expandHashtagTimeline = (hashtag, { maxId, tags, local } = {}, done = noOp) => {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,7 +1,8 @@
|
|||
import React from 'react';
|
||||
import React, { Fragment } from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
import InnerHeader from '../../account/components/header';
|
||||
import FeaturedTags from '../../account/components/featured_tags';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import MovedNote from './moved_note';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
|
@ -27,6 +28,7 @@ export default class Header extends ImmutablePureComponent {
|
|||
hideTabs: PropTypes.bool,
|
||||
domain: PropTypes.string.isRequired,
|
||||
hidden: PropTypes.bool,
|
||||
tagged: PropTypes.string,
|
||||
};
|
||||
|
||||
static contextTypes = {
|
||||
|
|
@ -102,7 +104,7 @@ export default class Header extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
render () {
|
||||
const { account, hidden, hideTabs } = this.props;
|
||||
const { account, hidden, hideTabs, tagged } = this.props;
|
||||
|
||||
if (account === null) {
|
||||
return null;
|
||||
|
|
@ -134,11 +136,15 @@ export default class Header extends ImmutablePureComponent {
|
|||
/>
|
||||
|
||||
{!(hideTabs || hidden) && (
|
||||
<div className='account__section-headline'>
|
||||
<NavLink exact to={`/@${account.get('acct')}`}><FormattedMessage id='account.posts' defaultMessage='Posts' /></NavLink>
|
||||
<NavLink exact to={`/@${account.get('acct')}/with_replies`}><FormattedMessage id='account.posts_with_replies' defaultMessage='Posts and replies' /></NavLink>
|
||||
<NavLink exact to={`/@${account.get('acct')}/media`}><FormattedMessage id='account.media' defaultMessage='Media' /></NavLink>
|
||||
</div>
|
||||
<Fragment>
|
||||
<div className='account__section-headline'>
|
||||
<NavLink exact to={`/@${account.get('acct')}`}><FormattedMessage id='account.posts' defaultMessage='Posts' /></NavLink>
|
||||
<NavLink exact to={`/@${account.get('acct')}/with_replies`}><FormattedMessage id='account.posts_with_replies' defaultMessage='Posts and replies' /></NavLink>
|
||||
<NavLink exact to={`/@${account.get('acct')}/media`}><FormattedMessage id='account.media' defaultMessage='Media' /></NavLink>
|
||||
</div>
|
||||
|
||||
<FeaturedTags account={account} tagged={tagged} />
|
||||
</Fragment>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -18,10 +18,11 @@ import { me } from 'mastodon/initial_state';
|
|||
import { connectTimeline, disconnectTimeline } from 'mastodon/actions/timelines';
|
||||
import LimitedAccountHint from './components/limited_account_hint';
|
||||
import { getAccountHidden } from 'mastodon/selectors';
|
||||
import { fetchFeaturedTags } from '../../actions/featured_tags';
|
||||
|
||||
const emptyList = ImmutableList();
|
||||
|
||||
const mapStateToProps = (state, { params: { acct, id }, withReplies = false }) => {
|
||||
const mapStateToProps = (state, { params: { acct, id, tagged }, withReplies = false }) => {
|
||||
const accountId = id || state.getIn(['accounts_map', acct]);
|
||||
|
||||
if (!accountId) {
|
||||
|
|
@ -30,7 +31,7 @@ const mapStateToProps = (state, { params: { acct, id }, withReplies = false }) =
|
|||
};
|
||||
}
|
||||
|
||||
const path = withReplies ? `${accountId}:with_replies` : accountId;
|
||||
const path = withReplies ? `${accountId}:with_replies` : `${accountId}${tagged ? `:${tagged}` : ''}`;
|
||||
|
||||
return {
|
||||
accountId,
|
||||
|
|
@ -38,7 +39,7 @@ const mapStateToProps = (state, { params: { acct, id }, withReplies = false }) =
|
|||
remoteUrl: state.getIn(['accounts', accountId, 'url']),
|
||||
isAccount: !!state.getIn(['accounts', accountId]),
|
||||
statusIds: state.getIn(['timelines', `account:${path}`, 'items'], emptyList),
|
||||
featuredStatusIds: withReplies ? ImmutableList() : state.getIn(['timelines', `account:${accountId}:pinned`, 'items'], emptyList),
|
||||
featuredStatusIds: withReplies ? ImmutableList() : state.getIn(['timelines', `account:${accountId}:pinned${tagged ? `:${tagged}` : ''}`, 'items'], emptyList),
|
||||
isLoading: state.getIn(['timelines', `account:${path}`, 'isLoading']),
|
||||
hasMore: state.getIn(['timelines', `account:${path}`, 'hasMore']),
|
||||
suspended: state.getIn(['accounts', accountId, 'suspended'], false),
|
||||
|
|
@ -62,6 +63,7 @@ class AccountTimeline extends ImmutablePureComponent {
|
|||
params: PropTypes.shape({
|
||||
acct: PropTypes.string,
|
||||
id: PropTypes.string,
|
||||
tagged: PropTypes.string,
|
||||
}).isRequired,
|
||||
accountId: PropTypes.string,
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
|
|
@ -80,15 +82,16 @@ class AccountTimeline extends ImmutablePureComponent {
|
|||
};
|
||||
|
||||
_load () {
|
||||
const { accountId, withReplies, dispatch } = this.props;
|
||||
const { accountId, withReplies, params: { tagged }, dispatch } = this.props;
|
||||
|
||||
dispatch(fetchAccount(accountId));
|
||||
|
||||
if (!withReplies) {
|
||||
dispatch(expandAccountFeaturedTimeline(accountId));
|
||||
dispatch(expandAccountFeaturedTimeline(accountId, { tagged }));
|
||||
}
|
||||
|
||||
dispatch(expandAccountTimeline(accountId, { withReplies }));
|
||||
dispatch(fetchFeaturedTags(accountId));
|
||||
dispatch(expandAccountTimeline(accountId, { withReplies, tagged }));
|
||||
|
||||
if (accountId === me) {
|
||||
dispatch(connectTimeline(`account:${me}`));
|
||||
|
|
@ -106,12 +109,17 @@ class AccountTimeline extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
componentDidUpdate (prevProps) {
|
||||
const { params: { acct }, accountId, dispatch } = this.props;
|
||||
const { params: { acct, tagged }, accountId, withReplies, dispatch } = this.props;
|
||||
|
||||
if (prevProps.accountId !== accountId && accountId) {
|
||||
this._load();
|
||||
} else if (prevProps.params.acct !== acct) {
|
||||
dispatch(lookupAccount(acct));
|
||||
} else if (prevProps.params.tagged !== tagged) {
|
||||
if (!withReplies) {
|
||||
dispatch(expandAccountFeaturedTimeline(accountId, { tagged }));
|
||||
}
|
||||
dispatch(expandAccountTimeline(accountId, { withReplies, tagged }));
|
||||
}
|
||||
|
||||
if (prevProps.accountId === me && accountId !== me) {
|
||||
|
|
@ -128,7 +136,7 @@ class AccountTimeline extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
handleLoadMore = maxId => {
|
||||
this.props.dispatch(expandAccountTimeline(this.props.accountId, { maxId, withReplies: this.props.withReplies }));
|
||||
this.props.dispatch(expandAccountTimeline(this.props.accountId, { maxId, withReplies: this.props.withReplies, tagged: this.props.params.tagged }));
|
||||
}
|
||||
|
||||
render () {
|
||||
|
|
@ -174,7 +182,7 @@ class AccountTimeline extends ImmutablePureComponent {
|
|||
<ColumnBackButton multiColumn={multiColumn} />
|
||||
|
||||
<StatusList
|
||||
prepend={<HeaderContainer accountId={this.props.accountId} hideTabs={forceEmptyState} />}
|
||||
prepend={<HeaderContainer accountId={this.props.accountId} hideTabs={forceEmptyState} tagged={this.props.params.tagged} />}
|
||||
alwaysPrepend
|
||||
append={remoteMessage}
|
||||
scrollKey='account_timeline'
|
||||
|
|
|
|||
|
|
@ -195,6 +195,7 @@ class SwitchingColumnsArea extends React.PureComponent {
|
|||
<WrappedRoute path={['/publish', '/statuses/new']} component={Compose} content={children} />
|
||||
|
||||
<WrappedRoute path={['/@:acct', '/accounts/:id']} exact component={AccountTimeline} content={children} />
|
||||
<WrappedRoute path='/@:acct/tagged/:tagged?' exact component={AccountTimeline} content={children} />
|
||||
<WrappedRoute path={['/@:acct/with_replies', '/accounts/:id/with_replies']} component={AccountTimeline} content={children} componentParams={{ withReplies: true }} />
|
||||
<WrappedRoute path={['/@:acct/followers', '/accounts/:id/followers']} component={Followers} content={children} />
|
||||
<WrappedRoute path={['/@:acct/following', '/accounts/:id/following']} component={Following} content={children} />
|
||||
|
|
|
|||
|
|
@ -35,6 +35,9 @@
|
|||
"account.following_counter": "{count, plural, one {{counter} Following} other {{counter} Following}}",
|
||||
"account.follows.empty": "This user doesn't follow anyone yet.",
|
||||
"account.follows_you": "Follows you",
|
||||
"account.hashtag_all": "All",
|
||||
"account.hashtag_all_description": "All posts (deselect hashtags)",
|
||||
"account.hashtag_select_description": "Select hashtag #{name}",
|
||||
"account.hide_reblogs": "Hide boosts from @{name}",
|
||||
"account.joined": "Joined {date}",
|
||||
"account.languages": "Change subscribed languages",
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ import {
|
|||
FOLLOW_REQUESTS_EXPAND_FAIL,
|
||||
FOLLOW_REQUEST_AUTHORIZE_SUCCESS,
|
||||
FOLLOW_REQUEST_REJECT_SUCCESS,
|
||||
} from '../actions/accounts';
|
||||
} from '../actions/accounts';
|
||||
import {
|
||||
REBLOGS_FETCH_SUCCESS,
|
||||
FAVOURITES_FETCH_SUCCESS,
|
||||
|
|
@ -51,7 +51,12 @@ import {
|
|||
DIRECTORY_EXPAND_SUCCESS,
|
||||
DIRECTORY_EXPAND_FAIL,
|
||||
} from 'mastodon/actions/directory';
|
||||
import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
|
||||
import {
|
||||
FEATURED_TAGS_FETCH_REQUEST,
|
||||
FEATURED_TAGS_FETCH_SUCCESS,
|
||||
FEATURED_TAGS_FETCH_FAIL,
|
||||
} from 'mastodon/actions/featured_tags';
|
||||
import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
|
||||
|
||||
const initialListState = ImmutableMap({
|
||||
next: null,
|
||||
|
|
@ -67,6 +72,7 @@ const initialState = ImmutableMap({
|
|||
follow_requests: initialListState,
|
||||
blocks: initialListState,
|
||||
mutes: initialListState,
|
||||
featured_tags: initialListState,
|
||||
});
|
||||
|
||||
const normalizeList = (state, path, accounts, next) => {
|
||||
|
|
@ -89,6 +95,18 @@ const normalizeFollowRequest = (state, notification) => {
|
|||
});
|
||||
};
|
||||
|
||||
const normalizeFeaturedTag = (featuredTags, accountId) => {
|
||||
const normalizeFeaturedTag = { ...featuredTags, accountId: accountId };
|
||||
return fromJS(normalizeFeaturedTag);
|
||||
};
|
||||
|
||||
const normalizeFeaturedTags = (state, path, featuredTags, accountId) => {
|
||||
return state.setIn(path, ImmutableMap({
|
||||
items: ImmutableList(featuredTags.map(featuredTag => normalizeFeaturedTag(featuredTag, accountId)).sort((a, b) => b.get('statuses_count') - a.get('statuses_count'))),
|
||||
isLoading: false,
|
||||
}));
|
||||
};
|
||||
|
||||
export default function userLists(state = initialState, action) {
|
||||
switch(action.type) {
|
||||
case FOLLOWERS_FETCH_SUCCESS:
|
||||
|
|
@ -160,6 +178,12 @@ export default function userLists(state = initialState, action) {
|
|||
case DIRECTORY_FETCH_FAIL:
|
||||
case DIRECTORY_EXPAND_FAIL:
|
||||
return state.setIn(['directory', 'isLoading'], false);
|
||||
case FEATURED_TAGS_FETCH_SUCCESS:
|
||||
return normalizeFeaturedTags(state, ['featured_tags', action.id], action.tags, action.id);
|
||||
case FEATURED_TAGS_FETCH_REQUEST:
|
||||
return state.setIn(['featured_tags', action.id, 'isLoading'], true);
|
||||
case FEATURED_TAGS_FETCH_FAIL:
|
||||
return state.setIn(['featured_tags', action.id, 'isLoading'], false);
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7338,6 +7338,33 @@ noscript {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__hashtag-links {
|
||||
overflow: hidden;
|
||||
padding: 10px 5px;
|
||||
margin: 0;
|
||||
color: $darker-text-color;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 12%);
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
color: $darker-text-color;
|
||||
text-decoration: none;
|
||||
padding: 5px 10px;
|
||||
font-weight: 500;
|
||||
|
||||
strong {
|
||||
font-weight: 700;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
a.active {
|
||||
color: darken($ui-base-color, 4%);
|
||||
background: $darker-text-color;
|
||||
border-radius: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__account-note {
|
||||
|
|
|
|||
Loading…
Reference in a new issue