2017-04-21 13:05:35 -05:00
import PropTypes from 'prop-types' ;
2023-05-28 09:38:10 -05:00
2022-10-08 20:55:09 -05:00
import { defineMessages , injectIntl , FormattedMessage } from 'react-intl' ;
2023-05-28 09:38:10 -05:00
import { Helmet } from 'react-helmet' ;
import ImmutablePropTypes from 'react-immutable-proptypes' ;
import ImmutablePureComponent from 'react-immutable-pure-component' ;
2022-10-08 20:55:09 -05:00
import { connect } from 'react-redux' ;
2023-05-28 09:38:10 -05:00
2023-08-29 03:56:19 -05:00
import { debounce } from 'lodash' ;
import { fetchFavourites , expandFavourites } from 'flavours/glitch/actions/interactions' ;
2022-10-08 20:55:09 -05:00
import ColumnHeader from 'flavours/glitch/components/column_header' ;
2023-11-15 05:01:51 -06:00
import { Icon } from 'flavours/glitch/components/icon' ;
2023-06-13 12:26:25 -05:00
import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator' ;
2022-10-08 20:55:09 -05:00
import ScrollableList from 'flavours/glitch/components/scrollable_list' ;
2017-12-04 01:26:40 -06:00
import AccountContainer from 'flavours/glitch/containers/account_container' ;
import Column from 'flavours/glitch/features/ui/components/column' ;
2023-05-28 09:38:10 -05:00
2019-04-08 10:56:25 -05:00
const messages = defineMessages ( {
heading : { id : 'column.favourited_by' , defaultMessage : 'Favourited by' } ,
2019-09-30 21:57:27 -05:00
refresh : { id : 'refresh' , defaultMessage : 'Refresh' } ,
2019-04-08 10:56:25 -05:00
} ) ;
2016-11-04 07:39:24 -05:00
const mapStateToProps = ( state , props ) => ( {
2023-08-29 03:56:19 -05:00
accountIds : state . getIn ( [ 'user_lists' , 'favourited_by' , props . params . statusId , 'items' ] ) ,
hasMore : ! ! state . getIn ( [ 'user_lists' , 'favourited_by' , props . params . statusId , 'next' ] ) ,
isLoading : state . getIn ( [ 'user_lists' , 'favourited_by' , props . params . statusId , 'isLoading' ] , true ) ,
2016-11-04 07:39:24 -05:00
} ) ;
2019-09-09 08:16:08 -05:00
class Favourites extends ImmutablePureComponent {
2016-11-04 07:39:24 -05:00
2017-05-12 07:44:10 -05:00
static propTypes = {
params : PropTypes . object . isRequired ,
dispatch : PropTypes . func . isRequired ,
2017-05-20 10:31:47 -05:00
accountIds : ImmutablePropTypes . list ,
2023-08-29 03:56:19 -05:00
hasMore : PropTypes . bool ,
isLoading : PropTypes . bool ,
2019-07-19 02:25:22 -05:00
multiColumn : PropTypes . bool ,
2019-04-08 10:56:25 -05:00
intl : PropTypes . object . isRequired ,
2017-05-12 07:44:10 -05:00
} ;
2023-05-10 02:05:32 -05:00
UNSAFE _componentWillMount ( ) {
2019-09-29 09:27:00 -05:00
if ( ! this . props . accountIds ) {
this . props . dispatch ( fetchFavourites ( this . props . params . statusId ) ) ;
}
2017-04-21 13:05:35 -05:00
}
2016-11-04 07:39:24 -05:00
2019-04-08 10:56:25 -05:00
handleHeaderClick = ( ) => {
this . column . scrollTop ( ) ;
2023-02-03 13:52:07 -06:00
} ;
2019-04-08 10:56:25 -05:00
setRef = c => {
this . column = c ;
2023-02-03 13:52:07 -06:00
} ;
2019-04-08 10:56:25 -05:00
2019-09-30 21:57:27 -05:00
handleRefresh = ( ) => {
this . props . dispatch ( fetchFavourites ( this . props . params . statusId ) ) ;
2023-02-03 13:52:07 -06:00
} ;
2019-09-30 21:57:27 -05:00
2023-08-29 03:56:19 -05:00
handleLoadMore = debounce ( ( ) => {
this . props . dispatch ( expandFavourites ( this . props . params . statusId ) ) ;
} , 300 , { leading : true } ) ;
2016-11-04 07:39:24 -05:00
render ( ) {
2023-08-29 03:56:19 -05:00
const { intl , accountIds , hasMore , isLoading , multiColumn } = this . props ;
2016-11-04 07:39:24 -05:00
if ( ! accountIds ) {
return (
< Column >
< LoadingIndicator / >
< / Column >
) ;
}
2023-07-21 12:09:13 -05:00
const emptyMessage = < FormattedMessage id = 'empty_column.favourites' defaultMessage = 'No one has favorited this post yet. When someone does, they will show up here.' / > ;
2018-08-26 09:39:37 -05:00
2016-11-04 07:39:24 -05:00
return (
2019-04-08 10:56:25 -05:00
< Column ref = { this . setRef } >
< ColumnHeader
icon = 'star'
title = { intl . formatMessage ( messages . heading ) }
onClick = { this . handleHeaderClick }
showBackButton
2019-08-01 12:17:17 -05:00
multiColumn = { multiColumn }
2019-09-30 21:57:27 -05:00
extraButton = { (
< button className = 'column-header__button' title = { intl . formatMessage ( messages . refresh ) } aria - label = { intl . formatMessage ( messages . refresh ) } onClick = { this . handleRefresh } > < Icon id = 'refresh' / > < / button >
) }
2019-04-08 10:56:25 -05:00
/ >
2018-08-26 09:39:37 -05:00
< ScrollableList
scrollKey = 'favourites'
2023-08-29 03:56:19 -05:00
onLoadMore = { this . handleLoadMore }
hasMore = { hasMore }
isLoading = { isLoading }
2018-08-26 09:39:37 -05:00
emptyMessage = { emptyMessage }
2019-07-19 02:25:22 -05:00
bindToDocument = { ! multiColumn }
2018-08-26 09:39:37 -05:00
>
{ accountIds . map ( id =>
2020-03-08 10:02:36 -05:00
< AccountContainer key = { id } id = { id } withNote = { false } / > ,
2018-08-26 09:39:37 -05:00
) }
< / ScrollableList >
2022-10-20 07:35:29 -05:00
< Helmet >
< meta name = 'robots' content = 'noindex' / >
< / Helmet >
2016-11-04 07:39:24 -05:00
< / Column >
) ;
}
2017-04-21 13:05:35 -05:00
}
2023-03-24 17:15:25 -05:00
export default connect ( mapStateToProps ) ( injectIntl ( Favourites ) ) ;