RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 02:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rewrite in order to use react hooks

Browse Source
This commit is contained in:
srgooglo 2022-06-03 06:03:31 +02:00
parent e1f68623dc
commit 3bc42bff3c
1 changed files with 83 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

194
packages/app/src/components/PostCard/index.jsx
View File

@ -201,7 +201,7 @@ const PostActions = (props) => {
<Icons.Bookmark /> <Icons.Bookmark />
</div> </div>
</div> </div>
{props.self && <div className="action" id="selfMenu" onClick={props.onClickSelfMenu}> {props.isSelf && <div className="action" id="selfMenu" onClick={props.onClickSelfMenu}>
<antd.Dropdown <antd.Dropdown
overlay={<antd.Menu overlay={<antd.Menu
onClick={handleSelfMenuAction} onClick={handleSelfMenuAction}
@ -224,124 +224,96 @@ const PostActions = (props) => {
</div> </div>
} }
export class PostCard extends React.Component { export const PostCard = React.memo(({ selfId, data = {}, events = {} }) => {
state = { const [loading, setLoading] = React.useState(true)
loading: true, const [likes, setLikes] = React.useState(data.likes ?? [])
likes: this.props.data.likes, const [comments, setComments] = React.useState(data.comments ?? [])
comments: this.props.data.comments, const [hasLiked, setHasLiked] = React.useState(false)
}
api = window.app.request const onClickDelete = async () => {
if (typeof events.onClickDelete !== "function") {
componentDidMount = async () => { console.warn("onClickDelete event is not a function")
window.app.ws.listen(`post.like.${this.props.data._id}`, async (data) => { return
await this.setState({ likes: data })
})
window.app.ws.listen(`post.unlike.${this.props.data._id}`, async (data) => {
await this.setState({ likes: data })
})
window.app.ws.listen(`post.comment.${this.props.data._id}`, async (data) => {
await this.setState({ comments: data })
})
window.app.ws.listen(`post.uncomment.${this.props.data._id}`, async (data) => {
await this.setState({ comments: data })
})
await this.setState({
loading: false
})
}
onClickDelete = async () => {
const result = await this.api.delete.post({
post_id: this.props.data._id,
}).catch(error => {
console.error(error)
antd.message.error(error.message)
return {
success: false,
}
})
if (result.success) {
if (typeof this.props.onDelete === "function") {
this.props.onDelete()
}
}
}
onClickLike = async (to) => {
let result = false
if (to) {
const apiResult = await this.api.put.like({ post_id: this.props.data._id })
result = apiResult.success
} else {
const apiResult = await this.api.put.unlike({ post_id: this.props.data._id })
result = apiResult.success
} }
return result return await events.onClickDelete(data)
} }
onClickSave = async () => { const onClickLike = async () => {
antd.message.warn("Not implemented yet") if (typeof events.onClickLike !== "function") {
// TODO console.warn("onClickLike event is not a function")
} return
onClickEdit = async () => {
antd.message.warn("Not implemented yet")
// TODO
}
hasLiked = () => {
return this.state.likes.some((user_id) => user_id === this.props.selfId)
}
render() {
const hasLiked = this.hasLiked()
if (this.state.loading) {
return <antd.Skeleton active />
} }
return <div return await events.onClickLike(data)
id={this.props.data._id} }
key={this.props.data._id}
className={classnames("postCard", { ["liked"]: hasLiked })} const onDataUpdate = (data) => {
> setLikes(data.likes)
<div className="wrapper"> setComments(data.comments)
<PostHeader }
postData={this.props.data}
isLiked={hasLiked} React.useEffect(() => {
likes={this.state.likes.length} // first listen to post changes
comments={this.state.comments.length} window.app.ws.listen(`post.dataUpdate.${data._id}`, onDataUpdate)
/>
<PostContent // proccess post info
data={this.props.data} // {...}
/>
</div> // then load
<div className="actionsIndicatorWrapper"> setLoading(false)
<div className="actionsIndicator">
<Icons.MoreHorizontal /> return () => {
</div> // remove the listener
</div> window.app.ws.unlisten(`post.dataUpdate.${data._id}`, onDataUpdate)
<div className="actionsWrapper"> }
<PostActions }, [])
self={this.props.self}
onClickLike={this.onClickLike} React.useEffect(() => {
defaultLiked={hasLiked} // check if the post has liked by you
actions={{ const hasLiked = likes.includes(selfId)
edit: this.onClickEdit, //console.log(`[${data._id}] CHECKING LIKE OF USER ${selfId} > ${hasLiked}`)
delete: this.onClickDelete,
}} setHasLiked(hasLiked)
/> })
if (loading) {
return <antd.Skeleton active />
}
return <div
key={data._id}
id={data._id}
className={classnames("postCard", { ["liked"]: hasLiked })}
>
<div className="wrapper">
<PostHeader
postData={data}
isLiked={hasLiked}
likes={likes.length}
comments={comments.length}
/>
<PostContent
data={data}
/>
</div>
<div className="actionsIndicatorWrapper">
<div className="actionsIndicator">
<Icons.MoreHorizontal />
</div> </div>
</div> </div>
} <div className="actionsWrapper">
} <PostActions
isSelf={selfId === data.user_id}
defaultLiked={hasLiked}
onClickLike={onClickLike}
actions={{
delete: onClickDelete,
}}
/>
</div>
</div>
})
export const PostCardAnimated = (props, ref,) => { export const PostCardAnimated = (props, ref,) => {
const motionRef = React.useRef(false) const motionRef = React.useRef(false)
@ -381,4 +353,4 @@ export const PostCardAnimated = (props, ref,) => {
export const ForwardedPostCardAnimated = React.forwardRef(PostCardAnimated) export const ForwardedPostCardAnimated = React.forwardRef(PostCardAnimated)
export default ForwardedPostCardAnimated export default PostCard