improve how comments are fetched and rendered

Author: lukakerr

README.md

@@ -46,12 +46,10 @@ Features that aren't checked below are yet to be implemented. If you want to imp
 
 ### TODO
 
-- [ ] Add features not checked above
-- [ ] Fix and improve comment fetching. 
-	- Comments are fetched recursively due to Hacker News's API design, then flattened into an array where each reply is the next item in the array. This isn't a good solution for two reasons: 
-		1. The user has to wait for all the comments to be loaded before they can see any (`Promise.all()`).
-		2. If a component unmounts (the user goes back to the feed), all the comments still get fetched, causing the JS thread to drop frames.
-	- To fix this comments and comment replies should be fetched individually, appended to an array and the component will re render with the new comment added. If the component unmounts, simply stop fetching comments. The user will also be able to view comments almost immediately while others load.
+- [ ] Add features not implemented above
+- [x] Fix and improve comment fetching. 
+	- Comments are fetched recursively due to Hacker News's API design, then flattened into an array where each reply is the next item in the array. This isn't a good solution beacuse the user has to wait for all the comments to be loaded before they can see any (`Promise.all()`).
+	- To fix this, each top comment and its replies should be fetched individually, appended to an array and the component will re render with the new comment added. The user will also be able to view comments almost immediately while others load.
 - [ ] Add caching for comments (older than 10 minutes), and posts. If post/comment requested again, check if in cache, if so load from cache.
 
 ### Run Locally

app/components/Post/AllComments.js

@@ -21,6 +21,7 @@ export default class AllComments extends React.Component {
       comments: null,
       error: null,
       loading: true,
+      loadingMoreComments: false,
       refreshComments: false,
     };
     this.toggle = this.toggle.bind(this);
@@ -43,28 +44,54 @@ export default class AllComments extends React.Component {
 
   fetchComments = () => {
     const { kids } = this.props.post;
-    if (kids) {
-      getComments(kids)
-        .then(comments => {
-          if (this._mounted) {
-            this.setState({
-              comments,
-              loading: false,
-            });
-          }
-        })
-        .catch(error => {
-          if (this._mounted) {
-            this.setState({
-              error,
-            });
-          }
-        });
-    } else {
+
+    if (!kids) {
       this.setState({
         comments: [],
         loading: false,
-      })
+      });
+      return;
+    }
+
+    for (let i = 0, p = Promise.resolve(); i < kids.length; i++) {
+      p = p.then(_ => new Promise(resolve => {
+
+        // Get replies for current top level comment
+        getComments([kids[i]])
+          .then(comments => {
+            let newComments = this.state.comments || [];
+            newComments.push(...comments)
+
+            let loadingMoreComments = true;
+
+            // Last comment finished loading
+            if (i == kids.length - 1) {
+              loadingMoreComments = false;
+            }
+
+            if (this._mounted) {
+              this.setState({
+                comments: newComments,
+                loading: false,
+                loadingMoreComments,
+              }, () => {
+                resolve();
+              });
+            } else {
+              resolve();
+            }
+          })
+          .catch(error => {
+            if (this._mounted) {
+              this.setState({
+                error,
+                loading: false,
+              }, () => {
+                resolve();
+              });
+            }
+          });
+      }));
     }
   };
 
@@ -94,8 +121,7 @@ export default class AllComments extends React.Component {
       <View style={styles.allComments}>
         <FlatList
           data={this.state.comments}
-          extraData={this.state.refreshComments}
-          keyboardShouldPersistTaps='always'
+          extraData={[this.state.refreshComments, this.state.comments]}
           keyExtractor={(item, index) => index.toString()}
           renderItem={({ item }) => (
             <Comment 
@@ -110,6 +136,11 @@ export default class AllComments extends React.Component {
             />
           )}
         />
+        {this.state.loadingMoreComments &&
+          <View style={styles.loading}>
+            <ActivityIndicator />
+          </View>
+        }
       </View>
     );
   }