constructorlabs · Cantem · Jun 23, 2018 · Jun 24, 2018 · Jun 24, 2018 · Jun 24, 2018
diff --git a/Procfile b/Procfile
@@ -0,0 +1 @@
+web: node server.js
diff --git a/index.html b/index.html
@@ -1,12 +1,21 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="stylesheet" src="./style.css">
-    <title>Hello World</title>
-  </head>
-  <body>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="stylesheet" href="./src/style.css">
+  <title>Movie Search Engine</title>
+</head>
+
+<body>
+  <div>
+    <header class="header">
+      <h1 class="title">
+        <i>search movie engine</i>
+      </h1>
+    </header>
     <div id="root"></div>
     <script src="dist/bundle.js"></script>
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -3,6 +3,9 @@
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
+  "engines": {
+    "node": "8.11.2"
+  },
   "scripts": {
     "test": "jest",
     "dev": "webpack --mode development",

diff --git a/server.js b/server.js
@@ -0,0 +1,20 @@
+const express = require("express");
+const bodyParser = require("body-parser");
+const app = express();
+
+app.use(bodyParser.json());
+app.use("/static", express.static("static"));
+app.set("view engine", "hbs");
+
+app.get("/", function(req, res) {
+  res.render("index");
+});
+
+// app.listen(8080, function() {
+//   console.log("Listening on port 8080");
+// });
+
+const port = process.env.PORT || 8080;
+app.listen(port, function() {
+  console.log(`Listening on port number ${port}`);
+});
diff --git a/src/App.js b/src/App.js
@@ -1,16 +1,29 @@
-import React from 'react';
+import React from "react";
+import Search from "./Search";
+import MovieList from "./MovieList";
 
 class App extends React.Component {
-  constructor(){
+  constructor(props) {
     super();
+
+    this.state = {
+      movies: []
+    };
+
+    this.moviesReceiver = this.moviesReceiver.bind(this);
+  }
+
+  moviesReceiver(moviesArr) {
+    this.setState({ movies: moviesArr });
   }
 
-  render(){
+  render() {
     return (
       <div>
-        React cinema app
+        <Search moviesReceiver={this.moviesReceiver} />
+        <MovieList moviesResults={this.state.movies} />
       </div>
-    )
+    );
   }
 }
 

diff --git a/src/Movie.js b/src/Movie.js
@@ -0,0 +1,89 @@
+import React from "react";
+
+function MovieDetails(props) {
+  return (
+    <div className="movie__details">
+      <h1>Movie details</h1>
+      <p>
+        <b>Director: </b>
+        {props.Director}
+      </p>
+      <p>
+        <b>Actors: </b>
+        {props.Actors}
+      </p>
+      <p>
+        <b>Awards: </b>
+        {props.Awards}
+      </p>
+      <p>
+        <b>Runtime: </b>
+        {props.Runtime}
+      </p>
+      <p>
+        <b>Plot: </b>
+        {props.Plot}
+      </p>
+    </div>
+  );
+}
+
+class Movie extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      showDetails: false,
+      moreDetails: {},
+      buttonName: "more details"
+    };
+  }
+
+  handleClick(movieIdToSearchFor) {
+    if (this.state.showDetails) {
+      this.setState({ showDetails: false, buttonName: "more details" });
+    } else {
+      fetch(`https://www.omdbapi.com/?i=${movieIdToSearchFor}&apikey=40ce55c`)
+        .then(response => response.json())
+        .then(data =>
+          this.setState({
+            moreDetails: data,
+            showDetails: true,
+            buttonName: "hide details"
+          })
+        );
+    }
+  }
+  render() {
+    return (
+      <div className="movie">
+        <div className="movie__top">
+          <h2>{this.props.title}</h2>
+          <p>
+            <b>Release Year: </b> {this.props.year}
+          </p>
+        </div>
+        <div className="movie__middle">
+          <img className="movie__img" src={this.props.poster} />
+        </div>
+
+        <div className="movie__bottom">
+          <button
+            type="button"
+            className="btn-more"
+            // onClick={this.handleClick}
+            // onClick={(event) => this.handleClick(event)}
+            onClick={() => this.handleClick(this.props.imdbID)}
+          >
+            {this.state.buttonName}
+          </button>
+        </div>
+        {this.state.showDetails ? (
+          <MovieDetails {...this.state.moreDetails} />
+        ) : null}
+      </div>
+    );
+  }
+}
+
+export default Movie;
diff --git a/src/MovieList.js b/src/MovieList.js
@@ -0,0 +1,22 @@
+import React from "react";
+import Movie from "./Movie";
+
+function MovieList(props) {
+  return (
+    <div className="movie__list">
+      {props.moviesResults.map(movie => {
+        return (
+          <Movie
+            poster={movie.Poster}
+            title={movie.Title}
+            year={movie.Year}
+            imdbID={movie.imdbID}
+            key={movie.imdbID}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+export default MovieList;
diff --git a/src/Search.js b/src/Search.js
@@ -0,0 +1,51 @@
+import React from "react";
+
+class Search extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      type: ""
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+  handleChange(event) {
+    this.setState({ type: event.target.value });
+  }
+
+  handleSubmit(event) {
+    event.preventDefault();
+    if (this.state.type.length > 0) {
+      fetch(`http://www.omdbapi.com/?s=${this.state.type}&apikey=40ce55c`)
+        .then(function(response) {
+          return response.json();
+        })
+        .then(data => {
+          this.props.moviesReceiver(data.Search);
+        });
+    }
+  }
+
+  render() {
+    return (
+      <div className="container">
+        <form className="search" onSubmit={this.handleSubmit}>
+          <label className="search__label" />
+          <input
+            className="search__input"
+            name="movie"
+            onChange={this.handleChange}
+            value={this.state.type}
+            placeholder="Enter a movie name"
+            autoComplete="movie"
+          />
+          <button className="search__btn"> Go </button>
+        </form>
+      </div>
+    );
+  }
+}
+
+export default Search;
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,90 @@
+html,
+body {
+  height: 100%;
+  background-color: silver;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+.header {
+  padding: 5px 10px;
+  background-color: navy;
+  border: solid 6px black;
+}
+
+.title {
+  display: flex;
+  justify-content: center;
+  color: white;
+  text-transform: capitalize;
+  font-family: Impact;
+}
+
+.container {
+  padding: 5px 10px;
+  background: silver;
+}
+
+.search {
+  display: flex;
+
+  justify-content: center;
+  padding: 2px 2px 2px 10px;
+  background: navy;
+  margin: auto;
+  font-size: 14px;
+
+}
+
+.search__label {
+  align-self: center;
+}
+
+.search__input {
+  justify-content: center;
+
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.search__btn {
+  text-transform: uppercase;
+  background: lightblue;
+}
+
+.search,
+.search__input,
+.btn {
+  transition: 0.5s background-color, 0.5s color;
+
+  padding: 5px 10px;
+  border: none;
+  font: inherit;
+  border: solid 6px black;
+}
+
+.movie__list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+.movie {
+  background-color: navy;
+  color:white;
+  width: 360px;
+  padding: 10px;
+  text-align: center;
+  border: solid 6px black;
+  margin-top: 10px;
+  margin-bottom: 10px'
+}
+
+.movie__details {
+  position: relative;
+  background-color: white;
+  color:black;
+  border: solid 6px black;
+}