Untitled

import React, { useState, useEffect } from 'react';
import { useParams, Link, useNavigate } from 'react-router-dom';
import axios from 'axios';
import './BlogDetailsPage.css';
 
const BlogDetailsPage = () => {
  const { title } = useParams();
  const [blogDetails, setBlogDetails] = useState({
    blogDescription: '',
    createdDate: '',
    lastUpdatedDate: '',
  });
  const navigate = useNavigate();
 
  useEffect(() => {
    fetchBlogDetails(title);
  }, [title]);
 
  const fetchBlogDetails = async (blogTitle) => {
    try {
const response = await axios.get(`http://localhost:5221/api/Blog/GetDetails?title=${encodeURIComponent(blogTitle)}`);
      const data = response.data;
      setBlogDetails(data);
      console.log(response);
      console.log(response.data);
    } catch (error) {
      console.error('Error fetching blog details:', error);
      console.error('Response:', error.response);
    }
  };
 
  const handleDelete = async() => {
    try{
      await axios.delete(`http://localhost:5221/api/Blog?blogtitle=${encodeURIComponent(title)}`);
      alert('Delete button clicked');
      navigate('/');
    }catch(error){
      console.error(error.response);

    }
   
  };
 
  return (
    <div className="full2">
      <div className="blogdetailscontainer">
        <Link to="/" className="backbutton">
          Back
        </Link>
        <div className="blogtitle box">
          <b>Title:</b> <br />
          {title}
        </div>
        <div className="blogdescription box">
          <b>Description:</b> <br />
          <div className="scrollable-content">{blogDetails.blogDescription}</div>
        </div>
        <div className="createdDate box">
          <b>Created Date:</b> <br />
          {blogDetails.createdDate}
        </div>
        <div className="lastUpdatedDate box">
          <b>Last Updated Date:</b> <br />
          {blogDetails.lastUpdatedDate}
        </div>
        <button className="deleteButton" onClick={handleDelete}>
          Delete
        </button>
        <Link to={`/comments/${title}`} className="commentsButton">
          Click here to see comments
        </Link>
      </div>
    </div>
  );
};
 
export default BlogDetailsPage;