From 030172754f73e14fad8ecc056d1e34d1f740afa3 Mon Sep 17 00:00:00 2001 From: Rafal Date: Sat, 23 Jun 2018 08:23:36 +0100 Subject: [PATCH 1/9] Basic layout with fetch complete --- index.html | 11 ++++++++-- src/App.js | 25 ++++++++++++++++++++--- src/Movie.js | 15 ++++++++++++++ src/MovieList.js | 22 ++++++++++++++++++++ src/Search.js | 53 ++++++++++++++++++++++++++++++++++++++++++++++++ src/style.css | 26 ++++++++++++++++++++++++ 6 files changed, 147 insertions(+), 5 deletions(-) create mode 100644 src/Movie.js create mode 100644 src/MovieList.js create mode 100644 src/Search.js create mode 100644 src/style.css diff --git a/index.html b/index.html index 44fcd2a..452c8f6 100644 --- a/index.html +++ b/index.html @@ -2,11 +2,18 @@ - - Hello World + + Movie Search Engine +
+
+

search movie engine

+
+
+
+ diff --git a/src/App.js b/src/App.js index 9520f77..f9f49d7 100644 --- a/src/App.js +++ b/src/App.js @@ -1,14 +1,33 @@ 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.receiver=this.receiver.bind(this); + + }; + + +receiver (moviesArr){ + this.setState({movies:moviesArr}) + +} render(){ return (
- React cinema app + + +
) } diff --git a/src/Movie.js b/src/Movie.js new file mode 100644 index 0000000..6810119 --- /dev/null +++ b/src/Movie.js @@ -0,0 +1,15 @@ +import React from 'react'; + +function Movie(props){ + return( +
+

{props.title}

+

Release Year: {props.year}

+ + +
+ ); + +}; + +export default Movie; \ No newline at end of file diff --git a/src/MovieList.js b/src/MovieList.js new file mode 100644 index 0000000..ef46a9f --- /dev/null +++ b/src/MovieList.js @@ -0,0 +1,22 @@ +import React from 'react'; +import Movie from './Movie'; + +function MovieList(props){ + return( +
+ MovieList: + {props.moviesResults.map(movie=>{ + return + })} + +
+ ); + +}; + +export default MovieList; \ No newline at end of file diff --git a/src/Search.js b/src/Search.js new file mode 100644 index 0000000..6ee7ddc --- /dev/null +++ b/src/Search.js @@ -0,0 +1,53 @@ +import React from "react"; + +class Search extends React.Component { + constructor() { + super(); + + this.state = { + type: "", + + movies: [] + }; + + this.handleChange = this.handleChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + } + handleChange(event) { + + this.setState({ type: event.target.value }); + } + + handleSubmit(event) { + event.preventDefault(); + + 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 ( +
+
+ + + +
+
+ ); + } +} + +export default Search; diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..31529f1 --- /dev/null +++ b/src/style.css @@ -0,0 +1,26 @@ + +body { + text-align: center; + font-family: Impact; + /* background-image:url(https://i.imgur.com/GLIs5QU.jpg); */ + +}; + +.header { + color: white; + text-transform: capitalize; + } + + .container{ + display: flex; + justify-content: center; + flex-direction: column; + color: white; + }; + + .content { + display: flex; + justify-content: center; + flex-direction: column; + } + \ No newline at end of file From 4def5b3c8cee4dcce51748f41fe6491822263121 Mon Sep 17 00:00:00 2001 From: Rafal Date: Sun, 24 Jun 2018 11:51:59 +0100 Subject: [PATCH 2/9] More details now fetching --- index.html | 10 +++--- src/App.js | 32 +++++++---------- src/Movie.js | 61 +++++++++++++++++++++++++------- src/MovieList.js | 32 ++++++++--------- src/Search.js | 7 ++-- src/style.css | 92 +++++++++++++++++++++++++++++++++++------------- 6 files changed, 153 insertions(+), 81 deletions(-) diff --git a/index.html b/index.html index 452c8f6..01b7c2d 100644 --- a/index.html +++ b/index.html @@ -7,11 +7,11 @@
-
-

search movie engine

-
-
- +
+

+ search movie engine +

