toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

ICU-562 Explicitly store whether or not 'load more posts' should be visible (#1379)

Browse source
This commit is contained in:
Harrison Healey 2018-01-26 11:29:28 -05:00 committed by GitHub
parent cbf3739657
commit a6d9632cad
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 67 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
app/actions/views/channel.js
View file

@ -149,10 +149,13 @@ export function loadPostsIfNecessaryWithRetry(channelId) {
const time = Date.now();
let loadMorePostsVisible;
let received;
if (!postsIds || postsIds.length < ViewTypes.POST_VISIBILITY_CHUNK_SIZE) {
// Get the first page of posts if it appears we haven't gotten it yet, like the webapp
received = await retryGetPostsAction(getPosts(channelId), dispatch, getState);
loadMorePostsVisible = received.order.length >= ViewTypes.POST_VISIBILITY_CHUNK_SIZE;
} else {
const {lastConnectAt} = state.device.websocket;
const lastGetPosts = state.views.channel.lastGetPosts[channelId];
@ -169,6 +172,8 @@ export function loadPostsIfNecessaryWithRetry(channelId) {
}
received = await retryGetPostsAction(getPostsSince(channelId, since), dispatch, getState);
loadMorePostsVisible = postsIds.length + received.order.length >= ViewTypes.POST_VISIBILITY_CHUNK_SIZE;
}
if (received) {
@ -178,6 +183,8 @@ export function loadPostsIfNecessaryWithRetry(channelId) {
time
});
}
dispatch(setLoadMorePostsVisible(loadMorePostsVisible));
};
}
@ -266,8 +273,11 @@ export function handleSelectChannel(channelId) {
return async (dispatch, getState) => {
const {currentTeamId} = getState().entities.teams;
dispatch(setLoadMorePostsVisible(true));
loadPostsIfNecessaryWithRetry(channelId)(dispatch, getState);
selectChannel(channelId)(dispatch, getState);
dispatch(batchActions([
{
type: ViewTypes.SET_INITIAL_POST_VISIBILITY,
@ -279,7 +289,7 @@ export function handleSelectChannel(channelId) {
teamId: currentTeamId,
channelId
}
]), 'BATCH_CHANNEL_LOADED');
]));
};
}
@ -465,11 +475,10 @@ export function increasePostVisibility(channelId, focusedPostId) {
if (loadedPostCount >= desiredPostVisibility) {
// We already have the posts, so we just need to show them
dispatch({
type: ViewTypes.INCREASE_POST_VISIBILITY,
data: channelId,
amount: ViewTypes.POST_VISIBILITY_CHUNK_SIZE
});
dispatch(batchActions([
doIncreasePostVisibility(channelId),
setLoadMorePostsVisible(true)
]));
return;
}
@ -481,30 +490,46 @@ export function increasePostVisibility(channelId, focusedPostId) {
channelId
});
const page = Math.floor(currentPostVisibility / ViewTypes.POST_VISIBILITY_CHUNK_SIZE);
const pageSize = ViewTypes.POST_VISIBILITY_CHUNK_SIZE;
const page = Math.floor(currentPostVisibility / pageSize);
let result;
if (focusedPostId) {
result = await getPostsBefore(channelId, focusedPostId, page, ViewTypes.POST_VISIBILITY_CHUNK_SIZE)(dispatch, getState);
result = await getPostsBefore(channelId, focusedPostId, page, pageSize)(dispatch, getState);
} else {
result = await getPosts(channelId, page, ViewTypes.POST_VISIBILITY_CHUNK_SIZE)(dispatch, getState);
result = await getPosts(channelId, page, pageSize)(dispatch, getState);
}
const actions = [{
type: ViewTypes.LOADING_POSTS,
data: false,
channelId
}];
const posts = result.data;
if (posts) {
// make sure to increment the posts visibility
// only if we got results
dispatch({
type: ViewTypes.INCREASE_POST_VISIBILITY,
data: channelId,
amount: ViewTypes.POST_VISIBILITY_CHUNK_SIZE
});
actions.push(doIncreasePostVisibility(channelId));
actions.push(setLoadMorePostsVisible(posts.order.length >= pageSize));
}
dispatch({
type: ViewTypes.LOADING_POSTS,
data: false,
channelId
});
dispatch(batchActions(actions));
};
}
function doIncreasePostVisibility(channelId) {
return {
type: ViewTypes.INCREASE_POST_VISIBILITY,
data: channelId,
amount: ViewTypes.POST_VISIBILITY_CHUNK_SIZE
};
}
function setLoadMorePostsVisible(visible) {
return {
type: ViewTypes.SET_LOAD_MORE_POSTS_VISIBLE,
data: visible
};
}

5
app/components/post_list/post_list.js
View file

