Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ampers: Zheng, Alex; #2

Closed
wants to merge 30 commits into from
Closed
Changes from 1 commit
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
ee83a03
movie collection and movie components created
brownav Jun 18, 2018
d0d113e
Show Movie List when button clicked
2020dream Jun 19, 2018
e09f53b
Run npm install --save react-router
2020dream Jun 19, 2018
c50930c
Use route to show MovieCollection
2020dream Jun 19, 2018
fc22f66
customer and search movies components added
brownav Jun 19, 2018
40d1c39
fixed url for customers
brownav Jun 19, 2018
52bad55
Show selectedMovie on Header
2020dream Jun 19, 2018
6e7bb74
Merge branch 'master' of https://github.com/brownav/video-store-consumer
2020dream Jun 19, 2018
b6bb6e7
Show selectedCustomer and SearchMovie component
2020dream Jun 19, 2018
6226f2c
searchMovie component renders movies based on query
brownav Jun 19, 2018
4c4d6c5
Add movie to library
2020dream Jun 19, 2018
ebec424
Fix spaceing bug
2020dream Jun 19, 2018
2a9e8c8
creates new rental
brownav Jun 19, 2018
ca9be32
Style App, MovieCollection, CustomerCollection
2020dream Jun 19, 2018
45a59a1
movie styling
brownav Jun 19, 2018
3de8425
customer styling
brownav Jun 19, 2018
fed7d06
Adjust style for Movie
2020dream Jun 19, 2018
84314d3
Resolve merge conflict
2020dream Jun 19, 2018
d5bab9e
moved styling for card from cardcollection to card
brownav Jun 19, 2018
38debcf
More styling
2020dream Jun 20, 2018
b08ae18
removed unnecessary logging
brownav Jun 20, 2018
b665b77
Merge branch 'master' of https://github.com/brownav/video-store-consumer
brownav Jun 20, 2018
f437598
static header when page is scrolled and flash message when user makes…
brownav Jun 20, 2018
58d19a5
Show message and clear movie title and customer name after making a r…
2020dream Jun 20, 2018
c4653cd
Merge branch 'master' of https://github.com/brownav/video-store-consumer
2020dream Jun 20, 2018
9376d58
rental notification and static header
brownav Jun 20, 2018
62c1cd5
Clear selectedMovie and selectedCustomer after making a rental
2020dream Jun 20, 2018
f280d02
minor styling
brownav Jun 20, 2018
a5466e1
Merge branch 'master' of https://github.com/brownav/video-store-consumer
brownav Jun 20, 2018
381a17a
Refactor codes
2020dream Jun 20, 2018
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
searchMovie component renders movies based on query
brownav committed Jun 19, 2018
commit 6226f2c9e604d79e5ace7c3d84606dd0a4c4250c
68 changes: 62 additions & 6 deletions src/components/SearchMovie.js
Original file line number Diff line number Diff line change
@@ -1,19 +1,75 @@
import React, { Component } from 'react';
import axios from 'axios';
import Movie from './Movie.js';

const URL = "http://localhost:3001/movies"

class SearchMovie extends Component {
class SearchMovies extends Component {
constructor () {
super ();

this.state = {
title: "",
movies: [],
}
}

onFieldChange = (event) => {
const fieldName = event.target.name;
const fieldValue = event.target.value;
const updateState = {};

updateState[fieldName] = fieldValue;
this.setState(updateState);
}

onSubmit = (event) => {
event.preventDefault();
console.log(URL + `?query=${this.state.title}`);
axios.get(URL + `?query=${this.state.title}`)
.then((response) => {
this.setState({
movies: response.data
})
})
.catch((error) => {
console.log(error);
})
}

renderMovieList = () => {
const movieList = this.state.movies.map((movie) => {
return (
<Movie
key={movie.external_id}
title={movie.title}
releaseDate={movie.release_date}
imageURL={movie.image_url}
overview={movie.overview}
/>
);
});
return movieList;
}

render() {
return (
<form>
<label/>
<input/>
</form>
<article>
<form onSubmit={this.onSubmit}>
<label htmlFor="title" >Search: </label>
<input
name="title"
placeholder="movie title"
value={this.state.title}
onChange={this.onFieldChange}
/>
<input type="submit" />
</form>
{this.renderMovieList()}
</article>
)
}

}

export default SearchMovie;
export default SearchMovies;