5_6

Lab5/Bookfill/src/components/search/Search.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import { Heart } from 'react-bootstrap-icons';
 import '../lines/table/LinesTableRow.css';
 
-const Direction = ({ index, line, onAddCart }) => {
+const Search = ({ index, line, onAddCart }) => {
     const handleAnchorClick = (event, action) => {
         event.preventDefault();
         action();
@@ -11,7 +11,6 @@ const Direction = ({ index, line, onAddCart }) => {
         <tr>
             <th scope="row">{index + 1}</th>
             <td>{line.book_name}</td>
-            <td>{line.type.name}</td>
             <td>{line.author_name}</td>
             <td>{parseFloat(line.price).toFixed(2)}</td>
             <td><img src={line.image} id='image' alt={line.book_name} /></td>
@@ -20,10 +19,10 @@ const Direction = ({ index, line, onAddCart }) => {
     );
 };
 
-Direction.propTypes = {
+Search.propTypes = {
     index: PropTypes.number,
     line: PropTypes.object,
     onAddCart: PropTypes.func,
 };
 
-export default Direction;
+export default Search;

Lab5/Bookfill/src/components/search/Searchs.jsx

@@ -1,16 +1,13 @@
 import { useState } from 'react';
 import TableDirect from './TableSearch.jsx';
-import Select from '../input/Select.jsx';
+import Search from './Search.jsx';
-import Direction from './Search.jsx';
+import useSearch from './searchHooks/SearchHooks';
-import useLines from '../lines/hooks/LinesHook';
 import useCart from '../cart/CartHook';
 import Input from '../input/Input.jsx';
-import useTypeFilter from '../lines/hooks/LinesFilterHook';
 
-const Directions = () => {
+const Searchs = () => {
-    const { types, currentFilter, handleFilterChange } = useTypeFilter();
-    const { lines } = useLines(currentFilter);
     const [searchValue, setSearchValue] = useState('');
+    const { lines } = useSearch(searchValue);
     const { addToCart } = useCart();
 
     return (
@@ -18,22 +15,15 @@ const Directions = () => {
             <div className='d-flex justify-content-center m-4'>
                 <Input className='justify-content-center w-50 mt-2 p-1' name='search' value={searchValue} onChange={(e) => setSearchValue(e.target.value)}
                     type='text' required />
-                <Select className='mt-2 p-1' values={types}
-                    value={currentFilter} onChange={handleFilterChange} />
             </div>
             <div className='justify-content-center'>
                 <TableDirect>
                     {
                         lines.map((line, index) => {
-                            if (searchValue === ''
+                            return <Search key={line.id}
-                                || line.book_name?.toLowerCase().includes(searchValue.toLowerCase())
+                                index={index}
-                                || line.author?.toLowerCase().includes(searchValue.toLowerCase())) {
+                                line={line}
-                                return <Direction key={line.id}
+                                onAddCart={() => addToCart(line)} />;
-                                    index={index}
-                                    line={line}
-                                    onAddCart={() => addToCart(line)} />;
-                            }
-                            return null;
                         })
                     }
                 </TableDirect>
@@ -42,4 +32,4 @@ const Directions = () => {
     );
 };
 
-export default Directions;
+export default Searchs;

Lab5/Bookfill/src/components/search/TableSearch.jsx

@@ -1,14 +1,13 @@
 import PropTypes from 'prop-types';
 import { Table } from 'react-bootstrap';
 
-const TableDirect = ({ children }) => {
+const TableSearch = ({ children }) => {
     return (
         <Table className='mt-2' striped responsive>
             <thead>
                 <tr>
                     <th scope='col'>№</th>
                     <th scope='col' className='w-25'>Name</th>
-                    <th scope='col' className='w-25'>Category</th>
                     <th scope='col' className='w-25'>Author</th>
                     <th scope='col' className='w-25'>Price</th>
                 </tr>
@@ -20,8 +19,8 @@ const TableDirect = ({ children }) => {
     );
 };
 
-TableDirect.propTypes = {
+TableSearch.propTypes = {
     children: PropTypes.node,
 };
 
-export default TableDirect;
+export default TableSearch;

Lab5/Bookfill/src/components/search/searchHooks/SearchHooks.js

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+import LinesApiService from '../../lines/service/LinesApiService';
+
+const useSearch = (searchValue) => {
+    const [lines, setLines] = useState([]);
+
+    const getLines = async () => {
+        const expand = `?q=${searchValue}`;
+        const data = await LinesApiService.getAll(expand);
+        setLines(data ?? []);
+    };
+
+    useEffect(() => {
+        getLines();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [searchValue]);
+
+    return {
+        lines,
+    };
+};
+
+export default useSearch;

Lab5/Bookfill/src/pages/Search.jsx

@@ -1,10 +1,10 @@
 import './pages.css';
-import Directions from '../components/search/Searchs.jsx';
+import Searchs from '../components/search/Searchs.jsx';
 
 const Search = () => {
     return (
         <>
-            <Directions/>
+            <Searchs/>
         </>
     );
 };