2017-04-21 21:05:35 +03:00
import PropTypes from 'prop-types' ;
2023-05-23 18:15:17 +03:00
import { FormattedMessage } from 'react-intl' ;
2016-11-13 21:42:54 +02:00
import ImmutablePropTypes from 'react-immutable-proptypes' ;
2023-05-23 18:15:17 +03:00
import ImmutablePureComponent from 'react-immutable-pure-component' ;
import { connect } from 'react-redux' ;
2018-08-26 17:39:37 +03:00
import { debounce } from 'lodash' ;
2023-05-23 18:15:17 +03:00
import { TimelineHint } from 'mastodon/components/timeline_hint' ;
import BundleColumnError from 'mastodon/features/ui/components/bundle_column_error' ;
import { normalizeForLookup } from 'mastodon/reducers/accounts_map' ;
import { getAccountHidden } from 'mastodon/selectors' ;
2016-11-13 21:42:54 +02:00
import {
2021-09-26 06:46:13 +03:00
lookupAccount ,
2021-09-27 08:23:48 +03:00
fetchAccount ,
2016-11-13 21:42:54 +02:00
fetchFollowing ,
2017-05-20 18:31:47 +03:00
expandFollowing ,
2016-11-13 21:42:54 +02:00
} from '../../actions/accounts' ;
2023-10-26 14:00:10 +03:00
import { ColumnBackButton } from '../../components/column_back_button' ;
2023-06-13 20:26:25 +03:00
import { LoadingIndicator } from '../../components/loading_indicator' ;
2018-08-26 17:39:37 +03:00
import ScrollableList from '../../components/scrollable_list' ;
2023-05-23 18:15:17 +03:00
import AccountContainer from '../../containers/account_container' ;
2023-11-03 17:00:03 +02:00
import { LimitedAccountHint } from '../account_timeline/components/limited_account_hint' ;
2023-05-23 18:15:17 +03:00
import HeaderContainer from '../account_timeline/containers/header_container' ;
import Column from '../ui/components/column' ;
2016-10-27 22:59:56 +03:00
2021-09-27 08:23:48 +03:00
const mapStateToProps = ( state , { params : { acct , id } } ) => {
2022-10-24 00:38:08 +03:00
const accountId = id || state . getIn ( [ 'accounts_map' , normalizeForLookup ( acct ) ] ) ;
2021-09-26 06:46:13 +03:00
if ( ! accountId ) {
return {
isLoading : true ,
} ;
}
return {
accountId ,
remote : ! ! ( state . getIn ( [ 'accounts' , accountId , 'acct' ] ) !== state . getIn ( [ 'accounts' , accountId , 'username' ] ) ) ,
remoteUrl : state . getIn ( [ 'accounts' , accountId , 'url' ] ) ,
isAccount : ! ! state . getIn ( [ 'accounts' , accountId ] ) ,
accountIds : state . getIn ( [ 'user_lists' , 'following' , accountId , 'items' ] ) ,
hasMore : ! ! state . getIn ( [ 'user_lists' , 'following' , accountId , 'next' ] ) ,
isLoading : state . getIn ( [ 'user_lists' , 'following' , accountId , 'isLoading' ] , true ) ,
2022-05-10 10:44:35 +03:00
suspended : state . getIn ( [ 'accounts' , accountId , 'suspended' ] , false ) ,
2023-11-09 14:58:02 +02:00
hideCollections : state . getIn ( [ 'accounts' , accountId , 'hide_collections' ] , false ) ,
2022-05-10 10:44:35 +03:00
hidden : getAccountHidden ( state , accountId ) ,
2021-09-26 06:46:13 +03:00
blockedBy : state . getIn ( [ 'relationships' , accountId , 'blocked_by' ] , false ) ,
} ;
} ;
2016-10-27 22:59:56 +03:00
2020-06-14 23:29:40 +03:00
const RemoteHint = ( { url } ) => (
< TimelineHint url = { url } resource = { < FormattedMessage id = 'timeline_hint.resources.follows' defaultMessage = 'Follows' / > } / >
) ;
RemoteHint . propTypes = {
url : PropTypes . string . isRequired ,
} ;
2018-09-14 18:59:48 +03:00
class Following extends ImmutablePureComponent {
2016-10-27 22:59:56 +03:00
2017-05-12 15:44:10 +03:00
static propTypes = {
2021-09-26 06:46:13 +03:00
params : PropTypes . shape ( {
2021-09-27 08:23:48 +03:00
acct : PropTypes . string ,
id : PropTypes . string ,
2021-09-26 06:46:13 +03:00
} ) . isRequired ,
accountId : PropTypes . string ,
2017-05-12 15:44:10 +03:00
dispatch : PropTypes . func . isRequired ,
2017-05-20 18:31:47 +03:00
accountIds : ImmutablePropTypes . list ,
2017-06-05 19:18:56 +03:00
hasMore : PropTypes . bool ,
2020-04-12 14:38:00 +03:00
isLoading : PropTypes . bool ,
2019-04-07 05:59:13 +03:00
blockedBy : PropTypes . bool ,
2019-04-09 06:02:48 +03:00
isAccount : PropTypes . bool ,
2022-05-10 10:44:35 +03:00
suspended : PropTypes . bool ,
hidden : PropTypes . bool ,
2020-06-14 23:29:40 +03:00
remote : PropTypes . bool ,
remoteUrl : PropTypes . string ,
2019-07-19 10:25:22 +03:00
multiColumn : PropTypes . bool ,
2017-05-12 15:44:10 +03:00
} ;
2016-10-27 22:59:56 +03:00
2021-09-26 06:46:13 +03:00
_load ( ) {
2021-09-27 08:23:48 +03:00
const { accountId , isAccount , dispatch } = this . props ;
2021-09-26 06:46:13 +03:00
2021-09-27 08:23:48 +03:00
if ( ! isAccount ) dispatch ( fetchAccount ( accountId ) ) ;
2021-09-26 06:46:13 +03:00
dispatch ( fetchFollowing ( accountId ) ) ;
}
componentDidMount ( ) {
const { params : { acct } , accountId , dispatch } = this . props ;
if ( accountId ) {
this . _load ( ) ;
} else {
dispatch ( lookupAccount ( acct ) ) ;
2019-09-29 17:27:00 +03:00
}
2017-04-21 21:05:35 +03:00
}
2016-10-27 22:59:56 +03:00
2021-09-26 06:46:13 +03:00
componentDidUpdate ( prevProps ) {
const { params : { acct } , accountId , dispatch } = this . props ;
if ( prevProps . accountId !== accountId && accountId ) {
this . _load ( ) ;
} else if ( prevProps . params . acct !== acct ) {
dispatch ( lookupAccount ( acct ) ) ;
2016-10-27 22:59:56 +03:00
}
2017-04-21 21:05:35 +03:00
}
2016-10-27 22:59:56 +03:00
2018-08-26 17:39:37 +03:00
handleLoadMore = debounce ( ( ) => {
2021-09-26 06:46:13 +03:00
this . props . dispatch ( expandFollowing ( this . props . accountId ) ) ;
2018-08-26 17:39:37 +03:00
} , 300 , { leading : true } ) ;
2017-01-30 22:40:55 +02:00
2016-10-27 22:59:56 +03:00
render ( ) {
2023-11-09 14:58:02 +02:00
const { accountId , accountIds , hasMore , blockedBy , isAccount , multiColumn , isLoading , suspended , hidden , remote , remoteUrl , hideCollections } = this . props ;
2019-04-09 06:02:48 +03:00
if ( ! isAccount ) {
return (
2023-04-12 13:44:58 +03:00
< BundleColumnError multiColumn = { multiColumn } errorType = 'routing' / >
2019-04-09 06:02:48 +03:00
) ;
}
2017-06-05 15:13:20 +03:00
2016-10-27 22:59:56 +03:00
if ( ! accountIds ) {
2017-01-30 22:40:55 +02:00
return (
< Column >
< LoadingIndicator / >
< / Column >
) ;
2016-10-27 22:59:56 +03:00
}
2020-06-14 23:29:40 +03:00
let emptyMessage ;
2022-05-10 10:44:35 +03:00
const forceEmptyState = blockedBy || suspended || hidden ;
if ( suspended ) {
emptyMessage = < FormattedMessage id = 'empty_column.account_suspended' defaultMessage = 'Account suspended' / > ;
} else if ( hidden ) {
emptyMessage = < LimitedAccountHint accountId = { accountId } / > ;
} else if ( blockedBy ) {
2020-06-14 23:29:40 +03:00
emptyMessage = < FormattedMessage id = 'empty_column.account_unavailable' defaultMessage = 'Profile unavailable' / > ;
2023-11-09 14:58:02 +02:00
} else if ( hideCollections && accountIds . isEmpty ( ) ) {
emptyMessage = < FormattedMessage id = 'empty_column.account_hides_collections' defaultMessage = 'This user has chosen to not make this information available' / > ;
2020-06-14 23:29:40 +03:00
} else if ( remote && accountIds . isEmpty ( ) ) {
emptyMessage = < RemoteHint url = { remoteUrl } / > ;
} else {
emptyMessage = < FormattedMessage id = 'account.follows.empty' defaultMessage = "This user doesn't follow anyone yet." / > ;
}
const remoteMessage = remote ? < RemoteHint url = { remoteUrl } / > : null ;
2017-06-05 15:13:20 +03:00
2016-10-27 22:59:56 +03:00
return (
2017-01-30 22:40:55 +02:00
< Column >
2023-10-26 14:00:10 +03:00
< ColumnBackButton / >
2017-01-31 23:34:33 +02:00
2018-08-26 17:39:37 +03:00
< ScrollableList
scrollKey = 'following'
2022-05-10 10:44:35 +03:00
hasMore = { ! forceEmptyState && hasMore }
2020-04-12 14:38:00 +03:00
isLoading = { isLoading }
2018-08-26 17:39:37 +03:00
onLoadMore = { this . handleLoadMore }
2021-09-26 06:46:13 +03:00
prepend = { < HeaderContainer accountId = { this . props . accountId } hideTabs / > }
2018-08-29 02:19:58 +03:00
alwaysPrepend
2020-06-14 23:29:40 +03:00
append = { remoteMessage }
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
>
2022-05-10 10:44:35 +03:00
{ forceEmptyState ? [ ] : accountIds . map ( id =>
2020-03-08 17:02:36 +02:00
< AccountContainer key = { id } id = { id } withNote = { false } / > ,
2018-08-26 17:39:37 +03:00
) }
< / ScrollableList >
2017-01-30 22:40:55 +02:00
< / Column >
2016-10-27 22:59:56 +03:00
) ;
}
2017-04-21 21:05:35 +03:00
}
2023-03-24 04:17:53 +02:00
export default connect ( mapStateToProps ) ( Following ) ;