+
diff --git a/src/App.js b/src/App.js index f9f49d7..1b2512e 100644 --- a/src/App.js +++ b/src/App.js @@ -1,35 +1,29 @@ -import React from 'react'; -import Search from './Search'; -import MovieList from './MovieList'; - - +import React from "react"; +import Search from "./Search"; +import MovieList from "./MovieList"; class App extends React.Component { - constructor(props){ + constructor(props) { super(); this.state = { - movies: [], - } - - this.receiver=this.receiver.bind(this); - - }; + movies: [] + }; + this.receiver = this.receiver.bind(this); + } -receiver (moviesArr){ - this.setState({movies:moviesArr}) - -} + receiver(moviesArr) { + this.setState({ movies: moviesArr }); + } - render(){ + render() { return (
-
- ) + ); } } diff --git a/src/Movie.js b/src/Movie.js index 6810119..99d3d6e 100644 --- a/src/Movie.js +++ b/src/Movie.js @@ -1,15 +1,50 @@ -import React from 'react'; - -function Movie(props){ - return( -
-

{props.title}

-

Release Year: {props.year}

- - -
- ); +import React from "react"; + +function MovieDetails(props) { + return ( +
+

movie details{props.data.Actors}

+
+ ); +} + +class Movie extends React.Component { + constructor(props) { + super(props); -}; + this.state = { + showDetails: false, + moreDetails: {} + }; + } + + handleClick(movieIdToSearchFor) { + console.log("hey you clicked me"); + fetch(`https://www.omdbapi.com/?i=${movieIdToSearchFor}&apikey=40ce55c`) + .then(response => response.json()) + .then(data => this.setState({ moreDetails: data, showDetails: true })); + } + render() { + return ( +
+

{this.props.title}

+

Release Year: {this.props.year}

+ + + {this.state.showDetails ? ( + + ) : null} +
+ ); + } +} -export default Movie; \ No newline at end of file +export default Movie; diff --git a/src/MovieList.js b/src/MovieList.js index ef46a9f..50a6793 100644 --- a/src/MovieList.js +++ b/src/MovieList.js @@ -1,22 +1,22 @@ -import React from 'react'; -import Movie from './Movie'; +import React from "react"; +import Movie from "./Movie"; -function MovieList(props){ - return( -
- MovieList: - {props.moviesResults.map(movie=>{ - return + {props.moviesResults.map(movie => { + return ( + - })} - -
- ); + key={movie.imdbID} + /> + ); + })} + + ); +} -}; - -export default MovieList; \ No newline at end of file +export default MovieList; diff --git a/src/Search.js b/src/Search.js index 6ee7ddc..e541f66 100644 --- a/src/Search.js +++ b/src/Search.js @@ -14,13 +14,12 @@ class Search extends React.Component { this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { - this.setState({ type: event.target.value }); } handleSubmit(event) { event.preventDefault(); - + fetch(`http://www.omdbapi.com/?s=${this.state.type}&apikey=40ce55c`) .then(function(response) { return response.json(); @@ -34,7 +33,7 @@ class Search extends React.Component { return (
- +
); diff --git a/src/style.css b/src/style.css index 31529f1..dd17441 100644 --- a/src/style.css +++ b/src/style.css @@ -1,26 +1,70 @@ - +html, body { - text-align: center; + height: 100%; +} + +html { + box-sizing: border-box; +} + +.header{ + padding: 5px 10px; + background-color: navy; +} + +.title{ + display: flex; + justify-content: center; + color: white; + text-transform: capitalize; font-family: Impact; - /* background-image:url(https://i.imgur.com/GLIs5QU.jpg); */ - -}; - -.header { - color: white; - text-transform: capitalize; - } - - .container{ - display: flex; - justify-content: center; - flex-direction: column; - color: white; - }; - - .content { - display: flex; - justify-content: center; - flex-direction: column; - } - \ No newline at end of file +} + +.container { + padding: 5px 10px; + background: rgba(255, 255, 255, 0.25); +} + +.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; +} + +.content__movie{ +display: flex; +align-content: center; +flex-direction: column; + +} \ No newline at end of file From 81dc690758ec92eee644a26f01413577053fd850 Mon Sep 17 00:00:00 2001 From: Rafal Date: Sun, 24 Jun 2018 13:13:17 +0100 Subject: [PATCH 3/9] Added basic layout with more details --- index.html | 30 ++++++++++++++++-------------- src/Movie.js | 42 ++++++++++++++++++++++++++---------------- src/MovieList.js | 2 +- src/style.css | 34 +++++++++++++++++++++++++--------- 4 files changed, 68 insertions(+), 40 deletions(-) diff --git a/index.html b/index.html index 01b7c2d..dd5c78e 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,21 @@ - - - - Movie Search Engine - - -
-
-

- search movie engine -

-
+ + + + + Movie Search Engine + + + +
+
+

+ search movie engine +

+
- - + + \ No newline at end of file diff --git a/src/Movie.js b/src/Movie.js index 99d3d6e..9c96cd3 100644 --- a/src/Movie.js +++ b/src/Movie.js @@ -2,8 +2,11 @@ import React from "react"; function MovieDetails(props) { return ( -
-

movie details{props.data.Actors}

+
+

Movie details

+

Actors:{props.Actors}

+

Awards:{props.Awards}

+

Runtime:{props.Runtime}

); } @@ -26,21 +29,28 @@ class Movie extends React.Component { } render() { return ( -
-

{this.props.title}

-

Release Year: {this.props.year}

- - +
+
+

{this.props.title}

+

Release Year: {this.props.year}

+
+
+ +
+ +
+ +
{this.state.showDetails ? ( - + ) : null}
); diff --git a/src/MovieList.js b/src/MovieList.js index 50a6793..d044f86 100644 --- a/src/MovieList.js +++ b/src/MovieList.js @@ -3,7 +3,7 @@ import Movie from "./Movie"; function MovieList(props) { return ( -
+
{props.moviesResults.map(movie => { return ( Date: Sun, 24 Jun 2018 13:15:08 +0100 Subject: [PATCH 4/9] Fixed zero length input --- src/Search.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/Search.js b/src/Search.js index e541f66..3927f76 100644 --- a/src/Search.js +++ b/src/Search.js @@ -19,14 +19,15 @@ class Search extends React.Component { handleSubmit(event) { event.preventDefault(); - - fetch(`http://www.omdbapi.com/?s=${this.state.type}&apikey=40ce55c`) - .then(function(response) { - return response.json(); - }) - .then(data => { - this.props.moviesReceiver(data.Search); - }); + 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() { From fc4de22bba228c107dbd20dd2726852c22bfda9f Mon Sep 17 00:00:00 2001 From: Rafal Date: Sun, 24 Jun 2018 13:45:56 +0100 Subject: [PATCH 5/9] Finished more details --- src/Movie.js | 51 ++++++++++++++++++++++++++++++++++++++++----------- src/style.css | 5 +++-- 2 files changed, 43 insertions(+), 13 deletions(-) diff --git a/src/Movie.js b/src/Movie.js index 9c96cd3..92ed61b 100644 --- a/src/Movie.js +++ b/src/Movie.js @@ -4,9 +4,26 @@ function MovieDetails(props) { return (

Movie details

-

Actors:{props.Actors}

-

Awards:{props.Awards}

-

Runtime:{props.Runtime}

+

+ Director: + {props.Director} +

+

+ Actors: + {props.Actors} +

+

+ Awards: + {props.Awards} +

+

+ Runtime: + {props.Runtime} +

+

+ Plot: + {props.Plot} +

); } @@ -17,22 +34,34 @@ class Movie extends React.Component { this.state = { showDetails: false, - moreDetails: {} + moreDetails: {}, + buttonName: "more details" }; } handleClick(movieIdToSearchFor) { - console.log("hey you clicked me"); - fetch(`https://www.omdbapi.com/?i=${movieIdToSearchFor}&apikey=40ce55c`) - .then(response => response.json()) - .then(data => this.setState({ moreDetails: data, showDetails: true })); + 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 (
-

{this.props.title}

-

Release Year: {this.props.year}

+

{this.props.title}

+

+ Release Year: {this.props.year} +

@@ -46,7 +75,7 @@ class Movie extends React.Component { // onClick={(event) => this.handleClick(event)} onClick={() => this.handleClick(this.props.imdbID)} > - More details + {this.state.buttonName}
{this.state.showDetails ? ( diff --git a/src/style.css b/src/style.css index d50833f..8f6401f 100644 --- a/src/style.css +++ b/src/style.css @@ -1,6 +1,7 @@ html, body { height: 100%; + background-color: silver; } html { @@ -22,7 +23,7 @@ html { .container { padding: 5px 10px; - background: rgba(255, 255, 255, 0.25); + background: silver; } .search { @@ -83,4 +84,4 @@ html { background-color: white; color:black; border: solid 6px black; -} \ No newline at end of file +} From 57eb9d3b4e570a8ca7a3d51a6d5a3e25ceb53a71 Mon Sep 17 00:00:00 2001 From: Rafal Date: Sun, 24 Jun 2018 13:53:15 +0100 Subject: [PATCH 6/9] Renamed receiver and cleaned state --- src/App.js | 6 +++--- src/Search.js | 4 +--- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index 1b2512e..0198da8 100644 --- a/src/App.js +++ b/src/App.js @@ -10,17 +10,17 @@ class App extends React.Component { movies: [] }; - this.receiver = this.receiver.bind(this); + this.moviesReceiver = this.moviesReceiver.bind(this); } - receiver(moviesArr) { + moviesReceiver(moviesArr) { this.setState({ movies: moviesArr }); } render() { return (
- +
); diff --git a/src/Search.js b/src/Search.js index 3927f76..bafc649 100644 --- a/src/Search.js +++ b/src/Search.js @@ -5,9 +5,7 @@ class Search extends React.Component { super(); this.state = { - type: "", - - movies: [] + type: "" }; this.handleChange = this.handleChange.bind(this); From 14ef3e40d652fa224a43d87d96e862ec3dfefeaa Mon Sep 17 00:00:00 2001 From: Rafal Date: Mon, 25 Jun 2018 10:30:22 +0100 Subject: [PATCH 7/9] Added border to header and search area --- src/style.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/style.css b/src/style.css index 8f6401f..02d32c8 100644 --- a/src/style.css +++ b/src/style.css @@ -11,6 +11,7 @@ html { .header { padding: 5px 10px; background-color: navy; + border: solid 6px black; } .title { @@ -34,6 +35,7 @@ html { background: navy; margin: auto; font-size: 14px; + } .search__label { @@ -60,6 +62,7 @@ html { padding: 5px 10px; border: none; font: inherit; + border: solid 6px black; } .movie__list { From 5acbf21a699c7c8620740a960fb1fb74932cda2e Mon Sep 17 00:00:00 2001 From: Rafal Date: Fri, 14 Sep 2018 18:12:16 +0100 Subject: [PATCH 8/9] deployu --- Procfile | 1 + package-lock.json | 3 +++ server.js | 20 ++++++++++++++++++++ 3 files changed, 24 insertions(+) create mode 100644 Procfile create mode 100644 server.js diff --git a/Procfile b/Procfile new file mode 100644 index 0000000..6f86b16 --- /dev/null +++ b/Procfile @@ -0,0 +1 @@ +web: node server.js \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 24706e4..51839ed 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,9 @@ "@babel/highlight": "7.0.0-beta.40" } }, + "engines": { + "node": "8.11.2" + }, "@babel/highlight": { "version": "7.0.0-beta.40", "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0-beta.40.tgz", diff --git a/server.js b/server.js new file mode 100644 index 0000000..9b52e06 --- /dev/null +++ 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}`); +}); From 77b4dcffe71bdf0e890b8f8f65d557080fba2c9f Mon Sep 17 00:00:00 2001 From: Rafal Date: Sat, 15 Sep 2018 19:51:51 +0100 Subject: [PATCH 9/9] npm --- package-lock.json | 3 --- package.json | 3 +++ 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 51839ed..24706e4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,9 +13,6 @@ "@babel/highlight": "7.0.0-beta.40" } }, - "engines": { - "node": "8.11.2" - }, "@babel/highlight": { "version": "7.0.0-beta.40", "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0-beta.40.tgz", diff --git a/package.json b/package.json index 28efe05..6636354 100644 --- 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",