Untitled
unknown
plain_text
a year ago
3.5 kB
11
Indexable
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;
Editor is loading...
Leave a Comment