diff --git a/assets/style.css b/assets/style.css new file mode 100644 index 0000000..cc66e3f --- /dev/null +++ b/assets/style.css @@ -0,0 +1,42 @@ +*, *::before, *::after { + box-sizing: border-box; +} + +.app { + display: flex; + flex-direction: column; +} + +.header { + padding: 10px; + text-align: center; + background: #222; + color: #ccc; +} + +.header h1 { + font-family: 'Pacifico', sans-serif; + font-size: 20px; + text-shadow: 0 4px 2px rgba(0,0,0,.1); + margin: 0; +} + +.footer { + background: #222; + color: #ccc; + height: 50px; +} + +.main { + flex: 1; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.posters { + flex: 4; + display: flex; + flex-wrap: wrap; +} diff --git a/index.html b/index.html index 44fcd2a..7c59510 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + Hello World diff --git a/src/App.js b/src/App.js index 9520f77..f270c7b 100644 --- a/src/App.js +++ b/src/App.js @@ -1,17 +1,63 @@ -import React from 'react'; +import React from "react"; +import Search from "./components/Search"; +import Header from "./components/Header"; +import Display from "./components/Display"; +import Footer from "./components/Footer"; class App extends React.Component { - constructor(){ + constructor() { super(); + this.state = { movie: [], query: "", page: 1 }; + + this.receiveQuery = this.receiveQuery.bind(this); + this.search = this.search.bind(this); + this.nextPage = this.nextPage.bind(this); + } + + receiveQuery(query) { + this.setState({ + query + }); } - render(){ + search() { + const inputString = this.state.query; + console.log(inputString); + fetch( + `http://www.omdbapi.com/?s=${inputString}&page=${ + this.state.page + }&apikey=7a98d1bb` + ) + .then(function(response) { + return response.json(); + }) + .then(data => { + this.setState({ + movie: data.Search + }); + }); + } + + nextPage() { + this.setState({ + page: this.state.page + 1 + }, ()=>this.search()); + } + + render() { return ( -
- React cinema app +
+
+ + +
- ) + ); } } -export default App; +export default App; \ No newline at end of file diff --git a/src/components/Display.js b/src/components/Display.js new file mode 100644 index 0000000..ddd19e3 --- /dev/null +++ b/src/components/Display.js @@ -0,0 +1,50 @@ +import React from "react"; +import Movies from "./Movies"; +import Info from "./Info"; + +class Display extends React.Component { + constructor(props) { + super(props); + + this.state = { movieDetails: undefined }; + + this.receiveMovieDetails = this.receiveMovieDetails.bind(this); + this.moreMovies = this.moreMovies.bind(this); + } + + receiveMovieDetails(movieDetails) { + this.setState({ + movieDetails + }); + } + + moreMovies() { + this.props.nextPage(); + } + + render() { + return ( +
+
+ + {this.props.movies.map(item => { + return ( + + ); + })} +
+
+ {this.state.movieDetails ? ( + + ) : null} +
+
+ ); + } +} + +export default Display; \ No newline at end of file diff --git a/src/components/Footer.js b/src/components/Footer.js new file mode 100644 index 0000000..46f7fdc --- /dev/null +++ b/src/components/Footer.js @@ -0,0 +1,11 @@ +import React from "react"; + +function Footer() { + return ( +
+

Powered by OMDBApi

+
+ ); +} + +export default Footer; \ No newline at end of file diff --git a/src/components/Header.js b/src/components/Header.js new file mode 100644 index 0000000..2f188a7 --- /dev/null +++ b/src/components/Header.js @@ -0,0 +1,12 @@ +import React from "react"; + +function Header() { + return ( +
+

Cinema Club

+

Search your favourite movies!

+
+ ); +} + +export default Header; \ No newline at end of file diff --git a/src/components/Info.js b/src/components/Info.js new file mode 100644 index 0000000..30a8733 --- /dev/null +++ b/src/components/Info.js @@ -0,0 +1,12 @@ +import React from "react"; + +function Info({ movieDetails }) { + return ( +
+

{movieDetails.Title}

+

{movieDetails.Plot}

+
+ ); +} + +export default Info; \ No newline at end of file diff --git a/src/components/Movies.js b/src/components/Movies.js new file mode 100644 index 0000000..e4890b2 --- /dev/null +++ b/src/components/Movies.js @@ -0,0 +1,21 @@ +import React from "react"; + +function Movies({ movie, receiveMovieDetails }) { + function getMovieDetails() { + fetch(`http://www.omdbapi.com/?i=${photo.imdbID}&plot=full&apikey=7a98d1bb`) + .then(response => response.json()) + .then(data => { + receiveMovieDetails(data); + }); + } + return ( +
+

{movie.Title}

+ +

+ +

+ ); +} + +export default Movies; \ No newline at end of file diff --git a/src/components/Search.js b/src/components/Search.js new file mode 100644 index 0000000..327354d --- /dev/null +++ b/src/components/Search.js @@ -0,0 +1,39 @@ +import React from "react"; + +class Search extends React.Component { + constructor() { + super(); + + this.handleChange = this.handleChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + } + + handleChange(event) { + event.preventDefault(); + this.props.receiveQuery(event.target.value); + } + + handleSubmit(event) { + event.preventDefault(); + + this.props.search(); + } + + render() { + return ( +
+
+ + +
+
+ ); + } +} + +export default Search; \ No newline at end of file