From 6f2e5a5fee9911d691ed2aedd3ce7999967386cc Mon Sep 17 00:00:00 2001 From: srgooglo Date: Mon, 14 Nov 2022 01:30:55 +0000 Subject: [PATCH] update `PostsFeed` to `PostsList` --- .../app/src/components/PostsFeed/index.jsx | 273 ------------------ .../app/src/components/PostsFeed/index.less | 35 --- packages/app/src/components/index.js | 2 +- 3 files changed, 1 insertion(+), 309 deletions(-) delete mode 100755 packages/app/src/components/PostsFeed/index.jsx delete mode 100755 packages/app/src/components/PostsFeed/index.less diff --git a/packages/app/src/components/PostsFeed/index.jsx b/packages/app/src/components/PostsFeed/index.jsx deleted file mode 100755 index 0549b342..00000000 --- a/packages/app/src/components/PostsFeed/index.jsx +++ /dev/null @@ -1,273 +0,0 @@ -import React from "react" -import * as antd from "antd" -import { Icons } from "components/Icons" -import { PostCard, LoadMore } from "components" - -import "./index.less" - -const LoadingComponent = () => { - // FIXME: Im not sure why but, using will cause a memory leak of DOM Nodes when using IntersectionObserver - //return - - return

Loading more ...

-} - -const NoResultComponent = () => { - return -} - -// FIXME: Scroll behavior should scroll to next post or the previous one depending on the direction of the scroll -export default class PostsFeed extends React.Component { - state = { - initialLoading: true, - fetchingData: true, - hasMorePosts: true, - renderList: [], - currentIndex: 0, - } - - api = window.app.api.withEndpoints() - - listRef = React.createRef() - - wsEvents = { - "post.new": async (data) => { - this.insert(data) - }, - "post.delete": async (data) => { - this.remove(data) - } - } - - componentDidMount = async () => { - // load ws events - Object.keys(this.wsEvents).forEach((event) => { - window.app.api.namespaces["main"].listenEvent(event, this.wsEvents[event]) - }) - - // TODO: register keybindings to handle directions key scrolling to posts (use app.shortcuts) - window.app.shortcuts.register({ - id: "postsFeed.scrollUp", - key: "ArrowUp", - preventDefault: true, - }, (event) => { - this.scrollUp() - }) - window.app.shortcuts.register({ - id: "postsFeed.scrollDown", - key: "ArrowDown", - preventDefault: true, - }, (event) => { - this.scrollDown() - }) - - await this.loadPosts() - - await this.setState({ initialLoading: false }) - } - - componentWillUnmount = async () => { - // unload ws events - Object.keys(this.wsEvents).forEach((event) => { - window.app.api.namespaces["main"].unlistenEvent(event, this.wsEvents[event]) - }) - - window.app.shortcuts.remove("postsFeed.scrollUp") - window.app.shortcuts.remove("postsFeed.scrollDown") - } - - // avoid to re-render the whole list when props change - shouldComponentUpdate(nextProps, nextState) { - return this.state !== nextState - } - - scrollUp = () => { - this.scrollToIndex(this.state.currentIndex - 1) - } - - scrollDown = () => { - this.scrollToIndex(this.state.currentIndex + 1) - } - - scrollToIndex = (index) => { - const post = this.listRef.current.children[index] - - if (post) { - post.scrollIntoView({ behavior: "smooth", block: "center" }) - this.setState({ currentIndex: index }) - } - } - - handleScroll = (event) => { - event.preventDefault() - - // check if is scrolling up or down - const isScrollingUp = event.deltaY < 0 - - // get current index - const currentIndex = this.state.currentIndex - - // get next index - const nextIndex = isScrollingUp ? currentIndex - 1 : currentIndex + 1 - - // scroll to next index - this.scrollToIndex(nextIndex) - } - - loadPosts = async ({ - trim, - replace = false - } = {}) => { - // toogle fetching flag - await this.setState({ - fetchingData: true, - }) - - // get posts from api - const result = await this.api.get.feed(undefined, { - trim: trim ?? this.state.renderList.length, - limit: this.props.feedLength ?? window.app.settings.get("feed_max_fetch"), - user_id: this.props.fromUserId, - savedOnly: this.props.savedOnly, - }) - - console.log("Loaded Posts => \n", result) - - if (result) { - // if result is empty, its mean there is no more posts, so set hasMorePosts to false - 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.post.toogleLike({ post_id: data._id }).catch(() => { - antd.message.error("Failed to like post") - - return false - }) - - return result - } - - onSavePost = async (data) => { - let result = await this.api.post.postToogleSave({ post_id: data._id }).catch(() => { - antd.message.error("Failed to save post") - - return false - }) - - return result - } - - onDeletePost = async (data) => { - antd.Modal.confirm({ - title: "Are you sure you want to delete this post?", - content: "This action is irreversible", - okText: "Yes", - okType: "danger", - cancelText: "No", - onOk: async () => { - await this.api.delete.post({ post_id: data._id }).catch(() => { - antd.message.error("Failed to delete post") - }) - }, - }) - } - - onDoubleClickPost = (data) => { - // open post - app.setLocation(`/post/${data._id}`) - } - - insert = async (data) => { - await this.setState({ - renderList: [this.getPostRender(data), ...this.state.renderList], - }) - } - - remove = async (post_id) => { - const updatedList = this.state.renderList - - const postIndex = updatedList.findIndex((item) => item.props.data._id === post_id) - updatedList.splice(postIndex, 1) - - await this.setState({ - renderList: updatedList, - }) - } - - getPostRender = (item, index = this.state.renderList.length) => { - return - } - - render() { - if (this.state.initialLoading) { - return - } - - if (this.state.renderList.length === 0) { - return
- -

Whoa, nothing on here...

-
- } - - return
- { - this.loadPosts() - }} - loadingComponent={LoadingComponent} - noResultComponent={NoResultComponent} - fetching={this.state.fetchingData} - hasMore={this.state.hasMorePosts} - className="posts" - ref={this.listRef} - > - {this.state.renderList} - -
- } -} \ No newline at end of file diff --git a/packages/app/src/components/PostsFeed/index.less b/packages/app/src/components/PostsFeed/index.less deleted file mode 100755 index 6964b731..00000000 --- a/packages/app/src/components/PostsFeed/index.less +++ /dev/null @@ -1,35 +0,0 @@ -.postsFeed { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - - width: 100%; - - .infinite-scroll { - display: flex; - flex-direction: column; - align-items: center; - //justify-content: center; - - width: 100%; - } - - .posts { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - - width: 100%; - - overflow: overlay; - - // fix - padding: 5px 0; - - >div { - margin-bottom: 20px; - } - } -} \ No newline at end of file diff --git a/packages/app/src/components/index.js b/packages/app/src/components/index.js index f016e84c..934b2a05 100755 --- a/packages/app/src/components/index.js +++ b/packages/app/src/components/index.js @@ -42,7 +42,7 @@ export { default as Creator } from "./Creator" export { default as FollowButton } from "./FollowButton" // POSTS -export { default as PostsFeed } from "./PostsFeed" +export { default as PostsList } from "./PostsList" export { default as PostCard } from "./PostCard" export { default as PostCreator } from "./PostCreator"