5_5

Lab5/Bookfill/src/components/directions/Direction.jsx

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types';
+import { Heart } from 'react-bootstrap-icons';
+import '../lines/table/LinesTableRow.css';
+
+const Direction = ({ index, line, onAddCart }) => {
+    const handleAnchorClick = (event, action) => {
+        event.preventDefault();
+        action();
+    };
+    return (
+        <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>
+            <td><a href="#" onClick={(event) => handleAnchorClick(event, onAddCart)}><Heart /></a></td>
+        </tr>
+    );
+};
+
+Direction.propTypes = {
+    index: PropTypes.number,
+    line: PropTypes.object,
+    onAddCart: PropTypes.func,
+};
+
+export default Direction;

Lab5/Bookfill/src/components/directions/Directions.jsx

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import TableDirect from './TableDirect.jsx';
+import Select from '../input/Select.jsx';
+import Direction from './Direction.jsx';
+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 { types, currentFilter, handleFilterChange } = useTypeFilter();
+    const { lines } = useLines(currentFilter);
+    const [searchValue, setSearchValue] = useState('');
+    const { addToCart } = useCart();
+
+    return (
+        <>
+            <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 === ''
+                                || line.book_name?.toLowerCase().includes(searchValue.toLowerCase())
+                                || line.author?.toLowerCase().includes(searchValue.toLowerCase())) {
+                                return <Direction key={line.id}
+                                    index={index}
+                                    line={line}
+                                    onAddCart={() => addToCart(line)} />;
+                            }
+                            return null;
+                        })
+                    }
+                </TableDirect>
+            </div>
+        </>
+    );
+};
+
+export default Directions;

Lab5/Bookfill/src/components/directions/TableDirect.jsx

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+import { Table } from 'react-bootstrap';
+
+const TableDirect = ({ 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>
+            </thead>
+            <tbody>
+                {children}
+            </tbody >
+        </Table >
+    );
+};
+
+TableDirect.propTypes = {
+    children: PropTypes.node,
+};
+
+export default TableDirect;

Lab5/Bookfill/src/pages/Search.jsx

@@ -1,57 +1,11 @@
-import {
-    Form, InputGroup, FormControl, Button, Dropdown, Table,
-} from 'react-bootstrap';
+import './pages.css';
+import Directions from '../components/directions/Directions.jsx';
 
 const Search = () => {
     return (
-        <Form className="form-inlinecustom-search mx-auto mt-3 pt-5" id="big-search">
-            <InputGroup>
-                <FormControl type="search" placeholder="Search" aria-label="Search" className="mb-3" />
-                <Dropdown >
-                    <Dropdown.Toggle variant="success" id="dropdown-basic" className="mb-3">
-                        Choose category...
-                    </Dropdown.Toggle>
-                    <Dropdown.Menu>
-                        <Dropdown.Item>1</Dropdown.Item>
-                        <Dropdown.Item>2</Dropdown.Item>
-                        <Dropdown.Item>3</Dropdown.Item>
-                    </Dropdown.Menu>
-                </Dropdown>
-                <Button variant="outline-success" className="mb-3">Search</Button>
-            </InputGroup>
-            <div className="scroll-panel-favour">
-                <Table striped bordered hover>
-                    <thead>
-                        <tr>
-                            <th>#</th>
-                            <th>Book</th>
-                            <th>Author</th>
-                            <th>Gener</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>1</td>
-                            <td>Capital</td>
-                            <td>Marks K.</td>
-                            <td>Philosofy</td>
-                        </tr>
-                        <tr>
-                            <td>2</td>
-                            <td>Capital</td>
-                            <td>Marks K.</td>
-                            <td>Philosofy</td>
-                        </tr>
-                        <tr>
-                            <td>3</td>
-                            <td>Capital</td>
-                            <td>Marks K.</td>
-                            <td>Philosofy</td>
-                        </tr>
-                    </tbody>
-                </Table>
-            </div>
-        </Form>
+        <>
+            <Directions/>
+        </>
     );
 };