mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-10 02:54:15 +00:00
update PostsFeed to PostsList
This commit is contained in:
parent
bb46cf1b33
commit
6f2e5a5fee
@ -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 <antd.Skeleton> will cause a memory leak of DOM Nodes when using IntersectionObserver
|
|
||||||
//return <antd.Skeleton active />
|
|
||||||
|
|
||||||
return <p><Icons.LoadingOutlined spin className="loadingIcon" /> Loading more ...</p>
|
|
||||||
}
|
|
||||||
|
|
||||||
const NoResultComponent = () => {
|
|
||||||
return <antd.Result
|
|
||||||
status="info"
|
|
||||||
title="This is the end"
|
|
||||||
subTitle="We dont have more posts for you"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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 <PostCard
|
|
||||||
key={index}
|
|
||||||
data={item}
|
|
||||||
events={{
|
|
||||||
onClickLike: this.onLikePost,
|
|
||||||
onClickDelete: this.onDeletePost,
|
|
||||||
onClickSave: this.onSavePost,
|
|
||||||
onDoubleClick: this.onDoubleClickPost,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
if (this.state.initialLoading) {
|
|
||||||
return <antd.Skeleton active />
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.state.renderList.length === 0) {
|
|
||||||
return <div>
|
|
||||||
<antd.Empty />
|
|
||||||
<h1>Whoa, nothing on here...</h1>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
return <div
|
|
||||||
id="postsFeed"
|
|
||||||
className="postsFeed"
|
|
||||||
onScroll={this.handleScroll}
|
|
||||||
>
|
|
||||||
<LoadMore
|
|
||||||
onBottom={() => {
|
|
||||||
this.loadPosts()
|
|
||||||
}}
|
|
||||||
loadingComponent={LoadingComponent}
|
|
||||||
noResultComponent={NoResultComponent}
|
|
||||||
fetching={this.state.fetchingData}
|
|
||||||
hasMore={this.state.hasMorePosts}
|
|
||||||
className="posts"
|
|
||||||
ref={this.listRef}
|
|
||||||
>
|
|
||||||
{this.state.renderList}
|
|
||||||
</LoadMore>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -42,7 +42,7 @@ export { default as Creator } from "./Creator"
|
|||||||
export { default as FollowButton } from "./FollowButton"
|
export { default as FollowButton } from "./FollowButton"
|
||||||
|
|
||||||
// POSTS
|
// POSTS
|
||||||
export { default as PostsFeed } from "./PostsFeed"
|
export { default as PostsList } from "./PostsList"
|
||||||
export { default as PostCard } from "./PostCard"
|
export { default as PostCard } from "./PostCard"
|
||||||
export { default as PostCreator } from "./PostCreator"
|
export { default as PostCreator } from "./PostCreator"
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user