Calling Backend Services - Replacing fakeGenreService

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.

Untitled

Is your backend service running? Did you verify that the URL is correct?

Hi Eelsholz,

Thanks for your reply and it seems my backend service is not running within Vidly application.

Though I tried to run my backend service within Vidly app, but I failed to do it. In the tutorial, Mosh says, copy vidly-api-node next to Vidly app, also rather then copying backend service, I was following like which Mosh was doing.

Till now, what I was trying do was like:

After successfully running the vidly-api-node from the browser and also in the mongoDB, I went to movies module, and made changes on componentDidMount() as per Mosh tutorials.

However, I could not get the data from my URL / MongoDB.

If you not mind, would you help me to run my backend service within Vidly app, please?

Thanks very much in advance!

Did you also run npm start from vidly-api-node? What error are you seeing now?

It seems I have not run the npm start from vidly-api-node.

I run the npm start for vidly-api-node from VS code terminal,
then I run npm start for my Vidly application from CMD.
This resolves my issue or now I get data from my Backend service.

However, I just want to know is it the right way to run (one from VS Terminal & other from CMD), or it doesn’t matter?

Thanks very much and looking forward to have same help in near future.

Thanks!

1 Like

I don’t think it matters which terminal emulator you use to start each.

Thanks very much for your great help and cheers!