// src/article/index.js 

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
import Pagination from './page';

function BlogList() {
  const [articles, setArticles] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 50;

  useEffect(() => {
    axios.get('http://localhost:8888/api/articles')
      .then(response => {
        setArticles(response.data.articles);
      })
      .catch(error => {
        console.error("请求错误:", error);
      });
  }, []);

  const handlePageChange = (page) => {
    setCurrentPage(page);
  };

  const startIndex = (currentPage - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  const currentData = articles.slice(startIndex, endIndex);

  return (
    <div>
      <h2>美亿的博客</h2>
      <Pagination totalItems={articles.length} itemsPerPage={itemsPerPage} onPageChange={handlePageChange} />
      <div>
        {currentData.map(article => (
          <div key={article.id}>
            <div>
              <Link to={`/articles/${article.id}`}>
                <p>
                  {article.created_at}&nbsp;&nbsp;&nbsp;
                  {article.title}
                </p>
              </Link>
            </div>
          </div>
        ))}
      </div>
      <Pagination totalItems={articles.length} itemsPerPage={itemsPerPage} onPageChange={handlePageChange} />
    </div>
  );
}

export default BlogList;

// src/article/index.js 

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
import Pagination from './page';

function BlogList() {
  const [articles, setArticles] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [searchTitleInput, setSearchTitleInput] = useState('');
  const [searchContentInput, setSearchContentInput] = useState('');
  const [searchTitle, setSearchTitle] = useState('');
  const [searchContent, setSearchContent] = useState('');
  const [filteredArticles, setFilteredArticles] = useState([]);
  const itemsPerPage = 50;

  useEffect(() => {
    axios.get('http://localhost:8888/api/articles')
      .then(response => {
        setArticles(response.data.articles);
      })
      .catch(error => {
        console.error('请求错误:', error);
      });
  }, []);

  useEffect(() => {
    const filteredArticles = articles.filter(article => {
      const titleMatch = article.title.toLowerCase().includes(searchTitle.toLowerCase());
      const contentMatch = article.content.toLowerCase().includes(searchContent.toLowerCase());
      return titleMatch && contentMatch;
    });
    setFilteredArticles(filteredArticles);
  }, [searchTitle, searchContent, articles]);

  const handlePageChange = page => {
    setCurrentPage(page);
  };

  const startIndex = (currentPage - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  const currentData = filteredArticles.slice(startIndex, endIndex);

  const handleContentSearch = () => {
    setSearchTitle(searchTitleInput);
    setSearchContent(searchContentInput);
    setCurrentPage(1); // 重置当前页码
  };

  return (
    <div>
      <Link to='/'>主页</Link>
      <h2>美亿的博客</h2>
      <Pagination totalItems={filteredArticles.length} itemsPerPage={itemsPerPage} onPageChange={handlePageChange} />
      标题:&nbsp;<input value={searchTitleInput} onChange={e => setSearchTitleInput(e.target.value)} />&nbsp;
      内容:&nbsp;<input value={searchContentInput} onChange={e => setSearchContentInput(e.target.value)} />&nbsp;
      <button onClick={handleContentSearch}>搜索</button>
      <div>
        {currentData.map(article => (
          <div key={article.id}>
            <div>
              <Link to={`/articles/${article.id}`}>
                <p>
                  {article.created_at}&nbsp;&nbsp;&nbsp;
                  {article.title}
                </p>
              </Link>
            </div>
          </div>
        ))}
      </div>
      <Pagination totalItems={filteredArticles.length} itemsPerPage={itemsPerPage} onPageChange={handlePageChange} />
    </div>
  );
}

export default BlogList;