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"
export default (props) => {
const [liked, setLiked] = React.useState(props.defaultLiked ?? false)
const [clicked, setCliked] = React.useState(false)
const LikeButtonAction = (props) => {
const [liked, setLiked] = React.useState(props.defaultLiked ?? false)
const [clicked, setCliked] = React.useState(false)
const handleClick = async () => {
let to = !liked
const handleClick = async () => {
let to = !liked
setCliked(to)
setCliked(to)
if (typeof props.onClick === "function") {
const result = await props.onClick(to)
if (typeof result === "boolean") {
to = result
}
}
if (typeof props.onClick === "function") {
const result = await props.onClick(to)
setLiked(to)
}
if (typeof result === "boolean") {
to = result
}
}
return <div
className={
classnames(
"like_btn_wrapper",
{
["liked"]: liked,
["clicked"]: clicked
}
)
}
onClick={handleClick}
>
<button className="like_btn">
<div className="ripple"></div>
<svg
className="heart"
width="24"
height="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>
</svg>
</button>
<CountUp
start={props.count}
separator="."
end={props.count}
startOnMount={false}
duration={3}
className="count"
useEasing={true}
/>
</div>
}
setLiked(to)
}
return (
<div
className={classnames("like_btn_wrapper", {
["liked"]: liked,
["clicked"]: clicked,
})}
onClick={handleClick}
>
<button className="like_btn">
<div className="ripple"></div>
<svg
className="heart"
width="24"
height="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>
</svg>
</button>
<CountUp
start={props.count}
separator="."
end={props.count}
startOnMount={false}
duration={3}
className="count"
useEasing={true}
/>
</div>
)
}
export default LikeButtonAction