improve like action & await to server response

This commit is contained in:
srgooglo 2022-03-02 17:14:13 +01:00
parent 1259735498
commit 213b6d2208

View File

@ -10,10 +10,13 @@ import "./index.less"
function LikeButton(props) { function LikeButton(props) {
const [liked, setLiked] = React.useState(props.defaultLiked ?? false) const [liked, setLiked] = React.useState(props.defaultLiked ?? false)
const [clicked, setCliked] = React.useState(false)
const handleClick = async () => { const handleClick = async () => {
let to = !liked let to = !liked
setCliked(to)
if (typeof props.onClick === "function") { if (typeof props.onClick === "function") {
const result = await props.onClick(to) const result = await props.onClick(to)
if (typeof result === "boolean") { if (typeof result === "boolean") {
@ -31,14 +34,14 @@ function LikeButton(props) {
<div <div
className={classnames( className={classnames(
"ripple", "ripple",
{ ["clicked"]: liked } { ["clicked"]: clicked }
)} )}
></div> ></div>
<svg <svg
className={classnames( className={classnames(
"heart", "heart",
{ ["empty"]: !liked }, { ["empty"]: !liked },
{ ["clicked"]: liked }, { ["clicked"]: clicked },
)} )}
width="24" width="24"
height="24" height="24"
@ -174,7 +177,7 @@ export default class PostCard extends React.Component {
return <antd.Skeleton active /> return <antd.Skeleton active />
} }
return <div className="postCard"> return <div id={this.props.data._id} key={this.props.data._id} className="postCard">
<div className="wrapper"> <div className="wrapper">
<PostHeader <PostHeader
postData={this.props.data} postData={this.props.data}