use ws events on post list

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

@@ -27,10 +27,30 @@ export default class PostsLists extends React.Component {
     state = {
         currentIndex: 0,
         openPost: null,
+        list: this.props.list ?? [],
     }
 
     listRef = React.createRef()
 
+    timelineWsEvents = {
+        "post.new": (data) => {
+            console.log("New post => ", data)
+
+            this.setState({
+                list: [data, ...this.state.list],
+            })
+        },
+        "post.delete": (id) => {
+            console.log("Deleted post => ", id)
+
+            this.setState({
+                list: this.state.list.filter((post) => {
+                    return post._id !== id
+                }),
+            })
+        }
+    }
+
     componentDidMount = async () => {
         window.app.shortcuts.register({
             id: "postsFeed.scrollUp",
@@ -46,11 +66,32 @@ export default class PostsLists extends React.Component {
         }, (event) => {
             this.scrollDown()
         })
+
+        if (this.props.watchTimeline) {
+            Object.entries(this.timelineWsEvents).forEach(([event, callback]) => {
+                app.cores.api.listenEvent(event, callback)
+            })
+        }
     }
 
     componentWillUnmount = async () => {
         window.app.shortcuts.remove("postsFeed.scrollUp")
         window.app.shortcuts.remove("postsFeed.scrollDown")
+
+        if (this.props.watchTimeline) {
+            Object.entries(this.timelineWsEvents).forEach(([event, callback]) => {
+                app.cores.api.unlistenEvent(event, callback)
+            })
+        }
+    }
+
+    // watch if props.list has changed and update state.list
+    componentDidUpdate = async (prevProps) => {
+        if (prevProps.list !== this.props.list) {
+            this.setState({
+                list: this.props.list,
+            })
+        }
     }
 
     scrollUp = () => {
@@ -128,7 +169,7 @@ export default class PostsLists extends React.Component {
     }
 
     render() {
-        if (this.props.posts.length === 0) {
+        if (this.state.list.length === 0) {
             if (typeof this.props.emptyListRender === "function") {
                 return React.createElement(this.props.emptyListRender)
             }
@@ -154,7 +195,9 @@ export default class PostsLists extends React.Component {
                 fetching={this.props.loading}
             >
                 {
-                    this.props.posts.map((post, index) => {
+                    this.state.list.map((post, index) => {
+                        console.log("Post => ", post, index)
+
                         return <PostCard
                             key={index}
                             data={post}

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

@@ -17,21 +17,6 @@ export default class ExplorePosts extends React.Component {
         filledSearcher: false,
     }
 
-    wsEvents = {
-        "post.new": async (data) => {
-            this.setState({
-                posts: [data, ...this.state.posts],
-            })
-        },
-        "post.delete": async (id) => {
-            this.setState({
-                posts: this.state.posts.filter((post) => {
-                    return post._id !== id
-                }),
-            })
-        }
-    }
-
     loadPosts = async ({
         trim,
         replace = false
@@ -90,16 +75,6 @@ export default class ExplorePosts extends React.Component {
 
     componentDidMount = async () => {
         await this.loadPosts()
-
-        Object.keys(this.wsEvents).forEach((event) => {
-            app.cores.api.listenEvent(event, this.wsEvents[event])
-        })
-    }
-
-    componentWillUnmount = async () => {
-        Object.keys(this.wsEvents).forEach((event) => {
-            app.cores.api.unlistenEvent(event, this.wsEvents[event])
-        })
     }
 
     render() {
@@ -118,7 +93,7 @@ export default class ExplorePosts extends React.Component {
                     loading={this.state.loading}
                     hasMorePosts={this.state.hasMorePosts}
                     onLoadMore={this.loadPosts}
-                    posts={this.state.posts}
+                    list={this.state.posts}
                 />
             }
         </div>

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

@@ -27,21 +27,6 @@ export default class Feed extends React.Component {
         posts: [],
     }
 
-    wsEvents = {
-        "post.new": (data) => {
-            this.setState({
-                posts: [data, ...this.state.posts],
-            })
-        },
-        "post.delete": (id) => {
-            this.setState({
-                posts: this.state.posts.filter((post) => {
-                    return post._id !== id
-                }),
-            })
-        }
-    }
-
     loadData = async ({
         trim,
         replace = false
@@ -86,18 +71,6 @@ export default class Feed extends React.Component {
 
     componentDidMount = async () => {
         await this.loadData()
-
-        console.log(this.wsEvents)
-
-        Object.keys(this.wsEvents).forEach((event) => {
-            app.cores.api.listenEvent(event, this.wsEvents[event])
-        })
-    }
-
-    componentWillUnmount = async () => {
-        Object.keys(this.wsEvents).forEach((event) => {
-            app.cores.api.unlistenEvent(event, this.wsEvents[event])
-        })
     }
 
     render() {
@@ -108,10 +81,8 @@ export default class Feed extends React.Component {
                     hasMorePosts={this.state.hasMorePosts}
                     emptyListRender={emptyListRender}
                     onLoadMore={this.loadData}
-                    posts={this.state.posts}
-                    {
-                    ...this.props
-                    }
+                    list={this.state.posts}
+                    watchTimeline
                 />
             }
         </div>