src/components/posts/LikeButton.tsx

@@ -2,7 +2,7 @@
 
 import { Button } from "@nextui-org/react";
 import { PostType } from "@/types/PostType";
-import { Heart } from "lucide-react";
+import { Heart, LoaderCircle } from "lucide-react";
 import { toast } from "react-toastify";
 import { getCookie } from "@/helpers/cookie";
 import { redirect } from "next/navigation";
@@ -11,6 +11,7 @@ import { useTheme } from "next-themes";
 
 export default function LikeButton({ post }: { post: PostType }) {
   const [likes, setLikes] = useState<number>(post.likes.length);
+  const [loading, setLoading] = useState<boolean>(false);
   const [liked, setLiked] = useState<boolean>(false);
   const { theme } = useTheme();
   const [reduceMotion, setReduceMotion] = useState<boolean>(false);
@@ -42,10 +43,11 @@ export default function LikeButton({ post }: { post: PostType }) {
           : "",
       }}
       onPress={async () => {
-        if (!getCookie("token")) {
-          redirect("/login");
+        if (loading || liked) {
+          return;
         }
 
+        setLoading(true);
         const response = await fetch(
           process.env.NEXT_PUBLIC_MODE === "PROD"
             ? "https://d2jam.com/api/v1/like"
@@ -64,46 +66,49 @@ export default function LikeButton({ post }: { post: PostType }) {
           }
         );
 
-        post.hasLiked = !post.hasLiked;
-
-        if (post.hasLiked) {
-          setLiked(true);
-          setTimeout(() => setLiked(false), 1000);
-          setLikes(likes + 1);
-        } else {
-          setLiked(false);
-          setLikes(likes - 1);
-        }
-
         if (!response.ok) {
+          setLoading(false);
           if (response.status == 401) {
             redirect("/login");
           } else {
-            post.hasLiked = !post.hasLiked;
             toast.error("An error occurred");
             return;
           }
+        } else {
+          const data = await response.json();
+          setLikes(parseInt(data.likes));
+          post.hasLiked = data.action === "like";
+          setLoading(false);
+          setLiked(data.action === "like");
+          setTimeout(() => setLiked(false), 1000);
         }
       }}
     >
-      <div className="flex gap-2 items-center" style={{ position: "relative" }}>
-        <Heart size={16} />
-        <Heart
-          size={16}
-          className={
-            liked && !reduceMotion
-              ? "animate-ping absolute top-0 left-0"
-              : "absolute top-0 left-0"
-          }
-          style={{
-            position: "absolute",
-            top: "0",
-            left: "0",
-            zIndex: "10",
-          }}
-        />
-        <p>{likes}</p>
-      </div>
+      {loading ? (
+        <LoaderCircle className="animate-spin" size={16} />
+      ) : (
+        <div
+          className="flex gap-2 items-center"
+          style={{ position: "relative" }}
+        >
+          <Heart size={16} />
+          <Heart
+            size={16}
+            className={
+              liked && !reduceMotion
+                ? "animate-ping absolute top-0 left-0"
+                : "absolute top-0 left-0"
+            }
+            style={{
+              position: "absolute",
+              top: "0",
+              left: "0",
+              zIndex: "10",
+            }}
+          />
+          <p>{likes}</p>
+        </div>
+      )}
     </Button>
   );
 }