src/components/UserLib/UserLibrary.jsx - master - ilgizok/MyLibFront

src/components/UserLib/UserLibrary.jsx
109 строк4 KB
ilgiz
add
20 апр 2025, 00:44
20 апр 2025, 00:44a4c46b9
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import styles from './UserLibrary.module.css';

const UserLibrary = () => {
    const [libraryBooks, setLibraryBooks] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState('');
    const navigate = useNavigate();

    // Получаем текущего пользователя из localStorage
    const currentUser = JSON.parse(localStorage.getItem('currentUser'));

    useEffect(() => {
        const fetchUserLibrary = async () => {
            if (!currentUser) {
                setError('Пользователь не авторизован');
                setLoading(false);
                return;
            }

            try {
                const response = await axios.get(`/api/users/${currentUser.id}/library`);
                setLibraryBooks(response.data);
            } catch (err) {
                setError('Не удалось загрузить библиотеку');
                console.error('Error fetching user library:', err);
            } finally {
                setLoading(false);
            }
        };

        fetchUserLibrary();
    }, [currentUser?.id]);

    const getStatusLabel = (status) => {
        switch (status) {
            case 'planned': return 'Хочу прочитать';
            case 'reading': return 'Читаю сейчас';
            case 'finished': return 'Прочитано';
            case 'dropped': return 'Чтение отложено';
            default: return status;
        }
    };

    const getStatusStyle = (status) => {
        switch (status) {
            case 'planned': return styles.planned;
            case 'reading': return styles.reading;
            case 'finished': return styles.finished;
            case 'dropped': return styles.dropped;
            default: return '';
        }
    };

    if (loading) return <div className={styles.loading}>Загрузка...</div>;
    if (error) return <div className={styles.error}>{error}</div>;

    return (
        <div className={styles.container}>
            <h1 className={styles.title}>Моя библиотека</h1>

            {libraryBooks.length === 0 ? (
                <p className={styles.emptyMessage}>Ваша библиотека пуста</p>
            ) : (
                <div className={styles.booksGrid}>
                    {libraryBooks.map(libraryItem => (
                        <div
                            key={libraryItem.id}
                            className={styles.bookCard}
                            onClick={() => navigate(`/book/${libraryItem.book.bookId}`)}
                        >
                            {libraryItem.book.coverImageUrl ? (
                                <img
                                    src={libraryItem.book.coverImageUrl}
                                    alt={libraryItem.book.title}
                                    className={styles.bookCover}
                                    onError={(e) => {
                                        e.target.src = 'https://via.placeholder.com/150x200?text=No+Cover';
                                    }}
                                />
                            ) : (
                                <div className={styles.placeholderCover}>
                                    Нет обложки
                                </div>
                            )}
                            <div className={styles.bookInfo}>
                                <h3 className={styles.bookTitle}>{libraryItem.book.title}</h3>
                                <div className={styles.bookMeta}>
                                    <span className={`${styles.status} ${getStatusStyle(libraryItem.readingStatus)}`}>
                                        {getStatusLabel(libraryItem.readingStatus)}
                                    </span>
                                    {libraryItem.book.authors?.length > 0 && (
                                        <p className={styles.bookAuthor}>
                                            {libraryItem.book.authors.map(a => a.name).join(', ')}
                                        </p>
                                    )}
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            )}
        </div>
    );
};

export default UserLibrary;