Переделка

Lab5/src/components/Directions/direct/Directions.jsx

@@ -14,7 +14,7 @@ const Directions = () => {
                 <Input className = 'd-flex justify-content-center w-50' name='search' value = {searchValue} onChange={(e) => setSearchValue(e.target.value)}
                 type='text' required />
             </div>
-            <div className = 'd-flex justify-content-center'>
+            <div>
                 <TableDirect>
                 {
                     directions.map((item) => {

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

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import PropTypes from 'prop-types';
 import {
     Button, Container,
@@ -10,10 +11,13 @@ import useLinesDeleteModal from '../hooks/LinesDeleteModalHook';
 import useLinesFormModal from '../hooks/LinesFormModalHook';
 import LinesItemForm from '../form/LinesItemForm.jsx';
 import useLines from '../hooks/LinesHook';
+import Input from '../../input/Input.jsx';
 // linesChangeHandle изменять состояние => при вызове изменения linesChangeHandle
 // должно все перерисовываться
 
 const UpdateNews = () => {
+    const [searchValue, setSearchValue] = useState('');
+
     const { lines, handleLinesChange } = useLines();
     const {
         isDeleteModalShow,
@@ -37,18 +41,25 @@ const UpdateNews = () => {
             <span className="mainSt">
                 <b>Новости</b>
             </span>
+            <Input name='search' value = {searchValue} onChange={(e) => setSearchValue(e.target.value)}
+                type='text' required />
             <div className="text-center">
                 <Button variant='info' onClick={() => showFormModal()}>
                 Добавить товар</Button>
             </div>
         <div className="mainDiv row">
-            {lines.map((item) => (
-                <UpdateNew key={item.id}
+            {
+                lines.map((item) => {
+                    if (searchValue === ''
+                        || item.description.toLowerCase().includes(searchValue.toLowerCase())) {
+                        return <UpdateNew key={item.id}
                             item={item}
                             onDelete={() => showDeleteModal(item.id)}
                             onEdit={() => showFormModal(item.id)}
-                />
-            ))}
+                            />;
+                        }
+                        return null;
+                })}
         </div>
         <ModalConfirm show={isDeleteModalShow}
             onConfirm={handleDeleteConfirm} onClose={handleDeleteCancel}

Lab5/src/components/logins/login/Entry.jsx

@@ -43,7 +43,7 @@ const Entry = () => {
             </span>
             <div className="rectpage4 d-flex row justify-content-center">
             <span className="EntrysSt">
-                <b></b>
+                <b>Вход</b>
             </span>
                 <Form className="col-md-4 m-0 w-auto" onSubmit={ handleSubmit } noValidate validated={validated}>
                     <label className="form-label"><b>Логин</b></label>

Lab5/src/components/logins/login/Registration.jsx

@@ -0,0 +1,59 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import toast from 'react-hot-toast';
+import { Button, Form } from 'react-bootstrap';
+import Input from '../../input/Input.jsx';
+import useEntrysData from '../hooks/EntrysDataHook';
+
+const Entry = () => {
+    const { entrys } = useEntrysData();
+    const [validated, setValidated] = useState(false);
+    const [login, setLogin] = useState('');
+    const [password, setPassword] = useState('');
+    const isLoginValid = (value) => /^[a-zA-Z]+$/.test(value);
+
+    const handleSubmit = (event) => {
+        const form = event.currentTarget;
+        event.preventDefault();
+        event.stopPropagation();
+        if (form.checkValidity() !== false) {
+            if (isLoginValid(login)) {
+                const isLoginExists = entrys.some((item) => item.login === login);
+                if (isLoginExists) {
+                    toast.error('Такой аккаунт уже создан');
+                } else {
+                    toast.success('Ваш аккаунт успешно создан');
+                }
+            } else {
+                toast.error('Логин должен быть введён латинскими символами');
+                return;
+            }
+        }
+        setValidated(true);
+    };
+
+    return (
+        <main className="container-fluid text-center">
+            <span className="mainSt">
+                <b>Личный кабинет</b>
+            </span>
+            <div className="rectpage4 d-flex row justify-content-center">
+            <span className="EntrysSt">
+                <b>Регистрация</b>
+            </span>
+                <Form className="col-md-4 m-0 w-auto" onSubmit={ handleSubmit } noValidate validated={validated}>
+                    <label className="form-label"><b>Логин</b></label>
+                    <Input name="login" value = { login } onChange={(e) => setLogin(e.target.value)}
+                        placeholder="dyctator" type="text" required />
+                    <label className="form-label"><b>Пароль</b></label>
+                    <Input name="password" value = { password } onChange={(e) => setPassword(e.target.value)}
+                        type="password" required />
+                    <Button as={Link} to='/page4' className = "btn btn-danger">Назад</Button>
+                    <Button className="btn btn-primary w-auto" type="submit" >Создать</Button>
+                </Form>
+            </div>
+        </main>
+    );
+};
+
+export default Entry;

Lab5/src/components/logins/service/EntrysDataApiService.js

@@ -1,5 +1,5 @@
 import ApiService from '../../api/ApiService';
 
-const LinesApiService = new ApiService('entrysData');
+const EntrysDataApiService = new ApiService('entrysData');
 
-export default LinesApiService;
+export default EntrysDataApiService;

Lab5/src/pages/RegistrPage.jsx

@@ -1,7 +1,9 @@
+import Registration from '../components/logins/login/Registration.jsx';
+
 const RegistrPage = () => {
     return (
         <div>
-
+            <Registration />
         </div>
     );
 };