Merge pull request #80 from algorithm-ssau/master

Sync

Author: SecurityTrip

README.md

@@ -82,7 +82,7 @@
    cd turn-of-events
 
 ### Доступ
-Сайт доступен по адресу [http://217.198.13.157/](http://217.198.13.157/)
+Сайт доступен по адресу [http://83.217.223.128/](http://83.217.223.128/)
 
 # Вклад в проект
 * Лысов Илья [SecurityTrip](https://github.com/SecurityTrip) - Team Lead, Backend 

docker-compose.yml

@@ -189,7 +189,8 @@ services:
       context: ./user-service
       dockerfile: Dockerfile
     environment:
-      SPRING_PROFILES_ACTIVE: "docker"
+      - SPRING_PROFILES_ACTIVE=docker
+      - JWT_SECRET=D4fN8Qr6Zu1WgX9Cv3PyL5Mk2Jh7Vt0s
     ports:
       - "8000:8080"
     networks:

frontend/src/App.jsx

@@ -1,5 +1,5 @@
-import './App.css'
 import 'bootstrap/dist/css/bootstrap.min.css';
+import './App.css'
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import Header from './components/Header/Header'
 import Events from './components/Events/Events'

frontend/src/components/EventCard/EventCard.jsx

@@ -2,7 +2,7 @@ import { Card } from 'react-bootstrap';
 import { useNavigate } from 'react-router-dom';
 import './EventCard.css';
 
-const EventCard = ({ id, title, date, location, description, customClass }) => {
+const EventCard = ({ id, title, date, location, description, imageUrl, customClass }) => {
     const navigate = useNavigate();
     const handleCardClick = () => {
         if (id) {
@@ -12,7 +12,7 @@ const EventCard = ({ id, title, date, location, description, customClass }) => {
 
     return (
         <Card className={`event-card ${customClass || ''}`} onClick={handleCardClick} style={{ cursor: 'pointer' }}>
-            <Card.Img variant="top" src="https://via.placeholder.com/300x200" />
+            <Card.Img variant="top" src={imageUrl || "https://via.placeholder.com/300x200"} />
             <Card.Body>
                 <Card.Title>{title || 'Название мероприятия'}</Card.Title>
                 <div className="event-details">

frontend/src/components/Events/Events.jsx

@@ -8,28 +8,42 @@ const Events = ({ title }) => {
     const [events, setEvents] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
+    const [page, setPage] = useState(1);
+    const [totalPages, setTotalPages] = useState(1);
 
     useEffect(() => {
         const fetchEvents = async () => {
+            setLoading(true);
+            setError(null);
             try {
-                const response = await axios.get('/api/events');
-                console.log('Ответ сервера /api/events:', response.data);
+                // В запросе нумерация страниц с 0
+                const response = await axios.get(`/api/events?page=${page - 1}&size=9&sortBy=id&sortDir=asc`);
+                // Ожидаем, что response.data.content - массив мероприятий, response.data.totalPages - всего страниц
                 if (response.data && Array.isArray(response.data.content)) {
                   setEvents(response.data.content);
+                  setTotalPages(response.data.totalPages || 1);
                   setError(null);
                 } else {
                   setEvents([]);
+                  setTotalPages(1);
                   setError('Некорректный формат ответа от сервера');
                 }
             } catch (err) {
                 setError('Ошибка загрузки мероприятий');
                 setEvents([]);
+                setTotalPages(1);
             } finally {
                 setLoading(false);
             }
         };
         fetchEvents();
-    }, []);
+    }, [page]);
+
+    const handlePageChange = (newPage) => {
+      if (newPage >= 1 && newPage <= totalPages) {
+        setPage(newPage);
+      }
+    };
 
     return (
         <section>
@@ -43,20 +57,33 @@ const Events = ({ title }) => {
                   </div>
                 )}
                 {!loading && !error && events.length > 0 && (
-                    <Row xs={1} md={2} lg={3} className="g-4">
-                        {events.map((event) => (
-                            <Col key={event.id}>
-                                <EventCard
-                                    id={event.id}
-                                    title={event.title}
-                                    date={event.date}
-                                    location={event.place}
-                                    description={event.description}
-                                    customClass=""
-                                />
-                            </Col>
-                        ))}
-                    </Row>
+                    <>
+                      <Row xs={1} md={2} lg={3} className="g-4">
+                          {events.map((event) => (
+                              <Col key={event.id}>
+                                  <EventCard
+                                      id={event.id}
+                                      title={event.title}
+                                      date={event.date}
+                                      location={event.place}
+                                      description={event.description}
+                                      imageUrl={event.imageUrl}
+                                      customClass=""
+                                  />
+                              </Col>
+                          ))}
+                      </Row>
+                      {/* Пагинация */}
+                      <div style={{ display: 'flex', justifyContent: 'center', marginTop: 24 }}>
+                        <button onClick={() => handlePageChange(page - 1)} disabled={page === 1} style={{marginRight: 8}}>
+                          Назад
+                        </button>
+                        <span style={{margin: '0 12px'}}>Страница {page} из {totalPages}</span>
+                        <button onClick={() => handlePageChange(page + 1)} disabled={page === totalPages}>
+                          Вперёд
+                        </button>
+                      </div>
+                    </>
                 )}
             </div>
         </section>

frontend/src/components/Header/Header.css

@@ -87,10 +87,33 @@
   transition: background-color 0.2s ease;
 }
 
+.profile-dropdown .dropdown-item.profile-right {
+  text-align: right;
+}
+
+.profile-dropdown .dropdown-item img {
+  vertical-align: middle;
+}
+
 .profile-dropdown .dropdown-item:hover {
   background-color: #f5f5f5;
 }
 
+.dropstart .dropdown-toggle::before {
+  display: none !important;
+  content: none !important;
+  border: none !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  width: 0 !important;
+  height: 0 !important;
+}
+
+  .dropstart .dropdown-menu[data-bs-popper] {
+    top: 0px;
+    right: -10%;
+  }
+
 /* Адаптивные стили */
 @media (max-width: 768px) {
   .header {
@@ -105,4 +128,5 @@
   .header .logo {
     font-size: 1.1rem;
   }
+
 }

frontend/src/components/Header/Header.jsx

@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect } from 'react';
-import { Navbar, Container, Form, Nav, NavDropdown } from 'react-bootstrap';
+import { Navbar, Container, Form, Nav, NavDropdown, SplitButton, Dropdown } from 'react-bootstrap';
 import { useAuth } from '../../context/AuthContext';
 import LoginButton from '../LoginButton/LoginButton';
 import './Header.css';
@@ -35,39 +35,37 @@ const Header = () => {
           />
         </Form>
         {/* Условный рендеринг: кнопка "Войти" или иконка профиля */}
-        {isAuthenticated ? (
+{isAuthenticated ? (
   <div className="profile-container" ref={menuRef} style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-    <div
-      className="profile-trigger"
-      style={{ display: 'flex', alignItems: 'center', gap: '10px', cursor: 'pointer' }}
-      onClick={() => setIsMenuOpen((prev) => !prev)}
-    >
+    <Dropdown show={isMenuOpen} onToggle={() => setIsMenuOpen((prev) => !prev)} className="profile-dropdown" align="start" drop="start">
+      <Dropdown.Toggle
+        as="span"
+        id="profile-dropdown"
+        style={{ border: 'none', background: 'none', padding: 0, cursor: 'pointer' }}
+        onClick={() => setIsMenuOpen((prev) => !prev)}
+      >
       <div className="profile-icon">
         <img
-          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXVzZXIiPjxwYXRoIGQ9Ik0xOSAyMXYtMmE0IDQgMCAwIDAtNC00SDlhNCA0IDAgMCAwLTQgNHYyIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSI3IiByPSI0Ii8+PC9zdmc+"
+          src={'./icons8-гость-мужчина-48.png'}
           alt="Профиль"
           className="profile-image"
         />
       </div>
-      <span style={{ fontWeight: 500, color: '#0F114B', fontSize: '1rem', whiteSpace: 'nowrap' }}>{user?.username}</span>
-    </div>
-    <NavDropdown
-      title={null} // убираем стрелку
-      id="basic-nav-dropdown"
-      show={isMenuOpen}
-      onToggle={() => {}}
-      align="end"
-      className="profile-dropdown"
-      style={{ marginLeft: '0' }}
-      renderToggle={undefined} // предотвращаем появление стрелки
-    >
-      <NavDropdown.Item onClick={() => {
-        window.location.href = '/organizer';
-      }}>Профиль</NavDropdown.Item>
-      <NavDropdown.Item>Настройки</NavDropdown.Item>
-      <NavDropdown.Divider />
-      <NavDropdown.Item onClick={logout}>Выход</NavDropdown.Item>
-    </NavDropdown>
+    </Dropdown.Toggle>
+    <Dropdown.Menu>
+      <Dropdown.Item>
+        <img src="./icons8-гость-мужчина-48.png" alt="" />
+        {user && user.username ? user.username : 'Имя'}
+      </Dropdown.Item>
+      <Dropdown.Divider />
+      <Dropdown.Item className="profile-right" onClick={() => { window.location.href = '/organizer'; }}>
+        Профиль
+      </Dropdown.Item>
+      <Dropdown.Item className="profile-right">Настройки</Dropdown.Item>
+      <Dropdown.Divider />
+      <Dropdown.Item className="profile-right" onClick={logout}>Выход</Dropdown.Item>
+    </Dropdown.Menu>
+    </Dropdown>
   </div>
 ) : (
           <LoginButton />

frontend/src/components/UpcomingEvents/UpcomingEvents.jsx

@@ -14,7 +14,7 @@ function getRandomEvents(events, maxCount) {
   return shuffled.slice(0, count);
 }
 
-const UpcomingEvents = ({ title = "Ближайшие мероприятия", maxCount = 6 }) => {
+const UpcomingEvents = ({ title = "Ближайшие мероприятия", maxCount = 10 }) => {
   const [activeIndex, setActiveIndex] = useState(0);
   const [events, setEvents] = useState([]);
   const [visibleCards, setVisibleCards] = useState([]);
@@ -26,8 +26,8 @@ const UpcomingEvents = ({ title = "Ближайшие мероприятия", m
       setLoading(true);
       setError(null);
       try {
-        const response = await axios.get('/api/events');
-        const allEvents = response.data && Array.isArray(response.data.content) ? response.data.content : [];
+        const response = await axios.get('/api/events/upcoming');
+        const allEvents = Array.isArray(response.data) ? response.data : [];
         const randomEvents = getRandomEvents(allEvents, maxCount);
         setEvents(randomEvents);
       } catch (err) {
@@ -99,8 +99,9 @@ const UpcomingEvents = ({ title = "Ближайшие мероприятия", m
                     id={item.event.id}
                     title={item.event.title}
                     date={item.event.date}
-                    location={item.event.place || item.event.location}
+                    location={item.event.place}
                     description={item.event.description}
+                    imageUrl={item.event.imageUrl}
                   />
                 </div>
               ))}

kubernetes/api-gateway-deployment.yml

@@ -23,6 +23,11 @@ spec:
         env:
         - name: SPRING_PROFILES_ACTIVE
           value: "k8s"
+        - name: JWT_SECRET
+          valueFrom:
+            secretKeyRef:
+              name: jwt-secret
+              key: secret
         resources:
           limits:
             memory: "700Mi"