Add likes

src/app/login/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button, Form, Input } from "@nextui-org/react";
+import { Button, Form, Input, Link } from "@nextui-org/react";
 import { redirect } from "next/navigation";
 import { useState } from "react";
 import { toast } from "react-toastify";
@@ -105,6 +105,9 @@ export default function UserPage() {
             Reset
           </Button>
         </div>
+        <p>
+          Don't have an account? <Link href="/signup">Sign up</Link>
+        </p>
       </Form>
     </div>
   );

src/app/signup/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button, Form, Input } from "@nextui-org/react";
+import { Button, Form, Input, Link } from "@nextui-org/react";
 import { useState } from "react";
 
 export default function UserPage() {
@@ -129,6 +129,9 @@ export default function UserPage() {
             Reset
           </Button>
         </div>
+        <p>
+          Already have an account? <Link href="/login">Log In</Link>
+        </p>
       </Form>
     </div>
   );

src/components/posts/LikeButton.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { Button } from "@nextui-org/react";
+import { PostType } from "@/types/PostType";
+import { Heart } from "lucide-react";
+import { toast } from "react-toastify";
+import { getCookie } from "@/helpers/cookie";
+import { redirect } from "next/navigation";
+import { useState } from "react";
+
+export default function LikeButton({ post }: { post: PostType }) {
+  const [likes, setLikes] = useState(post.likes.length);
+
+  return (
+    <Button
+      size="sm"
+      variant="bordered"
+      onPress={async () => {
+        const response = await fetch(
+          process.env.NEXT_PUBLIC_MODE === "PROD"
+            ? "https://d2jam.com/api/v1/like"
+            : "http://localhost:3005/api/v1/like",
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+              authorization: `Bearer ${getCookie("token")}`,
+            },
+            credentials: "include",
+            body: JSON.stringify({
+              username: getCookie("user"),
+              postId: post.id,
+            }),
+          }
+        );
+
+        if (!response.ok) {
+          if (response.status == 401) {
+            redirect("/login");
+          } else {
+            toast.error("An error occured");
+            return;
+          }
+        } else {
+          setLikes(await response.text());
+        }
+      }}
+    >
+      <Heart size={16} /> {likes}
+    </Button>
+  );
+}

src/components/posts/PostCard.tsx

@@ -3,6 +3,7 @@ import { formatDistance } from "date-fns";
 import Link from "next/link";
 import { PostType } from "@/types/PostType";
 import { Heart, MessageCircle } from "lucide-react";
+import LikeButton from "./LikeButton";
 
 export default function PostCard({ post }: { post: PostType }) {
   return (
@@ -37,9 +38,7 @@ export default function PostCard({ post }: { post: PostType }) {
         <Spacer y={4} />
 
         <div className="flex gap-3">
-          <Button size="sm" variant="bordered">
+          <LikeButton post={post} />
-            <Heart size={16} /> {post.likers.length}
-          </Button>
           <Button size="sm" variant="bordered">
             <MessageCircle size={16} /> {0}
           </Button>