Filtering- Implementing Filtering

Buat file baru di dalam folder common, dengan nama Pagination.jsx dan listGroup.jsx

Pagination.jsx

import React from "react";
import propTypes from "prop-types";
import _ from "lodash";

const Pagination = props => {
    const { itemsCount, pageSize, currentPage, onPageChange } = props;
    console.log(currentPage)

    const pagesCount = Math.ceil(itemsCount / pageSize);
    console.log(pagesCount)
    if (pagesCount === 1)  return null;
    const pages = _.range(1, pagesCount + 1);
    return (
        <nav>
            <ul className="pagination">
                {pages.map(page => (
                    <li key={page} className={ page === currentPage ? 'page-item active' : 'page-item' }>
                        <a className="page-link" onClick={() => onPageChange(page)}>
                            {page}
                        </a>
                    </li>
                ))}
            </ul>
        </nav>
    )
    
}

Pagination.propTypes = {
    itemsCount: propTypes.number.isRequired,
    pageSize: propTypes.number.isRequired,
    currentPage: propTypes.number.isRequired,
    onPageChange: propTypes.func.isRequired
}

export default Pagination

listGroup.jsx

import React from "react";

const ListGroup = props =>{
    const { items, textProperty, valueProperty, selectedItem, onItemSelect } = props;
    return (
        <ul className="list-group">
            {items.map(item => (
                <li 
                    onClick={() => onItemSelect(item)}
                    key={item[valueProperty]}
                    className={ item === selectedItem ? "list-group-item active" : "list-group-item"}
                >
                    {item[textProperty]}
                </li>
            ))}
        </ul>
    )
}

ListGroup.defaultProps ={
    textProperty: "name",
    valueProperty: "_id"
}
export default ListGroup

Lalu masuk ke file movies.jsx

import React, {Component} from 'react';
import Like from './Common/Like';
import ListGroup from './Common/listGroup';
import Pagination from './Common/Pagination';
import { getMovies } from '../services/fakeMovieService';
import { getGenres } from '../services/fakeGenreService';
import { paginate } from '../utils/paginate';

class Movies extends Component {
    state = {
        movies: [],
        genres: [],
        currentPage: 1,
        pageSize: 4,
    };

    componentDidMount() {
        const genres = [{ name: 'All Genres'}, ...getGenres() ]

        this.setState({ movies: getMovies(), genres });
    }

    handleDelete = movie => {
        const movies = this.state.movies.filter(m => m._id !== movie._id);
        this.setState({ movies })
        // console.log(movie)
    }

    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 });

        // console dan ambil tiap data per id
        // console.log("like bos", movie)
    }

    handlePageChange = page => {
        this.setState({ currentPage: page });
        // console.log(page)
    }

    handleGenreSelect = genre => {
        this.setState({ selectedGenre: genre, currentPage: 1 })
    }

    render() {
        const { lenght: count } = this.state.movies;
        const { pageSize, currentPage, selectedGenre, movies: allMovies } = this.state;
        if( count === 0)
            return <p>There are no movies in the database</p>;

        const filtered = selectedGenre && selectedGenre._id ? allMovies.filter(m => m.genre._id === selectedGenre._id) : allMovies;



        const movies = paginate(filtered, currentPage, pageSize);
        return (
            <>
            <div className="row">
                <div className="col-3">
                    <ListGroup 
                        items={this.state.genres}
                        selectedItem={this.state.selectedGenre}
                        onItemSelect={this.handleGenreSelect} 
                    />
                </div>
                <div className="col">
                    <p>Showing {filtered.length} movies in the database</p>
                    <table className="table">
                        <thead>
                            <tr>
                                <th scope="col">Title</th>
                                <th scope="col">Genre</th>
                                <th scope="col">Stock</th>
                                <th scope="col">Rate</th>
                                <th scope="col"></th>
                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            { 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 liked={movie.liked} onClick={() => this.handleLike(movie)} />
                                    </td>
                                    <td><button onClick={() => this.handleDelete(movie)} className="btn btn-danger btn-sm">Delete</button></td>
                                </tr>
                            )) }
                            
                        </tbody>
                    </table>

                    <Pagination 
                        itemsCount={filtered.length}
                        pageSize={pageSize} 
                        currentPage={currentPage}
                        onPageChange={this.handlePageChange} 
                    />
                </div>

                
            </div>
            </>
          )
    }
}

export default Movies