Hi There,
When I replaced the fakeGenreService with genreService module, I couldn’t get the movies or data from backend.
So, if some body help me to replace this genreService module, or get genres on the browser, it’s very much thankful.
Any way, I have attaching my code details below and result too.
genreService.js:
import http from “./httpService”;
export function getGenres() {
return http.get(“http://localhost:3900/api/genres”);
}
movies.jsx:
import React, { Component } from “react”;
import { Link } from “react-router-dom”;
import MoviesTable from “./moviesTable”;
import ListGroup from “./common/listGroup”;
import Pagination from “./common/pagination”;
import { getMovies, deleteMovie } from “…/services/fakeMovieService”;
import { getGenres } from “…/services/genreService”;
import { paginate } from “…/utils/paginate”;
import _ from “lodash”;
import SearchBox from “./searchBox”;
class Movies extends Component {
state = {
movies: ,
genres: ,
currentPage: 1,
pageSize: 4,
searchQuery: “”,
selectedGenre: null,
sortColumn: { path: “title”, order: “asc” },
};
// Calling GenreServices from Backend/Server
async componentDidMount() {
** const { data } = await getGenres();**
** const genres = [{ _id: “”, name: “All Genres” }, …data];**
** this.setState({ movies: getMovies(), genres });**
** }**
handleDelete = movie => {
const movies = this.state.movies.filter(m => m._id !== movie._id);
this.setState({ movies: movies });
deleteMovie(movie._id);
};
handleLike = movie => {
// console.log(“Clicked Liked”, 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);
this.setState({ currentPage: page });
};
handleGenreSelect = genre => {
// console.log(genre);
// this.setState({ selectedGenre: genre, currentPage: 1 });
this.setState({ selectedGenre: genre, searchQuery: “”, currentPage: 1 });
};
handleSearch = query => {
this.setState({ searchQuery: query, selectedGenre: null, currentPage: 1 });
};
handleSort = sortColumn => {
this.setState({ sortColumn });
};
getPageData = () => {
const {
pageSize,
currentPage,
sortColumn,
movies: allMovies,
selectedGenre,
searchQuery,
} = this.state;
let filtered = allMovies;
if (searchQuery)
filtered = allMovies.filter(m =>
m.title.toLowerCase().startsWith(searchQuery.toLowerCase())
);
else if (selectedGenre && selectedGenre._id)
filtered = allMovies.filter(m => m.genre._id === selectedGenre._id);
const sorted = _.orderBy(filtered, [sortColumn.path], [sortColumn.order]);
const movies = paginate(sorted, currentPage, pageSize);
return { totalCount: filtered.length, data: movies };
};
render() {
const { length: moviesCount } = this.state.movies;
const { pageSize, currentPage, sortColumn, searchQuery } = this.state;
if (moviesCount === 0) return <p>There are no movies in the database!</p>;
const { totalCount, data: movies } = this.getPageData();
return (
<div className="row">
<div className="col-3">
<ListGroup
items={this.state.genres}
selectedItem={this.state.selectedGenre}
onItemSelect={this.handleGenreSelect}
/>
</div>
<div className="col">
<Link
to="/movies/new"
className="btn btn-primary"
style={{ marginBottom: 20 }}
>
New Movie
</Link>
<p>Showing {totalCount} movies in the database.</p>
<SearchBox value={searchQuery} onChange={this.handleSearch} />
<MoviesTable
movies={movies}
sortColumn={sortColumn}
onLike={this.handleLike}
onDelete={this.handleDelete}
onSort={this.handleSort}
/>
<Pagination
itemsCount={totalCount}
pageSize={pageSize}
currentPage={currentPage}
onPageChange={this.handlePageChange}
/>
</div>
</div>
);
}
}
export default Movies;
The result I am getting on Browser.
