125 lines
3.4 KiB
JavaScript
125 lines
3.4 KiB
JavaScript
"use client";
|
|
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 [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 fetchBlogData = async () => {
|
|
if (!slug) {
|
|
console.error("No slug provided");
|
|
setError("Blog not found. Missing identifier.");
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
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);
|
|
}
|
|
};
|
|
|
|
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={imageUrl}
|
|
height={500}
|
|
width={800}
|
|
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">
|
|
<div
|
|
className="blog-content"
|
|
dangerouslySetInnerHTML={{ __html: sanitizedDescription }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SingleBlog;
|