@ -1,21 +1,8 @@ | |||
import { changeSetting, saveSettings } from './settings'; | |||
import { requestBrowserPermission } from './notifications'; | |||
export const INTRODUCTION_VERSION = 20181216044202; | |||
export const closeOnboarding = () => dispatch => { | |||
dispatch(changeSetting(['introductionVersion'], INTRODUCTION_VERSION)); | |||
dispatch(saveSettings()); | |||
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()); | |||
} | |||
})); | |||
}; |
@ -0,0 +1,9 @@ | |||
import React from 'react'; | |||
const Logo = () => ( | |||
<svg viewBox='0 0 216.4144 232.00976' className='logo'> | |||
<use xlinkHref='#mastodon-svg-logo' /> | |||
</svg> | |||
); | |||
export default Logo; |
@ -0,0 +1,85 @@ | |||
import React from 'react'; | |||
import PropTypes from 'prop-types'; | |||
import ImmutablePropTypes from 'react-immutable-proptypes'; | |||
import ImmutablePureComponent from 'react-immutable-pure-component'; | |||
import { connect } from 'react-redux'; | |||
import { makeGetAccount } from 'mastodon/selectors'; | |||
import Avatar from 'mastodon/components/avatar'; | |||
import DisplayName from 'mastodon/components/display_name'; | |||
import Permalink from 'mastodon/components/permalink'; | |||
import IconButton from 'mastodon/components/icon_button'; | |||
import { injectIntl, defineMessages } from 'react-intl'; | |||
import { followAccount, unfollowAccount } from 'mastodon/actions/accounts'; | |||
const messages = defineMessages({ | |||
follow: { id: 'account.follow', defaultMessage: 'Follow' }, | |||
unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' }, | |||
}); | |||
const makeMapStateToProps = () => { | |||
const getAccount = makeGetAccount(); | |||
const mapStateToProps = (state, props) => ({ | |||
account: getAccount(state, props.id), | |||
}); | |||
return mapStateToProps; | |||
}; | |||
const getFirstSentence = str => { | |||
const arr = str.split(/(([\.\?!]+\s)|[.。?!])/); | |||
return arr[0]; | |||
}; | |||
export default @connect(makeMapStateToProps) | |||
@injectIntl | |||
class Account extends ImmutablePureComponent { | |||
static propTypes = { | |||
account: ImmutablePropTypes.map.isRequired, | |||
intl: PropTypes.object.isRequired, | |||
dispatch: PropTypes.func.isRequired, | |||
}; | |||
handleFollow = () => { | |||
const { account, dispatch } = this.props; | |||
if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) { | |||
dispatch(unfollowAccount(account.get('id'))); | |||
} else { | |||
dispatch(followAccount(account.get('id'))); | |||
} | |||
} | |||
render () { | |||
const { account, intl } = this.props; | |||
let button; | |||
if (account.getIn(['relationship', 'following'])) { | |||
button = <IconButton icon='check' title={intl.formatMessage(messages.unfollow)} active onClick={this.handleFollow} />; | |||
} else { | |||
button = <IconButton icon='plus' title={intl.formatMessage(messages.follow)} onClick={this.handleFollow} />; | |||
} | |||
return ( | |||
<div className='account follow-recommendations-account'> | |||
<div className='account__wrapper'> | |||
<Permalink className='account__display-name account__display-name--with-note' title={account.get('acct')} href={account.get('url')} to={`/accounts/${account.get('id')}`}> | |||
<div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div> | |||
<DisplayName account={account} /> | |||
<div className='account__note'>{getFirstSentence(account.get('note_plain'))}</div> | |||
</Permalink> | |||
<div className='account__relationship'> | |||
{button} | |||
</div> | |||
</div> | |||
</div> | |||
); | |||
} | |||
} |
@ -0,0 +1,95 @@ | |||
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 Column from 'mastodon/features/ui/components/column'; | |||
import Account from './components/account'; | |||
import Logo from 'mastodon/components/logo'; | |||
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)); | |||
} | |||
} | |||
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('/timelines/home'); | |||
} | |||
render () { | |||
const { suggestions, isLoading } = this.props; | |||
return ( | |||
<Column> | |||
<div className='scrollable'> | |||
<div className='column-title'> | |||
<Logo /> | |||
<h3><FormattedMessage id='follow_recommendations.heading' defaultMessage="Follow people you'd like to see posts from! Here are some suggestions." /></h3> | |||
<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> | |||
</div> | |||
{!isLoading && ( | |||
<React.Fragment> | |||
<div> | |||
{suggestions.map(suggestion => ( | |||
<Account key={suggestion.get('account')} id={suggestion.get('account')} /> | |||
))} | |||
</div> | |||
<div className='column-actions'> | |||
<img src={imageGreeting} alt='' className='column-actions__background' /> | |||
<Button onClick={this.handleDone}><FormattedMessage id='follow_recommendations.done' defaultMessage='Done' /></Button> | |||
</div> | |||
</React.Fragment> | |||
)} | |||
</div> | |||
</Column> | |||
); | |||
} | |||
} |