React Movies

import React from "react";
import { getMovies, getMovie } from "../services/fakeMovieService";
import Pagination from "./pagination";
import { paginate } from "../utils/paginate";
import { getGenres } from "../services/fakeGenreService";
import _ from "lodash";
import { genres } from "../utils/genre";
import Genre from "./genre";
import Like from "./like";
class Movies extends React.Component {
  state = {
    movies: getMovies(),
    pageSize: 4,
    currentPage: 1,
  };
  handelPageChange = (page) => {
    this.setState({ currentPage: page });
  };
  // handelGenre = (genre) => {
  //   const movies = genres(genre, this.state.movies);
  //   this.setState({ movies });
  //   console.log(genre.name);
  // };
  // handelAllGenre = () => {
  //   const movies = getMovies();
  //   console.log(movies);
  //   this.setState({ movies });
  // };

  handelLike = (movie) => {
    const movies = [...this.state.movies];
    const index = movies.indexOf(movie);
    movies[index] = { ...movies[index] };
    movies[index].liked = !movies[index].liked;
    this.setState({ movies });
  };
  render() {
    const { movies: allMovies, pageSize, currentPage } = this.state;
    const { length: count } = this.state.movies;
    const movies = paginate(allMovies, pageSize, currentPage);
    return (
      <React.Fragment>
        <div className="row">
          <div className="col col-3">
            {/* <Genre
              genres={genres}
              sort={this.handelGenre}
              allGenre={this.handelAllGenre}
            /> */}
          </div>
          <div className="col col-7">
            <table className="table">
              <thead>
                <tr>
                  <th>Title</th>
                  <th>Genre</th>
                  <th>Stocks</th>
                  <th>Rating</th>
                  <th>liked</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.handelLike(movie)}
                      />
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
            <Pagination
              pageSize={pageSize}
              itemsCount={count}
              onPageChange={this.handelPageChange}
              currentPage={currentPage}
            />
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default Movies;

Similar codes

0 vote215 views1 answer
React native update helper
Javascript React
3 votes206 views1 answer
React prop ytpes
Javascript React
0 vote224 views1 answer
Standalone form inside reactive form
Javascript React
0 vote237 views1 answer
Create react app with vite
Javascript React
0 vote796 views1 answer
Hide react from netlify
Javascript React
-1 vote197 views1 answer
Get height component react
Javascript React
0 vote245 views1 answer
Space between react native
Javascript React
0 vote211 views6 answers
State functions of react cheatsheet
Javascript React
0 vote195 views1 answer
React setstate in another component
Javascript React
4 votes205 views2 answers
[!] CocoaPods could not find compatible versions for pod "ReactCommon/jscallinvoker": In Podfile: ReactCommon/jscallinvoker (from `../node_modules/react-native/ReactCommon`)
Javascript React