2022-10-08 21:55:09 -04:00
import { debounce } from 'lodash' ;
2019-11-13 17:02:10 -05:00
import PropTypes from 'prop-types' ;
2022-10-08 21:55:09 -04:00
import React from 'react' ;
import { Helmet } from 'react-helmet' ;
2019-11-13 17:02:10 -05:00
import { defineMessages , injectIntl , FormattedMessage } from 'react-intl' ;
2022-10-08 21:55:09 -04:00
import ImmutablePropTypes from 'react-immutable-proptypes' ;
2019-11-13 17:02:10 -05:00
import ImmutablePureComponent from 'react-immutable-pure-component' ;
2022-10-08 21:55:09 -04:00
import { connect } from 'react-redux' ;
import { fetchBookmarkedStatuses , expandBookmarkedStatuses } from 'mastodon/actions/bookmarks' ;
import { addColumn , removeColumn , moveColumn } from 'mastodon/actions/columns' ;
import ColumnHeader from 'mastodon/components/column_header' ;
import StatusList from 'mastodon/components/status_list' ;
import Column from 'mastodon/features/ui/components/column' ;
2019-11-13 17:02:10 -05:00
const messages = defineMessages ( {
heading : { id : 'column.bookmarks' , defaultMessage : 'Bookmarks' } ,
} ) ;
const mapStateToProps = state => ( {
statusIds : state . getIn ( [ 'status_lists' , 'bookmarks' , 'items' ] ) ,
isLoading : state . getIn ( [ 'status_lists' , 'bookmarks' , 'isLoading' ] , true ) ,
hasMore : ! ! state . getIn ( [ 'status_lists' , 'bookmarks' , 'next' ] ) ,
} ) ;
export default @ connect ( mapStateToProps )
@ injectIntl
class Bookmarks extends ImmutablePureComponent {
static propTypes = {
dispatch : PropTypes . func . isRequired ,
statusIds : ImmutablePropTypes . list . isRequired ,
intl : PropTypes . object . isRequired ,
columnId : PropTypes . string ,
multiColumn : PropTypes . bool ,
hasMore : PropTypes . bool ,
isLoading : PropTypes . bool ,
} ;
componentWillMount ( ) {
this . props . dispatch ( fetchBookmarkedStatuses ( ) ) ;
}
handlePin = ( ) => {
const { columnId , dispatch } = this . props ;
if ( columnId ) {
dispatch ( removeColumn ( columnId ) ) ;
} else {
dispatch ( addColumn ( 'BOOKMARKS' , { } ) ) ;
}
}
handleMove = ( dir ) => {
const { columnId , dispatch } = this . props ;
dispatch ( moveColumn ( columnId , dir ) ) ;
}
handleHeaderClick = ( ) => {
this . column . scrollTop ( ) ;
}
setRef = c => {
this . column = c ;
}
handleLoadMore = debounce ( ( ) => {
this . props . dispatch ( expandBookmarkedStatuses ( ) ) ;
} , 300 , { leading : true } )
render ( ) {
2021-07-13 09:45:17 -04:00
const { intl , statusIds , columnId , multiColumn , hasMore , isLoading } = this . props ;
2019-11-13 17:02:10 -05:00
const pinned = ! ! columnId ;
2022-04-28 18:24:31 -04:00
const emptyMessage = < FormattedMessage id = 'empty_column.bookmarked_statuses' defaultMessage = "You don't have any bookmarked posts yet. When you bookmark one, it will show up here." / > ;
2019-11-13 17:02:10 -05:00
return (
< Column bindToDocument = { ! multiColumn } ref = { this . setRef } label = { intl . formatMessage ( messages . heading ) } >
< ColumnHeader
icon = 'bookmark'
title = { intl . formatMessage ( messages . heading ) }
onPin = { this . handlePin }
onMove = { this . handleMove }
onClick = { this . handleHeaderClick }
pinned = { pinned }
multiColumn = { multiColumn }
showBackButton
/ >
< StatusList
trackScroll = { ! pinned }
statusIds = { statusIds }
scrollKey = { ` bookmarked_statuses- ${ columnId } ` }
hasMore = { hasMore }
isLoading = { isLoading }
onLoadMore = { this . handleLoadMore }
emptyMessage = { emptyMessage }
bindToDocument = { ! multiColumn }
/ >
2022-10-08 21:55:09 -04:00
< Helmet >
< title > { intl . formatMessage ( messages . heading ) } < / t i t l e >
2022-10-20 08:35:29 -04:00
< meta name = 'robots' content = 'noindex' / >
2022-10-08 21:55:09 -04:00
< / H e l m e t >
2019-11-13 17:02:10 -05:00
< / C o l u m n >
) ;
}
}