Untitled

SearchForAdmin.jsx

import React, { useState, useEffect } from 'react';
import { useFormik } from 'formik';
import { Link, useNavigate } from 'react-router-dom';
import axios from 'axios';
import './searchh.css';
 
const Search = () => {
  const formik = useFormik({
    initialValues: {
      searchQuery: '',
    },
    onSubmit: (values) => {
      fetchTitles(values.searchQuery);
    },
  });
 
  const [blogTitles, setBlogTitles] = useState([]);
  const [displayedBlogTitles, setDisplayedBlogTitles] = useState([]);
  const navigate = useNavigate(); // useNavigate hook for navigation
 
  useEffect(() => {
    fetchBlogTitles();
  }, []);
 
  const fetchBlogTitles = async () => {
    try {
const response = await axios.get('http://localhost:5221/api/Blog/GetTitles');
      const data = response.data;
      setBlogTitles(data);
      setDisplayedBlogTitles(data);
    } catch (error) {
      console.error('Error fetching blog titles:', error);
    }
  };
 
  const fetchTitles = async (searchQuery) => {
    try {
const response = await axios.get(`http://localhost:5221/api/Blog/SearchByTitle?title=${searchQuery}`);
      const data = response.data;
 
      if (searchQuery) {
        setDisplayedBlogTitles(data);
        console.log('Searched:', data);
      } else {
        setDisplayedBlogTitles(blogTitles);
        console.log('Not able to search');
      }
    } catch (error) {
      console.error('Error in searching:', error);
    }
  };
 
  const handleBlogTitleClick = (title) => {
    navigate(`/blog/${encodeURIComponent(title)}`);
  };
 
  return (
    <div className="search-container">
       <form onSubmit={formik.handleSubmit}>
        <div className="search-bar-container">
          <input
            type="text"
            id="searchQuery"
            name="searchQuery"
            placeholder="Search..."
            onChange={formik.handleChange}
            value={formik.values.searchQuery}
          />
          <div className="button-container">
            <button type="submit">Search</button>
          </div>
        </div>
      </form>
 
      <div className="blog-titles-container">
        <h2>{formik.values.searchQuery ? 'Search Results' : 'All Blogs'}</h2>
        <div className="blog-titles">
          {displayedBlogTitles.map((title, index) => (
            <div key={index} className="blog-title" onClick={() => handleBlogTitleClick(title)}>
              {title}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};
 
export default Search;


BlogDetailsPage.jsx
import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import axios from 'axios';
import './searchh.css';
 
const BlogDetailsPage = () => {
  const { title } = useParams();
  const [blogDetails, setBlogDetails] = useState({ title: '', description: '' });
 
  useEffect(() => {
    fetchBlogDetails(title);
  }, [title]);
 
  const fetchBlogDetails = async (blogTitle) => {
    try {
  const response = await axios.get(`http://localhost:5221/api/Blog/GetDescription?title=${encodeURIComponent(title)}`);
      const data = response.data;
   
      console.log('Fetched Blog Details:', data); 
      
      // Log fetched data
      setBlogDetails(data); // Update state with the entire data object
      console.log(data.description);
    } catch (error) {
      console.error('Error fetching blog details:', error);
      console.error('Response:', error.response);
    }
  };
 
  return (
    <div>
      <h2>Title : {blogDetails.title}</h2>
      <p>Description : {blogDetails.description}</p>
      {console.log('rendered',blogDetails)}
    </div>
  );
};
 
export default BlogDetailsPage;