@ -4,20 +4,35 @@ import { expandHomeTimeline } from '../../actions/timelines';
import PropTypes from 'prop-types' ;
import PropTypes from 'prop-types' ;
import StatusListContainer from '../ui/containers/status_list_container' ;
import StatusListContainer from '../ui/containers/status_list_container' ;
import Column from '../../components/column' ;
import Column from '../../components/column' ;
import BundleContainer from 'soapbox/features/ui/containers/bundle_container' ;
import { defineMessages , injectIntl , FormattedMessage } from 'react-intl' ;
import { defineMessages , injectIntl , FormattedMessage } from 'react-intl' ;
import ColumnSettingsContainer from './containers/column_settings_container' ;
import ColumnSettingsContainer from './containers/column_settings_container' ;
import HomeColumnHeader from '../../components/home_column_header' ;
import HomeColumnHeader from '../../components/home_column_header' ;
import { Link } from 'react-router-dom' ;
import { Link } from 'react-router-dom' ;
import Button from 'soapbox/components/button' ;
import { OrderedSet as ImmutableOrderedSet } from 'immutable' ;
import { getFeatures } from 'soapbox/utils/features' ;
function FollowRecommendationsList ( ) {
return import ( /* webpackChunkName: "features/follow_recommendations" */ 'soapbox/features/follow_recommendations/components/follow_recommendations_list' ) ;
}
const messages = defineMessages ( {
const messages = defineMessages ( {
title : { id : 'column.home' , defaultMessage : 'Home' } ,
title : { id : 'column.home' , defaultMessage : 'Home' } ,
} ) ;
} ) ;
const mapStateToProps = state => ( {
const mapStateToProps = state => {
hasUnread : state . getIn ( [ 'timelines' , 'home' , 'unread' ] ) > 0 ,
const instance = state . get ( 'instance' ) ;
isPartial : state . getIn ( [ 'timelines' , 'home' , 'isPartial' ] ) ,
const features = getFeatures ( instance ) ;
siteTitle : state . getIn ( [ 'instance' , 'title' ] ) ,
} ) ;
return {
hasUnread : state . getIn ( [ 'timelines' , 'home' , 'unread' ] ) > 0 ,
isPartial : state . getIn ( [ 'timelines' , 'home' , 'isPartial' ] ) ,
siteTitle : state . getIn ( [ 'instance' , 'title' ] ) ,
isEmpty : state . getIn ( [ 'timelines' , 'home' , 'items' ] , ImmutableOrderedSet ( ) ) . isEmpty ( ) ,
features ,
} ;
} ;
export default @ connect ( mapStateToProps )
export default @ connect ( mapStateToProps )
@ injectIntl
@ injectIntl
@ -29,8 +44,14 @@ class HomeTimeline extends React.PureComponent {
hasUnread : PropTypes . bool ,
hasUnread : PropTypes . bool ,
isPartial : PropTypes . bool ,
isPartial : PropTypes . bool ,
siteTitle : PropTypes . string ,
siteTitle : PropTypes . string ,
isEmpty : PropTypes . bool ,
features : PropTypes . object . isRequired ,
} ;
} ;
state = {
done : false ,
}
handleLoadMore = maxId => {
handleLoadMore = maxId => {
this . props . dispatch ( expandHomeTimeline ( { maxId } ) ) ;
this . props . dispatch ( expandHomeTimeline ( { maxId } ) ) ;
}
}
@ -68,20 +89,51 @@ class HomeTimeline extends React.PureComponent {
}
}
}
}
handleDone = e => {
this . props . dispatch ( expandHomeTimeline ( ) ) ;
this . setState ( { done : true } ) ;
}
renderFollowRecommendations = ( ) => {
return (
< div className = 'scrollable follow-recommendations-container' >
< div className = 'column-title' >
< h3 > < FormattedMessage id = 'follow_recommendations.heading' defaultMessage = "Follow people you'd like to see posts from! Here are some suggestions." / > < / h 3 >
< p > < FormattedMessage id = 'follow_recommendations.lead' defaultMessage = "Posts from people you follow will show up in chronological order on your home feed. Don't be afraid to make mistakes, you can unfollow people just as easily any time!" / > < / p >
< / d i v >
< BundleContainer fetchComponent = { FollowRecommendationsList } >
{ Component => < Component / > }
< / B u n d l e C o n t a i n e r >
< div className = 'column-actions' >
< Button onClick = { this . handleDone } >
< FormattedMessage id = 'follow_recommendations.done' defaultMessage = 'Done' / >
< / B u t t o n >
< / d i v >
< / d i v >
) ;
}
render ( ) {
render ( ) {
const { intl , hasUnread , siteTitle } = this . props ;
const { intl , hasUnread , siteTitle , isEmpty , features } = this . props ;
const { done } = this . state ;
return (
return (
< Column label = { intl . formatMessage ( messages . title ) } >
< Column label = { intl . formatMessage ( messages . title ) } >
< HomeColumnHeader activeItem = 'home' active = { hasUnread } >
< HomeColumnHeader activeItem = 'home' active = { hasUnread } >
< ColumnSettingsContainer / >
< ColumnSettingsContainer / >
< / H o m e C o l u m n H e a d e r >
< / H o m e C o l u m n H e a d e r >
< StatusListContainer
{ ( features . suggestions && isEmpty && ! done ) ? (
scrollKey = 'home_timeline'
this . renderFollowRecommendations ( )
onLoadMore = { this . handleLoadMore }
) : (
timelineId = 'home'
< StatusListContainer
emptyMessage = { < FormattedMessage id = 'empty_column.home' defaultMessage = 'Your home timeline is empty! Visit {public} to get started and meet other users.' values = { { public : < Link to = '/timeline/local' > < FormattedMessage id = 'empty_column.home.local_tab' defaultMessage = 'the {site_title} tab' values = { { site _title : siteTitle } } / > < /Link> }} / > }
scrollKey = 'home_timeline'
/ >
onLoadMore = { this . handleLoadMore }
timelineId = 'home'
emptyMessage = { < FormattedMessage id = 'empty_column.home' defaultMessage = 'Your home timeline is empty! Visit {public} to get started and meet other users.' values = { { public : < Link to = '/timeline/local' > < FormattedMessage id = 'empty_column.home.local_tab' defaultMessage = 'the {site_title} tab' values = { { site _title : siteTitle } } / > < /Link> }} / > }
/ >
) }
< / C o l u m n >
< / C o l u m n >
) ;
) ;
}
}