Начало

Lab5/src/components/lines/News/UpdateNew.jsx

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+import {
+    PencilFill, Trash3,
+} from 'react-bootstrap-icons';
+
+const UpdateNew = ({ item, onEdit, onDelete }) => {
+    const handleAnchorClick = (event, action) => {
+        event.preventDefault();
+        action();
+    };
+    return (
+        <div className="col mb-4">
+            <div className="rectNews d-flex flex-column">
+                <img className="rectNew" src={item.image} width="100%" alt={item.name} />
+                <div className="rectNewsTextBox text-center">
+                    <span className="rectNewsText">{item.description}</span>
+                    <td><a href="#" onClick={(event) => handleAnchorClick(event, onEdit)}><PencilFill /></a></td>
+                    <td><a href="#" onClick={(event) => handleAnchorClick(event, onDelete)}><Trash3 /></a></td>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+UpdateNew.propTypes = {
+    item: PropTypes.object,
+    onDelete: PropTypes.func,
+    onEdit: PropTypes.func,
+};
+
+export default UpdateNew;

Lab5/src/components/lines/News/UpdateNews.jsx

@@ -0,0 +1,53 @@
+import PropTypes from 'prop-types';
+import { useState, useEffect } from 'react';
+import UpdateNew from './UpdateNew.jsx';
+import useLinesDeleteModal from '../hooks/LinesDeleteModalHook';
+import useLinesFormModal from '../hooks/LinesFormModalHook';
+import useTypeFilter from '../hooks/LinesFilterHook';
+import useLines from '../hooks/LinesHook';
+
+const UpdateNews = () => {
+    const [news, setNews] = useState([]);
+        const clearNews = () => {
+        setNews([]);
+    };
+
+    useEffect(() => {
+        const fetchData = async () => {
+          const data = 4;
+          setNews(data);
+        };
+        fetchData();
+      }, []);
+
+    const { currentFilter } = useTypeFilter();
+
+    const { handleLinesChange } = useLines(currentFilter);
+
+    const {
+        showDeleteModal,
+    } = useLinesDeleteModal(handleLinesChange);
+
+    const {
+        showFormModal,
+    } = useLinesFormModal(handleLinesChange);
+
+    clearNews();
+    return (
+        <div className="mainDiv row">
+            {news.map((item) => (
+                <UpdateNew key={item.id}
+                item={item}
+                onDelete={() => showDeleteModal(item.id)}
+                onEdit={() => showFormModal(item.id)}
+                />
+            ))}
+        </div>
+    );
+};
+
+UpdateNews.propTypes = {
+    item: PropTypes.object,
+};
+
+export default UpdateNews;

Lab5/src/components/lines/table/Lines.jsx

@@ -1,6 +1,5 @@
 import { Button, ButtonGroup } from 'react-bootstrap';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
-import useCart from '../../cart/CartHook';
 import Select from '../../input/Select.jsx';
 import ModalConfirm from '../../modal/ModalConfirm.jsx';
 import ModalForm from '../../modal/ModalForm.jsx';
@@ -34,14 +33,6 @@ const Lines = () => {
         handleFormClose,
     } = useLinesFormModal(handleLinesChange);
 
-    const navigate = useNavigate();
-
-    const showEditPage = (id) => {
-        navigate(`/page-edit/${id}`);
-    };
-
-    const { addToCart } = useCart();
-
     return (
         <>
             <ButtonGroup>
@@ -59,10 +50,8 @@ const Lines = () => {
                     lines.map((line, index) =>
                         <LinesTableRow key={line.id}
                             index={index} line={line}
-                            onAddCart={() => addToCart(line)}
                             onDelete={() => showDeleteModal(line.id)}
                             onEdit={() => showFormModal(line.id)}
-                            onEditInPage={() => showEditPage(line.id)}
                         />)
                 }
             </LinesTable>

Lab5/src/components/lines/table/LinesTableRow.jsx

@@ -1,10 +1,10 @@
 import PropTypes from 'prop-types';
 import {
-    Cart, PencilFill, PencilSquare, Trash3,
+    PencilFill, Trash3,
 } from 'react-bootstrap-icons';
 
 const LinesTableRow = ({
-    index, line, onAddCart, onDelete, onEdit, onEditInPage,
+    index, line, onDelete, onEdit,
 }) => {
     const handleAnchorClick = (event, action) => {
         event.preventDefault();
@@ -18,9 +18,7 @@ const LinesTableRow = ({
             <td>{parseFloat(line.price).toFixed(2)}</td>
             <td>{line.count}</td>
             <td>{parseFloat(line.sum).toFixed(2)}</td>
-            <td><a href="#" onClick={(event) => handleAnchorClick(event, onAddCart)}><Cart /></a></td>
             <td><a href="#" onClick={(event) => handleAnchorClick(event, onEdit)}><PencilFill /></a></td>
-            <td><a href="#" onClick={(event) => handleAnchorClick(event, onEditInPage)}><PencilSquare /></a></td>
             <td><a href="#" onClick={(event) => handleAnchorClick(event, onDelete)}><Trash3 /></a></td>
         </tr>
     );
@@ -29,10 +27,8 @@ const LinesTableRow = ({
 LinesTableRow.propTypes = {
     index: PropTypes.number,
     line: PropTypes.object,
-    onAddCart: PropTypes.func,
     onDelete: PropTypes.func,
     onEdit: PropTypes.func,
-    onEditInPage: PropTypes.func,
 };
 
 export default LinesTableRow;

Lab5/src/components/navigation/Navigation.jsx

@@ -2,13 +2,10 @@ import PropTypes from 'prop-types';
 import {
  Container, Nav, Navbar, Image,
 } from 'react-bootstrap';
-import { Cart2 } from 'react-bootstrap-icons';
 import { Link, useLocation } from 'react-router-dom';
-import useCart from '../cart/CartHook';
 import './Navigation.css';
 
 const Navigation = ({ routes }) => {
-    const { getCartSum } = useCart();
     const location = useLocation();
     const indexPageLink = routes.filter((route) => route.index === false).shift();
     const pages = routes.filter((route) => Object.prototype.hasOwnProperty.call(route, 'title'));
@@ -30,11 +27,6 @@ const Navigation = ({ routes }) => {
                                     </Nav.Link>)
                             }
                         </Nav>
-                        <Nav>
-                            <Navbar.Brand as={Link} to='/cart'>
-                                <Cart2 className='d-inline-block align-top me-1 logo' /> {getCartSum() ?? ''} &#8381;
-                            </Navbar.Brand>
-                        </Nav>
                     </Navbar.Collapse>
                 </Container>
             </Navbar >

Lab5/src/main.jsx

@@ -18,22 +18,22 @@ const routes = [
     index: true,
     path: '/',
     element: <Page1 />,
-    title: 'Главная страница',
+    title: 'Новости',
   },
   {
     path: '/page2',
     element: <Page2 />,
-    title: 'Вторая страница',
+    title: 'Об университете',
   },
   {
     path: '/page3',
     element: <Page3 />,
-    title: 'Третья страница',
+    title: 'Абитуриенту',
   },
   {
     path: '/page4',
     element: <Page4 />,
-    title: 'Четвертая страница',
+    title: 'Вход',
   },
   {
     path: '/page5',

Lab5/src/pages/Page1.jsx

@@ -1,67 +1,8 @@
-import { Link } from 'react-router-dom';
+import UpdateNews from '../components/lines/News/UpdateNews.jsx';
-import {
-    Container, Button, Row, Col, Image,
-   } from 'react-bootstrap';
 
 const Page1 = () => {
     return (
-        <>
+        <UpdateNews />
-        <Container className="col text-center">
-            <span className="mainSt">
-                <b>Новости</b>
-            </span>
-            <div className="text-center">
-                <Button as={Link} to="/admin" variant="primary" className="btn btn-primary w-auto" type="button">
-                    Добавить новость
-                </Button>
-            </div>
-            <Row>
-                <Col className="mb-4">
-                    <div className="rectNews d-flex flex-column">
-                        <Image src="./images/New1.png" alt="New1" width="100%" />
-                        <div className="rectNewsTextBox">
-                            <span className="rectNewsText">
-                                <b>УлГТУ вошёл в топ-250 лучших вузов</b>
-                            </span>
-                        </div>
-                    </div>
-                </Col>
-                <Col className="mb-4">
-                    <div className="rectNews d-flex flex-column position-relative">
-                        <Image src="./images/New2.png" alt="New2" width="100%" />
-                        <div className="rectNewsTextBox">
-                            <span className="rectNewsText">
-                                <b>“Мосты в будущее” будут видны из УлГТУ</b>
-                            </span>
-                        </div>
-                    </div>
-                </Col>
-            </Row>
-            <Row>
-                <Col className="mb-4">
-                    <div className="rectNews d-flex flex-column position-relative">
-                        <Image src="./images/New3.png" alt="New3" width="100%" />
-                        <div className="rectNewsTextBox">
-                            <span className="rectNewsText">
-                                <b>Поправки в системе работы приёмной комиссии</b>
-                            </span>
-                        </div>
-                    </div>
-                </Col>
-                <Col className="mb-4">
-                    <div className="rectNews d-flex flex-column position-relative">
-                        <Image src="./images/New4.png" alt="New4" width="100%" />
-                        <div className="rectNewsTextBox">
-                            <span className="rectNewsText">
-                                <b>Студенты возвращаются к учёбе после
-                                    зимней сессии позже, чем раньше</b>
-                            </span>
-                        </div>
-                    </div>
-                </Col>
-            </Row>
-        </Container>
-        </>
     );
 };