From d61e064b9b3feb613a98519d425d7056efca3506 Mon Sep 17 00:00:00 2001
From: kdxcxs <cx@kdxcxs.com>
Date: Sat, 5 Dec 2020 18:15:34 +0800
Subject: [PATCH] feat(YooForum): support getting more topics in the bottom of
 topic list

---
 src/component/YooForum.js | 14 ++++++++++++--
 src/ui/YooForumUI.js      | 35 ++++++++++++++++++++++++++++++-----
 2 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/src/component/YooForum.js b/src/component/YooForum.js
index 4b496e5..458c0bb 100644
--- a/src/component/YooForum.js
+++ b/src/component/YooForum.js
@@ -15,6 +15,7 @@ export default class YooForum extends Component {
       hint: '准备中',
       topics: [],
       fetchedListPage: 0,
+      gettingTopicList: false,
     };
     this.initForum = this.initForum.bind(this);
     this.getTopicList = this.getTopicList.bind(this);
@@ -102,7 +103,8 @@ export default class YooForum extends Component {
 
   getTopicList() {
     const page = this.state.fetchedListPage + 1;
-    this.setState({hint: '获取数据中'});
+    page === 1 && this.setState({hint: '获取数据中'});
+    this.setState({gettingTopicList: true});
     gbkFetch(
       'GET',
       `http://eol.ctbu.edu.cn/meol/common/faq/forum.jsp?viewtype=thread&forumid=102211&cateId=0&s_gotopage=${page}`,
@@ -132,11 +134,19 @@ export default class YooForum extends Component {
         topics: [...this.state.topics, ...newTopics],
         hint: '',
         fetchedListPage: page,
+        gettingTopicList: false,
       });
     });
   }
 
   render() {
-    return <YooForumUI topics={this.state.topics} hint={this.state.hint} />;
+    return (
+      <YooForumUI
+        topics={this.state.topics}
+        hint={this.state.hint}
+        getTopicList={this.getTopicList}
+        gettingTopicList={this.state.gettingTopicList}
+      />
+    );
   }
 }
diff --git a/src/ui/YooForumUI.js b/src/ui/YooForumUI.js
index 6e78311..c144d91 100644
--- a/src/ui/YooForumUI.js
+++ b/src/ui/YooForumUI.js
@@ -8,6 +8,7 @@ import {
   Image,
   Animated,
   Dimensions,
+  Pressable,
 } from 'react-native';
 import YooForumTopic from '../component/YooForumTopic';
 import YooReply from './YooReply';
@@ -43,6 +44,10 @@ const styles = StyleSheet.create({
   indicator: {
     marginTop: 64,
   },
+  showMoreText: {
+    fontSize: 18,
+    margin: 8,
+  },
 });
 
 function ForumTopic(props) {
@@ -56,6 +61,20 @@ function ForumTopic(props) {
   ));
 }
 
+function ShowMore(props) {
+  return (
+    <Pressable
+      style={{width: screenWidth, alignItems: 'center'}}
+      onPress={() => props.getTopicList()}>
+      {props.gettingTopicList ? (
+        <Text style={styles.showMoreText}>加载中</Text>
+      ) : (
+        <Text style={styles.showMoreText}>加载更多</Text>
+      )}
+    </Pressable>
+  );
+}
+
 export default class YooForumUI extends Component {
   constructor(props) {
     super(props);
@@ -145,11 +164,17 @@ export default class YooForumUI extends Component {
           this.setState({currentPosition: event.nativeEvent.contentOffset.y})
         }>
         {this.props.hint === '' ? (
-          <ForumTopic
-            topics={this.props.topics}
-            showDetail={this.showDetail}
-            hideDetail={this.hideDetail}
-          />
+          <View>
+            <ForumTopic
+              topics={this.props.topics}
+              showDetail={this.showDetail}
+              hideDetail={this.hideDetail}
+            />
+            <ShowMore
+              getTopicList={this.props.getTopicList}
+              gettingTopicList={this.props.gettingTopicList}
+            />
+          </View>
         ) : (
           <View style={styles.hintContainer}>
             <Image