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

CP React Cinema Project #10

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Prev Previous commit
Next Next commit
error message
  • Loading branch information
chrisphillers committed Sep 30, 2018
commit 8edd7e4675c80d5087df39fbebb4bf7f2f41fb8a
30 changes: 23 additions & 7 deletions src/components/App.js
Original file line number Diff line number Diff line change
@@ -6,9 +6,9 @@ class App extends React.Component {
constructor() {
super();

this.state = { films: [], pageNum: 1, currentSearchFlim: "love" };
this.state = { films: [], pageNum: 1, currentSearchFlim: "love", unFound: {gif: '', p: ''}};
this.handleNext = this.handleNext.bind(this);

this.handlePrevious = this.handlePrevious.bind(this);
this.fetchIMDB = this.fetchIMDB.bind(this);
// this.filmSearch = this.filmSearch.bind(this);
// this.IMDBData= this.IMDBData.bind(this);
@@ -19,25 +19,34 @@ class App extends React.Component {

componentDidMount() {
this.receiveSearch(this.state.currentSearchFlim);

}

notFound() {
console.log("notFound");
notFound(){
this.setState({unFound:{gif:'/oops.gif', p:"No results found"}});
}

handleNext() {
console.log(this.state.pageNum);
// this.setState(prevState =>Object.assign({}, prevState, { pageNum: prevState.pageNum + 1 }))
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

commented out code should be removed to avoid clutter

// this.setState(prevState => ({...prevState, pageNum: prevState.pageNum + 1}));

this.setState( prevState => ({pageNum: prevState.pageNum + 1}))
this.receiveSearch(this.state.currentSearchFlim)
}

handlePrevious() {
// event.preventDefault();
this.setState({pageNum: this.state.pageNum - 1})
this.receiveSearch(this.state.currentSearchFlim)
}

receiveSearch(filmSearchQuery) {
this.setState( prevState => ({currentSearchFlim: filmSearchQuery}))
// this.setState(prevState => Object.assign({}, prevState, { currentSearchFlim: filmSearchQuery}))
const searchURL = `https://www.omdbapi.com/?s=${filmSearchQuery}&page=${this.state.pageNum}&apikey=73071eff`;
this.fetchIMDB(searchURL);

}

// Initial Search Fetch
@@ -49,22 +58,29 @@ class App extends React.Component {
.then(films => {
if (films.Response === "False") {
this.notFound();
console.log("WHOOPS!");
this.setState({ error: films.Search });
alert("WHOOPS!");
this.setState({ films:[]});
} else {
console.log(films);
this.setState({ films: films.Search });
}
})
.catch(error => console.log("catch error", error));
// .catch(error => console.log("catch error", error));
}

render() {
return (
<div>
<h1>Quelle Film</h1>
<Search receiveSearch={this.receiveSearch} />
<div className="oops">
{this.state.unFound.p}
<img className="cry" src={this.state.unFound.gif}/>
</div>
<Films films={this.state.films} />
<div></div>
<button onClick={this.handleNext}>Next</button>
<button onClick={this.handlePrevious}>Back</button>
</div>
);
}
51 changes: 27 additions & 24 deletions src/components/Film.js
Original file line number Diff line number Diff line change
@@ -33,32 +33,32 @@ class Film extends React.Component{
trailerYoutubeInfo: `http://www.youtube.com/embed/${trailerYoutubeInfo.results[0].key}?modestbranding=1&showinfo=0&rel=0`,
test: test,
showSlider: true
}))
.catch(error => console.log("catch error", error));
})

);

}

// // <p>URL:https://www.youtube.com/watch?v=${this.state.trailerYoutubeInfo}</p>

// Multiple fetches ->

fetchMoreInfo(){ //default for now
const movieURL = `https://www.omdbapi.com/?i=${this.props.film.imdbID}&apikey=73071eff`;
fetch(movieURL)
.then(function(response) {
// fetchMoreInfo(){ //default for now
// const movieURL = `https://www.omdbapi.com/?i=${this.props.film.imdbID}&apikey=73071eff`;
// fetch(movieURL)
// .then(function(response) {

return response.json();
})
.then(moreFilmInfo=> {
this.setState({moreFilmInfo: moreFilmInfo, showSlider: true})
// console.log(find);
}
)
.catch(error=> {
displayErrorToUser3(`${error} ahhhh server problem`);
}
);
}
// return response.json();
// })
// .then(moreFilmInfo=> {
// this.setState({moreFilmInfo: moreFilmInfo, showSlider: true})
// // console.log(find);
// }
// );
// // .catch(function(error) {
// // displayErrorToUser3(`${error} ahhhh server problem`);
// // });
// }

