solved!
pagination:
const Pagination = props => {
const { itemsCount, pageSize } = props;
// const pagesCount = props.children[1] / props.children[3];
const pagesCount = itemsCount / pageSize;
const pages = _.range(1, pagesCount + 1);
return (
<nav>
<ul className="pagination">
{pages.map((page) => (
<li key={page} className="page-item">
<a className="page-link">{ page }</a>
</li>
))}
{/* <li className="page-item"><a class="page-link" href="#">Previous</a></li> */}
{/* <li className="page-item"><a class="page-link" href="#">1</a></li> */}
{/* <li className="page-item"><a class="page-link" href="#">2</a></li>
<li className="page-item"><a class="page-link" href="#">3</a></li> */}
{/* <li className="page-item"><a class="page-link" href="#">Next</a></li> */}
</ul>
</nav>
)
}
movies:
import React, { Component } from ‘react’;
import { getMovies } from ‘…/services/fakeMovieService’
import Like from ‘./common/like’;
import Pagination from ‘./common/pagination’;
class Movies extends Component {
state = {
movies: getMovies(),
pageSize: 4,
};
handleDelete = (movie) => {
const movies = this.state.movies.filter(m => m._id !== movie._id)
// const removed = this.state.movies.filter(m => m._id === movie._id)
// console.log({removed})
this.setState({movies})
};
handleLike = (movie) => {
const movies = […this.state.movies];
const index = movies.indexOf(movie);
movies[index] = {…movies[index]}
movies[index].liked = !movies[index].liked;
this.setState({movies});
};
handlePageChange = (page) => {
console.log(page);
};
render() {
const countMovies = this.state.movies.length;
if (countMovies === 0) {
return "There are no movies in database"
};
return (
<>
<p>There are {countMovies} movies in the database</p>
<table className="table">
<thead>
<tr>
<th>Title</th>
<th>Genre</th>
<th>Stock</th>
<th>Rate</th>
<th>Liked</th>
</tr>
</thead>
<tbody>
{this.state.movies.map((movie)=>(
<tr key={movie._id}>
<td>{movie.title}</td>
<td>{movie.genre.name}</td>
<td>{movie.numberInStock}</td>
<td>{movie.dailyRentalRate}</td>
<td><Like onClick={() => this.handleLike(movie)} liked={movie.liked}/></td>
<td><button onClick={()=>this.handleDelete(movie)} className='btn btn-danger btn-sm'>Delete</button></td>
</tr>
))}
</tbody>
</table>
<Pagination
itemsCount={countMovies}
pageSize={this.state.pageSize}
onPageChange={this.handlePageChange}>
</Pagination>
</>
);
}
}
export default Movies;
