import React from 'react' ;
import PropTypes from 'prop-types' ;
import ImmutablePureComponent from 'react-immutable-pure-component' ;
import ImmutablePropTypes from 'react-immutable-proptypes' ;
import { connect } from 'react-redux' ;
import { FormattedMessage } from 'react-intl' ;
import { fetchSuggestions } from 'mastodon/actions/suggestions' ;
import { changeSetting , saveSettings } from 'mastodon/actions/settings' ;
import { requestBrowserPermission } from 'mastodon/actions/notifications' ;
import { markAsPartial } from 'mastodon/actions/timelines' ;
import Column from 'mastodon/features/ui/components/column' ;
import Account from './components/account' ;
import imageGreeting from 'mastodon/../images/elephant_ui_greeting.svg' ;
import Button from 'mastodon/components/button' ;
const mapStateToProps = state => ( {
suggestions : state . getIn ( [ 'suggestions' , 'items' ] ) ,
isLoading : state . getIn ( [ 'suggestions' , 'isLoading' ] ) ,
} ) ;
export default @ connect ( mapStateToProps )
class FollowRecommendations extends ImmutablePureComponent {
static contextTypes = {
router : PropTypes . object . isRequired ,
} ;
static propTypes = {
dispatch : PropTypes . func . isRequired ,
suggestions : ImmutablePropTypes . list ,
isLoading : PropTypes . bool ,
} ;
componentDidMount ( ) {
const { dispatch , suggestions } = this . props ;
// Don't re-fetch if we're e.g. navigating backwards to this page,
// since we don't want followed accounts to disappear from the list
if ( suggestions . size === 0 ) {
dispatch ( fetchSuggestions ( true ) ) ;
}
}
componentWillUnmount ( ) {
const { dispatch } = this . props ;
// Force the home timeline to be reloaded when the user navigates
// to it; if the user is new, it would've been empty before
dispatch ( markAsPartial ( 'home' ) ) ;
}
handleDone = ( ) => {
const { dispatch } = this . props ;
const { router } = this . context ;
dispatch ( requestBrowserPermission ( ( permission ) => {
if ( permission === 'granted' ) {
dispatch ( changeSetting ( [ 'notifications' , 'alerts' , 'follow' ] , true ) ) ;
dispatch ( changeSetting ( [ 'notifications' , 'alerts' , 'favourite' ] , true ) ) ;
dispatch ( changeSetting ( [ 'notifications' , 'alerts' , 'reblog' ] , true ) ) ;
dispatch ( changeSetting ( [ 'notifications' , 'alerts' , 'mention' ] , true ) ) ;
dispatch ( changeSetting ( [ 'notifications' , 'alerts' , 'poll' ] , true ) ) ;
dispatch ( changeSetting ( [ 'notifications' , 'alerts' , 'status' ] , true ) ) ;
dispatch ( saveSettings ( ) ) ;
}
} ) ) ;
router . history . push ( '/home' ) ;
}
render ( ) {
const { suggestions , isLoading } = this . props ;
return (
< Column >
< div className = 'scrollable follow-recommendations-container' >
< div className = 'column-title' >
< svg viewBox = '0 0 79 79' className = 'logo' >
< use xlinkHref = '#logo-symbol-icon' / >
< / s v g >
< 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 >
{ ! isLoading && (
< React . Fragment >
< div className = 'column-list' >
{ suggestions . size > 0 ? suggestions . map ( suggestion => (
< Account key = { suggestion . get ( 'account' ) } id = { suggestion . get ( 'account' ) } / >
) ) : (
< div className = 'column-list__empty-message' >
< FormattedMessage id = 'empty_column.follow_recommendations' defaultMessage = 'Looks like no suggestions could be generated for you. You can try using search to look for people you might know or explore trending hashtags.' / >
< / d i v >
) }
< / d i v >
< div className = 'column-actions' >
< img src = { imageGreeting } alt = '' className = 'column-actions__background' / >
< Button onClick = { this . handleDone } > < FormattedMessage id = 'follow_recommendations.done' defaultMessage = 'Done' / > < / B u t t o n >
< / d i v >
< / R e a c t . F r a g m e n t >
) }
< / d i v >
< / C o l u m n >
) ;
}
}