bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'suggestions-v2' into 'develop'

Browse source 
Suggestions improvements

See merge request soapbox-pub/soapbox-fe!767
This commit is contained in:
Alex Gleason 2021-09-17 22:23:08 +00:00
commit dcd2a6324d
14 changed files with 229 additions and 164 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
app/soapbox/actions/suggestions.js
View file

@ -1,6 +1,7 @@
import api from '../api';
import { importFetchedAccounts } from './importer';
import { isLoggedIn } from 'soapbox/utils/auth';
import { getFeatures } from 'soapbox/utils/features';
export const SUGGESTIONS_FETCH_REQUEST = 'SUGGESTIONS_FETCH_REQUEST';
export const SUGGESTIONS_FETCH_SUCCESS = 'SUGGESTIONS_FETCH_SUCCESS';
@ -8,38 +9,48 @@ export const SUGGESTIONS_FETCH_FAIL = 'SUGGESTIONS_FETCH_FAIL';
export const SUGGESTIONS_DISMISS = 'SUGGESTIONS_DISMISS';
export const SUGGESTIONS_V2_FETCH_REQUEST = 'SUGGESTIONS_V2_FETCH_REQUEST';
export const SUGGESTIONS_V2_FETCH_SUCCESS = 'SUGGESTIONS_V2_FETCH_SUCCESS';
export const SUGGESTIONS_V2_FETCH_FAIL = 'SUGGESTIONS_V2_FETCH_FAIL';
export function fetchSuggestionsV1() {
return (dispatch, getState) => {
dispatch({ type: SUGGESTIONS_FETCH_REQUEST, skipLoading: true });
api(getState).get('/api/v1/suggestions').then(({ data: accounts }) => {
dispatch(importFetchedAccounts(accounts));
dispatch({ type: SUGGESTIONS_FETCH_SUCCESS, accounts, skipLoading: true });
}).catch(error => {
dispatch({ type: SUGGESTIONS_FETCH_FAIL, error, skipLoading: true, skipAlert: true });
});
};
}
export function fetchSuggestionsV2() {
return (dispatch, getState) => {
dispatch({ type: SUGGESTIONS_V2_FETCH_REQUEST, skipLoading: true });
api(getState).get('/api/v2/suggestions').then(({ data: suggestions }) => {
const accounts = suggestions.map(({ account }) => account);
dispatch(importFetchedAccounts(accounts));
dispatch({ type: SUGGESTIONS_V2_FETCH_SUCCESS, suggestions, skipLoading: true });
}).catch(error => {
dispatch({ type: SUGGESTIONS_V2_FETCH_FAIL, error, skipLoading: true, skipAlert: true });
});
};
}
export function fetchSuggestions() {
return (dispatch, getState) => {
dispatch(fetchSuggestionsRequest());
const state = getState();
const instance = state.get('instance');
const features = getFeatures(instance);
api(getState).get('/api/v1/suggestions').then(response => {
dispatch(importFetchedAccounts(response.data));
dispatch(fetchSuggestionsSuccess(response.data));
}).catch(error => dispatch(fetchSuggestionsFail(error)));
};
}
export function fetchSuggestionsRequest() {
return {
type: SUGGESTIONS_FETCH_REQUEST,
skipLoading: true,
};
}
export function fetchSuggestionsSuccess(accounts) {
return {
type: SUGGESTIONS_FETCH_SUCCESS,
accounts,
skipLoading: true,
};
}
export function fetchSuggestionsFail(error) {
return {
type: SUGGESTIONS_FETCH_FAIL,
error,
skipLoading: true,
skipAlert: true,
if (features.suggestionsV2) {
dispatch(fetchSuggestionsV2());
} else if (features.suggestions) {
dispatch(fetchSuggestionsV1());
} else {
// Do nothing
}
};
}

18
app/soapbox/actions/suggestions_v2.js
View file

