Skip to content

Complete basic goals: movie fetch and more details button working #6

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.

Sign up for GitHub

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

Open
Cantem wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Complete basic goals: movie fetch and more details button working #6

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
0301727
Basic layout with fetch complete
Cantem Jun 23, 2018
4def5b3
More details now fetching
Cantem Jun 24, 2018
81dc690
Added basic layout with more details
Cantem Jun 24, 2018
d83df53
Fixed zero length input
Cantem Jun 24, 2018
fc4de22
Finished more details
Cantem Jun 24, 2018
57eb9d3
Renamed receiver and cleaned state
Cantem Jun 24, 2018
14ef3e4
Added border to header and search area
Cantem Jun 25, 2018
5acbf21
deployu
Cantem Sep 14, 2018
77b4dcf
npm
Cantem Sep 15, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 17 additions & 8 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
23 changes: 18 additions & 5 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
)
);
}
}

Expand Down
89 changes: 89 additions & 0 deletions src/Movie.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import React from "react";

function MovieDetails(props) {
Copy link
Contributor

@dmitrigrabov dmitrigrabov Jul 1, 2018

Choose a reason for hiding this comment

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

Destructuring here will save you having to use props in component and will make it easier to see what props are in use

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 ? (
Copy link
Contributor

@dmitrigrabov dmitrigrabov Jul 1, 2018

Choose a reason for hiding this comment

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

nice

<MovieDetails {...this.state.moreDetails} />
) : null}
</div>
);
}
}

export default Movie;
22 changes: 22 additions & 0 deletions src/MovieList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
51 changes: 51 additions & 0 deletions src/Search.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
87 changes: 87 additions & 0 deletions src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
html,
body {
height: 100%;
background-color: silver;
}

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;
}

.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;
}

.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;
}