use new post list api

packages/app/src/pages/posts/components/feed/index.jsx

@@ -1,5 +1,4 @@
 import React from "react"
-import { Skeleton } from "antd"
 
 import { PostsList } from "components"
 
@@ -19,72 +18,17 @@ const emptyListRender = () => {
     </div>
 }
 
-export default class Feed extends React.Component {
+export class Feed extends React.Component {
-    state = {
-        loading: true,
-        initialLoading: true,
-        hasMorePosts: true,
-        posts: [],
-    }
-
-    loadData = async ({
-        trim,
-        replace = false
-    } = {}) => {
-        await this.setState({
-            loading: true,
-        })
-
-        // get posts from api
-        const result = await FeedModel.getPostsFeed({
-            trim: trim ?? this.state.posts.length,
-        })
-
-        console.log("Loaded data => \n", result)
-
-        if (result) {
-            if (result.length === 0) {
-                await this.setState({
-                    hasMorePosts: false,
-                    loading: false,
-                    initialLoading: false,
-                })
-
-                return false
-            }
-
-            await this.setState({
-                posts: replace ? result : [...this.state.posts, ...result],
-            })
-        }
-
-        await this.setState({
-            loading: false,
-        })
-
-        if (this.state.initialLoading) {
-            await this.setState({
-                initialLoading: false,
-            })
-        }
-    }
-
-    componentDidMount = async () => {
-        await this.loadData()
-    }
-
     render() {
-        return <div className="feed">
+        return <PostsList
-            {
+            emptyListRender={emptyListRender}
-                this.state.initialLoading ? <Skeleton active /> : <PostsList
+            loadFromModel={FeedModel.getPostsFeed}
-                    loading={this.state.loading}
+            onLoadMore={FeedModel.getPostsFeed}
-                    hasMorePosts={this.state.hasMorePosts}
+            watchTimeline
-                    emptyListRender={emptyListRender}
+        />
-                    onLoadMore={this.loadData}
-                    list={this.state.posts}
-                    watchTimeline
-                />
-            }
-        </div>
     }
-}
+}
+
+export default React.forwardRef((props, ref) => {
+    return <Feed {...props} innerRef={ref} />
+})

packages/app/src/pages/posts/components/feed/index.less

@@ -1,4 +1,4 @@
-.feed {
+.emptyFeed {
     display: flex;
     flex-direction: column;
 
@@ -7,15 +7,5 @@
 
     width: 100%;
 
-    .emptyFeed {
+    margin-top: 20px;
-        display: flex;
-        flex-direction: column;
-
-        align-items: center;
-        justify-content: center;
-
-        width: 100%;
-
-        margin-top: 20px;
-    }
 }

packages/app/src/pages/posts/components/savedPosts/index.jsx

@@ -1,9 +1,7 @@
 import React from "react"
-import { Skeleton } from "antd"
-import { Icons } from "components/Icons"
 
 import { PostsList } from "components"
-import Post from "models/post"
+import PostModel from "models/post"
 
 import "./index.less"
 
@@ -15,77 +13,16 @@ const emptyListRender = () => {
     </div>
 }
 
-export default class SavedPosts extends React.Component {
+export class SavedPosts extends React.Component {
-    state = {
-        loading: true,
-        initialLoading: true,
-        hasMorePosts: true,
-        posts: [],
-    }
-
-    loadData = async ({
-        trim,
-        replace = false
-    } = {}) => {
-        await this.setState({
-            loading: true,
-        })
-
-        const result = await Post.getSavedPosts({
-            trim: trim ?? this.state.posts.length,
-        })
-
-        console.log("Loaded data => \n", result)
-
-        if (result) {
-            if (result.length === 0) {
-                await this.setState({
-                    hasMorePosts: false,
-                    loading: false,
-                    initialLoading: false,
-                })
-
-                return false
-            }
-
-            await this.setState({
-                posts: replace ? result : [...this.state.posts, ...result],
-            })
-        }
-
-        await this.setState({
-            loading: false,
-        })
-
-        if (this.state.initialLoading) {
-            await this.setState({
-                initialLoading: false,
-            })
-        }
-    }
-
-    componentDidMount() {
-        this.loadData()
-    }
-
     render() {
-        return <div className="savedPosts">
+        return <PostsList
-            <div className="savedPosts_header">
+            emptyListRender={emptyListRender}
-                <h1>
+            loadFromModel={PostModel.getSavedPosts}
-                    <Icons.Bookmark />
+            onLoadMore={PostModel.getSavedPosts}
-                    Saved Posts
+        />
-                </h1>
-            </div>
-
-            {
-                this.state.initialLoading ? <Skeleton active /> : <PostsList
-                    loading={this.state.loading}
-                    hasMorePosts={this.state.hasMorePosts}
-                    emptyListRender={emptyListRender}
-                    onLoadMore={this.loadData}
-                    posts={this.state.posts}
-                />
-            }
-        </div>
     }
-}
+}
+
+export default React.forwardRef((props, ref) => {
+    return <SavedPosts {...props} innerRef={ref} />
+})

packages/app/src/pages/posts/components/trendings/index.jsx

@@ -1,14 +0,0 @@
-import React from "react"
-import { Result } from "antd"
-
-import "./index.less"
-
-export default (props) => {
-    return <div className="trendingsBrowser">
-        <Result
-            status="404"
-            title="Not implemented"
-            subTitle="Sorry, but this feature is not implemented yet."
-        />
-    </div>
-}

packages/app/src/pages/posts/components/trendings/index.less

@@ -1 +0,0 @@
-.trendingsBrowser {}

packages/app/src/pages/posts/tabs.jsx

@@ -1,6 +1,5 @@
 import FeedTab from "./components/feed"
 import ExploreTab from "./components/explore"
-import TrendingsTab from "./components/trendings"
 import SavedPostsTab from "./components/savedPosts"
 
 export default {
@@ -14,11 +13,6 @@ export default {
         icon: "Search",
         component: ExploreTab
     },
-    "trendings": {
-        title: "Trendings",
-        icon: "TrendingUp",
-        component: TrendingsTab
-    },
     "savedPosts": {
         title: "Saved posts",
         icon: "Bookmark",

packages/app/src/theme/index.less

@@ -220,6 +220,7 @@ html {
 
 	.page_layout {
 		width: 100%;
+		height: 100%;
 	}
 }