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

MM-17044 Load posts until no more are needed (#3656)

Browse source 
* MM-17044 Load posts until no more are needed

* Improving post list tests for componentDidUpdate

Co-authored-by: mattermod <mattermod@users.noreply.github.com>
This commit is contained in:
Elias Nahum 2020-01-07 15:59:31 -03:00 committed by Miguel Alatzar
parent 504028f349
commit 5d743004b8
3 changed files with 72 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/components/post_list/__snapshots__/post_list.test.js.snap
View file

@ -17,7 +17,7 @@ exports[`PostList setting channel deep link 1`] = `
disableVirtualization={false}
extraData={
Array [
undefined,
"channel-id",
undefined,
undefined,
]
@ -48,7 +48,7 @@ exports[`PostList setting channel deep link 1`] = `
"#3d3c40",
]
}
onRefresh={null}
onRefresh={[Function]}
refreshing={false}
tintColor="#3d3c40"
/>
@ -78,7 +78,7 @@ exports[`PostList setting permalink deep link 1`] = `
disableVirtualization={false}
extraData={
Array [
undefined,
"channel-id",
undefined,
undefined,
]
@ -109,7 +109,7 @@ exports[`PostList setting permalink deep link 1`] = `
"#3d3c40",
]
}
onRefresh={null}
onRefresh={[Function]}
refreshing={false}
tintColor="#3d3c40"
/>
@ -139,7 +139,7 @@ exports[`PostList should match snapshot 1`] = `
disableVirtualization={false}
extraData={
Array [
undefined,
"channel-id",
undefined,
undefined,
]
@ -170,7 +170,7 @@ exports[`PostList should match snapshot 1`] = `
"#3d3c40",
]
}
onRefresh={null}
onRefresh={[Function]}
refreshing={false}
tintColor="#3d3c40"
/>

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

@ -96,17 +96,13 @@ export default class PostList extends PureComponent {
EventEmitter.on('scroll-to-bottom', this.handleSetScrollToBottom);
}
componentWillReceiveProps(nextProps) {
if (this.props.channelId !== nextProps.channelId) {
this.contentOffsetY = 0;
this.hasDoneInitialScroll = false;
this.setState({contentHeight: 0});
}
}
componentDidUpdate(prevProps) {
const {actions, channelId, deepLinkURL, postIds} = this.props;
if (this.props.channelId !== prevProps.channelId) {
this.resetPostList();
}
if (deepLinkURL && deepLinkURL !== prevProps.deepLinkURL) {
this.handleDeepLink(deepLinkURL);
actions.setDeepLinkURL('');
@ -120,6 +116,16 @@ export default class PostList extends PureComponent {
if (!this.hasDoneInitialScroll && this.props.initialIndex > 0 && this.state.contentHeight) {
this.scrollToInitialIndexIfNeeded(this.props.initialIndex);
}
if (
this.props.channelId === prevProps.channelId &&
this.props.postIds.length &&
this.state.contentHeight &&
this.state.contentHeight < this.state.postListHeight &&
this.props.extraData
) {
this.loadToFillContent();
}
}
componentWillUnmount() {
@ -235,6 +241,12 @@ export default class PostList extends PureComponent {
return item;
};
loadToFillContent = () => {
setTimeout(() => {
this.handleContentSizeChange(0, this.state.contentHeight);
});
};
renderItem = ({item, index}) => {
if (PostListUtils.isStartOfNewMessages(item)) {
// postIds includes a date item after the new message indicator so 2
@ -316,6 +328,12 @@ export default class PostList extends PureComponent {
});
}
resetPostList = () => {
this.contentOffsetY = 0;
this.hasDoneInitialScroll = false;
this.setState({contentHeight: 0});
}
scrollToIndex = (index) => {
this.animationFrameInitialIndex = requestAnimationFrame(() => {
if (this.flatListRef.current && index > 0 && index <= this.getItemCount()) {

44
app/components/post_list/post_list.test.js
View file

@ -21,6 +21,7 @@ describe('PostList', () => {
selectFocusedPostId: jest.fn(),
setDeepLinkURL: jest.fn(),
},
channelId: 'channel-id',
deepLinkURL: '',
lastPostIndex: -1,
postIds: ['post-id-1', 'post-id-2'],
@ -34,16 +35,19 @@ describe('PostList', () => {
channel: serverURL + '/team-name/channels/channel-name',
};
const wrapper = shallow(
<PostList {...baseProps}/>
);
test('should match snapshot', () => {
const wrapper = shallow(
<PostList {...baseProps}/>
);
expect(wrapper.getElement()).toMatchSnapshot();
});
test('setting permalink deep link', () => {
const showModalOverCurrentContext = jest.spyOn(NavigationActions, 'showModalOverCurrentContext');
const wrapper = shallow(
<PostList {...baseProps}/>
);
wrapper.setProps({deepLinkURL: deepLinks.permalink});
expect(baseProps.actions.setDeepLinkURL).toHaveBeenCalled();
@ -53,6 +57,10 @@ describe('PostList', () => {
});
test('setting channel deep link', () => {
const wrapper = shallow(
<PostList {...baseProps}/>
);
wrapper.setProps({deepLinkURL: deepLinks.channel});
expect(baseProps.actions.setDeepLinkURL).toHaveBeenCalled();
expect(baseProps.actions.handleSelectChannelByName).toHaveBeenCalled();
@ -62,6 +70,9 @@ describe('PostList', () => {
test('should call flatListScrollToIndex only when ref is set and index is in range', () => {
jest.spyOn(global, 'requestAnimationFrame').mockImplementation((cb) => cb());
const wrapper = shallow(
<PostList {...baseProps}/>
);
const instance = wrapper.instance();
const flatListScrollToIndex = jest.spyOn(instance, 'flatListScrollToIndex');
const indexInRange = baseProps.postIds.length;
@ -86,4 +97,29 @@ describe('PostList', () => {
instance.scrollToIndex(indexInRange);
expect(flatListScrollToIndex).toHaveBeenCalled();
});
test('should load more posts if available space on the screen', () => {
const wrapper = shallow(
<PostList {...baseProps}/>
);
const instance = wrapper.instance();
instance.loadToFillContent = jest.fn();
wrapper.setProps({
extraData: true,
});
expect(instance.loadToFillContent).toHaveBeenCalledTimes(0);
wrapper.setState({
postListHeight: 500,
contentHeight: 200,
});
expect(instance.loadToFillContent).toHaveBeenCalledTimes(1);
wrapper.setProps({
extraData: false,
});
expect(instance.loadToFillContent).toHaveBeenCalledTimes(1);
});
});