From d9022884c6c4e066b1e6ee8d9c07c220c031454e Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 24 Jan 2017 04:12:10 +0100 Subject: [PATCH 1/8] Smarter infinite scroll --- .../components/actions/accounts.jsx | 11 ++++-- .../javascripts/components/actions/cards.jsx | 2 +- .../components/actions/timelines.jsx | 7 +++- .../components/components/status_list.jsx | 37 ++++++++++++++----- .../features/account_timeline/index.jsx | 8 ++-- .../ui/containers/status_list_container.jsx | 3 +- .../components/reducers/timelines.jsx | 30 ++++++++++++--- 7 files changed, 74 insertions(+), 24 deletions(-) diff --git a/app/assets/javascripts/components/actions/accounts.jsx b/app/assets/javascripts/components/actions/accounts.jsx index 235f29194..0be05034e 100644 --- a/app/assets/javascripts/components/actions/accounts.jsx +++ b/app/assets/javascripts/components/actions/accounts.jsx @@ -80,7 +80,7 @@ export function fetchAccount(id) { export function fetchAccountTimeline(id, replace = false) { return (dispatch, getState) => { - const ids = getState().getIn(['timelines', 'accounts_timelines', id], Immutable.List()); + const ids = getState().getIn(['timelines', 'accounts_timelines', id, 'items'], Immutable.List()); const newestId = ids.size > 0 ? ids.first() : null; let params = ''; @@ -103,11 +103,16 @@ export function fetchAccountTimeline(id, replace = false) { export function expandAccountTimeline(id) { return (dispatch, getState) => { - const lastId = getState().getIn(['timelines', 'accounts_timelines', id], Immutable.List()).last(); + const lastId = getState().getIn(['timelines', 'accounts_timelines', id, 'items'], Immutable.List()).last(); dispatch(expandAccountTimelineRequest(id)); - api(getState).get(`/api/v1/accounts/${id}/statuses?max_id=${lastId}`).then(response => { + api(getState).get(`/api/v1/accounts/${id}/statuses`, { + params: { + limit: 10, + max_id: lastId + } + }).then(response => { dispatch(expandAccountTimelineSuccess(id, response.data)); }).catch(error => { dispatch(expandAccountTimelineFail(id, error)); diff --git a/app/assets/javascripts/components/actions/cards.jsx b/app/assets/javascripts/components/actions/cards.jsx index 845d15e93..503c2bfeb 100644 --- a/app/assets/javascripts/components/actions/cards.jsx +++ b/app/assets/javascripts/components/actions/cards.jsx @@ -9,7 +9,7 @@ export function fetchStatusCard(id) { dispatch(fetchStatusCardRequest(id)); api(getState).get(`/api/v1/statuses/${id}/card`).then(response => { - if (!response.data.url) { + if (!response.data.url || !response.data.title || !response.data.description) { return; } diff --git a/app/assets/javascripts/components/actions/timelines.jsx b/app/assets/javascripts/components/actions/timelines.jsx index 72e949e87..1d7e0547c 100644 --- a/app/assets/javascripts/components/actions/timelines.jsx +++ b/app/assets/javascripts/components/actions/timelines.jsx @@ -115,7 +115,12 @@ export function expandTimeline(timeline, id = null) { path = `${path}/${id}` } - api(getState).get(`/api/v1/timelines/${path}?max_id=${lastId}`).then(response => { + api(getState).get(`/api/v1/timelines/${path}`, { + params: { + limit: 10, + max_id: lastId + } + }).then(response => { dispatch(expandTimelineSuccess(timeline, response.data)); }).catch(error => { dispatch(expandTimelineFail(timeline, error)); diff --git a/app/assets/javascripts/components/components/status_list.jsx b/app/assets/javascripts/components/components/status_list.jsx index e0a73435f..69cc013f2 100644 --- a/app/assets/javascripts/components/components/status_list.jsx +++ b/app/assets/javascripts/components/components/status_list.jsx @@ -11,7 +11,8 @@ const StatusList = React.createClass({ onScrollToBottom: React.PropTypes.func, onScrollToTop: React.PropTypes.func, onScroll: React.PropTypes.func, - trackScroll: React.PropTypes.bool + trackScroll: React.PropTypes.bool, + isLoading: React.PropTypes.bool }, getDefaultProps () { @@ -24,10 +25,10 @@ const StatusList = React.createClass({ handleScroll (e) { const { scrollTop, scrollHeight, clientHeight } = e.target; - + const offset = scrollHeight - scrollTop - clientHeight; this._oldScrollPosition = scrollHeight - scrollTop; - if (scrollTop === scrollHeight - clientHeight && this.props.onScrollToBottom) { + if (250 > offset && this.props.onScrollToBottom && !this.props.isLoading) { this.props.onScrollToBottom(); } else if (scrollTop < 100 && this.props.onScrollToTop) { this.props.onScrollToTop(); @@ -36,21 +37,37 @@ const StatusList = React.createClass({ } }, - componentDidUpdate (prevProps) { - if (prevProps.statusIds.size < this.props.statusIds.size && prevProps.statusIds.first() !== this.props.statusIds.first() && this._oldScrollPosition) { - const node = ReactDOM.findDOMNode(this); + componentDidMount () { + this.attachScrollListener(); + }, - if (node.scrollTop > 0) { - node.scrollTop = node.scrollHeight - this._oldScrollPosition; - } + componentDidUpdate (prevProps) { + if (this.node.scrollTop > 0 && (prevProps.statusIds.size < this.props.statusIds.size && prevProps.statusIds.first() !== this.props.statusIds.first() && !!this._oldScrollPosition)) { + this.node.scrollTop = this.node.scrollHeight - this._oldScrollPosition; } }, + componentWillUnmount () { + this.detachScrollListener(); + }, + + attachScrollListener () { + this.node.addEventListener('scroll', this.handleScroll); + }, + + detachScrollListener () { + this.node.removeEventListener('scroll', this.handleScroll); + }, + + setRef (c) { + this.node = c; + }, + render () { const { statusIds, onScrollToBottom, trackScroll } = this.props; const scrollableArea = ( -
+
{statusIds.map((statusId) => { return ; diff --git a/app/assets/javascripts/components/features/account_timeline/index.jsx b/app/assets/javascripts/components/features/account_timeline/index.jsx index 4a66dbbf5..5c09839f7 100644 --- a/app/assets/javascripts/components/features/account_timeline/index.jsx +++ b/app/assets/javascripts/components/features/account_timeline/index.jsx @@ -9,7 +9,8 @@ import StatusList from '../../components/status_list'; import LoadingIndicator from '../../components/loading_indicator'; const mapStateToProps = (state, props) => ({ - statusIds: state.getIn(['timelines', 'accounts_timelines', Number(props.params.accountId)]), + statusIds: state.getIn(['timelines', 'accounts_timelines', Number(props.params.accountId), 'items']), + isLoading: state.getIn(['timelines', 'accounts_timelines', Number(props.params.accountId), 'isLoading']), me: state.getIn(['meta', 'me']) }); @@ -19,6 +20,7 @@ const AccountTimeline = React.createClass({ params: React.PropTypes.object.isRequired, dispatch: React.PropTypes.func.isRequired, statusIds: ImmutablePropTypes.list, + isLoading: React.PropTypes.bool, me: React.PropTypes.number.isRequired }, @@ -39,13 +41,13 @@ const AccountTimeline = React.createClass({ }, render () { - const { statusIds, me } = this.props; + const { statusIds, isLoading, me } = this.props; if (!statusIds) { return ; } - return + return } }); diff --git a/app/assets/javascripts/components/features/ui/containers/status_list_container.jsx b/app/assets/javascripts/components/features/ui/containers/status_list_container.jsx index ffb6f6e79..8af7b0c3c 100644 --- a/app/assets/javascripts/components/features/ui/containers/status_list_container.jsx +++ b/app/assets/javascripts/components/features/ui/containers/status_list_container.jsx @@ -33,7 +33,8 @@ const getStatusIds = createSelector([ })); const mapStateToProps = (state, props) => ({ - statusIds: getStatusIds(state, props) + statusIds: getStatusIds(state, props), + isLoading: state.getIn(['timelines', props.type, 'isLoading'], true) }); const mapDispatchToProps = (dispatch, { type, id }) => ({ diff --git a/app/assets/javascripts/components/reducers/timelines.jsx b/app/assets/javascripts/components/reducers/timelines.jsx index c5e3a253f..6b1093651 100644 --- a/app/assets/javascripts/components/reducers/timelines.jsx +++ b/app/assets/javascripts/components/reducers/timelines.jsx @@ -4,6 +4,7 @@ import { TIMELINE_UPDATE, TIMELINE_DELETE, TIMELINE_EXPAND_SUCCESS, + TIMELINE_EXPAND_REQUEST, TIMELINE_SCROLL_TOP } from '../actions/timelines'; import { @@ -13,37 +14,41 @@ import { UNFAVOURITE_SUCCESS } from '../actions/interactions'; import { - ACCOUNT_FETCH_SUCCESS, + ACCOUNT_TIMELINE_FETCH_REQUEST, ACCOUNT_TIMELINE_FETCH_SUCCESS, + ACCOUNT_TIMELINE_EXPAND_REQUEST, ACCOUNT_TIMELINE_EXPAND_SUCCESS, ACCOUNT_BLOCK_SUCCESS } from '../actions/accounts'; import { - STATUS_FETCH_SUCCESS, CONTEXT_FETCH_SUCCESS } from '../actions/statuses'; import Immutable from 'immutable'; const initialState = Immutable.Map({ home: Immutable.Map({ + isLoading: false, loaded: false, top: true, items: Immutable.List() }), mentions: Immutable.Map({ + isLoading: false, loaded: false, top: true, items: Immutable.List() }), public: Immutable.Map({ + isLoading: false, loaded: false, top: true, items: Immutable.List() }), tag: Immutable.Map({ + isLoading: false, id: null, loaded: false, top: true, @@ -82,6 +87,7 @@ const normalizeTimeline = (state, timeline, statuses, replace = false) => { }); state = state.setIn([timeline, 'loaded'], true); + state = state.setIn([timeline, 'isLoading'], false); return state.updateIn([timeline, 'items'], Immutable.List(), list => (loaded ? list.unshift(...ids) : ids)); }; @@ -94,6 +100,8 @@ const appendNormalizedTimeline = (state, timeline, statuses) => { moreIds = moreIds.set(i, status.get('id')); }); + state = state.setIn([timeline, 'isLoading'], false); + return state.updateIn([timeline, 'items'], Immutable.List(), list => list.push(...moreIds)); }; @@ -105,7 +113,10 @@ const normalizeAccountTimeline = (state, accountId, statuses, replace = false) = ids = ids.set(i, status.get('id')); }); - return state.updateIn(['accounts_timelines', accountId], Immutable.List([]), list => (replace ? ids : list.unshift(...ids))); + return state.updateIn(['accounts_timelines', accountId], Immutable.Map(), map => map + .set('isLoading', false) + .set('loaded', true) + .update('items', Immutable.List(), list => (replace ? ids : list.unshift(...ids)))); }; const appendNormalizedAccountTimeline = (state, accountId, statuses) => { @@ -116,7 +127,9 @@ const appendNormalizedAccountTimeline = (state, accountId, statuses) => { moreIds = moreIds.set(i, status.get('id')); }); - return state.updateIn(['accounts_timelines', accountId], Immutable.List([]), list => list.push(...moreIds)); + return state.updateIn(['accounts_timelines', accountId], Immutable.Map(), map => map + .set('isLoading', false) + .update('items', list => list.push(...moreIds))); }; const updateTimeline = (state, timeline, status, references) => { @@ -157,7 +170,7 @@ const deleteStatus = (state, id, accountId, references, reblogOf) => { }); // Remove references from account timelines - state = state.updateIn(['accounts_timelines', accountId], Immutable.List([]), list => list.filterNot(item => item === id)); + state = state.updateIn(['accounts_timelines', accountId, 'items'], Immutable.List([]), list => list.filterNot(item => item === id)); // Remove references from context state.getIn(['descendants', id], Immutable.List()).forEach(descendantId => { @@ -207,8 +220,11 @@ const resetTimeline = (state, timeline, id) => { if (timeline === 'tag' && state.getIn([timeline, 'id']) !== id) { state = state.update(timeline, map => map .set('id', id) + .set('isLoading', true) .set('loaded', false) .update('items', list => list.clear())); + } else { + state = state.setIn([timeline, 'isLoading'], true); } return state; @@ -217,6 +233,7 @@ const resetTimeline = (state, timeline, id) => { export default function timelines(state = initialState, action) { switch(action.type) { case TIMELINE_REFRESH_REQUEST: + case TIMELINE_EXPAND_REQUEST: return resetTimeline(state, action.timeline, action.id); case TIMELINE_REFRESH_SUCCESS: return normalizeTimeline(state, action.timeline, Immutable.fromJS(action.statuses)); @@ -228,6 +245,9 @@ export default function timelines(state = initialState, action) { return deleteStatus(state, action.id, action.accountId, action.references, action.reblogOf); case CONTEXT_FETCH_SUCCESS: return normalizeContext(state, action.id, Immutable.fromJS(action.ancestors), Immutable.fromJS(action.descendants)); + case ACCOUNT_TIMELINE_FETCH_REQUEST: + case ACCOUNT_TIMELINE_EXPAND_REQUEST: + return state.updateIn(['accounts_timelines', action.id], Immutable.Map(), map => map.set('isLoading', true)); case ACCOUNT_TIMELINE_FETCH_SUCCESS: return normalizeAccountTimeline(state, action.id, Immutable.fromJS(action.statuses), action.replace); case ACCOUNT_TIMELINE_EXPAND_SUCCESS: From 1f5792c83475aed785cdd8eb148aa4fdc53b5671 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 24 Jan 2017 04:22:10 +0100 Subject: [PATCH 2/8] API now respects ?limit param as long as it's within 2x default limit --- app/controllers/api/v1/accounts_controller.rb | 15 +++++++-------- app/controllers/api/v1/blocks_controller.rb | 4 ++-- app/controllers/api/v1/favourites_controller.rb | 4 ++-- .../api/v1/notifications_controller.rb | 4 ++-- app/controllers/api/v1/statuses_controller.rb | 8 ++++---- app/controllers/api/v1/timelines_controller.rb | 16 ++++++++-------- app/controllers/api_controller.rb | 5 +++++ 7 files changed, 30 insertions(+), 26 deletions(-) diff --git a/app/controllers/api/v1/accounts_controller.rb b/app/controllers/api/v1/accounts_controller.rb index 234844ed7..a43619193 100644 --- a/app/controllers/api/v1/accounts_controller.rb +++ b/app/controllers/api/v1/accounts_controller.rb @@ -16,13 +16,13 @@ class Api::V1::AccountsController < ApiController end def following - results = Follow.where(account: @account).paginate_by_max_id(DEFAULT_ACCOUNTS_LIMIT, params[:max_id], params[:since_id]) + results = Follow.where(account: @account).paginate_by_max_id(limit_param(DEFAULT_ACCOUNTS_LIMIT), params[:max_id], params[:since_id]) accounts = Account.where(id: results.map(&:target_account_id)).map { |a| [a.id, a] }.to_h @accounts = results.map { |f| accounts[f.target_account_id] } set_account_counters_maps(@accounts) - next_path = following_api_v1_account_url(max_id: results.last.id) if results.size == DEFAULT_ACCOUNTS_LIMIT + next_path = following_api_v1_account_url(max_id: results.last.id) if results.size == limit_param(DEFAULT_ACCOUNTS_LIMIT) prev_path = following_api_v1_account_url(since_id: results.first.id) unless results.empty? set_pagination_headers(next_path, prev_path) @@ -31,13 +31,13 @@ class Api::V1::AccountsController < ApiController end def followers - results = Follow.where(target_account: @account).paginate_by_max_id(DEFAULT_ACCOUNTS_LIMIT, params[:max_id], params[:since_id]) + results = Follow.where(target_account: @account).paginate_by_max_id(limit_param(DEFAULT_ACCOUNTS_LIMIT), params[:max_id], params[:since_id]) accounts = Account.where(id: results.map(&:account_id)).map { |a| [a.id, a] }.to_h @accounts = results.map { |f| accounts[f.account_id] } set_account_counters_maps(@accounts) - next_path = followers_api_v1_account_url(max_id: results.last.id) if results.size == DEFAULT_ACCOUNTS_LIMIT + next_path = followers_api_v1_account_url(max_id: results.last.id) if results.size == limit_param(DEFAULT_ACCOUNTS_LIMIT) prev_path = followers_api_v1_account_url(since_id: results.first.id) unless results.empty? set_pagination_headers(next_path, prev_path) @@ -46,13 +46,13 @@ class Api::V1::AccountsController < ApiController end def statuses - @statuses = @account.statuses.permitted_for(@account, current_account).paginate_by_max_id(DEFAULT_STATUSES_LIMIT, params[:max_id], params[:since_id]) + @statuses = @account.statuses.permitted_for(@account, current_account).paginate_by_max_id(limit_param(DEFAULT_STATUSES_LIMIT), params[:max_id], params[:since_id]) @statuses = cache_collection(@statuses, Status) set_maps(@statuses) set_counters_maps(@statuses) - next_path = statuses_api_v1_account_url(max_id: @statuses.last.id) if @statuses.size == DEFAULT_STATUSES_LIMIT + next_path = statuses_api_v1_account_url(max_id: @statuses.last.id) if @statuses.size == limit_param(DEFAULT_STATUSES_LIMIT) prev_path = statuses_api_v1_account_url(since_id: @statuses.first.id) unless @statuses.empty? set_pagination_headers(next_path, prev_path) @@ -98,8 +98,7 @@ class Api::V1::AccountsController < ApiController end def search - limit = params[:limit] ? [DEFAULT_ACCOUNTS_LIMIT, params[:limit].to_i].min : DEFAULT_ACCOUNTS_LIMIT - @accounts = SearchService.new.call(params[:q], limit, params[:resolve] == 'true') + @accounts = SearchService.new.call(params[:q], limit_param(DEFAULT_ACCOUNTS_LIMIT), params[:resolve] == 'true') set_account_counters_maps(@accounts) unless @accounts.nil? diff --git a/app/controllers/api/v1/blocks_controller.rb b/app/controllers/api/v1/blocks_controller.rb index 8629242ab..b9816e052 100644 --- a/app/controllers/api/v1/blocks_controller.rb +++ b/app/controllers/api/v1/blocks_controller.rb @@ -7,13 +7,13 @@ class Api::V1::BlocksController < ApiController respond_to :json def index - results = Block.where(account: current_account).paginate_by_max_id(DEFAULT_ACCOUNTS_LIMIT, params[:max_id], params[:since_id]) + results = Block.where(account: current_account).paginate_by_max_id(limit_param(DEFAULT_ACCOUNTS_LIMIT), params[:max_id], params[:since_id]) accounts = Account.where(id: results.map(&:target_account_id)).map { |a| [a.id, a] }.to_h @accounts = results.map { |f| accounts[f.target_account_id] } set_account_counters_maps(@accounts) - next_path = api_v1_blocks_url(max_id: results.last.id) if results.size == DEFAULT_ACCOUNTS_LIMIT + next_path = api_v1_blocks_url(max_id: results.last.id) if results.size == limit_param(DEFAULT_ACCOUNTS_LIMIT) prev_path = api_v1_blocks_url(since_id: results.first.id) unless results.empty? set_pagination_headers(next_path, prev_path) diff --git a/app/controllers/api/v1/favourites_controller.rb b/app/controllers/api/v1/favourites_controller.rb index ea799fd55..ef0a4854a 100644 --- a/app/controllers/api/v1/favourites_controller.rb +++ b/app/controllers/api/v1/favourites_controller.rb @@ -7,13 +7,13 @@ class Api::V1::FavouritesController < ApiController respond_to :json def index - results = Favourite.where(account: current_account).paginate_by_max_id(DEFAULT_STATUSES_LIMIT, params[:max_id], params[:since_id]) + results = Favourite.where(account: current_account).paginate_by_max_id(limit_param(DEFAULT_STATUSES_LIMIT), params[:max_id], params[:since_id]) @statuses = cache_collection(Status.where(id: results.map(&:status_id)), Status) set_maps(@statuses) set_counters_maps(@statuses) - next_path = api_v1_favourites_url(max_id: results.last.id) if results.size == DEFAULT_STATUSES_LIMIT + next_path = api_v1_favourites_url(max_id: results.last.id) if results.size == limit_param(DEFAULT_STATUSES_LIMIT) prev_path = api_v1_favourites_url(since_id: results.first.id) unless results.empty? set_pagination_headers(next_path, prev_path) diff --git a/app/controllers/api/v1/notifications_controller.rb b/app/controllers/api/v1/notifications_controller.rb index ee12446d8..157a88e14 100644 --- a/app/controllers/api/v1/notifications_controller.rb +++ b/app/controllers/api/v1/notifications_controller.rb @@ -7,7 +7,7 @@ class Api::V1::NotificationsController < ApiController respond_to :json def index - @notifications = Notification.where(account: current_account).browserable.paginate_by_max_id(20, params[:max_id], params[:since_id]) + @notifications = Notification.where(account: current_account).browserable.paginate_by_max_id(limit_param(15), params[:max_id], params[:since_id]) @notifications = cache_collection(@notifications, Notification) statuses = @notifications.select { |n| !n.target_status.nil? }.map(&:target_status) @@ -15,7 +15,7 @@ class Api::V1::NotificationsController < ApiController set_counters_maps(statuses) set_account_counters_maps(@notifications.map(&:from_account)) - next_path = api_v1_notifications_url(max_id: @notifications.last.id) if @notifications.size == 20 + next_path = api_v1_notifications_url(max_id: @notifications.last.id) if @notifications.size == limit_param(15) prev_path = api_v1_notifications_url(since_id: @notifications.first.id) unless @notifications.empty? set_pagination_headers(next_path, prev_path) diff --git a/app/controllers/api/v1/statuses_controller.rb b/app/controllers/api/v1/statuses_controller.rb index da87ebbad..c8924ceda 100644 --- a/app/controllers/api/v1/statuses_controller.rb +++ b/app/controllers/api/v1/statuses_controller.rb @@ -27,13 +27,13 @@ class Api::V1::StatusesController < ApiController end def reblogged_by - results = @status.reblogs.paginate_by_max_id(DEFAULT_ACCOUNTS_LIMIT, params[:max_id], params[:since_id]) + results = @status.reblogs.paginate_by_max_id(limit_param(DEFAULT_ACCOUNTS_LIMIT), params[:max_id], params[:since_id]) accounts = Account.where(id: results.map(&:account_id)).map { |a| [a.id, a] }.to_h @accounts = results.map { |r| accounts[r.account_id] } set_account_counters_maps(@accounts) - next_path = reblogged_by_api_v1_status_url(max_id: results.last.id) if results.size == DEFAULT_ACCOUNTS_LIMIT + next_path = reblogged_by_api_v1_status_url(max_id: results.last.id) if results.size == limit_param(DEFAULT_ACCOUNTS_LIMIT) prev_path = reblogged_by_api_v1_status_url(since_id: results.first.id) unless results.empty? set_pagination_headers(next_path, prev_path) @@ -42,13 +42,13 @@ class Api::V1::StatusesController < ApiController end def favourited_by - results = @status.favourites.paginate_by_max_id(DEFAULT_ACCOUNTS_LIMIT, params[:max_id], params[:since_id]) + results = @status.favourites.paginate_by_max_id(limit_param(DEFAULT_ACCOUNTS_LIMIT), params[:max_id], params[:since_id]) accounts = Account.where(id: results.map(&:account_id)).map { |a| [a.id, a] }.to_h @accounts = results.map { |f| accounts[f.account_id] } set_account_counters_maps(@accounts) - next_path = favourited_by_api_v1_status_url(max_id: results.last.id) if results.size == DEFAULT_ACCOUNTS_LIMIT + next_path = favourited_by_api_v1_status_url(max_id: results.last.id) if results.size == limit_param(DEFAULT_ACCOUNTS_LIMIT) prev_path = favourited_by_api_v1_status_url(since_id: results.first.id) unless results.empty? set_pagination_headers(next_path, prev_path) diff --git a/app/controllers/api/v1/timelines_controller.rb b/app/controllers/api/v1/timelines_controller.rb index 9727797e5..5042550db 100644 --- a/app/controllers/api/v1/timelines_controller.rb +++ b/app/controllers/api/v1/timelines_controller.rb @@ -7,14 +7,14 @@ class Api::V1::TimelinesController < ApiController respond_to :json def home - @statuses = Feed.new(:home, current_account).get(DEFAULT_STATUSES_LIMIT, params[:max_id], params[:since_id]) + @statuses = Feed.new(:home, current_account).get(limit_param(DEFAULT_STATUSES_LIMIT), params[:max_id], params[:since_id]) @statuses = cache_collection(@statuses) set_maps(@statuses) set_counters_maps(@statuses) set_account_counters_maps(@statuses.flat_map { |s| [s.account, s.reblog? ? s.reblog.account : nil] }.compact.uniq) - next_path = api_v1_home_timeline_url(max_id: @statuses.last.id) if @statuses.size == DEFAULT_STATUSES_LIMIT + next_path = api_v1_home_timeline_url(max_id: @statuses.last.id) if @statuses.size == limit_param(DEFAULT_STATUSES_LIMIT) prev_path = api_v1_home_timeline_url(since_id: @statuses.first.id) unless @statuses.empty? set_pagination_headers(next_path, prev_path) @@ -23,14 +23,14 @@ class Api::V1::TimelinesController < ApiController end def mentions - @statuses = Feed.new(:mentions, current_account).get(DEFAULT_STATUSES_LIMIT, params[:max_id], params[:since_id]) + @statuses = Feed.new(:mentions, current_account).get(limit_param(DEFAULT_STATUSES_LIMIT), params[:max_id], params[:since_id]) @statuses = cache_collection(@statuses) set_maps(@statuses) set_counters_maps(@statuses) set_account_counters_maps(@statuses.flat_map { |s| [s.account, s.reblog? ? s.reblog.account : nil] }.compact.uniq) - next_path = api_v1_mentions_timeline_url(max_id: @statuses.last.id) if @statuses.size == DEFAULT_STATUSES_LIMIT + next_path = api_v1_mentions_timeline_url(max_id: @statuses.last.id) if @statuses.size == limit_param(DEFAULT_STATUSES_LIMIT) prev_path = api_v1_mentions_timeline_url(since_id: @statuses.first.id) unless @statuses.empty? set_pagination_headers(next_path, prev_path) @@ -39,14 +39,14 @@ class Api::V1::TimelinesController < ApiController end def public - @statuses = Status.as_public_timeline(current_account).paginate_by_max_id(DEFAULT_STATUSES_LIMIT, params[:max_id], params[:since_id]) + @statuses = Status.as_public_timeline(current_account).paginate_by_max_id(limit_param(DEFAULT_STATUSES_LIMIT), params[:max_id], params[:since_id]) @statuses = cache_collection(@statuses) set_maps(@statuses) set_counters_maps(@statuses) set_account_counters_maps(@statuses.flat_map { |s| [s.account, s.reblog? ? s.reblog.account : nil] }.compact.uniq) - next_path = api_v1_public_timeline_url(max_id: @statuses.last.id) if @statuses.size == DEFAULT_STATUSES_LIMIT + next_path = api_v1_public_timeline_url(max_id: @statuses.last.id) if @statuses.size == limit_param(DEFAULT_STATUSES_LIMIT) prev_path = api_v1_public_timeline_url(since_id: @statuses.first.id) unless @statuses.empty? set_pagination_headers(next_path, prev_path) @@ -56,14 +56,14 @@ class Api::V1::TimelinesController < ApiController def tag @tag = Tag.find_by(name: params[:id].downcase) - @statuses = @tag.nil? ? [] : Status.as_tag_timeline(@tag, current_account).paginate_by_max_id(DEFAULT_STATUSES_LIMIT, params[:max_id], params[:since_id]) + @statuses = @tag.nil? ? [] : Status.as_tag_timeline(@tag, current_account).paginate_by_max_id(limit_param(DEFAULT_STATUSES_LIMIT), params[:max_id], params[:since_id]) @statuses = cache_collection(@statuses) set_maps(@statuses) set_counters_maps(@statuses) set_account_counters_maps(@statuses.flat_map { |s| [s.account, s.reblog? ? s.reblog.account : nil] }.compact.uniq) - next_path = api_v1_hashtag_timeline_url(params[:id], max_id: @statuses.last.id) if @statuses.size == DEFAULT_STATUSES_LIMIT + next_path = api_v1_hashtag_timeline_url(params[:id], max_id: @statuses.last.id) if @statuses.size == limit_param(DEFAULT_STATUSES_LIMIT) prev_path = api_v1_hashtag_timeline_url(params[:id], since_id: @statuses.first.id) unless @statuses.empty? set_pagination_headers(next_path, prev_path) diff --git a/app/controllers/api_controller.rb b/app/controllers/api_controller.rb index 00528d94d..5d2bd9a22 100644 --- a/app/controllers/api_controller.rb +++ b/app/controllers/api_controller.rb @@ -62,6 +62,11 @@ class ApiController < ApplicationController response.headers['Link'] = LinkHeader.new(links) end + def limit_param(default_limit) + return default_limit unless params[:limit] + [params[:limit].to_i.abs, default_limit * 2].min + end + def current_resource_owner @current_user ||= User.find(doorkeeper_token.resource_owner_id) if doorkeeper_token end From 21c209636d12ea601379e7abd3d370ad0d22ea18 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 24 Jan 2017 13:04:12 +0100 Subject: [PATCH 3/8] Set isLoading false on timelines when request fails --- .../components/actions/timelines.jsx | 7 ++- .../features/notifications/index.jsx | 1 + .../components/reducers/timelines.jsx | 62 +++++++++++-------- 3 files changed, 43 insertions(+), 27 deletions(-) diff --git a/app/assets/javascripts/components/actions/timelines.jsx b/app/assets/javascripts/components/actions/timelines.jsx index 1d7e0547c..29a060e87 100644 --- a/app/assets/javascripts/components/actions/timelines.jsx +++ b/app/assets/javascripts/components/actions/timelines.jsx @@ -63,6 +63,10 @@ export function refreshTimelineRequest(timeline, id, skipLoading) { export function refreshTimeline(timeline, id = null) { return function (dispatch, getState) { + if (getState().getIn(['timelines', timeline, 'isLoading'])) { + return; + } + const ids = getState().getIn(['timelines', timeline, 'items'], Immutable.List()); const newestId = ids.size > 0 ? ids.first() : null; @@ -102,8 +106,9 @@ export function expandTimeline(timeline, id = null) { return (dispatch, getState) => { const lastId = getState().getIn(['timelines', timeline, 'items'], Immutable.List()).last(); - if (!lastId) { + if (!lastId || getState().getIn(['timelines', timeline, 'isLoading'])) { // If timeline is empty, don't try to load older posts since there are none + // Also if already loading return; } diff --git a/app/assets/javascripts/components/features/notifications/index.jsx b/app/assets/javascripts/components/features/notifications/index.jsx index d243f178f..366d8f5e9 100644 --- a/app/assets/javascripts/components/features/notifications/index.jsx +++ b/app/assets/javascripts/components/features/notifications/index.jsx @@ -62,6 +62,7 @@ const Notifications = React.createClass({ if (trackScroll) { return ( + {scrollableArea} diff --git a/app/assets/javascripts/components/reducers/timelines.jsx b/app/assets/javascripts/components/reducers/timelines.jsx index 6b1093651..6f2d26dcb 100644 --- a/app/assets/javascripts/components/reducers/timelines.jsx +++ b/app/assets/javascripts/components/reducers/timelines.jsx @@ -1,10 +1,12 @@ import { TIMELINE_REFRESH_REQUEST, TIMELINE_REFRESH_SUCCESS, + TIMELINE_REFRESH_FAIL, TIMELINE_UPDATE, TIMELINE_DELETE, TIMELINE_EXPAND_SUCCESS, TIMELINE_EXPAND_REQUEST, + TIMELINE_EXPAND_FAIL, TIMELINE_SCROLL_TOP } from '../actions/timelines'; import { @@ -16,8 +18,10 @@ import { import { ACCOUNT_TIMELINE_FETCH_REQUEST, ACCOUNT_TIMELINE_FETCH_SUCCESS, + ACCOUNT_TIMELINE_FETCH_FAIL, ACCOUNT_TIMELINE_EXPAND_REQUEST, ACCOUNT_TIMELINE_EXPAND_SUCCESS, + ACCOUNT_TIMELINE_EXPAND_FAIL, ACCOUNT_BLOCK_SUCCESS } from '../actions/accounts'; import { @@ -232,31 +236,37 @@ const resetTimeline = (state, timeline, id) => { export default function timelines(state = initialState, action) { switch(action.type) { - case TIMELINE_REFRESH_REQUEST: - case TIMELINE_EXPAND_REQUEST: - return resetTimeline(state, action.timeline, action.id); - case TIMELINE_REFRESH_SUCCESS: - return normalizeTimeline(state, action.timeline, Immutable.fromJS(action.statuses)); - case TIMELINE_EXPAND_SUCCESS: - return appendNormalizedTimeline(state, action.timeline, Immutable.fromJS(action.statuses)); - case TIMELINE_UPDATE: - return updateTimeline(state, action.timeline, Immutable.fromJS(action.status), action.references); - case TIMELINE_DELETE: - return deleteStatus(state, action.id, action.accountId, action.references, action.reblogOf); - case CONTEXT_FETCH_SUCCESS: - return normalizeContext(state, action.id, Immutable.fromJS(action.ancestors), Immutable.fromJS(action.descendants)); - case ACCOUNT_TIMELINE_FETCH_REQUEST: - case ACCOUNT_TIMELINE_EXPAND_REQUEST: - return state.updateIn(['accounts_timelines', action.id], Immutable.Map(), map => map.set('isLoading', true)); - case ACCOUNT_TIMELINE_FETCH_SUCCESS: - return normalizeAccountTimeline(state, action.id, Immutable.fromJS(action.statuses), action.replace); - case ACCOUNT_TIMELINE_EXPAND_SUCCESS: - return appendNormalizedAccountTimeline(state, action.id, Immutable.fromJS(action.statuses)); - case ACCOUNT_BLOCK_SUCCESS: - return filterTimelines(state, action.relationship, action.statuses); - case TIMELINE_SCROLL_TOP: - return state.setIn([action.timeline, 'top'], action.top); - default: - return state; + case TIMELINE_REFRESH_REQUEST: + case TIMELINE_EXPAND_REQUEST: + return resetTimeline(state, action.timeline, action.id); + case TIMELINE_REFRESH_FAIL: + case TIMELINE_EXPAND_FAIL: + return state.setIn([action.timeline, 'isLoading'], false); + case TIMELINE_REFRESH_SUCCESS: + return normalizeTimeline(state, action.timeline, Immutable.fromJS(action.statuses)); + case TIMELINE_EXPAND_SUCCESS: + return appendNormalizedTimeline(state, action.timeline, Immutable.fromJS(action.statuses)); + case TIMELINE_UPDATE: + return updateTimeline(state, action.timeline, Immutable.fromJS(action.status), action.references); + case TIMELINE_DELETE: + return deleteStatus(state, action.id, action.accountId, action.references, action.reblogOf); + case CONTEXT_FETCH_SUCCESS: + return normalizeContext(state, action.id, Immutable.fromJS(action.ancestors), Immutable.fromJS(action.descendants)); + case ACCOUNT_TIMELINE_FETCH_REQUEST: + case ACCOUNT_TIMELINE_EXPAND_REQUEST: + return state.updateIn(['accounts_timelines', action.id], Immutable.Map(), map => map.set('isLoading', true)); + case ACCOUNT_TIMELINE_FETCH_FAIL: + case ACCOUNT_TIMELINE_EXPAND_FAIL: + return state.updateIn(['accounts_timelines', action.id], Immutable.Map(), map => map.set('isLoading', false)); + case ACCOUNT_TIMELINE_FETCH_SUCCESS: + return normalizeAccountTimeline(state, action.id, Immutable.fromJS(action.statuses), action.replace); + case ACCOUNT_TIMELINE_EXPAND_SUCCESS: + return appendNormalizedAccountTimeline(state, action.id, Immutable.fromJS(action.statuses)); + case ACCOUNT_BLOCK_SUCCESS: + return filterTimelines(state, action.relationship, action.statuses); + case TIMELINE_SCROLL_TOP: + return state.setIn([action.timeline, 'top'], action.top); + default: + return state; } }; From 4a146a0d189280dbd15098f42850ca550e0d7910 Mon Sep 17 00:00:00 2001 From: blackle Date: Mon, 23 Jan 2017 21:02:13 -0500 Subject: [PATCH 4/8] Make boost animation an SVG that uses SCSS colours --- app/assets/stylesheets/boost.scss | 9 +++++++++ app/assets/stylesheets/components.scss | 7 ++++--- 2 files changed, 13 insertions(+), 3 deletions(-) create mode 100644 app/assets/stylesheets/boost.scss diff --git a/app/assets/stylesheets/boost.scss b/app/assets/stylesheets/boost.scss new file mode 100644 index 000000000..c45d4ff8e --- /dev/null +++ b/app/assets/stylesheets/boost.scss @@ -0,0 +1,9 @@ +@import 'variables'; + +@function url-friendly-colour($colour) { + @return '%23' + str-slice('#{$colour}', 2, -1) +} + +button i.fa-retweet { +background-image: url("data:image/svg+xml;utf8,"); +} \ No newline at end of file diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index 73d1acccd..e1710580c 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -663,12 +663,13 @@ } } +@import 'boost'; + button i.fa-retweet { height: 19px; width: 22px; - background: image-url('boost_sprite.png') no-repeat; background-position: 0 0; - transition: background-position 0.9s steps(11); + transition: background-position 0.9s steps(10); transition-duration: 0s; &::before { @@ -678,7 +679,7 @@ button i.fa-retweet { button.active i.fa-retweet { transition-duration: 0.9s; - background-position: 0 -209px; + background-position: 0 100%; } .status-card { From 80cefd5b3cd9c8efa435f684a33fe1562696b74a Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 24 Jan 2017 17:05:44 +0100 Subject: [PATCH 5/8] Fix #204, fix #515 - URL truncating is now a style so copypasting is not affected, replaced onClick handler with onMouseUp/Down to detect text selection not trigger onClick handler then --- .../components/components/status_content.jsx | 27 +++++++++++++++++-- app/assets/stylesheets/components.scss | 11 ++++++++ app/lib/formatter.rb | 7 +++-- spec/lib/formatter_spec.rb | 2 +- 4 files changed, 42 insertions(+), 5 deletions(-) diff --git a/app/assets/javascripts/components/components/status_content.jsx b/app/assets/javascripts/components/components/status_content.jsx index f2c88cee0..68224b7ba 100644 --- a/app/assets/javascripts/components/components/status_content.jsx +++ b/app/assets/javascripts/components/components/status_content.jsx @@ -56,12 +56,35 @@ const StatusContent = React.createClass({ e.stopPropagation(); }, + handleMouseDown (e) { + this.startXY = [e.clientX, e.clientY]; + }, + + handleMouseUp (e) { + const [ startX, startY ] = this.startXY; + const [ deltaX, deltaY ] = [Math.abs(e.clientX - startX), Math.abs(e.clientY - startY)]; + + if (deltaX + deltaY < 5) { + this.props.onClick(); + } + + this.startXY = null; + }, + render () { - const { status, onClick } = this.props; + const { status } = this.props; const content = { __html: emojify(status.get('content')) }; - return
; + return ( +
+ ); }, }); diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index e1710580c..4a3a7df5f 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -60,6 +60,17 @@ } } +.invisible { + font-size: 0; + line-height: 0; +} + +.ellipsis { + &:after { + content: "…"; + } +} + .lightbox .icon-button { color: $color1; } diff --git a/app/lib/formatter.rb b/app/lib/formatter.rb index 3565611bc..1fa5b83fb 100644 --- a/app/lib/formatter.rb +++ b/app/lib/formatter.rb @@ -65,8 +65,11 @@ class Formatter end def link_html(url) - link_text = truncate(url.gsub(/\Ahttps?:\/\/(www\.)?/, ''), length: 30) - "#{link_text}" + prefix = url.match(/\Ahttps?:\/\/(www\.)?/).to_s + text = url[prefix.length, 30] + suffix = url[prefix.length + 30..-1] + + "#{prefix}#{text}#{suffix}" end def hashtag_html(match) diff --git a/spec/lib/formatter_spec.rb b/spec/lib/formatter_spec.rb index 7b8259fa6..6ec28f5d8 100644 --- a/spec/lib/formatter_spec.rb +++ b/spec/lib/formatter_spec.rb @@ -17,7 +17,7 @@ RSpec.describe Formatter do end it 'contains a link' do - expect(subject).to match('google.com') + expect(subject).to match('google.com') end end From e47b8e778b21ff4bda4fac79a5935028127edb53 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 24 Jan 2017 18:51:09 +0100 Subject: [PATCH 6/8] Fix links in toots opening the toot at first --- .../components/components/status_content.jsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/app/assets/javascripts/components/components/status_content.jsx b/app/assets/javascripts/components/components/status_content.jsx index 68224b7ba..1ee720c9b 100644 --- a/app/assets/javascripts/components/components/status_content.jsx +++ b/app/assets/javascripts/components/components/status_content.jsx @@ -31,8 +31,6 @@ const StatusContent = React.createClass({ link.setAttribute('target', '_blank'); link.setAttribute('rel', 'noopener'); } - - link.addEventListener('click', this.onNormalClick, false); } }, @@ -52,10 +50,6 @@ const StatusContent = React.createClass({ } }, - onNormalClick (e) { - e.stopPropagation(); - }, - handleMouseDown (e) { this.startXY = [e.clientX, e.clientY]; }, @@ -64,6 +58,10 @@ const StatusContent = React.createClass({ const [ startX, startY ] = this.startXY; const [ deltaX, deltaY ] = [Math.abs(e.clientX - startX), Math.abs(e.clientY - startY)]; + if (e.target.localName === 'a' || (e.target.parentNode && e.target.parentNode.localName === 'a')) { + return; + } + if (deltaX + deltaY < 5) { this.props.onClick(); } From adda642c63d01e362e0629ee956e9b3af9748644 Mon Sep 17 00:00:00 2001 From: Misty De Meo Date: Tue, 24 Jan 2017 11:07:46 -0800 Subject: [PATCH 7/8] Fix `invisible` CSS class --- app/assets/stylesheets/components.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index 4a3a7df5f..de6a45963 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -63,6 +63,8 @@ .invisible { font-size: 0; line-height: 0; + display: inline-block; + width: 0; } .ellipsis { From 8a880a3d464daf486a10d85b8ee49305aa6b1e5b Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 24 Jan 2017 21:40:41 +0100 Subject: [PATCH 8/8] Make blocks create entries and unfollows instantly, but do the clean up in the background instead. Should fix delay where blocked person can interact with blocker for a short time before background job gets processed --- app/controllers/api/v1/accounts_controller.rb | 2 +- app/services/after_block_service.rb | 31 +++++++++++++++++++ app/services/block_service.rb | 27 +--------------- app/workers/block_worker.rb | 2 +- 4 files changed, 34 insertions(+), 28 deletions(-) create mode 100644 app/services/after_block_service.rb diff --git a/app/controllers/api/v1/accounts_controller.rb b/app/controllers/api/v1/accounts_controller.rb index a43619193..d97010c0e 100644 --- a/app/controllers/api/v1/accounts_controller.rb +++ b/app/controllers/api/v1/accounts_controller.rb @@ -65,7 +65,7 @@ class Api::V1::AccountsController < ApiController end def block - BlockWorker.perform_async(current_user.account_id, @account.id) + BlockService.new.call(current_user.account, @account) @following = { @account.id => false } @followed_by = { @account.id => false } diff --git a/app/services/after_block_service.rb b/app/services/after_block_service.rb new file mode 100644 index 000000000..8c6197f2c --- /dev/null +++ b/app/services/after_block_service.rb @@ -0,0 +1,31 @@ +# frozen_string_literal: true + +class AfterBlockService < BaseService + def call(account, target_account) + clear_timelines(account, target_account) + clear_notifications(account, target_account) + end + + private + + def clear_timelines(account, target_account) + mentions_key = FeedManager.instance.key(:mentions, account.id) + home_key = FeedManager.instance.key(:home, account.id) + + target_account.statuses.select('id').find_each do |status| + redis.zrem(mentions_key, status.id) + redis.zrem(home_key, status.id) + end + end + + def clear_notifications(account, target_account) + Notification.where(account: account).joins(:follow).where(activity_type: 'Follow', follows: { account_id: target_account.id }).destroy_all + Notification.where(account: account).joins(mention: :status).where(activity_type: 'Mention', statuses: { account_id: target_account.id }).destroy_all + Notification.where(account: account).joins(:favourite).where(activity_type: 'Favourite', favourites: { account_id: target_account.id }).destroy_all + Notification.where(account: account).joins(:status).where(activity_type: 'Status', statuses: { account_id: target_account.id }).destroy_all + end + + def redis + Redis.current + end +end diff --git a/app/services/block_service.rb b/app/services/block_service.rb index b08cf8ca8..e04b6cc39 100644 --- a/app/services/block_service.rb +++ b/app/services/block_service.rb @@ -9,32 +9,7 @@ class BlockService < BaseService block = account.block!(target_account) - clear_timelines(account, target_account) - clear_notifications(account, target_account) - + BlockWorker.perform_async(account.id, target_account.id) NotificationWorker.perform_async(block.stream_entry.id, target_account.id) unless target_account.local? end - - private - - def clear_timelines(account, target_account) - mentions_key = FeedManager.instance.key(:mentions, account.id) - home_key = FeedManager.instance.key(:home, account.id) - - target_account.statuses.select('id').find_each do |status| - redis.zrem(mentions_key, status.id) - redis.zrem(home_key, status.id) - end - end - - def clear_notifications(account, target_account) - Notification.where(account: account).joins(:follow).where(activity_type: 'Follow', follows: { account_id: target_account.id }).destroy_all - Notification.where(account: account).joins(mention: :status).where(activity_type: 'Mention', statuses: { account_id: target_account.id }).destroy_all - Notification.where(account: account).joins(:favourite).where(activity_type: 'Favourite', favourites: { account_id: target_account.id }).destroy_all - Notification.where(account: account).joins(:status).where(activity_type: 'Status', statuses: { account_id: target_account.id }).destroy_all - end - - def redis - Redis.current - end end diff --git a/app/workers/block_worker.rb b/app/workers/block_worker.rb index dc00db197..0820490d3 100644 --- a/app/workers/block_worker.rb +++ b/app/workers/block_worker.rb @@ -4,6 +4,6 @@ class BlockWorker include Sidekiq::Worker def perform(account_id, target_account_id) - BlockService.new.call(Account.find(account_id), Account.find(target_account_id)) + AfterBlockService.new.call(Account.find(account_id), Account.find(target_account_id)) end end