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

Refactor LikeButton to use named function component

Browse Source
This commit is contained in:
srgooglo 2025-07-04 14:11:49 +02:00
parent 843405dd15
commit 179baa3777
1 changed files with 48 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
packages/app/src/components/PostCard/components/actions/likeButton/index.jsx
View File

@ -4,56 +4,56 @@ import CountUp from "react-countup"
import "./index.less" import "./index.less"
export default (props) => { const LikeButtonAction = (props) => {
const [liked, setLiked] = React.useState(props.defaultLiked ?? false) const [liked, setLiked] = React.useState(props.defaultLiked ?? false)
const [clicked, setCliked] = React.useState(false) const [clicked, setCliked] = React.useState(false)
const handleClick = async () => { const handleClick = async () => {
let to = !liked let to = !liked
setCliked(to) 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") {
to = result
}
}
setLiked(to) if (typeof result === "boolean") {
} to = result
}
}
return <div setLiked(to)
className={ }
classnames(
"like_btn_wrapper", return (
{ <div
["liked"]: liked, className={classnames("like_btn_wrapper", {
["clicked"]: clicked ["liked"]: liked,
} ["clicked"]: clicked,
) })}
} onClick={handleClick}
onClick={handleClick} >
> <button className="like_btn">
<button className="like_btn"> <div className="ripple"></div>
<div className="ripple"></div> <svg
<svg className="heart"
className="heart" width="24"
width="24" height="24"
height="24" viewBox="0 0 24 24"
viewBox="0 0 24 24" >
> <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"></path>
<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"></path> </svg>
</svg> </button>
</button> <CountUp
<CountUp start={props.count}
start={props.count} separator="."
separator="." end={props.count}
end={props.count} startOnMount={false}
startOnMount={false} duration={3}
duration={3} className="count"
className="count" useEasing={true}
useEasing={true} />
/> </div>
</div> )
} }
export default LikeButtonAction