2021-05-19 05:58:27 +00:00
import React from 'react' ;
import { connect } from 'react-redux' ;
import ImmutablePureComponent from 'react-immutable-pure-component' ;
import PropTypes from 'prop-types' ;
import ImmutablePropTypes from 'react-immutable-proptypes' ;
import LoadingIndicator from '../../components/loading_indicator' ;
2021-09-17 06:20:32 +00:00
import { fetchEmojiReactions , expandEmojiReactions } from '../../actions/interactions' ;
2021-05-19 05:58:27 +00:00
import { defineMessages , injectIntl , FormattedMessage } from 'react-intl' ;
import AccountContainer from '../../containers/account_container' ;
import Column from '../ui/components/column' ;
import ScrollableList from '../../components/scrollable_list' ;
import Icon from 'mastodon/components/icon' ;
import ColumnHeader from '../../components/column_header' ;
2021-09-17 06:20:32 +00:00
import Emoji from '../../components/emoji' ;
import { createSelector } from 'reselect' ;
import { Map as ImmutableMap } from 'immutable' ;
import ReactedHeaderContaier from '../reactioned/containers/header_container' ;
import { debounce } from 'lodash' ;
2021-05-19 05:58:27 +00:00
const messages = defineMessages ( {
refresh : { id : 'refresh' , defaultMessage : 'Refresh' } ,
} ) ;
2021-09-17 06:20:32 +00:00
const customEmojiMap = createSelector ( [ state => state . get ( 'custom_emojis' ) ] , items => items . reduce ( ( map , emoji ) => map . set ( emoji . get ( 'shortcode' ) , emoji ) , ImmutableMap ( ) ) ) ;
2021-05-19 05:58:27 +00:00
const mapStateToProps = ( state , props ) => ( {
2021-09-17 06:20:32 +00:00
emojiReactions : state . getIn ( [ 'user_lists' , 'emoji_reactioned_by' , props . params . statusId , 'items' ] ) ,
isLoading : state . getIn ( [ 'user_lists' , 'emoji_reactioned_by' , props . params . statusId , 'isLoading' ] , true ) ,
hasMore : ! ! state . getIn ( [ 'user_lists' , 'emoji_reactioned_by' , props . params . statusId , 'next' ] ) ,
emojiMap : customEmojiMap ( state ) ,
2021-05-19 05:58:27 +00:00
} ) ;
2021-09-17 06:20:32 +00:00
class Reaction extends ImmutablePureComponent {
static propTypes = {
emojiReaction : ImmutablePropTypes . map . isRequired ,
emojiMap : ImmutablePropTypes . map . isRequired ,
} ;
state = {
hovered : false ,
} ;
handleMouseEnter = ( ) => this . setState ( { hovered : true } )
handleMouseLeave = ( ) => this . setState ( { hovered : false } )
render ( ) {
const { emojiReaction , emojiMap } = this . props ;
return (
< div className = 'account__emoji_reaction' onMouseEnter = { this . handleMouseEnter } onMouseLeave = { this . handleMouseLeave } >
< Emoji hovered = { this . state . hovered } emoji = { emojiReaction . get ( 'name' ) } emojiMap = { emojiMap } url = { emojiReaction . get ( 'url' ) } static _url = { emojiReaction . get ( 'static_url' ) } / >
< / d i v >
) ;
} ;
}
2021-05-19 05:58:27 +00:00
export default @ connect ( mapStateToProps )
@ injectIntl
class EmojiReactions extends ImmutablePureComponent {
static propTypes = {
params : PropTypes . object . isRequired ,
dispatch : PropTypes . func . isRequired ,
2021-09-17 06:20:32 +00:00
emojiReactions : ImmutablePropTypes . list ,
2021-05-19 05:58:27 +00:00
multiColumn : PropTypes . bool ,
2021-09-17 06:20:32 +00:00
emojiMap : ImmutablePropTypes . map . isRequired ,
2021-05-19 05:58:27 +00:00
intl : PropTypes . object . isRequired ,
2021-09-17 06:20:32 +00:00
hasMore : PropTypes . bool ,
isLoading : PropTypes . bool ,
2021-05-19 05:58:27 +00:00
} ;
componentWillMount ( ) {
2021-09-17 06:20:32 +00:00
if ( ! this . props . emojiReactions ) {
2021-05-19 05:58:27 +00:00
this . props . dispatch ( fetchEmojiReactions ( this . props . params . statusId ) ) ;
}
}
componentWillReceiveProps ( nextProps ) {
if ( nextProps . params . statusId !== this . props . params . statusId && nextProps . params . statusId ) {
this . props . dispatch ( fetchEmojiReactions ( nextProps . params . statusId ) ) ;
}
}
handleRefresh = ( ) => {
this . props . dispatch ( fetchEmojiReactions ( this . props . params . statusId ) ) ;
}
2021-09-17 06:20:32 +00:00
handleLoadMore = debounce ( ( ) => {
this . props . dispatch ( expandEmojiReactions ( this . props . params . statusId ) ) ;
} , 300 , { leading : true } )
2021-05-19 05:58:27 +00:00
render ( ) {
2021-09-17 06:20:32 +00:00
const { intl , emojiReactions , multiColumn , emojiMap , hasMore , isLoading } = this . props ;
2021-05-19 05:58:27 +00:00
2021-09-17 06:20:32 +00:00
if ( ! emojiReactions ) {
2021-05-19 05:58:27 +00:00
return (
< Column >
< LoadingIndicator / >
< / C o l u m n >
) ;
}
const emptyMessage = < FormattedMessage id = 'empty_column.emoji_reactions' defaultMessage = 'No one has reactioned this post yet. When someone does, they will show up here.' / > ;
return (
< 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' / > < / b u t t o n >
) }
/ >
2021-09-17 06:20:32 +00:00
< ReactedHeaderContaier statusId = { this . props . params . statusId } / >
2021-05-19 05:58:27 +00:00
< ScrollableList
scrollKey = 'emoji_reactions'
2021-09-17 06:20:32 +00:00
hasMore = { hasMore }
isLoading = { isLoading }
onLoadMore = { this . handleLoadMore }
2021-05-19 05:58:27 +00:00
emptyMessage = { emptyMessage }
bindToDocument = { ! multiColumn }
>
2021-09-17 06:20:32 +00:00
{ emojiReactions . map ( emojiReaction =>
< AccountContainer key = { emojiReaction . get ( 'account' ) + emojiReaction . get ( 'name' ) } id = { emojiReaction . get ( 'account' ) } withNote = { false } append = { < Reaction emojiReaction = { emojiReaction } emojiMap = { emojiMap } / > } / > ,
2021-05-19 05:58:27 +00:00
) }
< / S c r o l l a b l e L i s t >
< / C o l u m n >
) ;
}
}