movies.js

import React, { Component } from "react";
import * as movies from "../services/fakeMovieService";
import Pagination from "./common/pagination";
import ListGroup from "./common/moviesListGroup";
import _ from "underscore";
import lodash from "lodash";
import { getPaginatedItems } from "../utils/paginate";
import { getGenres } from "../services/fakeGenreService";
import MovieTable from "./movieTable";
class Movie extends Component {
  state = {
    pageSize: 3,
    currentPage: 1,
    movies: [],
    genresList: [],
    sortColumn: { path: "title", order: "asc" }
  };

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

    this.setState({
      movies: movies.getMovies(),
      genresList: genres
    });
  }
  handleDelete = productID => {
    var arr = [...this.state.movies];
    arr = _.without(
      arr,
      _.findWhere(arr, {
        _id: productID
      })
    );
    this.setState({
      movies: arr
    });
  };

  hideTable = () => {
    return this.state.movies.length === 0 ? { display: "none" } : {};
  };

  movieText = data => {
    const { filter, item } = data;
    if (item.length === 0 && this.state.movies.length > 0) {
      let curntPage = this.state.currentPage;
      curntPage = curntPage - 1;
      this.setState({
        currentPage: curntPage
      });
    }

    return this.state.movies.length !== 0
      ? `This database have ${filter.length} movies`
      : "No movie in database";
  };

  handleLike = movie => {
    const movies = [...this.state.movies];
    const index = movies.indexOf(movie);
    movies[index] = { ...movies[index] };
    movies[index].isLike = !movies[index].isLike;
    this.setState({
      movies
    });
  };

  pagination = page => {
    this.setState({ currentPage: page });
  };

  handleGenres = genres => {
    this.setState({ selectedGenra: genres, currentPage: 1 });
  };

  handleSort = sortColumn => {
    this.setState({
      sortColumn
    });
  };

  render() {
    const filter =
      this.state.selectedGenra && this.state.selectedGenra._id
        ? this.state.movies.filter(
            movie => movie.genre._id === this.state.selectedGenra._id
          )
        : this.state.movies;

    const sortedItem = lodash.orderBy(
      filter,
      [this.state.sortColumn.path],
      [this.state.sortColumn.order]
    );

    const item = getPaginatedItems(
      sortedItem,
      this.state.currentPage,
      this.state.pageSize
    );

    return (
      <div className="App">
        <div className="container">
          <div className="row">
            <div
              className="col-md-4"
              style={{
                marginTop: "10%"
              }}
            >
              <ListGroup
                genresList={this.state.genresList}
                onChangeGenres={this.handleGenres}
                selectedGenra={this.state.selectedGenra}
              />
            </div>
            <div className="col-md-8">
              <main>
                <h1>{this.movieText({ filter, item })}</h1>
                <MovieTable
                  onLike={this.handleLike}
                  onDelete={this.handleDelete}
                  onHide={this.hideTable}
                  item={item}
                  onSort={this.handleSort}
                  sortColumn={this.state.sortColumn}
                />

                <Pagination
                  pageSize={this.state.pageSize}
                  count={filter.length}
                  onPageChange={this.pagination}
                  currentPage={this.state.currentPage}
                />
              </main>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Movie;