Untitled

// src/components/Header.js
import React, { useEffect, useState } from "react";
import { NavLink, useParams } from "react-router-dom";
import ReactPaginate from "react-paginate";
import "../../styles/Manga.css";

import { fetchManga, fetchMangaComment } from "../../api/SiteService";
import { commentManga } from "../../api/AccountService";

const Manga = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [comments, setComments] = useState([]);
  const [newComment, setNewComment] = useState('');

  useEffect(() => {
    const getComments = async (pageNumber) => {
      try {
        const data = await fetchMangaComment(mangaId, pageNumber);
        setComments(data.comments);
        setTotalPages(data.totalPages);
      } catch (error) {
        console.error("Error get list manga:", error);
      }
    };

    getComments(currentPage);
  }, [currentPage]);

  const handlePageClick = (event) => {
    const page = event.selected + 1;
    setCurrentPage(page);
  };

  const handleSubmitComment = async (e) => {
    e.preventDefault();
    const response = await commentManga(mangaId, newComment);
    window.location.reload();
  };

  return (
    <div>
      <div className="header-title ">
          <h4>Comments</h4>
        </div>
        <div className="manga-comment">
          <div className="comment-form">
            <textarea
              value={newComment}
              onChange={(e) => setNewComment(e.target.value)}
              placeholder="Bình luận..."
            />
            <button onClick={handleSubmitComment}>Bình luận</button>
          </div>

          <ul>
            {comments.map((comment) => (
              <li key={comment.commentDate}>
                {comment.username}: {comment.context}
              </li>
            ))}
          </ul>

          <div className="pagination">
            <ReactPaginate
              breakLabel="..."
              nextLabel="Next"
              previousLabel="Previous"
              onPageChange={handlePageClick}
              pageCount={totalPages}
              forcePage={currentPage - 1}
              pageClassName="page-item"
              pageLinkClassName="page-link"
              previousClassName="page-item"
              previousLinkClassName="page-link"
              nextClassName="page-item"
              nextLinkClassName="page-link"
              breakClassName="page-item"
              breakLinkClassName="page-link"
              containerClassName="pagination"
              activeClassName="active"
            />
          </div>
        </div>
    </div>
  );
};

export default Manga;