Skip to content

Commit

Permalink
Merge pull request #6 from aribray/customer-movie-react
Browse files Browse the repository at this point in the history
Customer movie react
aribray authored Jun 26, 2019
2 parents 3840545 + c56e142 commit f6faab9
Showing 5 changed files with 35 additions and 21 deletions.
19 changes: 16 additions & 3 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -13,7 +13,7 @@ class App extends Component {
this.state = {
selectedMovie: "",
selectedCustomer: "",
allRentals: [],
movieList: [],
customerList: [],
}
}
@@ -27,6 +27,16 @@ class App extends Component {
this.setState({selectedCustomer: customer});
}

getMovies = (movies) => {
console.log(movies)
this.setState( {movieList: movies})
}

onSelectMovie = (movieId) => {
const movie = this.state.movieList.find(movie => movie.id === movieId);
this.setState({selectedMovie: movie});
}

render() {
return (
<div>
@@ -39,15 +49,18 @@ class App extends Component {
</li>
<li>
<Link to="/movies" className="movies">Movies</Link>
</li>
</li>
<li>
<Link to="/customers" className="customers">Customers</Link>
</li>
</ul>
</nav>
</div>
<main>
<Route path="/movies" component={RentalLibrary} />
<Route
path="/movies"
render={(props) => <RentalLibrary {...props} selectMovieCallback={this.onSelectMovie} getMovieCallback={this.getMovies}/>}
/>
<Route
path="/customers"
render={(props) => <CustomerList {...props} selectCustomerCallback={this.onSelectCustomer} getCustomerCallback={this.getCustomers}/>}
4 changes: 2 additions & 2 deletions src/components/Customer.js
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';

const Customer = (props) => {
const selectCustomer = () => {
return props.selectedCustomerCallback(props.id)
return props.selectCustomerCallback(props.id)
}

return (
@@ -32,7 +32,7 @@ Customer.propTypes = {
postal:PropTypes.string,
phone:PropTypes.string,
account_credit:PropTypes.number,
selectedCustomerCallback: PropTypes.func,
selectCustomerCallback: PropTypes.func,
};

export default Customer;
2 changes: 1 addition & 1 deletion src/components/CustomerList.js
Original file line number Diff line number Diff line change
@@ -40,7 +40,7 @@ class CustomerList extends Component {
state={customer.state}
postal_code={customer.phone}
account_credit={customer.account_credit}
selectedCustomerCallback={this.selectCustomerCallback}
selectCustomerCallback={this.selectCustomerCallback}
/>
});

8 changes: 5 additions & 3 deletions src/components/Movie.js
Original file line number Diff line number Diff line change
@@ -3,6 +3,9 @@ import PropTypes from 'prop-types';


const Movie = (props) => {
const selectMovie = () => {
return props.selectMovieCallback(props.id)
}

return (
<div className="movie">
@@ -13,8 +16,7 @@ const Movie = (props) => {
<div className="text">{props.overview}</div>
</div>
<div className="movie__info">
<span>
</span>
<li><a href="#" onClick={selectMovie}>Select Movie</a></li>
</div>
</div>
</div>
@@ -30,7 +32,7 @@ Movie.propTypes = {
image_url:PropTypes.string,
external_id:PropTypes.number,
buttonClassname:PropTypes.string,
getMovieTitleCallback:PropTypes.func,
selectMovieCallback:PropTypes.func,
};

export default Movie;
23 changes: 11 additions & 12 deletions src/components/RentalLibrary.js
Original file line number Diff line number Diff line change
@@ -9,26 +9,25 @@ class RentalLibrary extends Component {

this.state = {
movies: [],
moreMovies: '',
};
}

componentDidMount() {
this.getMovies()
}

getMovies = () => {
axios.get('http://localhost:3000/movies')
.then((response) => {
this.setState({
movies: response.data,
});
this.setState( {movies: response.data} );
this.props.getMovieCallback(this.state.movies);
})
.catch((error) => {
this.setState({ error: error.message });
this.setState({
error: error.message
});
});
}

selectMovieCallback = (id) => {
this.props.selectMovieCallback(id);
}

render() {
const allRentals = this.state.movies.map((movie) => {
@@ -40,12 +39,11 @@ class RentalLibrary extends Component {
release_date={movie.release_date}
image_url={movie.image_url}
external_id={movie.external_id}
getMovieTitleCallback={this.props.getMovieTitleCallback}
selectMovieCallback={this.selectMovieCallback}
/>

});


return (
<div >
<div className="rentals">
@@ -57,7 +55,8 @@ class RentalLibrary extends Component {
}

RentalLibrary.propTypes = {
getMovieTitleCallback:PropTypes.func,
selectMovieCallback:PropTypes.func,
getMovieCallback:PropTypes.func,
};

export default RentalLibrary;

0 comments on commit f6faab9

Please sign in to comment.