constructorlabs · HTLuff · Jun 26, 2018 · dmitrigrabov · Jul 1, 2018 · dmitrigrabov
diff --git a/assets/style.css 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
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="UTF-8" />
-    <link rel="stylesheet" src="./style.css">
+    <link rel="stylesheet" href="assets/style.css">
     <title>Hello World</title>
   </head>
   <body>

diff --git 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 (
-      <div>
-        React cinema app
+      <div className='app'>
+        <Header />
+        <Search
+          receiveQuery={this.receiveQuery}
+          search={this.search}
+          query={this.state.query}
+        />
+        <Display movies={this.state.movie} nextPage={this.nextPage} />
+        <Footer />
       </div>
-    )
+    );
   }
 }
 
-export default App;
+export default App;
diff --git a/src/components/Display.js 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 (
+      <div className="main">
+        <div className="movies">
+          <button onClick={this.moreMovies} className='more-movies__button'>More movies</button>
+          {this.props.movies.map(item => {
+            return (
+              <Movies
+                key={item.imdbID}
+                movie={item}
+                receiveMovieDetails={this.receiveMovieDetails}
+              />
+            );
+          })}
+        </div>
+        <div className="info">
+          {this.state.movieDetails ? (
+            <Info movieDetails={this.state.movieDetails} />
+          ) : null}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Display;
diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+function Footer() {
+  return (
+    <div className='footer'>
+      <p className='footer__credits'>Powered by OMDBApi</p>
+    </div>
+  );
+}
+
+export default Footer;
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -0,0 +1,12 @@
+import React from "react";
+
+function Header() {
+  return (
+    <div className='header'>
+      <h1 className='header__title'>Cinema Club</h1>
+      <p className='header__subtitle'>Search your favourite movies!</p>
+    </div>
+  );
+}
+
+export default Header;
diff --git a/src/components/Info.js b/src/components/Info.js
@@ -0,0 +1,12 @@
+import React from "react";
+
+function Info({ movieDetails }) {
+  return (
+    <div className='info-section'>
+      <h1 className='info-section__title'>{movieDetails.Title}</h1>
+      <p className='info-section__plot'>{movieDetails.Plot}</p>
+    </div>
+  );
+}
+
+export default Info;
diff --git a/src/components/Movies.js 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 (
+    <div className='posters'>
+      <h2 className='posters__title'>{movie.Title}</h2>
+      <img className='posters__image' src={movie.Poster} />
+      <p />
+      <button onClick={getMovieDetails} className='posters__infobtn'>Get details</button>
+    </div>
+  );
+}
+
+export default Movies;
diff --git a/src/components/Search.js 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 (
+      <div className='search'>
+        <form onSubmit={this.handleSubmit} className='search__form'>
+          <label>
+            <input
+              value={this.props.query}
+              onChange={this.handleChange}
+            />
+          </label>
+          <button className='search__button'>Search Film</button>
+        </form>
+      </div>
+    );
+  }
+}
+
+export default Search;