@ -295,7 +295,8 @@ export default class PostList extends PureComponent {
channelId,
highlightPostId,
loadMore,
postIds
postIds,
showLoadMore
} = this.props;
const refreshControl = {
@ -311,7 +312,7 @@ export default class PostList extends PureComponent {
onLayout={this.onLayout}
ref='list'
data={postIds}
extraData={this.makeExtraData(channelId, highlightPostId)}
extraData={this.makeExtraData(channelId, highlightPostId, showLoadMore)}
initialNumToRender={INITAL_BATCH_TO_RENDER}
maxToRenderPerBatch={INITAL_BATCH_TO_RENDER + 1}
inverted={true}

1
app/constants/view.js
View file

@ -54,6 +54,7 @@ const ViewTypes = keyMirror({
INCREASE_POST_VISIBILITY: null,
RECEIVED_FOCUSED_POST: null,
LOADING_POSTS: null,
SET_LOAD_MORE_POSTS_VISIBLE: null,
RECEIVED_POSTS_FOR_CHANNEL_AT_TIME: null,

13
app/reducers/views/channel.js
View file

@ -313,6 +313,16 @@ function lastGetPosts(state = {}, action) {
}
}
function loadMorePostsVisible(state = true, action) {
switch (action.type) {
case ViewTypes.SET_LOAD_MORE_POSTS_VISIBLE:
return action.data;
default:
return state;
}
}
export default combineReducers({
displayName,
drafts,
@ -321,5 +331,6 @@ export default combineReducers({
postVisibility,
loadingPosts,
lastGetPosts,
retryFailed
retryFailed,
loadMorePostsVisible
});

12
app/screens/channel/channel_post_list/channel_post_list.js
View file

@ -28,6 +28,7 @@ export default class ChannelPostList extends PureComponent {
channelRefreshingFailed: PropTypes.bool,
currentUserId: PropTypes.string,
lastViewedAt: PropTypes.number,
loadMorePostsVisible: PropTypes.bool.isRequired,
navigator: PropTypes.object,
postIds: PropTypes.array.isRequired,
postVisibility: PropTypes.number,
@ -42,15 +43,13 @@ export default class ChannelPostList extends PureComponent {
super(props);
this.state = {
visiblePostIds: this.getVisiblePostIds(props),
showLoadMore: props.postIds.length >= props.postVisibility
visiblePostIds: this.getVisiblePostIds(props)
};
}
componentWillReceiveProps(nextProps) {
const {postIds: nextPostIds} = nextProps;
const showLoadMore = nextPostIds.length >= nextProps.postVisibility;
let visiblePostIds = this.state.visiblePostIds;
if (nextPostIds !== this.props.postIds || nextProps.postVisibility !== this.props.postVisibility) {
@ -58,7 +57,6 @@ export default class ChannelPostList extends PureComponent {
}
this.setState({
showLoadMore,
visiblePostIds
});
}
@ -104,7 +102,7 @@ export default class ChannelPostList extends PureComponent {
};
loadMorePosts = () => {
if (this.state.showLoadMore) {
if (this.props.loadMorePostsVisible) {
const {actions, channelId} = this.props;
actions.increasePostVisibility(channelId);
}
@ -122,13 +120,13 @@ export default class ChannelPostList extends PureComponent {
channelRefreshingFailed,
currentUserId,
lastViewedAt,
loadMorePostsVisible,
navigator,
postIds,
theme
} = this.props;
const {
showLoadMore,
visiblePostIds
} = this.state;
@ -145,7 +143,7 @@ export default class ChannelPostList extends PureComponent {
<PostList
postIds={visiblePostIds}
loadMore={this.loadMorePosts}
showLoadMore={showLoadMore}
showLoadMore={loadMorePostsVisible}
onPostPress={this.goToThread}
onRefresh={actions.setChannelRefreshing}
renderReplies={true}

1
app/screens/channel/channel_post_list/index.js
View file

@ -26,6 +26,7 @@ function mapStateToProps(state) {
postIds: getPostIdsInCurrentChannel(state),
postVisibility: state.views.channel.postVisibility[channelId],
lastViewedAt: getMyCurrentChannelMembership(state).last_viewed_at,
loadMorePostsVisible: state.views.channel.loadMorePostsVisible,
theme: getTheme(state)
};
}

2
app/store/index.js
View file

@ -51,7 +51,7 @@ export default function configureAppStore(initialState) {
['typing']
);
const channelViewBlackList = {loading: true, refreshing: true, loadingPosts: true, postVisibility: true, retryFailed: true};
const channelViewBlackList = {loading: true, refreshing: true, loadingPosts: true, postVisibility: true, retryFailed: true, loadMorePostsVisible: true};
const channelViewBlackListFilter = createTransform(
(inboundState) => {
const channel = {};