johnnykoo84

loadMoreArticles = direction => {
  const { allArticles, currentCategory } = this.state;
  const currentCategoryId = this.categories.find(
    category => category.name === currentCategory
  ).id;
  const currentCategoryArticles = allArticles.filter(
    article => article.UserId === currentCategoryId
  );

  const pagedArticles = page => {

johnnykoo84

const getLastPage = () =>
  Math.floor(currentCategoryArticles.length / this.articlesPerPage);

johnnykoo84

const pagedArticles = page => {
  const lastIndex = page * this.articlesPerPage;
  const firstIndex = lastIndex - this.articlesPerPage;
  return currentCategoryArticles.slice(firstIndex, lastIndex);
};

johnnykoo84

loadMoreArticles = direction => {
  // 상태에 저장되어 있는 allArticles와 currentCategory를 이용해서
  // 유저에게 보여 줄 currentCategoryArticles를 가져온다.

  const { allArticles, currentCategory } = this.state;
  const currentCategoryId = this.categories.find(
    category => category.name === currentCategory
  ).id;
  const currentCategoryArticles = allArticles.filter(
    article => article.UserId === currentCategoryId

johnnykoo84

render() {
  const { currentArticles, currentCategory } = this.state;

  return (
    <div className="App">
      <Tabs
        categories={this.categories}
        currentCategory={currentCategory}
        changeCurrentCategory={this.changeCurrentCategory}
      />

johnnykoo84

const Button = ({ loadMoreArticles }) => (
  <div className="mt-3">
    <button
      className="btn btn-outline-dark btn-sm mr-2"
      onClick={() => loadMoreArticles('prev')}
    >
      <i className="fas fa-angle-left" />
    </button>
    <button
      className="btn btn-outline-dark btn-sm"

johnnykoo84

render() {
  const { currentArticles, currentCategory } = this.state;

  return (
    <div className="App">
      <Tabs
        categories={this.categories}
        currentCategory={currentCategory}
        changeCurrentCategory={this.changeCurrentCategory}
      />

johnnykoo84

const Articles = props => {
  const { articles } = props;

  return (
    <div className="list-group">
      {articles.map(article => (
        <div
          className="list-group-item list-group-item-action"
          key={article.id}
        >

johnnykoo84

 <button
    className={`btn ${btnClassName} btn-block`}
    onMouseEnter={() => changeCurrentCategory(category.name)}
  >
  {category.name}
</button>

johnnykoo84

render() {
  const { currentArticles, currentCategory } = this.state;

  return (
    <div className="App">
      <Tabs
        categories={this.categories}
        currentCategory={currentCategory}
        changeCurrentCategory={this.changeCurrentCategory}
      />