treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Improve status reselect, do not display "load more" when no next link available

remotes/1727458204337373841/tmp_refs/heads/signup-info-prompt
Eugen Rochko 2017-02-22 16:30:09 +01:00
parent c77a54fe0a
commit c96fd24f48
5 changed files with 39 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/assets/javascripts/components/components/status_list.jsx
View File

@ -15,6 +15,7 @@ const StatusList = React.createClass({
trackScroll: React.PropTypes.bool,
isLoading: React.PropTypes.bool,
isUnread: React.PropTypes.bool,
hasMore: React.PropTypes.bool,
prepend: React.PropTypes.node,
emptyMessage: React.PropTypes.node
},
@ -73,13 +74,13 @@ const StatusList = React.createClass({
},
render () {
const { statusIds, onScrollToBottom, trackScroll, isLoading, isUnread, prepend, emptyMessage } = this.props;
const { statusIds, onScrollToBottom, trackScroll, isLoading, isUnread, hasMore, prepend, emptyMessage } = this.props;
let loadMore = '';
let scrollableArea = '';
let unread = '';
if (!isLoading && statusIds.size > 0) {
if (!isLoading && statusIds.size > 0 && hasMore) {
loadMore = <LoadMore onClick={this.handleLoadMore} />;
}

49
app/assets/javascripts/components/containers/status_container.jsx
View File

@ -18,45 +18,12 @@ import { openMedia } from '../actions/modal';
import { createSelector } from 'reselect'
import { isMobile } from '../is_mobile'
const mapStateToProps = (state, props) => ({
statusBase: state.getIn(['statuses', props.id]),
const makeMapStateToProps = () => {
const getStatus = makeGetStatus();
const mapStateToProps = (state, props) => ({
status: getStatus(state, props.id),
me: state.getIn(['meta', 'me'])
});
const makeMapStateToPropsInner = () => {
const getStatus = (() => {
return createSelector(
[
(_, base) => base,
(state, base) => (base ? state.getIn(['accounts', base.get('account')]) : null),
(state, base) => (base ? state.getIn(['statuses', base.get('reblog')], null) : null)
],
(base, account, reblog) => (base ? base.set('account', account).set('reblog', reblog) : null)
);
})();
const mapStateToProps = (state, { statusBase }) => ({
status: getStatus(state, statusBase)
});
return mapStateToProps;
};
const makeMapStateToPropsLast = () => {
const getStatus = (() => {
return createSelector(
[
(_, status) => status,
(state, status) => (status ? state.getIn(['accounts', status.getIn(['reblog', 'account'])], null) : null)
],
(status, reblogAccount) => (status && status.get('reblog') ? status.setIn(['reblog', 'account'], reblogAccount) : status)
);
})();
const mapStateToProps = (state, { status }) => ({
status: getStatus(state, status)
});
return mapStateToProps;
@ -106,8 +73,4 @@ const mapDispatchToProps = (dispatch) => ({
});
export default connect(mapStateToProps, mapDispatchToProps)(
connect(makeMapStateToPropsInner)(
connect(makeMapStateToPropsLast)(Status)
)
);
export default connect(makeMapStateToProps, mapDispatchToProps)(Status);

5
app/assets/javascripts/components/features/account_timeline/index.jsx
View File

@ -16,6 +16,7 @@ import Immutable from 'immutable';
const mapStateToProps = (state, props) => ({
statusIds: state.getIn(['timelines', 'accounts_timelines', Number(props.params.accountId), 'items'], Immutable.List()),
isLoading: state.getIn(['timelines', 'accounts_timelines', Number(props.params.accountId), 'isLoading']),
hasMore: !!state.getIn(['timelines', 'accounts_timelines', Number(props.params.accountId), 'next']),
me: state.getIn(['meta', 'me'])
});
@ -26,6 +27,7 @@ const AccountTimeline = React.createClass({
dispatch: React.PropTypes.func.isRequired,
statusIds: ImmutablePropTypes.list,
isLoading: React.PropTypes.bool,
hasMore: React.PropTypes.bool,
me: React.PropTypes.number.isRequired
},
@ -48,7 +50,7 @@ const AccountTimeline = React.createClass({
},
render () {
const { statusIds, isLoading, me } = this.props;
const { statusIds, isLoading, hasMore, me } = this.props;
if (!statusIds && isLoading) {
return (
@ -66,6 +68,7 @@ const AccountTimeline = React.createClass({
prepend={<HeaderContainer accountId={this.props.params.accountId} />}
statusIds={statusIds}
isLoading={isLoading}
hasMore={hasMore}
me={me}
onScrollToBottom={this.handleScrollToBottom}
/>

3
app/assets/javascripts/components/features/ui/containers/status_list_container.jsx
View File

@ -40,7 +40,8 @@ const makeMapStateToProps = () => {
const mapStateToProps = (state, props) => ({
statusIds: getStatusIds(state, props),
isLoading: state.getIn(['timelines', props.type, 'isLoading'], true),
isUnread: state.getIn(['timelines', props.type, 'unread']) > 0
isUnread: state.getIn(['timelines', props.type, 'unread']) > 0,
hasMore: !!state.getIn(['timelines', props.type, 'next'])
});
return mapStateToProps;

43
app/assets/javascripts/components/selectors/index.jsx
View File

@ -17,37 +17,32 @@ export const makeGetAccount = () => {
});
};
const getStatusBase = (state, id) => state.getIn(['statuses', id], null);
export const makeGetStatus = () => {
return createSelector([getStatusBase, getStatuses, getAccounts], (base, statuses, accounts) => {
if (base === null) {
return createSelector(
[
(state, id) => state.getIn(['statuses', id]),
(state, id) => state.getIn(['statuses', state.getIn(['statuses', id, 'reblog'])]),
(state, id) => state.getIn(['accounts', state.getIn(['statuses', id, 'account'])]),
(state, id) => state.getIn(['accounts', state.getIn(['statuses', state.getIn(['statuses', id, 'reblog']), 'account'])]),
],
(statusBase, statusReblog, accountBase, accountReblog) => {
if (!statusBase) {
return null;
}
return assembleStatus(base.get('id'), statuses, accounts);
});
};
const assembleStatus = (id, statuses, accounts) => {
let status = statuses.get(id, null);
let reblog = null;
if (status === null) {
return null;
}
if (status.get('reblog', null) !== null) {
reblog = statuses.get(status.get('reblog'), null);
if (reblog !== null) {
reblog = reblog.set('account', accounts.get(reblog.get('account')));
if (statusReblog) {
statusReblog = statusReblog.set('account', accountReblog);
} else {
return null;
}
statusReblog = null;
}
return status.set('reblog', reblog).set('account', accounts.get(status.get('account')));
return statusBase.withMutations(map => {
map.set('reblog', statusReblog);
map.set('account', accountBase);
});
}
);
};
const getAlertsBase = state => state.get('alerts');