Merge pull request #50 from codeunia-dev/feat/likefunctiontoblog

Feature: Add like button functionality to blog posts with tooltip support

Author: codeunia-dev

app/api/blog/[slug]/like/route.ts

@@ -0,0 +1,89 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { createClient } from '@/lib/supabase/server';
+
+// Helper to get current user
+async function getUser() {
+  const supabase = await createClient();
+  const { data: { user } } = await supabase.auth.getUser();
+  return user;
+}
+
+// Helper to extract slug from the request URL
+function getSlugFromRequest(req: NextRequest): string | null {
+  // /api/blog/[slug]/like
+  const url = req.nextUrl || new URL(req.url);
+  const match = url.pathname.match(/\/blog\/([^/]+)\/like/);
+  return match ? decodeURIComponent(match[1]) : null;
+}
+
+export async function GET(req: NextRequest) {
+  const supabase = await createClient();
+  const blog_slug = getSlugFromRequest(req);
+  if (!blog_slug) {
+    return NextResponse.json({ error: 'Missing slug' }, { status: 400 });
+  }
+  // Get like count
+  const { count, error: countError } = await supabase
+    .from('blog_likes')
+    .select('*', { count: 'exact', head: true })
+    .eq('blog_slug', blog_slug);
+
+  // Get current user
+  const user = await getUser();
+  let likedByUser = false;
+  if (user) {
+    const { data: userLike } = await supabase
+      .from('blog_likes')
+      .select('id')
+      .eq('blog_slug', blog_slug)
+      .eq('user_id', user.id)
+      .maybeSingle();
+    likedByUser = !!userLike;
+  }
+
+  if (countError) {
+    return NextResponse.json({ error: countError.message }, { status: 500 });
+  }
+  return NextResponse.json({ count: count ?? 0, likedByUser });
+}
+
+export async function POST(req: NextRequest) {
+  const supabase = await createClient();
+  const user = await getUser();
+  if (!user) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+  const blog_slug = getSlugFromRequest(req);
+  if (!blog_slug) {
+    return NextResponse.json({ error: 'Missing slug' }, { status: 400 });
+  }
+  // Insert like (ignore if already exists due to unique constraint)
+  const { error } = await supabase
+    .from('blog_likes')
+    .insert({ user_id: user.id, blog_slug });
+  if (error && !error.message.includes('duplicate key')) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+  return NextResponse.json({ success: true });
+}
+
+export async function DELETE(req: NextRequest) {
+  const supabase = await createClient();
+  const user = await getUser();
+  if (!user) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+  const blog_slug = getSlugFromRequest(req);
+  if (!blog_slug) {
+    return NextResponse.json({ error: 'Missing slug' }, { status: 400 });
+  }
+  const { error } = await supabase
+    .from('blog_likes')
+    .delete()
+    .eq('user_id', user.id)
+    .eq('blog_slug', blog_slug);
+  if (error) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+  return NextResponse.json({ success: true });
+} 

app/blog/[slug]/page.tsx

@@ -12,10 +12,82 @@ import { motion } from "framer-motion"
 import { BlogPost } from "@/components/data/blog-posts"
 import ReactMarkdown from 'react-markdown'
 import rehypeRaw from 'rehype-raw'
+import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip"
 
 import Header from "@/components/header";
 import Footer from "@/components/footer";
 
+function LikeButton({ slug, isAuthenticated }: { slug: string, isAuthenticated: boolean }) {
+  const [likeCount, setLikeCount] = useState(0);
+  const [likedByUser, setLikedByUser] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function fetchLikeData() {
+      setLoading(true);
+      try {
+        const res = await fetch(`/api/blog/${slug}/like`);
+        if (res.ok) {
+          const data = await res.json();
+          setLikeCount(data.count);
+          setLikedByUser(data.likedByUser);
+        }
+      } catch {}
+      setLoading(false);
+    }
+    if (slug) fetchLikeData();
+  }, [slug]);
+
+  const handleLike = async () => {
+    if (!isAuthenticated) {
+      return;
+    }
+    setLoading(true);
+    if (!likedByUser) {
+      // Like the post
+      const res = await fetch(`/api/blog/${slug}/like`, { method: "POST" });
+      if (res.ok) {
+        setLikeCount((c) => c + 1);
+        setLikedByUser(true);
+      }
+    } else {
+      // Unlike the post
+      const res = await fetch(`/api/blog/${slug}/like`, { method: "DELETE" });
+      if (res.ok) {
+        setLikeCount((c) => c - 1);
+        setLikedByUser(false);
+      }
+    }
+    setLoading(false);
+  };
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span>
+          <Button
+            onClick={handleLike}
+            disabled={loading || !isAuthenticated}
+            variant={likedByUser ? "default" : "ghost"}
+            size="sm"
+            className="flex items-center gap-2"
+          >
+            {likedByUser ? (
+              <Heart className="h-4 w-4 text-red-500 fill-red-500" />
+            ) : (
+              <Heart className="h-4 w-4" />
+            )}
+            <span>{likeCount}</span>
+          </Button>
+        </span>
+      </TooltipTrigger>
+      <TooltipContent sideOffset={8}>
+        {isAuthenticated ? (likedByUser ? "Unlike" : "Like") : "Login to like posts"}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
 export default function BlogPostPage() {
   const [isAuthenticated, setIsAuthenticated] = useState(false)
   const [isLoading, setIsLoading] = useState(true)
@@ -141,9 +213,7 @@ export default function BlogPostPage() {
               <Button variant="ghost" size="sm" className="hover:bg-primary/10 transition-colors">
                 <Share2 className="h-4 w-4" />
               </Button>
-              <Button variant="ghost" size="sm" className="hover:bg-primary/10 transition-colors">
-                <Heart className="h-4 w-4" />
-              </Button>
+              <LikeButton slug={slug} isAuthenticated={isAuthenticated} />
             </motion.div>
           </div>
         </div>