@ -1,18 +0,0 @@
import api from '../api';
import { importFetchedAccount } from './importer';
export const SUGGESTIONS_V2_FETCH_REQUEST = 'SUGGESTIONS_V2_FETCH_REQUEST';
export const SUGGESTIONS_V2_FETCH_SUCCESS = 'SUGGESTIONS_V2_FETCH_SUCCESS';
export const SUGGESTIONS_V2_FETCH_FAIL = 'SUGGESTIONS_V2_FETCH_FAIL';
export function fetchSuggestions() {
return (dispatch, getState) => {
dispatch({ type: SUGGESTIONS_V2_FETCH_REQUEST, skipLoading: true });
api(getState).get('/api/v2/suggestions').then(({ data: suggestions }) => {
suggestions.forEach(({ account }) => dispatch(importFetchedAccount(account)));
dispatch({ type: SUGGESTIONS_V2_FETCH_SUCCESS, suggestions, skipLoading: true });
}).catch(error => {
dispatch({ type: SUGGESTIONS_V2_FETCH_FAIL, error, skipLoading: true, skipAlert: true });
});
};
}

2
app/soapbox/features/follow_recommendations/components/account.js
View file

@ -66,7 +66,7 @@ class Account extends ImmutablePureComponent {
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')}`}>
<Permalink className='account__display-name account__display-name--with-note' title={account.get('acct')} href={account.get('url')} to={`/@${account.get('acct')}`}>
<div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
<DisplayName account={account} />

60
app/soapbox/features/follow_recommendations/components/follow_recommendations_list.js Normal file
View file

@ -0,0 +1,60 @@
import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import ImmutablePureComponent from 'react-immutable-pure-component';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { FormattedMessage } from 'react-intl';
import { fetchSuggestions } from 'soapbox/actions/suggestions';
import Account from './account';
import LoadingIndicator from 'soapbox/components/loading_indicator';
const mapStateToProps = state => ({
suggestions: state.getIn(['suggestions', 'items']),
isLoading: state.getIn(['suggestions', 'isLoading']),
});
export default @connect(mapStateToProps)
class FollowRecommendationsList extends ImmutablePureComponent {
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));
}
}
render() {
const { suggestions, isLoading } = this.props;
if (isLoading) {
return (
<div className='column-list'>
<LoadingIndicator />
</div>
);
}
return (
<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.' />
</div>
)}
</div>
);
}
}

54
app/soapbox/features/follow_recommendations/index.js
View file

