load more posts on feed

packages/app/src/components/PostsFeed/index.jsx

@@ -1,15 +1,29 @@
 import React from "react"
 import * as antd from "antd"
 import { User } from "models"
-import { PostCard } from "components"
+import { PostCard, LoadMore } from "components"
 
 import "./index.less"
 
+const LoadingComponent = () => {
+    return <antd.Skeleton active />
+}
+
+const NoResultComponent = () => {
+    return <antd.Result
+        status="info"
+        title="This is the end"
+        subTitle="We dont have more posts for you"
+    />
+}
+
 export default class PostsFeed extends React.Component {
     state = {
         selfId: null,
         initialLoading: true,
         renderList: [],
+        fetchingData: false,
+        hasMorePosts: true,
     }
 
     api = window.app.request
@@ -54,25 +68,54 @@ export default class PostsFeed extends React.Component {
     }
 
     loadPosts = async ({
-        startIndex,
+        trim,
-        stopIndex,
+        replace = false
     } = {}) => {
+        // toogle fetching flag
+        await this.setState({
+            fetchingData: true,
+        })
+
+        // get posts from api
         const result = await this.api.get.feed(undefined, {
-            startIndex,
+            trim: trim ?? this.state.renderList.length,
-            stopIndex,
+            limit: this.props.feedLength ?? window.app.settings.get("feed_max_fetch"),
-            feedLength: this.props.feedLength,
             user_id: this.props.fromUserId,
         })
 
         console.log(result)
 
         if (result) {
-            this.setState({
+            // if result is empty, its mean there is no more posts, so set hasMorePosts to false
-                renderList: result.map((item, index) => this.getPostRender(item, index))
+            if (result.length === 0) {
+                await this.setState({
+                    hasMorePosts: false,
+                })
+                return false
+            }
+
+            if (replace) {
+                // replace all posts render list
+                await this.setState({
+                    renderList: result.map((item) => this.getPostRender(item, item.key))
+                })
+            } else {
+                // else append posts to render list
+                await this.setState({
+                    renderList: [
+                        ...this.state.renderList,
+                        ...result.map((item) => this.getPostRender(item, item.key))
+                    ]
                 })
             }
         }
 
+        // toogle fetching flag
+        await this.setState({
+            fetchingData: false,
+        })
+    }
+
     onLikePost = async (data) => {
         let result = await this.api.put.toogleLike({ post_id: data._id }).catch(() => {
             antd.message.error("Failed to like post")
@@ -110,9 +153,9 @@ export default class PostsFeed extends React.Component {
         })
     }
 
-    getPostRender = (item, index) => {
+    getPostRender = (item, index = this.state.renderList.length) => {
         return <PostCard
-            key={index ?? this.state.renderList.findIndex((i) => i._id === item._id)}
+            key={index}
             data={item}
             selfId={this.state.selfId}
             events={{
@@ -134,8 +177,19 @@ export default class PostsFeed extends React.Component {
             </div>
         }
 
-        return <div className="postsFeed" ref={this.listRef}>
+        return <div id="postsFeed" className="postsFeed" ref={this.listRef}>
+            <LoadMore
+                onBottom={() => {
+                    this.loadPosts()
+                }}
+                loadingComponent={LoadingComponent}
+                noResultComponent={NoResultComponent}
+                fetching={this.state.fetchingData}
+                hasMore={this.state.hasMorePosts}
+                className="posts"
+            >
                 {this.state.renderList}
+            </LoadMore>
         </div>
     }
 }

packages/app/src/components/PostsFeed/index.less

@@ -6,40 +6,22 @@
 
     width: 100%;
 
+    .infinite-scroll {
+        width: 100%;
+    }
+
+    .posts {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        width: 100%;
+
+        overflow: overlay;
+
         >div {
             margin-bottom: 20px;
         }
-
-    .content {
-        overflow: visible;
-
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-
-        width: 100%;
-        max-width: 40vw;
-
-        .rc-virtual-list-holder {
-            overflow-y: visible !important;
-            width: 100%;
-
-        }
-
-        .rc-virtual-list-holder-inner {
-            width: 100%;
-            overflow: visible;
-
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-
-            >div {
-                width: 100%;
-                margin-bottom: 15px;
-            }
-        }
     }
 }