account.display_name_html = emojify(escapeTextContentForBrowser(displayName), emojiMap);
account.note_emojified = emojify(account.note, emojiMap);
+ account.note_plain = unescapeHTML(account.note);
if (account.fields) {
account.fields = account.fields.map(pair => ({
import api from 'flavours/glitch/util/api';
import { importFetchedAccounts } from './importer';
+import { fetchRelationships } from './accounts';
export const SUGGESTIONS_FETCH_REQUEST = 'SUGGESTIONS_FETCH_REQUEST';
export const SUGGESTIONS_FETCH_SUCCESS = 'SUGGESTIONS_FETCH_SUCCESS';
export const SUGGESTIONS_DISMISS = 'SUGGESTIONS_DISMISS';
-export function fetchSuggestions() {
+export function fetchSuggestions(withRelationships = false) {
return (dispatch, getState) => {
dispatch(fetchSuggestionsRequest());
api(getState).get('/api/v2/suggestions').then(response => {
dispatch(importFetchedAccounts(response.data.map(x => x.account)));
dispatch(fetchSuggestionsSuccess(response.data));
+
+ if (withRelationships) {
+ dispatch(fetchRelationships(response.data.map(item => item.account.id)));
+ }
}).catch(error => dispatch(fetchSuggestionsFail(error)));
};
};
--- /dev/null
+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;
--- /dev/null
+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 'flavours/glitch/selectors';
+import Avatar from 'flavours/glitch/components/avatar';
+import DisplayName from 'flavours/glitch/components/display_name';
+import Permalink from 'flavours/glitch/components/permalink';
+import IconButton from 'flavours/glitch/components/icon_button';
+import { injectIntl, defineMessages } from 'react-intl';
+import { followAccount, unfollowAccount } from 'flavours/glitch/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>
+ );
+ }
+
+}
--- /dev/null
+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 'flavours/glitch/actions/suggestions';
+import { changeSetting, saveSettings } from 'flavours/glitch/actions/settings';
+import { requestBrowserPermission } from 'flavours/glitch/actions/notifications';
+import Column from 'flavours/glitch/features/ui/components/column';
+import Account from './components/account';
+import Logo from 'flavours/glitch/components/logo';
+import imageGreeting from 'mastodon/../images/elephant_ui_greeting.svg';
+import Button from 'flavours/glitch/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>
+ );
+ }
+
+}
Search,
GettingStartedMisc,
Directory,
+ FollowRecommendations,
} from 'flavours/glitch/util/async-components';
import { HotKeys } from 'react-hotkeys';
import { me } from 'flavours/glitch/util/initial_state';
+import { closeOnboarding, INTRODUCTION_VERSION } from 'flavours/glitch/actions/onboarding';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
// Dummy import, to make sure that <Status /> ends up in the application bundle.
showFaviconBadge: state.getIn(['local_settings', 'notifications', 'favicon_badge']),
hicolorPrivacyIcons: state.getIn(['local_settings', 'hicolor_privacy_icons']),
moved: state.getIn(['accounts', me, 'moved']) && state.getIn(['accounts', state.getIn(['accounts', me, 'moved'])]),
+ firstLaunch: state.getIn(['settings', 'introductionVersion'], 0) < INTRODUCTION_VERSION,
});
const keyMap = {
<WrappedRoute path='/bookmarks' component={BookmarkedStatuses} content={children} />
<WrappedRoute path='/pinned' component={PinnedStatuses} content={children} />
+ <WrappedRoute path='/start' component={FollowRecommendations} content={children} />
<WrappedRoute path='/search' component={Search} content={children} />
<WrappedRoute path='/directory' component={Directory} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
unreadNotifications: PropTypes.number,
showFaviconBadge: PropTypes.bool,
moved: PropTypes.map,
+ firstLaunch: PropTypes.bool,
};
state = {
this.favicon = new Favico({ animation:"none" });
+ // On first launch, redirect to the follow recommendations page
+ if (this.props.firstLaunch) {
+ this.context.router.history.replace('/start');
+ this.props.dispatch(closeOnboarding());
+ }
+
this.props.dispatch(fetchMarkers());
this.props.dispatch(expandHomeTimeline());
this.props.dispatch(expandNotifications());
overflow: hidden;
text-decoration: none;
font-size: 14px;
+
+ &--with-note {
+ strong {
+ display: inline;
+ }
+ }
+ }
+
+ &__note {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ color: $ui-secondary-color;
}
&.small {
}
}
+.follow-recommendations-account {
+ .icon-button {
+ color: $ui-primary-color;
+
+ &.active {
+ color: $valid-value-color;
+ }
+ }
+}
+
.account__wrapper {
display: flex;
}
text-align: center;
}
}
+
+.column-title {
+ text-align: center;
+ padding: 40px;
+
+ .logo {
+ fill: $primary-text-color;
+ width: 50px;
+ margin: 0 auto;
+ margin-bottom: 40px;
+ }
+
+ h3 {
+ font-size: 24px;
+ line-height: 1.5;
+ font-weight: 700;
+ margin-bottom: 10px;
+ }
+
+ p {
+ font-size: 16px;
+ line-height: 24px;
+ font-weight: 400;
+ color: $darker-text-color;
+ }
+}
+
+.column-actions {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 40px;
+ padding-top: 40px;
+ padding-bottom: 200px;
+
+ &__background {
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ height: 220px;
+ width: auto;
+ }
+}
export function Directory () {
return import(/* webpackChunkName: "features/glitch/async/directory" */'flavours/glitch/features/directory');
}
+
+export function FollowRecommendations () {
+ return import(/* webpackChunkName: "features/glitch/async/follow_recommendations" */'flavours/glitch/features/follow_recommendations');
+}
cat aescling's git repositories / mastodon.git / commitdiff