@ -1,42 +1,16 @@
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 'soapbox/actions/suggestions_v2';
import Column from 'soapbox/features/ui/components/column';
import Account from './components/account';
import Button from 'soapbox/components/button';
import FollowRecommendationsList from './components/follow_recommendations_list';
const mapStateToProps = state => ({
suggestions: state.getIn(['suggestions_v2', 'items']),
isLoading: state.getIn(['suggestions_v2', 'isLoading']),
});
export default @connect(mapStateToProps)
class FollowRecommendations extends ImmutablePureComponent {
export default class FollowRecommendations extends React.Component {
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 { router } = this.context;
@ -44,8 +18,6 @@ class FollowRecommendations extends ImmutablePureComponent {
}
render() {
const { suggestions, isLoading } = this.props;
return (
<Column>
<div className='scrollable follow-recommendations-container'>
@ -54,23 +26,13 @@ class FollowRecommendations extends ImmutablePureComponent {
<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 && (
<>
<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.' />
</div>
)}
</div>
<FollowRecommendationsList />
<div className='column-actions'>
<Button onClick={this.handleDone}><FormattedMessage id='follow_recommendations.done' defaultMessage='Done' /></Button>
</div>
</>
)}
<div className='column-actions'>
<Button onClick={this.handleDone}>
<FormattedMessage id='follow_recommendations.done' defaultMessage='Done' />
</Button>
</div>
</div>
</Column>
);

76
app/soapbox/features/home_timeline/index.js
View file

@ -4,20 +4,35 @@ import { expandHomeTimeline } from '../../actions/timelines';
import PropTypes from 'prop-types';
import StatusListContainer from '../ui/containers/status_list_container';
import Column from '../../components/column';
import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ColumnSettingsContainer from './containers/column_settings_container';
import HomeColumnHeader from '../../components/home_column_header';
import { Link } from 'react-router-dom';
import Button from 'soapbox/components/button';
import { OrderedSet as ImmutableOrderedSet } from 'immutable';
import { getFeatures } from 'soapbox/utils/features';
function FollowRecommendationsList() {
return import(/* webpackChunkName: "features/follow_recommendations" */'soapbox/features/follow_recommendations/components/follow_recommendations_list');
}
const messages = defineMessages({
title: { id: 'column.home', defaultMessage: 'Home' },
});
const mapStateToProps = state => ({
hasUnread: state.getIn(['timelines', 'home', 'unread']) > 0,
isPartial: state.getIn(['timelines', 'home', 'isPartial']),
siteTitle: state.getIn(['instance', 'title']),
});
const mapStateToProps = state => {
const instance = state.get('instance');
const features = getFeatures(instance);
return {
hasUnread: state.getIn(['timelines', 'home', 'unread']) > 0,
isPartial: state.getIn(['timelines', 'home', 'isPartial']),
siteTitle: state.getIn(['instance', 'title']),
isEmpty: state.getIn(['timelines', 'home', 'items'], ImmutableOrderedSet()).isEmpty(),
features,
};
};
export default @connect(mapStateToProps)
@injectIntl
@ -29,8 +44,14 @@ class HomeTimeline extends React.PureComponent {
hasUnread: PropTypes.bool,
isPartial: PropTypes.bool,
siteTitle: PropTypes.string,
isEmpty: PropTypes.bool,
features: PropTypes.object.isRequired,
};
state = {
done: false,
}
handleLoadMore = maxId => {
this.props.dispatch(expandHomeTimeline({ maxId }));
}
@ -68,20 +89,51 @@ class HomeTimeline extends React.PureComponent {
}
}
handleDone = e => {
this.props.dispatch(expandHomeTimeline());
this.setState({ done: true });
}
renderFollowRecommendations = () => {
return (
<div className='scrollable follow-recommendations-container'>
<div className='column-title'>
<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>
<BundleContainer fetchComponent={FollowRecommendationsList}>
{Component => <Component />}
</BundleContainer>
<div className='column-actions'>
<Button onClick={this.handleDone}>
<FormattedMessage id='follow_recommendations.done' defaultMessage='Done' />
</Button>
</div>
</div>
);
}
render() {
const { intl, hasUnread, siteTitle } = this.props;
const { intl, hasUnread, siteTitle, isEmpty, features } = this.props;
const { done } = this.state;
return (
<Column label={intl.formatMessage(messages.title)}>
<HomeColumnHeader activeItem='home' active={hasUnread}>
<ColumnSettingsContainer />
</HomeColumnHeader>
<StatusListContainer
scrollKey='home_timeline'
onLoadMore={this.handleLoadMore}
timelineId='home'
emptyMessage={<FormattedMessage id='empty_column.home' defaultMessage='Your home timeline is empty! Visit {public} to get started and meet other users.' values={{ public: <Link to='/timeline/local'><FormattedMessage id='empty_column.home.local_tab' defaultMessage='the {site_title} tab' values={{ site_title: siteTitle }} /></Link> }} />}
/>
{(features.suggestions && isEmpty && !done) ? (
this.renderFollowRecommendations()
) : (
<StatusListContainer
scrollKey='home_timeline'
onLoadMore={this.handleLoadMore}
timelineId='home'
emptyMessage={<FormattedMessage id='empty_column.home' defaultMessage='Your home timeline is empty! Visit {public} to get started and meet other users.' values={{ public: <Link to='/timeline/local'><FormattedMessage id='empty_column.home.local_tab' defaultMessage='the {site_title} tab' values={{ site_title: siteTitle }} /></Link> }} />}
/>
)}
</Column>
);
}

6
app/soapbox/features/ui/components/who_to_follow_panel.js
View file

