Add infinite scroll to post list

app/javascript/components/Board/PostList.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+import InfiniteScroll from 'react-infinite-scroller';
+
 import PostListItem from './PostListItem';
 import Spinner from '../shared/Spinner';
 
@@ -9,14 +11,24 @@ interface Props {
   posts: Array<IPost>;
   areLoading: boolean;
   error: string;
+
+  handleLoadMore(): void;
+  page: number;
+  hasMore: boolean;
 }
 
-const PostList = ({ posts, areLoading, error }: Props) => (
+const PostList = ({ posts, areLoading, error, handleLoadMore, page, hasMore }: Props) => (
   <div className="box postList">
-    { areLoading ? <Spinner /> : null }
     { error ? <span className="error">{error}</span> : null }
-    {
-      posts.map((post, i) => (
+    <InfiniteScroll
+      initialLoad={false}
+      loadMore={handleLoadMore}
+      threshold={50}
+      hasMore={hasMore}
+      loader={<Spinner />}
+      useWindow={true}
+    >
+      {posts.map((post, i) => (
         <PostListItem
           title={post.title}
           description={post.description}
@@ -24,8 +36,8 @@ const PostList = ({ posts, areLoading, error }: Props) => (
 
           key={i}
         />
-      ))
-    }
+      ))}
+    </InfiniteScroll>
   </div>
 );
 

app/javascript/components/Board/index.tsx

@@ -24,6 +24,9 @@ interface State {
     items: Array<IPost>;
     areLoading: boolean;
     error: string;
+
+    page: number;
+    hasMore: boolean;
   };
   postStatuses: {
     items: Array<IPostStatus>;
@@ -42,19 +45,24 @@ class Board extends React.Component<Props, State> {
       },
       posts: {
         items: [],
-        areLoading: true,
+        areLoading: false,
         error: '',
+
+        page: 0,
+        hasMore: true,
       },
       postStatuses: {
         items: [],
-        areLoading: true,
+        areLoading: false,
         error: '',
       }
     };
 
     this.requestPosts = this.requestPosts.bind(this);
+    this.loadMorePosts = this.loadMorePosts.bind(this);
     this.requestPostStatuses = this.requestPostStatuses.bind(this);
     this.setPostStatusFilter = this.setPostStatusFilter.bind(this);
+
   }
 
   componentDidMount() {
@@ -62,7 +70,13 @@ class Board extends React.Component<Props, State> {
     this.requestPostStatuses();
   }
 
-  async requestPosts() {
+  loadMorePosts() {
+    this.requestPosts(this.state.posts.page + 1);
+  }
+
+  async requestPosts(page = 1) {
+    if (this.state.posts.areLoading) return;
+
     this.setState({
       posts: { ...this.state.posts, areLoading: true },
     });
@@ -71,26 +85,51 @@ class Board extends React.Component<Props, State> {
     const { byPostStatus } = this.state.filters;
 
     let params = '';
+    params += `page=${page}`;
+    params += `&board_id=${boardId}`;
     if (byPostStatus) params += `&post_status_id=${byPostStatus}`;
 
     try {
-      let res = await fetch(`/posts?board_id=${boardId}${params}`);
+      let res = await fetch(`/posts?${params}`);
       let data = await res.json();
 
-      this.setState({
-        posts: {
-          items: data.map(post => ({
-            title: post.title,
-            description: post.description,
-            postStatus: {
-              name: post.post_status_name,
-              color: post.post_status_color,
-            },
-          })),
-          areLoading: false,
-          error: '',
-        }
-      });
+      if (page === 1) {
+        this.setState({
+          posts: {
+            items: data.map(post => ({
+              title: post.title,
+              description: post.description,
+              postStatus: {
+                name: post.post_status_name,
+                color: post.post_status_color,
+              },
+            })),
+            areLoading: false,
+            error: '',
+            page,
+            hasMore: data.length === 15,
+          }
+        });
+      } else {
+        this.setState({
+          posts: {
+            items: [...this.state.posts.items, ...data.map(post => ({
+              title: post.title,
+              description: post.description,
+              postStatus: {
+                name: post.post_status_name,
+                color: post.post_status_color,
+              },
+            }))],
+            areLoading: false,
+            error: '',
+            page,
+            hasMore: data.length === 15,
+          }
+        });
+      }
+
+      
     } catch (e) {
       this.setState({
         posts: { ...this.state.posts, error: 'An unknown error occurred, try again.' },
@@ -156,6 +195,10 @@ class Board extends React.Component<Props, State> {
           posts={posts.items}
           areLoading={posts.areLoading}
           error={posts.error}
+
+          handleLoadMore={this.loadMorePosts}
+          page={posts.page}
+          hasMore={posts.hasMore}
         />
       </div>
     );