Untitled

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) => {
      if (values.searchQuery.trim() !== '') {
        fetchTitles(values.searchQuery);
      } else {
        fetchBlogTitles();
      }
    },
  });
 
  const [blogTitles, setBlogTitles] = useState([]);
  const [displayedBlogTitles, setDisplayedBlogTitles] = useState([]);
  const navigate = useNavigate();
 
  useEffect(() => {
    fetchBlogTitles();
  }, []);
 
  const fetchBlogTitles = async () => {
    try {
const response = await axios.get('http://localhost:5221/api/Blog/Getall');
      const data = response.data
      console.log(response.data);
      setBlogTitles(data);
      setDisplayedBlogTitles(data);
      console.log(blogTitles);
      console.log(displayedBlogTitles);
    } catch (error) {
      console.error('Error fetching blog titles:', error);
    }
  };



 
  const fetchTitles = async (searchQuery) => {
    try {
const response = await axios.get(`http://localhost:5221/api/Blog/Getall22?S=${searchQuery}`)
.then((res)=>setDisplayedBlogTitles(res.data));
      // const data = response.data;
 
      if (searchQuery.trim() !== '') {
        setDisplayedBlogTitles(data);
        console.log('Searched:', data);
      } else {
        fetchBlogTitles();
        console.log('Not able to search');
      }
    } catch  {
      console.log("error")
    }
  };
 
  const handleBlogTitleClick = (title) => {
    navigate(`/blog/${encodeURIComponent(title)}`);
  };
 
  const handleBackButtonClick = () => {
    navigate('/');
  };
 
  return (
    <div className="Full">
      <div className="search-container">
        <Link to="/" className="backbutton">
          Back
        </Link>
        <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>
          {displayedBlogTitles.length === 0 ? (
            <h3><p>No blogs matched.</p></h3>
          ) : (
            <div className="blog-titles">
              {displayedBlogTitles.map((title, index) => (
                <div key={index} className="blog-card" onClick={() => handleBlogTitleClick(title.blogId)}>
                  <img
src="https://tse2.mm.bing.net/th/id/OIP.GbR3fLB8maiGgqKIOF7AOgHaE8?w=250&h=180&c=7&r=0&o=5&pid=1.7"
                    alt={`Blog ${index}`}
                    className="blog-image"
                  />
                  <h3 className="blog-title-text">{title.blogTitle}</h3>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};
 
export default Search;