Сделаны поиск через запросы

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

@@ -5,8 +5,8 @@ import useDirections from '../hooks/DirectionHooks';
 import Input from '../../input/Input.jsx';
 
 const Directions = () => {
-    const { directions } = useDirections();
     const [searchValue, setSearchValue] = useState('');
+    const { directions } = useDirections(searchValue);
 
     return (
         <>
@@ -18,14 +18,7 @@ const Directions = () => {
                 <TableDirect>
                 {
                     directions.map((item) => {
-                        if (searchValue === ''
+                        return <Direction key={item.id} item={item} />;
-                            || item.name.toLowerCase().includes(searchValue.toLowerCase())
-                            || item.department.toLowerCase().includes(searchValue.toLowerCase())
-                            || item.things.toLowerCase().includes(searchValue.toLowerCase())
-                            || item.code.toLowerCase().includes(searchValue.toLowerCase())) {
-                            return <Direction key={item.id} item={item} />;
-                            }
-                        return null;
                     })
                 }
                 </TableDirect>

Lab5/src/components/Directions/hooks/DirectionHooks.js

@@ -1,18 +1,19 @@
 import { useEffect, useState } from 'react';
 import DirectionsApiService from './DirectionsApiService';
 
-const useDirections = () => {
+const useDirections = (searchValue) => {
     const [directions, setDirections] = useState([]);
 
     const getDirections = async () => {
-        const data = await DirectionsApiService.getAll();
+        const expand = `?q=${searchValue}`;
+        const data = await DirectionsApiService.getAll(expand);
         setDirections(data ?? []);
     };
 
     useEffect(() => {
         getDirections();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [searchValue]);
 
     return {
         directions,

Lab5/src/components/Directions/hooks/DirectionsApiService.js

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

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

@@ -1,4 +1,5 @@
-import { useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import {
     Button, Container,
@@ -16,9 +17,11 @@ import Input from '../../input/Input.jsx';
 // должно все перерисовываться
 
 const UpdateNews = () => {
-    const [searchValue, setSearchValue] = useState('');
+    const [searchParams, setSearchParams] = useSearchParams();
 
-    const { lines, handleLinesChange } = useLines();
+    const [searchValue, setSearchValue] = useState(searchParams.get('q') || '');
+
+    const { lines, handleLinesChange } = useLines(searchValue);
     const {
         isDeleteModalShow,
         showDeleteModal,
@@ -34,6 +37,9 @@ const UpdateNews = () => {
         handleFormSubmit,
         handleFormClose,
     } = useLinesFormModal(handleLinesChange);
+    useEffect(() => {
+        setSearchParams({ q: searchValue });
+    }, [searchValue]);
 
     return (
         <>
@@ -47,18 +53,15 @@ const UpdateNews = () => {
                 <Button variant='info' onClick={() => showFormModal()}>
                 Добавить товар</Button>
             </div>
+
         <div className="mainDiv row">
             {
                 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}

Lab5/src/components/lines/hooks/LinesHook.js

@@ -1,20 +1,21 @@
 import { useEffect, useState } from 'react';
 import LinesApiService from '../service/LinesApiService';
 
-const useLines = (typeFilter) => {
+const useLines = (searchValue) => {
     const [linesRefresh, setLinesRefresh] = useState(false);
     const [lines, setLines] = useState([]);
     const handleLinesChange = () => setLinesRefresh(!linesRefresh);
 
     const getLines = async () => {
-        const data = await LinesApiService.getAll();
+        const expand = `?q=${searchValue}`;
+        const data = await LinesApiService.getAll(expand);
         setLines(data ?? []);
     };
 
     useEffect(() => {
         getLines();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [linesRefresh, typeFilter]);
+    }, [linesRefresh, searchValue]);
 
     return {
         lines,

Lab5/src/components/lines/hooks/LinesItemFormHook.js

@@ -70,7 +70,6 @@ const useLinesItemForm = (id, linesChangeHandle) => {
                 await LinesApiService.update(id, body);
             }
             if (linesChangeHandle) linesChangeHandle();
-            toast.success('Элемент успешно сохранен', { id: 'LinesTable' });
             setModified(true);
             return true;
         }

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

@@ -48,7 +48,7 @@ const Entry = () => {
                     <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 as={Link} to='/page4' className = "btn btn-info">Назад</Button>
                     <Button className="btn btn-primary w-auto" type="submit" >Создать</Button>
                 </Form>
             </div>