forked from mastodon/mastodon
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add profile setup to onboarding in web UI (mastodon#27829)
- Loading branch information
Showing
18 changed files
with
519 additions
and
411 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,23 @@ | ||
| import { useIntl, defineMessages } from 'react-intl'; | ||
|
|
||
| import { CircularProgress } from './circular_progress'; | ||
|
|
||
| export const LoadingIndicator: React.FC = () => ( | ||
| <div className='loading-indicator'> | ||
| <CircularProgress size={50} strokeWidth={6} /> | ||
| </div> | ||
| ); | ||
| const messages = defineMessages({ | ||
| loading: { id: 'loading_indicator.label', defaultMessage: 'Loading…' }, | ||
| }); | ||
|
|
||
| export const LoadingIndicator: React.FC = () => { | ||
| const intl = useIntl(); | ||
|
|
||
| return ( | ||
| <div | ||
| className='loading-indicator' | ||
| role='progressbar' | ||
| aria-busy | ||
| aria-live='polite' | ||
| aria-label={intl.formatMessage(messages.loading)} | ||
| > | ||
| <CircularProgress size={50} strokeWidth={6} /> | ||
| </div> | ||
| ); | ||
| }; |
29 changes: 0 additions & 29 deletions
29
app/javascript/mastodon/features/onboarding/components/progress_indicator.jsx
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,79 +1,62 @@ | ||
| import PropTypes from 'prop-types'; | ||
| import { PureComponent } from 'react'; | ||
| import { useEffect } from 'react'; | ||
|
|
||
| import { FormattedMessage } from 'react-intl'; | ||
|
|
||
| import ImmutablePropTypes from 'react-immutable-proptypes'; | ||
| import { connect } from 'react-redux'; | ||
| import { Link } from 'react-router-dom'; | ||
|
|
||
| import { useDispatch } from 'react-redux'; | ||
|
|
||
|
|
||
| import { fetchSuggestions } from 'mastodon/actions/suggestions'; | ||
| import { markAsPartial } from 'mastodon/actions/timelines'; | ||
| import Column from 'mastodon/components/column'; | ||
| import { ColumnBackButton } from 'mastodon/components/column_back_button'; | ||
| import { EmptyAccount } from 'mastodon/components/empty_account'; | ||
| import Account from 'mastodon/containers/account_container'; | ||
| import { useAppSelector } from 'mastodon/store'; | ||
|
|
||
| const mapStateToProps = state => ({ | ||
| suggestions: state.getIn(['suggestions', 'items']), | ||
| isLoading: state.getIn(['suggestions', 'isLoading']), | ||
| }); | ||
|
|
||
| class Follows extends PureComponent { | ||
|
|
||
| static propTypes = { | ||
| onBack: PropTypes.func, | ||
| dispatch: PropTypes.func.isRequired, | ||
| suggestions: ImmutablePropTypes.list, | ||
| isLoading: PropTypes.bool, | ||
| }; | ||
| export const Follows = () => { | ||
| const dispatch = useDispatch(); | ||
| const isLoading = useAppSelector(state => state.getIn(['suggestions', 'isLoading'])); | ||
| const suggestions = useAppSelector(state => state.getIn(['suggestions', 'items'])); | ||
|
|
||
| componentDidMount () { | ||
| const { dispatch } = this.props; | ||
| useEffect(() => { | ||
| dispatch(fetchSuggestions(true)); | ||
| } | ||
|
|
||
| componentWillUnmount () { | ||
| const { dispatch } = this.props; | ||
| dispatch(markAsPartial('home')); | ||
| } | ||
|
|
||
| render () { | ||
| const { onBack, isLoading, suggestions } = this.props; | ||
| return () => { | ||
| dispatch(markAsPartial('home')); | ||
| }; | ||
| }, [dispatch]); | ||
|
|
||
| let loadedContent; | ||
| let loadedContent; | ||
|
|
||
| if (isLoading) { | ||
| loadedContent = (new Array(8)).fill().map((_, i) => <EmptyAccount key={i} />); | ||
| } else if (suggestions.isEmpty()) { | ||
| loadedContent = <div className='follow-recommendations__empty'><FormattedMessage id='onboarding.follows.empty' defaultMessage='Unfortunately, no results can be shown right now. You can try using search or browsing the explore page to find people to follow, or try again later.' /></div>; | ||
| } else { | ||
| loadedContent = suggestions.map(suggestion => <Account id={suggestion.get('account')} key={suggestion.get('account')} withBio />); | ||
| } | ||
|
|
||
| return ( | ||
| <Column> | ||
| <ColumnBackButton onClick={onBack} /> | ||
|
|
||
| <div className='scrollable privacy-policy'> | ||
| <div className='column-title'> | ||
| <h3><FormattedMessage id='onboarding.follows.title' defaultMessage='Popular on Mastodon' /></h3> | ||
| <p><FormattedMessage id='onboarding.follows.lead' defaultMessage='You curate your own home feed. The more people you follow, the more active and interesting it will be. These profiles may be a good starting point—you can always unfollow them later!' /></p> | ||
| </div> | ||
| if (isLoading) { | ||
| loadedContent = (new Array(8)).fill().map((_, i) => <EmptyAccount key={i} />); | ||
| } else if (suggestions.isEmpty()) { | ||
| loadedContent = <div className='follow-recommendations__empty'><FormattedMessage id='onboarding.follows.empty' defaultMessage='Unfortunately, no results can be shown right now. You can try using search or browsing the explore page to find people to follow, or try again later.' /></div>; | ||
| } else { | ||
| loadedContent = suggestions.map(suggestion => <Account id={suggestion.get('account')} key={suggestion.get('account')} withBio />); | ||
| } | ||
|
|
||
| <div className='follow-recommendations'> | ||
| {loadedContent} | ||
| </div> | ||
| return ( | ||
| <> | ||
| <ColumnBackButton /> | ||
|
|
||
| <p className='onboarding__lead'><FormattedMessage id='onboarding.tips.accounts_from_other_servers' defaultMessage='<strong>Did you know?</strong> Since Mastodon is decentralized, some profiles you come across will be hosted on servers other than yours. And yet you can interact with them seamlessly! Their server is in the second half of their username!' values={{ strong: chunks => <strong>{chunks}</strong> }} /></p> | ||
| <div className='scrollable privacy-policy'> | ||
| <div className='column-title'> | ||
| <h3><FormattedMessage id='onboarding.follows.title' defaultMessage='Popular on Mastodon' /></h3> | ||
| <p><FormattedMessage id='onboarding.follows.lead' defaultMessage='You curate your own home feed. The more people you follow, the more active and interesting it will be. These profiles may be a good starting point—you can always unfollow them later!' /></p> | ||
| </div> | ||
|
|
||
| <div className='onboarding__footer'> | ||
| <button className='link-button' onClick={onBack}><FormattedMessage id='onboarding.actions.back' defaultMessage='Take me back' /></button> | ||
| </div> | ||
| <div className='follow-recommendations'> | ||
| {loadedContent} | ||
| </div> | ||
| </Column> | ||
| ); | ||
| } | ||
|
|
||
| } | ||
| <p className='onboarding__lead'><FormattedMessage id='onboarding.tips.accounts_from_other_servers' defaultMessage='<strong>Did you know?</strong> Since Mastodon is decentralized, some profiles you come across will be hosted on servers other than yours. And yet you can interact with them seamlessly! Their server is in the second half of their username!' values={{ strong: chunks => <strong>{chunks}</strong> }} /></p> | ||
|
|
||
| export default connect(mapStateToProps)(Follows); | ||
| <div className='onboarding__footer'> | ||
| <Link className='link-button' to='/start'><FormattedMessage id='onboarding.actions.back' defaultMessage='Take me back' /></Link> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; |
Oops, something went wrong.