@ -43,10 +43,10 @@ class WhoToFollowPanel extends ImmutablePureComponent {
</div>
<div className='wtf-panel__content'>
<div className='wtf-panel__list'>
{suggestions && suggestions.map(accountId => (
{suggestions && suggestions.map(suggestion => (
<AccountContainer
key={accountId}
id={accountId}
key={suggestion.get('account')}
id={suggestion.get('account')}
actionIcon='times'
actionTitle={intl.formatMessage(messages.dismissSuggestion)}
onActionClick={dismissSuggestion}

2
app/soapbox/pages/default_page.js
View file

@ -43,9 +43,9 @@ class DefaultPage extends ImmutablePureComponent {
<div className='columns-area__panels__pane columns-area__panels__pane--right'>
<div className='columns-area__panels__pane__inner'>
{me ? <FeaturesPanel key='features-panel' /> : <SignUpPanel key='sign-up-panel' />}
{showTrendsPanel && <TrendsPanel limit={3} key='trends-panel' />}
{showWhoToFollowPanel && <WhoToFollowPanel limit={5} key='wtf-panel' />}
{me ? <FeaturesPanel key='features-panel' /> : <SignUpPanel key='sign-up-panel' />}
<PromoPanel key='promo-panel' />
<LinkFooter key='link-footer' />
</div>

2
app/soapbox/pages/home_page.js
View file

@ -86,9 +86,9 @@ class HomePage extends ImmutablePureComponent {
<div className='columns-area__panels__pane columns-area__panels__pane--right'>
<div className='columns-area__panels__pane__inner'>
{me ? <FeaturesPanel key='features-panel' /> : <SignUpPanel key='sign-up-panel' />}
{showTrendsPanel && <TrendsPanel limit={3} key='trends-panel' />}
{showWhoToFollowPanel && <WhoToFollowPanel limit={5} key='wtf-panel' />}
{me ? <FeaturesPanel key='features-panel' /> : <SignUpPanel key='sign-up-panel' />}
<PromoPanel key='promo-panel' />
<LinkFooter key='link-footer' />
</div>

10
app/soapbox/pages/remote_instance_page.js
View file

@ -1,12 +1,9 @@
import React from 'react';
import { connect } from 'react-redux';
import ImmutablePureComponent from 'react-immutable-pure-component';
import WhoToFollowPanel from 'soapbox/features/ui/components/who_to_follow_panel';
import TrendsPanel from 'soapbox/features/ui/components/trends_panel';
import PromoPanel from 'soapbox/features/ui/components/promo_panel';
import FeaturesPanel from 'soapbox/features/ui/components/features_panel';
import LinkFooter from 'soapbox/features/ui/components/link_footer';
import { getFeatures } from 'soapbox/utils/features';
import InstanceInfoPanel from 'soapbox/features/ui/components/instance_info_panel';
import InstanceModerationPanel from 'soapbox/features/ui/components/instance_moderation_panel';
import { federationRestrictionsDisclosed } from 'soapbox/utils/state';
@ -15,12 +12,9 @@ import { isAdmin } from 'soapbox/utils/accounts';
const mapStateToProps = state => {
const me = state.get('me');
const account = state.getIn(['accounts', me]);
const features = getFeatures(state.get('instance'));
return {
me,
showTrendsPanel: features.trends,
showWhoToFollowPanel: features.suggestions,
disclosed: federationRestrictionsDisclosed(state),
isAdmin: isAdmin(account),
};
@ -30,7 +24,7 @@ export default @connect(mapStateToProps)
class RemoteInstancePage extends ImmutablePureComponent {
render() {
const { me, children, showTrendsPanel, showWhoToFollowPanel, params: { instance: host }, disclosed, isAdmin } = this.props;
const { me, children, params: { instance: host }, disclosed, isAdmin } = this.props;
return (
<div className='page'>
@ -52,8 +46,6 @@ class RemoteInstancePage extends ImmutablePureComponent {
<div className='columns-area__panels__pane columns-area__panels__pane--right'>
<div className='columns-area__panels__pane__inner'>
{showTrendsPanel && <TrendsPanel limit={3} key='trends-panel' />}
{showWhoToFollowPanel && <WhoToFollowPanel limit={5} key='wtf-panel' />}
{me && <FeaturesPanel key='features-panel' />}
<PromoPanel key='promo-panel' />
<LinkFooter key='link-footer' />

2
app/soapbox/reducers/index.js
View file

@ -31,7 +31,6 @@ import listAdder from './list_adder';
import filters from './filters';
import conversations from './conversations';
import suggestions from './suggestions';
import suggestions_v2 from './suggestions_v2';
import polls from './polls';
import identity_proofs from './identity_proofs';
import trends from './trends';
@ -89,7 +88,6 @@ const appReducer = combineReducers({
filters,
conversations,
suggestions,
suggestions_v2,
polls,
trends,
groups,

51
app/soapbox/reducers/suggestions.js
View file

@ -3,7 +3,12 @@ import {
SUGGESTIONS_FETCH_SUCCESS,
SUGGESTIONS_FETCH_FAIL,
SUGGESTIONS_DISMISS,
SUGGESTIONS_V2_FETCH_REQUEST,
SUGGESTIONS_V2_FETCH_SUCCESS,
SUGGESTIONS_V2_FETCH_FAIL,
} from '../actions/suggestions';
import { ACCOUNT_BLOCK_SUCCESS, ACCOUNT_MUTE_SUCCESS } from 'soapbox/actions/accounts';
import { DOMAIN_BLOCK_SUCCESS } from 'soapbox/actions/domain_blocks';
import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
const initialState = ImmutableMap({
@ -11,19 +16,55 @@ const initialState = ImmutableMap({
isLoading: false,
});
// Convert a v1 account into a v2 suggestion
const accountToSuggestion = account => {
return {
source: 'past_interactions',
account: account.id,
};
};
const importAccounts = (state, accounts) => {
return state.withMutations(state => {
state.set('items', fromJS(accounts.map(accountToSuggestion)));
state.set('isLoading', false);
});
};
const importSuggestions = (state, suggestions) => {
return state.withMutations(state => {
state.set('items', fromJS(suggestions.map(x => ({ ...x, account: x.account.id }))));
state.set('isLoading', false);
});
};
const dismissAccount = (state, accountId) => {
return state.update('items', list => list.filterNot(x => x.account === accountId));
};
const dismissAccounts = (state, accountIds) => {
return state.update('items', list => list.filterNot(x => accountIds.includes(x.account)));
};
export default function suggestionsReducer(state = initialState, action) {
switch(action.type) {
case SUGGESTIONS_FETCH_REQUEST:
case SUGGESTIONS_V2_FETCH_REQUEST:
return state.set('isLoading', true);
case SUGGESTIONS_FETCH_SUCCESS:
return state.withMutations(map => {
map.set('items', fromJS(action.accounts.map(x => x.id)));
map.set('isLoading', false);
});
return importAccounts(state, action.accounts);
case SUGGESTIONS_V2_FETCH_SUCCESS:
return importSuggestions(state, action.suggestions);
case SUGGESTIONS_FETCH_FAIL:
case SUGGESTIONS_V2_FETCH_FAIL:
return state.set('isLoading', false);
case SUGGESTIONS_DISMISS:
return state.update('items', list => list.filterNot(id => id === action.id));
return dismissAccount(state, action.id);
case ACCOUNT_BLOCK_SUCCESS:
case ACCOUNT_MUTE_SUCCESS:
return dismissAccount(state, action.relationship.id);
case DOMAIN_BLOCK_SUCCESS:
return dismissAccounts(state, action.accounts);
default:
return state;
}

37
app/soapbox/reducers/suggestions_v2.js
View file

@ -1,37 +0,0 @@
import {
SUGGESTIONS_V2_FETCH_REQUEST,
SUGGESTIONS_V2_FETCH_SUCCESS,
SUGGESTIONS_V2_FETCH_FAIL,
} from '../actions/suggestions_v2';
import { SUGGESTIONS_DISMISS } from '../actions/suggestions';
import { ACCOUNT_BLOCK_SUCCESS, ACCOUNT_MUTE_SUCCESS } from 'soapbox/actions/accounts';
import { DOMAIN_BLOCK_SUCCESS } from 'soapbox/actions/domain_blocks';
import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
const initialState = ImmutableMap({
items: ImmutableList(),
isLoading: false,
});
export default function suggestionsReducer(state = initialState, action) {
switch(action.type) {
case SUGGESTIONS_V2_FETCH_REQUEST:
return state.set('isLoading', true);
case SUGGESTIONS_V2_FETCH_SUCCESS:
return state.withMutations(map => {
map.set('items', fromJS(action.suggestions.map(x => ({ ...x, account: x.account.id }))));
map.set('isLoading', false);
});
case SUGGESTIONS_V2_FETCH_FAIL:
return state.set('isLoading', false);
case SUGGESTIONS_DISMISS:
return state.update('items', list => list.filterNot(x => x.account === action.id));
case ACCOUNT_BLOCK_SUCCESS:
case ACCOUNT_MUTE_SUCCESS:
return state.update('items', list => list.filterNot(x => x.account === action.relationship.id));
case DOMAIN_BLOCK_SUCCESS:
return state.update('items', list => list.filterNot(x => action.accounts.includes(x.account)));
default:
return state;
}
}

4
app/styles/components/columns.scss
View file

@ -810,3 +810,7 @@
width: auto;
}
}
.column-list {
position: relative;
}