diff --git a/src/component/diary/diaryBrief.js b/src/component/diary/diaryBrief.js index 87da2dc..cd918c8 100644 --- a/src/component/diary/diaryBrief.js +++ b/src/component/diary/diaryBrief.js @@ -18,7 +18,7 @@ export default class DiaryBrief extends Component { let editable = this.props.editable; return ( - + {(user && user.iconUrl) ? : null} diff --git a/src/component/diary/diaryList.js b/src/component/diary/diaryList.js index 3e063d6..6d62dc1 100644 --- a/src/component/diary/diaryList.js +++ b/src/component/diary/diaryList.js @@ -14,6 +14,7 @@ import Msg from '../../util/msg'; import Api from '../../util/api'; import Touchable from '../touchable'; +import ListFooter from '../listFooter'; import DiaryBrief from './diaryBrief'; @@ -24,13 +25,14 @@ export default class DiaryList extends Component { this.dataSource = props.dataSource; this.state = { - isLoading: true, - diaries: [], - hasMore: false, - + refreshing: false, - refreshFailed: false + refreshFailed: false, + + hasMore: true, + loadingMore: false, + loadFailed: false }; } @@ -40,23 +42,23 @@ export default class DiaryList extends Component { }); } - async refresh(loadMore = false) { + async refresh() { if (this.state.refreshing) { return; } - this.setState({hasMore: false, refreshing: true, refreshFailed: false}); - this.dataSource.refresh(loadMore) + this.setState({refreshing: true, refreshFailed: false}); + this.dataSource.refresh() .then(result => { if(!result) { throw { - message: 'refresh no result' + message: 'refresh diary no result' } } else { let diaries = this.state.diaries; let newDiaries = result.list; - if (!loadMore && diaries.length > 0 && newDiaries.length > 0 + if (diaries.length > 0 && newDiaries.length > 0 && diaries[0].id === newDiaries[0].id) { Msg.showMsg('没有新内容'); @@ -64,40 +66,54 @@ export default class DiaryList extends Component { this.setState({ diaries: result.list ? result.list : [], - hasMore: result.more, refreshFailed: false }); } }).catch(e => { - if (e.code === 401) { - /* - this.props.navigator.showModal({ - screen: "App" - }); - */ - } - this.setState({ - diaries: [], - hasMore: false, refreshFailed: true }); }).done(() => { this.setState({ - isLoading: false, refreshing: false }); }); } async loadMore() { - if (this.state.refreshing) { + if (this.state.loadingMore) { return; } - this.refresh(true); + this.setState({loadingMore: true, loadFailed: false}); + this.dataSource.refresh(true) + .then(result => { + if(!result) { + throw { + message: 'loadMore diary no result' + } + + } else { + this.setState({ + diaries: result.list ? result.list : [], + hasMore: result.more, + loadFailed: false + }); + } + + }).catch(e => { + this.setState({ + hasMore: false, + loadFailed: true + }); + + }).done(() => { + this.setState({ + loadingMore: false + }); + }); } render() { @@ -111,8 +127,6 @@ export default class DiaryList extends Component { return item.id.toString() }} - ListHeaderComponent={this.state.isLoading ? null : this.props.header} - renderItem={({item}) => { return ( this.props.onDiaryPress(item)}> @@ -123,12 +137,25 @@ export default class DiaryList extends Component { ItemSeparatorComponent={({highlighted}) => } - ListFooterComponent={this.renderFooter()} + ListFooterComponent={() => { + if (this.state.refreshing || this.state.loadingMore || this.state.diaries.length == 0) { + return null; + } + + if (this.state.loadFailed) { + return ListFooter.renderFooterFailed(this.loadMore.bind(this)); + } + + if (!this.state.hasMore) { + return ListFooter.renderFooterEnd(); + } + + return ListFooter.renderFooterLoading(); + }} refreshing={this.state.refreshing} onRefresh={this.refresh.bind(this)} - automaticallyAdjustContentInsets={true} onEndReachedThreshold={2} onEndReached={this.state.hasMore ? this.loadMore.bind(this) : null} > @@ -136,38 +163,6 @@ export default class DiaryList extends Component { ); } - - renderFooter() { - if (this.state.refreshing || this.state.diaries.length === 0) { - return null; - } - - if (this.state.refreshFailed) { - return ( - - {this.loadMore();}}> - 加载失败,请点击重试 - - - ); - } - - if (!this.state.hasMore) { - return ( - - —— THE END —— - - ); - } - - return ( - - - - ); - } } const localStyle = StyleSheet.create({ @@ -176,11 +171,5 @@ const localStyle = StyleSheet.create({ }, list: { height: '100%' - }, - footer: { - height: 60, - justifyContent: 'center', - alignItems: 'center', - paddingBottom: 15 } }); \ No newline at end of file diff --git a/src/component/follow/followUserList.js b/src/component/follow/followUserList.js index bc3ffe7..718f387 100644 --- a/src/component/follow/followUserList.js +++ b/src/component/follow/followUserList.js @@ -6,6 +6,7 @@ import Touchable from '../touchable'; import Color from '../../style/color'; import UserIcon from '../userIcon'; +import ListFooter from '../listFooter'; export default class FollowUserList extends Component { @@ -18,10 +19,13 @@ export default class FollowUserList extends Component { this.state = { users: [], - hasMore: false, refreshing: false, - refreshFailed: false + refreshFailed: false, + + hasMore: true, + loadingMore: false, + loadFailed: false }; } @@ -31,13 +35,47 @@ export default class FollowUserList extends Component { }); } - refresh(loadMore = false) { + refresh() { if (this.state.refreshing) { return; } - this.setState({hasMore: false, refreshing: true, refreshFailed: false}); - this.dataSource.refresh(loadMore) + this.setState({refreshing: true, refreshFailed: false}); + this.dataSource.refresh() + .then(result => { + if(!result) { + throw { + message: 'refresh ' + this.listType + ' no result' + } + + } else { + console.log('refresh ' + this.listType + ' result:', result); + + this.setState({ + users: result.list ? result.list : [], + refreshFailed: false + }); + } + + }).catch(e => { + this.setState({ + refreshFailed: true + }); + + }).done(() => { + this.setState({ + refreshing: false + }); + }); + } + + loadMore() { + if (this.state.loadingMore) { + return; + } + + this.setState({loadingMore: true, loadFailed: false}); + this.dataSource.refresh(true) .then(result => { if(!result) { throw { @@ -50,32 +88,23 @@ export default class FollowUserList extends Component { this.setState({ users: result.list ? result.list : [], hasMore: result.more, - refreshFailed: false + loadFailed: false }); } }).catch(e => { this.setState({ - users: [], hasMore: false, - refreshFailed: true + loadFailed: true }); }).done(() => { this.setState({ - refreshing: false + loadingMore: false }); }); } - loadMore() { - if (this.state.refreshing) { - return; - } - - this.refresh(true); - } - render() { return ( @@ -103,10 +132,26 @@ export default class FollowUserList extends Component { ); }} + ListFooterComponent={() => { + if (this.state.refreshing || this.state.loadingMore || this.state.users.length == 0) { + return null; + } + + if (this.state.loadFailed) { + return ListFooter.renderFooterFailed(this.loadMore.bind(this)); + } + + if (!this.state.hasMore) { + return ListFooter.renderFooterEnd(); + } + + return ListFooter.renderFooterLoading(); + }} + refreshing={this.state.refreshing} onRefresh={this.refresh.bind(this)} - onEndReachedThreshold={5} + onEndReachedThreshold={2} onEndReached={this.state.hasMore ? this.loadMore.bind(this) : null} /> diff --git a/src/component/listFooter.js b/src/component/listFooter.js new file mode 100644 index 0000000..ff47ce9 --- /dev/null +++ b/src/component/listFooter.js @@ -0,0 +1,68 @@ +import React, {Component} from 'react'; +import { + ActivityIndicator, + TouchableOpacity, + StyleSheet, + Text, + View +} from 'react-native'; + +import Color from '../style/color'; +import Api from '../util/api'; + + +const localStyle = StyleSheet.create({ + footer: { + height: 60, + justifyContent: 'center', + alignItems: 'center', + paddingBottom: 15 + } +}); + +function renderFooterLoading() { + return ( + + + + ); +} + +function renderFooterEnd() { + return ( + + + —— THE END —— + + + ); +} + +function renderFooterFailed(refresh) { + let isRefreshable = refresh && typeof refresh == 'function'; + + return ( + + { + if(isRefreshable) { + refresh(); + } + }} + > + + 加载失败{isRefreshable ? ',请点击重试' : ''} + + + + ); +} + + +export default { + renderFooterLoading, + renderFooterEnd, + renderFooterFailed +} + diff --git a/src/component/notebook/notebookDiaryList.js b/src/component/notebook/notebookDiaryList.js index 3967edf..1b934e0 100644 --- a/src/component/notebook/notebookDiaryList.js +++ b/src/component/notebook/notebookDiaryList.js @@ -15,6 +15,7 @@ import Color from '../../style/color'; import Touchable from '../touchable'; import DiaryBrief from '../diary/diaryBrief'; +import ListFooter from '../listFooter'; import NotebookDiaryData from '../../dataLoader/notebookDiaryData'; @@ -28,10 +29,13 @@ export default class NotebookDiaryList extends Component { this.state = { diaries: [], - hasMore: false, refreshing: false, - refreshFailed: false + refreshFailed: false, + + hasMore: true, + loadingMore: false, + loadFailed: false }; } @@ -76,30 +80,29 @@ export default class NotebookDiaryList extends Component { return result; } - refresh(loadMore = false) { - this.setState({refreshing: true}); - this.dataSource.refresh(this.notebook.id, loadMore) - .then(result => { - console.log('get notebook diaries:', result); + refresh() { + if (this.state.refreshing) { + return; + } + this.setState({refreshing: true, refreshFailed: false}); + this.dataSource.refresh(this.notebook.id) + .then(result => { if(!result) { throw { - message: 'refresh no result' + message: 'refresh notebookDiary no result' } } else { let diaries = this.formatDiaries(result.list); this.setState({ diaries, - hasMore: result.more, refreshFailed: false }); } }).catch(e => { this.setState({ - diaries: [], - hasMore: false, refreshFailed: true }); @@ -111,11 +114,38 @@ export default class NotebookDiaryList extends Component { } loadMore() { - if (this.state.refreshing) { + if (this.state.loadingMore) { return; } - this.refresh(true); + this.setState({loadingMore: true, loadFailed: false}); + this.dataSource.refresh(this.notebook.id, true) + .then(result => { + if(!result) { + throw { + message: 'loadMore notebookDiary no result' + } + + } else { + let diaries = this.formatDiaries(result.list); + this.setState({ + diaries, + hasMore: result.more, + loadFailed: false + }); + } + + }).catch(e => { + this.setState({ + hasMore: false, + loadFailed: true + }); + + }).done(() => { + this.setState({ + loadingMore: false + }); + }); } render() { @@ -132,60 +162,41 @@ export default class NotebookDiaryList extends Component { ); }} - + renderSectionHeader={(info) => { return ( {info.section.title} ); }} - ListFooterComponent={this.renderFooter.bind(this)} + ListFooterComponent={() => { + if (this.state.refreshing || this.state.loadingMore || this.state.diaries.length == 0) { + return null; + } - automaticallyAdjustContentInsets={true} + if (this.state.loadFailed) { + return ListFooter.renderFooterFailed(this.loadMore.bind(this)); + } + + if (!this.state.hasMore) { + return ListFooter.renderFooterEnd(); + } + + return ListFooter.renderFooterLoading(); + }} ItemSeparatorComponent={(sectionID, rowID, adjacentRowHighlighted) => } SectionSeparatorComponent={() => } + onEndReachedThreshold={2} onEndReached={this.state.hasMore ? this.loadMore.bind(this) : null} /> ) : null; } - - renderFooter() { - if (this.state.refreshing || this.state.diaries.length === 0) { - return null; - } - - if (this.state.refreshFailed) { - return ( - - {this.loadMore();}}> - 加载失败,请点击重试 - - - ); - } - - if (!this.state.hasMore) { - return ( - - —— THE END —— - - ); - } - - return ( - - - - ); - } } const localStyle = StyleSheet.create({ @@ -206,11 +217,5 @@ const localStyle = StyleSheet.create({ sectionSeparator: { borderBottomWidth: StyleSheet.hairlineWidth, borderColor: Color.line - }, - footer: { - height: 60, - justifyContent: 'center', - alignItems: 'center', - paddingBottom: 15 } }); \ No newline at end of file diff --git a/src/page/HomePage.js b/src/page/HomePage.js index edca37a..8af3f2d 100644 --- a/src/page/HomePage.js +++ b/src/page/HomePage.js @@ -55,11 +55,11 @@ export default class HomePage extends Component { const localStyle = StyleSheet.create({ wrap: { flex: 1, - backgroundColor: '#fff', - paddingTop: 20 + backgroundColor: '#fff' }, header: { paddingLeft: 20, + paddingTop: 20, flexDirection: "row" }, title: { diff --git a/src/page/NotebookDetailPage.js b/src/page/NotebookDetailPage.js index e7d25f8..b7fe534 100644 --- a/src/page/NotebookDetailPage.js +++ b/src/page/NotebookDetailPage.js @@ -9,9 +9,9 @@ export default class NotebookDetailPage extends Component { render() { return ( - + - + ); } }