add search

src/Moviecard/useMovieFilterByName.jsx

@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import axios from 'axios';
+import MovieCard from './MovieCard.jsx';
+import Input from '../components/input/Input.jsx'; // Замените на фактический путь
+import { Button } from 'react-bootstrap';
+
+const useMovieFilter = () => {
+    const [searchText, setSearchText] = useState('');
+    const [searchResult, setSearchResult] = useState([]);
+
+    const handleSearchChange = (e) => {
+        setSearchText(e.target.value);
+    };
+
+    const handleSearch = async () => {
+        try {
+            const response = await axios.get(`http://localhost:8081/lines?name_like=${searchText}`);
+            setSearchResult(response.data);
+        } catch (error) {
+            console.error('Error fetching movies:', error);
+        }
+    };
+    const handleKeyPress = (e) => {
+        if (e.key === 'Enter') {
+            handleSearch();
+        }
+    };
+    return (
+        <>
+            <Input
+                name="search"
+                label="Search movies..."
+                value={searchText}
+                onChange={handleSearchChange}
+                type="text"
+                placeholder="Search movies..."
+                onKeyPress={handleKeyPress}
+            />
+            <Button className='col-5 col-lg-2 m-0 ms-2' type='submit' variant='primary' onClick={handleSearch}>
+                Поиск
+            </Button>
+            
+            <div className="movie-container">
+                {searchResult.map((movie) => (
+                    <MovieCard key={movie.id} {...movie} />
+                ))}
+            </div>
+        </>
+    );
+};
+
+export default useMovieFilter;

src/index.css

@@ -4,7 +4,7 @@ body {
   margin: 0;
   padding: 0;
   
-  min-height: 500vh;
+  
 }
 
 .header {

src/main.jsx

@@ -12,6 +12,7 @@ import Page2 from './pages/Page2.jsx';
 import Page3 from './pages/Page3.jsx';
 import Page4 from './pages/Page4.jsx';
 import PageEdit from './pages/PageEdit.jsx';
+import SearchPage from './pages/SearchPage.jsx';
 
 const routes = [
   {
@@ -48,6 +49,11 @@ const routes = [
     path: '/page-edit/:id?',
     element: <PageEdit />,
   },
+  {
+    path: '/searchPage',
+    element: <SearchPage />,
+    title: 'Поиск',
+  },
 ];
 
 const router = createBrowserRouter([

src/pages/PageEdit copy.jsx

@@ -1,59 +0,0 @@
-import { useState } from 'react';
-import { Button, Form } from 'react-bootstrap';
-import { Link } from 'react-router-dom';
-
-const PageEdit = () => {
-    const [validated, setValidated] = useState(false);
-
-    const handleSubmit = (event) => {
-        const form = event.currentTarget;
-        if (form.checkValidity() === false) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-
-        setValidated(true);
-    };
-
-    return (
-        <>
-            <div className="text-center">
-                <img id="image-preview" src="https://via.placeholder.com/300x400"
-                    alt="placeholder" />
-            </div>
-            <Form id="items-form" noValidate validated={validated} onSubmit={handleSubmit}>
-                <Form.Group className="mb-3" htmlFor="item">
-                    <Form.Label htmlFor="item" className="form-label">Жанр</Form.Label>
-                    <Form.Select name='selected' required>
-                    </Form.Select>
-                </Form.Group>
-                <Form.Group className="mb-3" htmlFor="name">
-                    <Form.Label>Название фильма</Form.Label>
-                    <Form.Control type="text" name="name" required />
-                </Form.Group>
-                <Form.Group className="mb-3" htmlFor="rating">
-                    <Form.Label>Рейтинг</Form.Label>
-                    <Form.Control type="number" name="rating" min="1" max="10" required />
-                </Form.Group>
-                <Form.Group className="mb-3" htmlFor="releaseDate">
-                    <Form.Label>Дата создания</Form.Label>
-                    <Form.Control type="date" name="releaseDate" required />
-                </Form.Group>
-                <Form.Group className="mb-3" htmlFor="director">
-                    <Form.Label>Режиссер</Form.Label>
-                    <Form.Control type="text" name="director" required />
-                </Form.Group>
-                <Form.Group className="mb-3" htmlFor="image">
-                    <Form.Label>Обложка</Form.Label>
-                    <Form.Control type="file" name="image" accept="image/*" />
-                </Form.Group>
-                <Form.Group className="d-flex flex-md-row flex-column justify-content-center">
-                    <Button className="btn-mw me-md-3 mb-md-0 mb-2" as={Link} to="/adminpage" variant="secondary">Назад</Button>
-                    <Button className="btn-mw me-md-3" type="submit" variant="primary">Сохранить</Button>
-                </Form.Group>
-            </Form>
-        </>
-    );
-};
-
-export default PageEdit;

src/pages/SearchPage.jsx

@@ -0,0 +1,16 @@
+import MovieList from '../Moviecard/useMovieFilterByName.jsx';
+
+const SearchPage = () => {
+    
+    return (
+            <>
+            <h1>Категории</h1>
+    
+            
+              <MovieList />
+            
+            </>
+    );
+};
+
+export default SearchPage;