trafficlunar/tomodachi-share
1
0
Fork 0
mirror of https://github.com/trafficlunar/tomodachi-share.git synced 2026-06-28 14:44:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: working like button

Browse source
This commit is contained in:
trafficlunar 2025-03-31 17:13:17 +01:00
parent bc7460bd71
commit e458d4459f
4 changed files with 105 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/app/components/like-button.tsx
View file

@ -6,26 +6,32 @@ import { Icon } from "@iconify/react";
interface Props {
likes: number;
miiId: number | undefined;
isLiked: boolean;
isLoggedIn: boolean;
big?: boolean;
}
export default function LikeButton({ likes, isLoggedIn, big }: Props) {
const [isLiked, setIsLiked] = useState(false);
export default function LikeButton({ likes, isLiked, miiId, isLoggedIn, big }: Props) {
const [isLikedState, setIsLikedState] = useState(isLiked);
const [likesState, setLikesState] = useState(likes);
const onClick = () => {
const onClick = async () => {
if (!isLoggedIn) redirect("/login");
setIsLiked((prev) => !prev);
setIsLikedState((prev) => !prev);
setLikesState((prev) => (isLiked ? prev - 1 : prev + 1));
// todo: update database
const response = await fetch("/api/like", { method: "PATCH", body: JSON.stringify({ miiId }) });
const { liked, count } = await response.json();
setIsLikedState(liked);
setLikesState(count);
};
return (
<button onClick={onClick} className={`flex items-center gap-2 text-red-400 cursor-pointer ${big ? "text-3xl" : "text-xl"}`}>
<Icon icon={isLiked ? "icon-park-solid:like" : "icon-park-outline:like"} />
<Icon icon={isLikedState ? "icon-park-solid:like" : "icon-park-outline:like"} />
<span>{likesState}</span>
</button>
);