2023-01-18 09:44:33 -06:00
import PropTypes from 'prop-types' ;
2023-05-28 09:38:10 -05:00
2023-01-18 09:44:33 -06: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' ;
2023-01-18 09:44:33 -06:00
import { connect } from 'react-redux' ;
2023-05-28 09:38:10 -05:00
import { debounce } from 'lodash' ;
import { expandFollowedHashtags , fetchFollowedHashtags } from 'flavours/glitch/actions/tags' ;
2023-01-18 09:44:33 -06:00
import ColumnHeader from 'flavours/glitch/components/column_header' ;
2023-05-28 09:38:10 -05:00
import Hashtag from 'flavours/glitch/components/hashtag' ;
2023-01-18 09:44:33 -06:00
import ScrollableList from 'flavours/glitch/components/scrollable_list' ;
import Column from 'flavours/glitch/features/ui/components/column' ;
2023-05-28 09:38:10 -05:00
2023-01-18 09:44:33 -06:00
const messages = defineMessages ( {
heading : { id : 'followed_tags' , defaultMessage : 'Followed hashtags' } ,
} ) ;
const mapStateToProps = state => ( {
hashtags : state . getIn ( [ 'followed_tags' , 'items' ] ) ,
isLoading : state . getIn ( [ 'followed_tags' , 'isLoading' ] , true ) ,
hasMore : ! ! state . getIn ( [ 'followed_tags' , 'next' ] ) ,
} ) ;
class FollowedTags extends ImmutablePureComponent {
static propTypes = {
params : PropTypes . object . isRequired ,
dispatch : PropTypes . func . isRequired ,
intl : PropTypes . object . isRequired ,
hashtags : ImmutablePropTypes . list ,
isLoading : PropTypes . bool ,
hasMore : PropTypes . bool ,
multiColumn : PropTypes . bool ,
} ;
componentDidMount ( ) {
this . props . dispatch ( fetchFollowedHashtags ( ) ) ;
2023-01-29 16:44:03 -06:00
}
2023-01-18 09:44:33 -06:00
handleLoadMore = debounce ( ( ) => {
this . props . dispatch ( expandFollowedHashtags ( ) ) ;
} , 300 , { leading : true } ) ;
render ( ) {
const { intl , hashtags , isLoading , hasMore , multiColumn } = this . props ;
const emptyMessage = < FormattedMessage id = 'empty_column.followed_tags' defaultMessage = 'You have not followed any hashtags yet. When you do, they will show up here.' / > ;
return (
< Column bindToDocument = { ! multiColumn } >
< ColumnHeader
icon = 'hashtag'
title = { intl . formatMessage ( messages . heading ) }
showBackButton
multiColumn = { multiColumn }
/ >
< ScrollableList
scrollKey = 'followed_tags'
emptyMessage = { emptyMessage }
hasMore = { hasMore }
isLoading = { isLoading }
onLoadMore = { this . handleLoadMore }
bindToDocument = { ! multiColumn }
>
{ hashtags . map ( ( hashtag ) => (
< Hashtag
key = { hashtag . get ( 'name' ) }
name = { hashtag . get ( 'name' ) }
to = { ` /tags/ ${ hashtag . get ( 'name' ) } ` }
withGraph = { false }
// Taken from ImmutableHashtag. Should maybe refactor ImmutableHashtag to accept more options?
people = { hashtag . getIn ( [ 'history' , 0 , 'accounts' ] ) * 1 + hashtag . getIn ( [ 'history' , 1 , 'accounts' ] ) * 1 }
history = { hashtag . get ( 'history' ) . reverse ( ) . map ( ( day ) => day . get ( 'uses' ) ) . toArray ( ) }
/ >
) ) }
< / ScrollableList >
< Helmet >
< meta name = 'robots' content = 'noindex' / >
< / Helmet >
< / Column >
) ;
}
}
2023-03-24 17:15:25 -05:00
export default connect ( mapStateToProps ) ( injectIntl ( FollowedTags ) ) ;