Change onboarding by replacing tutorial with follow recommendations in web UI (#16060)
Eugen Rochko
4 years ago
committed by
GitHub
parent
ca3bc1b09f
commit
bf903dc510
@ -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> |
||||
); |
||||
} |
||||
|
||||
} |
||||
Loading…
Reference in new issue