implement explore tab

packages/app/src/pages/home/components/explore/index.jsx

@@ -0,0 +1,102 @@
+import React from "react"
+import { Skeleton } from "antd"
+import { Icons } from "components/Icons"
+
+import { PostsList } from "components"
+import Post from "models/post"
+
+import "./index.less"
+
+export default class ExplorePosts extends React.Component {
+    state = {
+        loading: true,
+        initialLoading: true,
+        hasMorePosts: true,
+        posts: [],
+    }
+
+    wsEvents = {
+        "post.new": async (data) => {
+            this.setState({
+                posts: [data, ...this.state.posts],
+            })
+        },
+        "post.delete": async (data) => {
+            this.setState({
+                posts: this.state.posts.filter((post) => post.id !== data.id),
+            })
+        }
+    }
+
+    loadPosts = async ({
+        trim,
+        replace = false
+    } = {}) => {
+        await this.setState({
+            loading: true,
+        })
+
+        // get posts from api
+        const result = await Post.getExplorePosts({
+            trim: trim ?? this.state.posts.length,
+        })
+
+        console.log("Loaded posts => \n", result)
+
+        if (result) {
+            if (result.length === 0) {
+                await this.setState({
+                    hasMorePosts: 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.loadPosts()
+
+        Object.keys(this.wsEvents).forEach((event) => {
+            window.app.api.namespaces["main"].listenEvent(event, this.wsEvents[event])
+        })
+    }
+
+    componentWillUnmount = async () => {
+        Object.keys(this.wsEvents).forEach((event) => {
+            window.app.api.namespaces["main"].unlistenEvent(event, this.wsEvents[event])
+        })
+    }
+
+    render() {
+        return <div className="postsExplore">
+            <div className="postsExplore_header">
+                <h1>
+                    <Icons.Search /> Explore
+                </h1>
+            </div>
+            {
+                this.state.initialLoading ? <Skeleton active /> : <PostsList
+                    loading={this.state.loading}
+                    hasMorePosts={this.state.hasMorePosts}
+                    onLoadMore={this.loadPosts}
+                    posts={this.state.posts}
+                />
+            }
+        </div>
+    }
+}

packages/app/src/pages/home/components/explore/index.less

@@ -0,0 +1,7 @@
+.postsExplore {
+    width: 100%;
+
+    .postsExplore_header {
+        font-size: 1.3rem;
+    }
+}

packages/app/src/pages/home/index.jsx

@@ -7,6 +7,7 @@ import { Icons, createIconRender } from "components/Icons"
 import { HashtagTrendings, FeaturedEventsAnnouncements, ConnectedFriends } from "components"
 
 import FeedBrowser from "./components/feed"
+import ExploreBrowser from "./components/explore"
 import LivestreamsBrowser from "./components/livestreams"
 import SavedPostsBrowser from "./components/savedPosts"
 
@@ -18,6 +19,11 @@ const Tabs = {
         icon: "Rss",
         component: FeedBrowser
     },
+    "explore": {
+        title: "Explore",
+        icon: "Search",
+        component: ExploreBrowser
+    },
     "livestreams": {
         title: "Livestreams",
         icon: "Tv",