feat: make blog data dynamic

components/blog/SingleBlog.jsx

@@ -2,43 +2,120 @@
 import Image from "next/image";
 import React, { useEffect, useState } from "react";
 import "./blog.css";
+import axios from "axios";
+import { backendUrl } from "@/utils/axios";
+import DOMPurify from 'dompurify';
+import { useParams } from "next/navigation";
+
+
 
 const SingleBlog = () => {
-  const [blogResData, setResData] = useState(null);
+  const [blog, setBlog] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  // Debug log to check if slug is received
+  const params = useParams();
+  
+  console.log("BlogPage params:", params);
+  console.log("SingleBlog received slug:", params?.["blog-id"]);
+  const slug = params?.["blog-id"]
 
   useEffect(() => {
-    const fetchData = async () => {
+    const fetchBlogData = async () => {
+      if (!slug) {
+        console.error("No slug provided");
+        setError("Blog not found. Missing identifier.");
+        setLoading(false);
+        return;
+      }
+
       try {
-        const response = await fetch("/api/blog");
-        const blog = await response.json();
-        setResData(blog.blogdata);
-      } catch (error) {
-        console.error("Error fetching blog data:", error);
+        console.log(`Fetching blog with slug: ${slug}`);
+        setLoading(true);
+        
+        // Log the full URL being called for debugging
+        const url = `${backendUrl}/blogs/${slug}/`;
+        console.log(`Making API call to: ${url}`);
+        
+        const response = await axios.get(url);
+        console.log("API response:", response.data);
+        
+        if (response.data) {
+          setBlog(response.data);
+        } else {
+          setError("No blog data received from server");
+        }
+        setLoading(false);
+      } catch (err) {
+        console.error("Error fetching blog data:", err);
+        setError(`Failed to load blog content: ${err.message || "Unknown error"}`);
+        setLoading(false);
       }
     };
-    fetchData();
-  }, []);
+
+    fetchBlogData();
+  }, [slug]);
+
+  if (loading) {
+    return (
+      <div className="max-w-4xl mx-auto p-5 text-center">
+        <p className="text-gray-500">Loading blog content for slug: {slug}...</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="max-w-4xl mx-auto p-5 text-center">
+        <p className="text-red-500">Error: {error}</p>
+      </div>
+    );
+  }
+
+  if (!blog) {
+    return (
+      <div className="max-w-4xl mx-auto p-5 text-center">
+        <p className="text-gray-500">Blog not found for slug: {slug}</p>
+      </div>
+    );
+  }
+
+  // Format the image URL
+  const imageUrl = blog.imageUrl !== "NA" 
+    ? (blog.imageUrl.startsWith('http') ? blog.imageUrl : `${backendUrl}${blog.imageUrl}`)
+    : "/api/placeholder/800/500";
+
+  // Sanitize the blog description
+  const sanitizedDescription = DOMPurify.sanitize(blog.description);
 
   return (
     <div className="max-w-4xl mx-auto p-5 space-y-6 bg-white shadow-lg rounded-lg">
+      {/* Blog Title */}
+      <h1 className="text-3xl font-bold text-center mb-6">{blog.title}</h1>
+      
+      {/* Blog Meta Information */}
+      <div className="text-center text-gray-600 mb-6">
+        <p>{blog.author} | {blog.date}</p>
+      </div>
+      
       {/* Blog Image */}
       <div className="w-full flex justify-center">
         <Image
-          src={"/blogs/significance-of-dhanteras.webp"}
+          src={imageUrl}
           height={500}
           width={800}
-          alt="Blog Cover Image"
+          alt={blog.title || "Blog Cover Image"}
           className="rounded-lg object-cover"
         />
       </div>
 
       {/* Blog Content */}
       <div className="prose lg:prose-xl mx-auto text-gray-800 leading-relaxed">
-        {blogResData ? (
-          <div dangerouslySetInnerHTML={{ __html: blogResData }} />
-        ) : (
-          <p className="text-center text-gray-500">Loading blog content...</p>
-        )}
+        <div 
+          className="blog-content"
+          dangerouslySetInnerHTML={{ __html: sanitizedDescription }}
+        />
       </div>
     </div>
   );