2017-04-22 03:05:35 +09:00
import PropTypes from 'prop-types' ;
2023-05-24 00:15:17 +09:00
import { defineMessages , injectIntl , FormattedMessage } from 'react-intl' ;
2022-10-09 10:55:09 +09:00
import { Helmet } from 'react-helmet' ;
2023-05-24 00:15:17 +09:00
2017-06-24 19:24:02 +09:00
import ImmutablePropTypes from 'react-immutable-proptypes' ;
2017-05-03 09:04:16 +09:00
import ImmutablePureComponent from 'react-immutable-pure-component' ;
2022-10-09 10:55:09 +09:00
import { connect } from 'react-redux' ;
2023-05-24 00:15:17 +09:00
2024-01-12 19:31:24 +09:00
import StarIcon from '@material-symbols/svg-600/outlined/star-fill.svg?react' ;
2023-05-24 00:15:17 +09:00
import { debounce } from 'lodash' ;
2022-10-09 10:55:09 +09:00
import { addColumn , removeColumn , moveColumn } from 'mastodon/actions/columns' ;
import { fetchFavouritedStatuses , expandFavouritedStatuses } from 'mastodon/actions/favourites' ;
import ColumnHeader from 'mastodon/components/column_header' ;
import StatusList from 'mastodon/components/status_list' ;
import Column from 'mastodon/features/ui/components/column' ;
2023-06-23 00:54:43 +09:00
import { getStatusList } from 'mastodon/selectors' ;
2017-01-16 21:27:58 +09:00
const messages = defineMessages ( {
2023-07-22 02:09:13 +09:00
heading : { id : 'column.favourites' , defaultMessage : 'Favorites' } ,
2017-01-16 21:27:58 +09:00
} ) ;
const mapStateToProps = state => ( {
2023-06-23 00:54:43 +09:00
statusIds : getStatusList ( state , 'favourites' ) ,
2017-12-09 10:22:13 +09:00
isLoading : state . getIn ( [ 'status_lists' , 'favourites' , 'isLoading' ] , true ) ,
2017-08-29 05:23:44 +09:00
hasMore : ! ! state . getIn ( [ 'status_lists' , 'favourites' , 'next' ] ) ,
2017-01-16 21:27:58 +09:00
} ) ;
2018-09-15 00:59:48 +09:00
class Favourites extends ImmutablePureComponent {
2017-01-16 21:27:58 +09:00
2017-05-12 21:44:10 +09:00
static propTypes = {
dispatch : PropTypes . func . isRequired ,
2017-06-24 19:24:02 +09:00
statusIds : ImmutablePropTypes . list . isRequired ,
2017-05-12 21:44:10 +09:00
intl : PropTypes . object . isRequired ,
2017-07-15 07:49:34 +09:00
columnId : PropTypes . string ,
multiColumn : PropTypes . bool ,
2017-08-29 05:23:44 +09:00
hasMore : PropTypes . bool ,
2017-12-09 10:22:13 +09:00
isLoading : PropTypes . bool ,
2017-05-12 21:44:10 +09:00
} ;
2017-01-16 21:27:58 +09:00
2023-05-10 16:05:32 +09:00
UNSAFE _componentWillMount ( ) {
2017-01-16 21:27:58 +09:00
this . props . dispatch ( fetchFavouritedStatuses ( ) ) ;
2017-04-22 03:05:35 +09:00
}
2017-01-16 21:27:58 +09:00
2017-07-15 07:49:34 +09:00
handlePin = ( ) => {
const { columnId , dispatch } = this . props ;
if ( columnId ) {
dispatch ( removeColumn ( columnId ) ) ;
} else {
dispatch ( addColumn ( 'FAVOURITES' , { } ) ) ;
}
2023-01-30 09:45:35 +09:00
} ;
2017-07-15 07:49:34 +09:00
handleMove = ( dir ) => {
const { columnId , dispatch } = this . props ;
dispatch ( moveColumn ( columnId , dir ) ) ;
2023-01-30 09:45:35 +09:00
} ;
2017-07-15 07:49:34 +09:00
handleHeaderClick = ( ) => {
this . column . scrollTop ( ) ;
2023-01-30 09:45:35 +09:00
} ;
2017-07-15 07:49:34 +09:00
setRef = c => {
this . column = c ;
2023-01-30 09:45:35 +09:00
} ;
2017-07-15 07:49:34 +09:00
2018-03-06 03:31:40 +09:00
handleLoadMore = debounce ( ( ) => {
2017-01-16 21:27:58 +09:00
this . props . dispatch ( expandFavouritedStatuses ( ) ) ;
2023-01-30 09:45:35 +09:00
} , 300 , { leading : true } ) ;
2017-01-16 21:27:58 +09:00
render ( ) {
2021-07-13 22:45:17 +09:00
const { intl , statusIds , columnId , multiColumn , hasMore , isLoading } = this . props ;
2017-07-15 07:49:34 +09:00
const pinned = ! ! columnId ;
2017-01-16 21:27:58 +09:00
2023-07-22 02:09:13 +09:00
const emptyMessage = < FormattedMessage id = 'empty_column.favourited_statuses' defaultMessage = "You don't have any favorite posts yet. When you favorite one, it will show up here." / > ;
2018-08-26 23:39:37 +09:00
2017-01-16 21:27:58 +09:00
return (
2019-08-02 02:17:17 +09:00
< Column bindToDocument = { ! multiColumn } ref = { this . setRef } label = { intl . formatMessage ( messages . heading ) } >
2017-07-15 07:49:34 +09:00
< ColumnHeader
icon = 'star'
2023-10-25 02:45:08 +09:00
iconComponent = { StarIcon }
2017-07-15 07:49:34 +09:00
title = { intl . formatMessage ( messages . heading ) }
onPin = { this . handlePin }
onMove = { this . handleMove }
onClick = { this . handleHeaderClick }
pinned = { pinned }
multiColumn = { multiColumn }
/ >
< StatusList
trackScroll = { ! pinned }
statusIds = { statusIds }
scrollKey = { ` favourited_statuses- ${ columnId } ` }
2017-08-29 05:23:44 +09:00
hasMore = { hasMore }
2017-12-09 10:22:13 +09:00
isLoading = { isLoading }
2018-03-06 03:31:40 +09:00
onLoadMore = { this . handleLoadMore }
2018-08-26 23:39:37 +09:00
emptyMessage = { emptyMessage }
2019-07-19 16:25:22 +09:00
bindToDocument = { ! multiColumn }
2017-07-15 07:49:34 +09:00
/ >
2022-10-09 10:55:09 +09:00
< Helmet >
< title > { intl . formatMessage ( messages . heading ) } < / title >
2022-10-20 21:35:29 +09:00
< meta name = 'robots' content = 'noindex' / >
2022-10-09 10:55:09 +09:00
< / Helmet >
2017-01-16 21:27:58 +09:00
< / Column >
) ;
}
2017-04-22 03:05:35 +09:00
}
2023-03-24 11:17:53 +09:00
export default connect ( mapStateToProps ) ( injectIntl ( Favourites ) ) ;