completeBlogViewPage.tsx

import { useEffect, useState } from "react";
import LikesAndComment from "../likesAndComment/likesAndComment";
import CommentComponent from "../commentComponent/commentComponent";
import axios from "axios";
import { useParams } from "react-router-dom";
import draftToHtml from "draftjs-to-html";
import { Blog } from "../types/types";

const CompleteBlogViewPage = () => {
  const [fullBlog, setFullBlog] = useState<Blog | null>(null);
  const { id } = useParams<{ id: string }>();
  const blogId = id; // MongoDB _id is a string

  useEffect(() => {
    async function fetchingBlogById() {
      try {
        const response = await axios.get<Blog>(
          `${import.meta.env.VITE_SERVER_URL}/blogs/${blogId}`
        );
        setFullBlog(response.data);
      } catch (error) {
        console.log("Error in fetching blog: ", error);
      }
    }
    fetchingBlogById();
  }, [blogId]);

  if (!fullBlog) return <p className="text-center py-20">Loading blog...</p>;

  const blogContent = draftToHtml(fullBlog.blogContent); // converting the raw content in to html

  return (
    <div className="w-11/12 md:w-3/6 mx-auto pt-6 font-serif">
      <div className="mx-auto">
        <div className="w-11/12 mx-auto">
          <h1 className="text-5xl font-semibold py-6">{fullBlog.blogTitle}</h1>
          <p className="text-xl font-medium text-gray-500 pb-2">
            {fullBlog.blogSubtitle}
          </p>
          <span className="font-light text-sm">
            Written by :{" "}
            <span className="text-purple-400">{fullBlog.blogAuthor}</span>
          </span>
        </div>
        <div className="my-7">
          <hr />
          <div className="py-4 px-8">
            <LikesAndComment
              _id={fullBlog?._id}
              likeCounts={fullBlog.blogLikesCount}
              commentCounts={fullBlog.blogCommentsCount}
            />
          </div>
          <hr />
        </div>
        <div className="w-full mx-auto h-96 mb-14 ">
          <img
            className="w-full h-full rounded-xl"
            src={`${import.meta.env.VITE_SERVER_URL}/uploads/${
              fullBlog.blogImageLink ?? ""
            }`}
            alt="CoverImg"
          />{" "}
        </div>
        <div
          className="px-4 mb-7 text-lg"
          dangerouslySetInnerHTML={{ __html: blogContent }}
        />
        {/* getting the content displaying the html format into text format  USING THE REACT INNER HTML FUNCTION to display data in text*/}
        {/* <hr /> */}
        <h2 className="text-2xl font-semibold py-4">
          Comments({fullBlog.blogCommentsCount})
        </h2>
        <CommentComponent _id={fullBlog?._id} />
      </div>
    </div>
  );
};

export default CompleteBlogViewPage;