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) => {
      fetchTitles(values.searchQuery);
    },
  });

  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/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="Full">
      <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-card" onClick={() => handleBlogTitleClick(title)}>
                <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}</h3>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>

  );

            };
export default Search;