fix:Отображение задач и страницы

Пофикшено отображение задач для неавторизованных и авторизованных пользователей. Так же пофикшено отображение информации на сайте. Пофикшено отображение "отсутсвия задач" пока пользователь незалогинен.

src/Mainpage.js

@@ -1,103 +1,107 @@
-import {useEffect, useState} from 'react';
+import { useEffect, useState } from 'react';
 import axios from 'axios';
 import Header from './Header';
+import { useNavigate } from 'react-router-dom';
 import './css/Mainpage.css';
 
 const Mainpage = () => {
     const [tasks, setTasks] = useState([]);
-    const [error_message, setErrorMessage] = useState(null);
+    const [errorMessage, setErrorMessage] = useState(null);
     const [count, setCount] = useState(0);
+    const [loading, setLoading] = useState(true);
+    const navigate = useNavigate();
 
     useEffect(() => {
         const checkSession = async () => {
             try {
                 const response = await axios.get('/api/users/my_tasks');
-
-                // если нет ошибки — пользователь авторизован
                 setTasks(response.data.tasks || []);
                 setCount(response.data.count || 0);
-                setErrorMessage('');
-
+                setErrorMessage(null);
             } catch (err) {
                 const message = err.response?.data?.message || 'Ошибка авторизации';
                 setErrorMessage(message);
-                }
+            } finally {
+                setLoading(false);
+            }
         };
 
         checkSession();
     }, []);
 
-    const isAuthenticated = !error_message;
+    const isAuthenticated = !errorMessage;
+
+    const formatDeadline = (deadline) => {
+        if (!deadline) return 'Отсутствует';
+        const d = new Date(deadline);
+        const day = String(d.getDate()).padStart(2, '0');
+        const month = String(d.getMonth() + 1).padStart(2, '0');
+        const year = d.getFullYear();
+        return `${day}.${month}.${year}`;
+    };
+
+    const handleTaskClick = (boardId) => {
+        navigate(`/kanban-board/${boardId}`);
+    };
+
+    const showScrollbar = count > 3;
 
     return (
         <>
-            <Header/>
-            <div className="content-wrapper">
-                {!isAuthenticated && (
-                    <div className="main-layout">
-                            <div>
-
-                                <h2 className="margin">
-                                    Наведите порядок в задачах за минуту
-                                </h2>
-
-                                <p className="com">
-                                    Kanban-доска помогает видеть весь процесс целиком: что запланировано,
-                                    что уже в работе и что готово. Перетаскивайте карточки между колонками,
-                                    фиксируйте договорённости и не теряйте контекст — всё в одном месте.
-                                </p>
-
-                                <h3 style={{ marginTop: "30px" }}>
-                                    Как это работает:
-                                </h3>
-
-                                <ul className="com">
-                                    <li>
-                                        Создайте карточку с задачей, добавьте описание и сроки.
-                                    </li>
-                                    <li>
-                                        Перемещайте её по этапам <strong>Сделать → В работе → Готово</strong>.
-                                    </li>
-                                    <li>
-                                        Смотрите прогресс по команде и быстро находите узкие места.
-                                    </li>
-                                </ul>
-
-                                <h3 style={{ marginTop: "30px" }}>
-                                    Начните сейчас
-                                </h3>
-
-                                <p className="com">
-                                    Войдите или зарегистрируйтесь, чтобы сохранять доски, открывать доступ
-                                    коллегам и синхронизировать задачи между устройствами.
-                                </p>
-
-                            </div>
+            <Header />
+            <div className="mainpage">
+                <div className="mainpage__intro">
+                    <div className="left-content">
+                        <h1>Kanban-доска Fool-Stack</h1>
+                        <p>
+                            Kanban-доска помогает видеть весь процесс целиком: что запланировано, что уже в работе и что готово.
+                            Перетаскивайте карточки между колонками, фиксируйте договорённости и не теряйте контекст — всё в одном месте.
+                        </p>
                     </div>
-                )}
 
-                {isAuthenticated && (
-                    <div className="main-layout">
-                        <div className="tasks-box">
-                            <h3>Задачи ({count})</h3>
-
-                            {tasks.length > 0 ? (
-                                <ul>
-                                    {tasks.map((task, index) => (
-                                        <li key={index}>
-                                            {task.title || task.name || `Задача ${index + 1}`}
-                                        </li>
-                                    ))}
-                                </ul>
-                            ) : (
-                                <p>Нет задач</p>
-                            )}
-                        </div>
+                    <div className="tasks-container">
+                        {loading ? (
+                            <>
+                                <h3 className="tasks-title">Ваши задачи</h3>
+                                <p>Загрузка...</p>
+                            </>
+                        ) : isAuthenticated ? (
+                            <>
+                                <h3 className="tasks-title">Ваши задачи</h3>
+                                {count === 0 ? (
+                                    <p>Нет задач</p>
+                                ) : (
+                                    <div
+                                        className={`tasks-list-wrapper ${showScrollbar ? 'scrollable' : ''}`}
+                                    >
+                                        <ul className="tasks-list">
+                                            {tasks.map((task) => (
+                                                <li
+                                                    key={task.id}
+                                                    className="task-item"
+                                                    onClick={() => handleTaskClick(task.board_id)}
+                                                >
+                                                    <div><strong>{task.title}</strong></div>
+                                                    <div><strong>Доска:</strong> {task.board_title}</div>
+                                                    <div><strong>Дедлайн:</strong> {formatDeadline(task.deadline)}</div>
+                                                </li>
+                                            ))}
+                                        </ul>
+                                    </div>
+                                )}
+                            </>
+                        ) : (
+                            <>
+                                <h3 className="tasks-title">Ваши задачи</h3>
+                                <p>Войдите, чтобы увидеть свои задачи.</p>
+                            </>
+                        )}
                     </div>
-                )}
+                </div>
             </div>
         </>
     );
 };
 
-export default Mainpage;
+export default Mainpage;
+//TODO: проверка правильности отображения даты в отображении