Add refresh button to list of rebloggers/favouriters in web UI (#12031)
This commit is contained in:
		
							parent
							
								
									c35376132b
								
							
						
					
					
						commit
						b0323d0888
					
				|  | @ -5,17 +5,23 @@ import PropTypes from 'prop-types'; | |||
| import ImmutablePropTypes from 'react-immutable-proptypes'; | ||||
| import LoadingIndicator from '../../components/loading_indicator'; | ||||
| import { fetchFavourites } from '../../actions/interactions'; | ||||
| import { FormattedMessage } from 'react-intl'; | ||||
| import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; | ||||
| import AccountContainer from '../../containers/account_container'; | ||||
| import Column from '../ui/components/column'; | ||||
| import ColumnBackButton from '../../components/column_back_button'; | ||||
| import ScrollableList from '../../components/scrollable_list'; | ||||
| import Icon from 'mastodon/components/icon'; | ||||
| import ColumnHeader from '../../components/column_header'; | ||||
| 
 | ||||
| const messages = defineMessages({ | ||||
|   refresh: { id: 'refresh', defaultMessage: 'Refresh' }, | ||||
| }); | ||||
| 
 | ||||
| const mapStateToProps = (state, props) => ({ | ||||
|   accountIds: state.getIn(['user_lists', 'favourited_by', props.params.statusId]), | ||||
| }); | ||||
| 
 | ||||
| export default @connect(mapStateToProps) | ||||
| @injectIntl | ||||
| class Favourites extends ImmutablePureComponent { | ||||
| 
 | ||||
|   static propTypes = { | ||||
|  | @ -24,6 +30,7 @@ class Favourites extends ImmutablePureComponent { | |||
|     shouldUpdateScroll: PropTypes.func, | ||||
|     accountIds: ImmutablePropTypes.list, | ||||
|     multiColumn: PropTypes.bool, | ||||
|     intl: PropTypes.object.isRequired, | ||||
|   }; | ||||
| 
 | ||||
|   componentWillMount () { | ||||
|  | @ -38,8 +45,12 @@ class Favourites extends ImmutablePureComponent { | |||
|     } | ||||
|   } | ||||
| 
 | ||||
|   handleRefresh = () => { | ||||
|     this.props.dispatch(fetchFavourites(this.props.params.statusId)); | ||||
|   } | ||||
| 
 | ||||
|   render () { | ||||
|     const { shouldUpdateScroll, accountIds, multiColumn } = this.props; | ||||
|     const { intl, shouldUpdateScroll, accountIds, multiColumn } = this.props; | ||||
| 
 | ||||
|     if (!accountIds) { | ||||
|       return ( | ||||
|  | @ -52,8 +63,14 @@ class Favourites extends ImmutablePureComponent { | |||
|     const emptyMessage = <FormattedMessage id='empty_column.favourites' defaultMessage='No one has favourited this toot yet. When someone does, they will show up here.' />; | ||||
| 
 | ||||
|     return ( | ||||
|       <Column> | ||||
|         <ColumnBackButton multiColumn={multiColumn} /> | ||||
|       <Column bindToDocument={!multiColumn}> | ||||
|         <ColumnHeader | ||||
|           showBackButton | ||||
|           multiColumn={multiColumn} | ||||
|           extraButton={( | ||||
|             <button className='column-header__button' title={intl.formatMessage(messages.refresh)} aria-label={intl.formatMessage(messages.refresh)} onClick={this.handleRefresh}><Icon id='refresh' /></button> | ||||
|           )} | ||||
|         /> | ||||
| 
 | ||||
|         <ScrollableList | ||||
|           scrollKey='favourites' | ||||
|  |  | |||
|  | @ -5,17 +5,23 @@ import PropTypes from 'prop-types'; | |||
| import ImmutablePropTypes from 'react-immutable-proptypes'; | ||||
| import LoadingIndicator from '../../components/loading_indicator'; | ||||
| import { fetchReblogs } from '../../actions/interactions'; | ||||
| import { FormattedMessage } from 'react-intl'; | ||||
| import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; | ||||
| import AccountContainer from '../../containers/account_container'; | ||||
| import Column from '../ui/components/column'; | ||||
| import ColumnBackButton from '../../components/column_back_button'; | ||||
| import ScrollableList from '../../components/scrollable_list'; | ||||
| import Icon from 'mastodon/components/icon'; | ||||
| import ColumnHeader from '../../components/column_header'; | ||||
| 
 | ||||
| const messages = defineMessages({ | ||||
|   refresh: { id: 'refresh', defaultMessage: 'Refresh' }, | ||||
| }); | ||||
| 
 | ||||
| const mapStateToProps = (state, props) => ({ | ||||
|   accountIds: state.getIn(['user_lists', 'reblogged_by', props.params.statusId]), | ||||
| }); | ||||
| 
 | ||||
| export default @connect(mapStateToProps) | ||||
| @injectIntl | ||||
| class Reblogs extends ImmutablePureComponent { | ||||
| 
 | ||||
|   static propTypes = { | ||||
|  | @ -24,6 +30,7 @@ class Reblogs extends ImmutablePureComponent { | |||
|     shouldUpdateScroll: PropTypes.func, | ||||
|     accountIds: ImmutablePropTypes.list, | ||||
|     multiColumn: PropTypes.bool, | ||||
|     intl: PropTypes.object.isRequired, | ||||
|   }; | ||||
| 
 | ||||
|   componentWillMount () { | ||||
|  | @ -38,8 +45,12 @@ class Reblogs extends ImmutablePureComponent { | |||
|     } | ||||
|   } | ||||
| 
 | ||||
|   handleRefresh = () => { | ||||
|     this.props.dispatch(fetchReblogs(this.props.params.statusId)); | ||||
|   } | ||||
| 
 | ||||
|   render () { | ||||
|     const { shouldUpdateScroll, accountIds, multiColumn } = this.props; | ||||
|     const { intl, shouldUpdateScroll, accountIds, multiColumn } = this.props; | ||||
| 
 | ||||
|     if (!accountIds) { | ||||
|       return ( | ||||
|  | @ -52,8 +63,14 @@ class Reblogs extends ImmutablePureComponent { | |||
|     const emptyMessage = <FormattedMessage id='status.reblogs.empty' defaultMessage='No one has boosted this toot yet. When someone does, they will show up here.' />; | ||||
| 
 | ||||
|     return ( | ||||
|       <Column> | ||||
|         <ColumnBackButton multiColumn={multiColumn} /> | ||||
|       <Column bindToDocument={!multiColumn}> | ||||
|         <ColumnHeader | ||||
|           showBackButton | ||||
|           multiColumn={multiColumn} | ||||
|           extraButton={( | ||||
|             <button className='column-header__button' title={intl.formatMessage(messages.refresh)} aria-label={intl.formatMessage(messages.refresh)} onClick={this.handleRefresh}><Icon id='refresh' /></button> | ||||
|           )} | ||||
|         /> | ||||
| 
 | ||||
|         <ScrollableList | ||||
|           scrollKey='reblogs' | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue