2017-05-03 03:04:16 +03:00
import React from 'react' ;
2016-12-26 22:33:51 +02:00
import { connect } from 'react-redux' ;
2017-04-21 21:05:35 +03:00
import PropTypes from 'prop-types' ;
2016-12-26 22:33:51 +02:00
import ImmutablePropTypes from 'react-immutable-proptypes' ;
2018-08-26 17:39:37 +03:00
import { debounce } from 'lodash' ;
2017-12-04 09:26:40 +02:00
import LoadingIndicator from 'flavours/glitch/components/loading_indicator' ;
import Column from 'flavours/glitch/features/ui/components/column' ;
import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim' ;
2016-12-26 22:33:51 +02:00
import AccountAuthorizeContainer from './containers/account_authorize_container' ;
2017-12-04 09:26:40 +02:00
import { fetchFollowRequests , expandFollowRequests } from 'flavours/glitch/actions/accounts' ;
2018-08-26 17:39:37 +03:00
import { defineMessages , injectIntl , FormattedMessage } from 'react-intl' ;
2017-05-03 03:04:16 +03:00
import ImmutablePureComponent from 'react-immutable-pure-component' ;
2018-08-26 17:39:37 +03:00
import ScrollableList from 'flavours/glitch/components/scrollable_list' ;
2016-12-26 22:33:51 +02:00
const messages = defineMessages ( {
2017-05-20 18:31:47 +03:00
heading : { id : 'column.follow_requests' , defaultMessage : 'Follow requests' } ,
2016-12-26 22:33:51 +02:00
} ) ;
const mapStateToProps = state => ( {
2017-05-20 18:31:47 +03:00
accountIds : state . getIn ( [ 'user_lists' , 'follow_requests' , 'items' ] ) ,
2019-02-16 12:56:09 +02:00
hasMore : ! ! state . getIn ( [ 'user_lists' , 'follow_requests' , 'next' ] ) ,
2016-12-26 22:33:51 +02:00
} ) ;
2019-09-09 16:16:08 +03:00
export default @ connect ( mapStateToProps )
2017-06-23 20:36:54 +03:00
@ injectIntl
2019-09-09 16:16:08 +03:00
class FollowRequests extends ImmutablePureComponent {
2016-12-26 22:33:51 +02:00
2017-05-12 15:44:10 +03:00
static propTypes = {
params : PropTypes . object . isRequired ,
dispatch : PropTypes . func . isRequired ,
2019-02-16 12:56:09 +02:00
hasMore : PropTypes . bool ,
2017-05-12 15:44:10 +03:00
accountIds : ImmutablePropTypes . list ,
2017-05-20 18:31:47 +03:00
intl : PropTypes . object . isRequired ,
2019-07-19 10:25:22 +03:00
multiColumn : PropTypes . bool ,
2017-05-12 15:44:10 +03:00
} ;
2016-12-26 22:33:51 +02:00
componentWillMount ( ) {
this . props . dispatch ( fetchFollowRequests ( ) ) ;
2017-04-21 21:05:35 +03:00
}
2016-12-26 22:33:51 +02:00
2018-08-26 17:39:37 +03:00
handleLoadMore = debounce ( ( ) => {
this . props . dispatch ( expandFollowRequests ( ) ) ;
} , 300 , { leading : true } ) ;
2016-12-26 22:33:51 +02:00
render ( ) {
2019-07-19 10:25:22 +03:00
const { intl , accountIds , hasMore , multiColumn } = this . props ;
2016-12-26 22:33:51 +02:00
if ( ! accountIds ) {
return (
2017-08-06 22:27:47 +03:00
< Column name = 'follow-requests' >
2016-12-26 22:33:51 +02:00
< LoadingIndicator / >
< / C o l u m n >
) ;
}
2018-08-26 17:39:37 +03:00
const emptyMessage = < FormattedMessage id = 'empty_column.follow_requests' defaultMessage = "You don't have any follow requests yet. When you receive one, it will show up here." / > ;
2016-12-26 22:33:51 +02:00
return (
2019-05-26 03:55:37 +03:00
< Column name = 'follow-requests' icon = 'user-plus' heading = { intl . formatMessage ( messages . heading ) } >
2017-01-30 16:22:04 +02:00
< ColumnBackButtonSlim / >
2017-06-20 21:40:03 +03:00
2018-08-26 17:39:37 +03:00
< ScrollableList
scrollKey = 'follow_requests'
onLoadMore = { this . handleLoadMore }
2019-02-16 12:56:09 +02:00
hasMore = { hasMore }
2018-08-26 17:39:37 +03:00
emptyMessage = { emptyMessage }
2019-07-19 10:25:22 +03:00
bindToDocument = { ! multiColumn }
2018-08-26 17:39:37 +03:00
>
{ accountIds . map ( id =>
< AccountAuthorizeContainer key = { id } id = { id } / >
) }
< / S c r o l l a b l e L i s t >
2016-12-26 22:33:51 +02:00
< / C o l u m n >
) ;
}
2017-04-21 21:05:35 +03:00
2017-05-12 15:44:10 +03:00
}