// trailerVideo(){ //default for now
// const ytURL = `https://api.themoviedb.org/3/movie/${this.props.film.imdbID}/videos?api_key=8aed3c92a5c6ef5e792ffaf51ac22616&language=en-US`;
@@ -97,15 +97,18 @@ class Film extends React.Component{

//Slider Toggle
const sliderView = cx('hidden', {'moreInfo': this.state.showSlider})
const sliderClose = cx('moreinfo', {'hidden': this.state.showSlider})
// const sliderClose = cx('moreinfo', {'hidden': this.state.showSlider})

return (

<div className="film" >
<h2>{this.props.film.Title}</h2>

<img onClick={this.fetchMoreInfo} id={this.props.film.imdbID} onError={this.state.placeholder} src={this.props.film.Poster} alt=""/>

<div className="film_results">
<div className="film__titles">
<h2>{this.props.film.Title}</h2>
<h3>{this.props.film.Year}</h3>
</div>
<img onClick={this.fetchMoreInfo} id={this.props.film.imdbID} onError={this.state.placeholder} src={this.props.film.Poster} alt=""/>
</div>

{/* <h2>Broken image:</h2>
<img src={brokenUrl} fallbackSrc={fallbackUrl}/>
@@ -118,7 +121,7 @@ class Film extends React.Component{

<div className={sliderView}>
<div>
<h4 className={sliderClose}>X</h4>
{/* <h4 className={sliderClose}>X</h4> */}
<p>{this.state.moreFilmInfo.Plot}</p>
{/* <p>{this.state.test.Plot}</p> */}
{/* <iframe src="http://www.youtube.com/embed/gQ0uSh2Hgcs?modestbranding=1&showinfo=0&rel=0" width="560" height="315" frameborder="0"></iframe> */}
6 changes: 3 additions & 3 deletions src/components/Search.js
Original file line number Diff line number Diff line change
@@ -19,10 +19,10 @@ class Search extends React.Component {

render(){
return (
<div >
<form onSubmit={this.handleSubmit} className="search" id="search">
<div className="search">
<form onSubmit={this.handleSubmit} className="search__wrapper" id="search">
<input onChange={this.handleChange} className="search__input" name="search" placeholder="Beam me up Scotty" />
<button className="btn search__btn">Go</button>
<button className="search__btn">Go</button>
</form>
</div>
)
114 changes: 112 additions & 2 deletions style.css
Original file line number Diff line number Diff line change
@@ -2,23 +2,133 @@
box-sizing: border-box;
margin:0;
padding:0;
/* background-color: black;
color: white; */
background-color: white;
color: black;
}


body{
display:flex;
justify-content: center;
font-family: 'Archivo Black', sans-serif;
/* background-color: beige; */
}

h1 {
display:flex;
justify-content: center;
justify-content: space-around;
margin-bottom: 10px;
margin-top:10px;

}

h1 a:hover {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23ff9800' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
background-position: 0 100%;
background-size: auto 6px;
background-repeat: repeat-x;
text-decoration: none;
}

h2{
font-size: 0.8em;
/* margin-bottom: 1em; */
/* margin-left: 10px;
margin-bottom: 16px; */
}

h3{
font-size: 0.8em;
}

.search__wrapper {
display:flex;
justify-content: center;

}

.search__input{
padding:8px 15px;
background:rgba(50, 50, 50, 0.2);
border:0px solid #dbdbdb;
border-radius: 10px 0px 0px 10px;
-moz-border-radius: 10px 0px 0px 10px;
-webkit-border-radius: 10px 0px 0px 10px;
}

.search__btn {
position:relative;
padding:8px 11px;
left:0px;
border:2px solid #207cca;
background-color:#207cca;
color:#fafafa;
border-radius: 0px 10px 10px 0px;
-moz-border-radius: 0px 10px 10px 0px;
-webkit-border-radius: 0px 10px 10px 0px;
}

.search__btn:hover {
background-color:#fafafa;
color:#5c89b1;
}

.film_results{
width: 200px;
margin: 40px;
}

.film__titles{
margin-bottom:20px;
height: 60px;
}

.films {
display:flex;
flex-wrap: wrap;
justify-content: center;

}

.film {
width: 200px;

}

.film img {
width: 200px;
}
/* width: 100%; */
border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;

/* border: 0px solid #000000;
-webkit-box-shadow: 10px 10px 46px -1px rgb(255, 255, 255);
-moz-box-shadow: 10px 10px 46px -1px rgb(255, 255, 255);
box-shadow: 10px 10px 46px -1px rgb(255, 255, 255); */


border: 0px solid #000000;
-webkit-box-shadow: 10px 10px 46px -1px rgba(0,0,0,0.5);
-moz-box-shadow: 10px 10px 46px -1px rgba(0,0,0,0.5);
box-shadow: 10px 10px 46px -1px rgba(0,0,0,0.5);
}

.film img:hover{
background-color:#000;
opacity:0.7;

}

.cry {
width: 800px;
}
.oops {
width: 800px;
}


.hidden{
position: fixed;