Permalink
Browse files

first commit

  • Loading branch information...
brianogilvie committed Jan 9, 2019
1 parent c5831fa commit 9682b41d7ad060166a63880f85dc6e38c42f96c6
@@ -21,3 +21,6 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# api keys
/src/util/config.js
@@ -22,7 +22,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>Movie List</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

This file was deleted.

Oops, something went wrong.

This file was deleted.

Oops, something went wrong.

This file was deleted.

Oops, something went wrong.
@@ -0,0 +1,32 @@
import React, { Component } from "react";
import "./style.css";
import MovieList from '../MovieList'
import MovieDetail from '../MovieDetail'
import OMDB from '../../util/OMDB'

class App extends Component {
constructor() {
super()
this.state = {
activeMovie: {},
}
}

getMovieDetail = imdbId => {
OMDB.search(imdbId)
.then(activeMovie => {
this.setState({activeMovie})
})
}

render() {
return (
<div className="homePage">
<MovieList requestDetail={this.getMovieDetail} />
<MovieDetail movie={this.state.activeMovie} />
</div>
);
}
}

export default App;
@@ -0,0 +1,16 @@
* {
box-sizing: border-box;
}
body, html {
padding: 0;
margin: 0;
}

.homePage {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
display: flex;
flex-flow: row nowrap;
}
@@ -0,0 +1,10 @@
import React from 'react'
import './style.css'

function Description(props) {
return (
<p><strong>Description:</strong> {props.text}</p>
)
}

export default Description
@@ -0,0 +1,22 @@
import React from 'react'
import './style.css'
import Title from '../Title'
import Description from '../Description'
import Poster from '../Poster'

function Movie(props) {
function handleClick() {
props.onClick(props.movie.imdbId)
}

const {title, overview, poster_path} = props.movie
return (
<div className="movie" onClick={handleClick}>
<Poster title={title} posterPath={poster_path} />
<Title text={title} />
<Description text={overview} />
</div>
)
}

export default Movie
@@ -0,0 +1,19 @@
.movie {
background-color: rgba(0,0,0,.1);
margin: 10px;
padding: 10px 15px;
border-radius: 8px;
}

.movie::after {
content: '';
display: table;
clear: both;
}

.movie img {
width: 100px;
height: 150px;
margin: 10px 0 10px 10px;
float: right;
}
@@ -0,0 +1,21 @@
import React from 'react'
import './style.css'

function MovieDetail(props) {
if (props.movie) {
const {Title, Actors, Poster, imdbRating, Plot} = props.movie
return (
<div className="movie-detail">
<img alt={Title} src={Poster} className="large-poster" />
<h2 className="movie-title">{Title}</h2>
<p>Actors: {Actors}</p>
<p>Rating: {imdbRating}</p>
<p>Plot: {Plot}</p>
</div>
)
} else {
return null
}
}

export default MovieDetail
@@ -0,0 +1,11 @@
.movie-detail {
width: 70%;
padding: 15px 25px;
height: 100%;
overflow: scroll;
}

.large-poster {
float: left;
margin: 15px;
}
@@ -0,0 +1,45 @@
import React from 'react'
import './style.css'
import Movie from '../Movie'
import TMDB from '../../util/TMDB'

class MovieList extends React.Component {
constructor() {
super()
this.state = {
movies: [],
}
}

searchMovies = () => {
TMDB.fullSearchFlow()
.then(results => {
this.setState({
movies: results,
})
})
.then(() => {
this.moreDetail(this.state.movies[0].imdbId)
})
}

moreDetail = imdbId => {
this.props.requestDetail(imdbId)
}

componentDidMount() {
this.searchMovies()
}

render() {
const movieComponents = this.state.movies.map((movie,i) => {
return <Movie key={i} movie={movie} onClick={this.moreDetail} />
})

return (
<div className="movie-list">{movieComponents}</div>
)
}
}

export default MovieList
@@ -0,0 +1,5 @@
.movie-list {
width: 30%;
height: 100%;
overflow: scroll;
}
@@ -0,0 +1,11 @@
import React from 'react'
import './style.css'

function Poster(props) {
const posterUrl = `https://image.tmdb.org/t/p/w780/${props.posterPath}`
return (
<img className="poster-image" alt={props.title} src={posterUrl} />
)
}

export default Poster
No changes.
@@ -0,0 +1,10 @@
import React from 'react'
import './style.css'

function Rating(props) {
return (
<div><strong>Rating:</strong> <span className={props.text}>{props.text}</span></div>
)
}

export default Rating
@@ -0,0 +1,11 @@
.PG {
color: green;
}

.PG-13 {
color: orange;
}

.R {
color: red;
}
@@ -0,0 +1,10 @@
import React from 'react'
import './style.css'

function Title(props) {
return (
<h1 className="movie-title">{props.text}</h1>
)
}

export default Title
@@ -0,0 +1,13 @@
@font-face {
font-family: 'Staatliches';
font-style: normal;
font-weight: 400;
src: local('Staatliches Regular'), local('Staatliches-Regular'), url(https://fonts.gstatic.com/s/staatliches/v1/HI_OiY8KO6hCsQSoAPmtMYebvpCfOMPT.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.movie-title {
margin-top: 5px;
font-family: 'Staatliches', sans-serif;
font-size: 2rem;
}

This file was deleted.

Oops, something went wrong.
15 src/index.js 100755 → 100644
@@ -1,12 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();
ReactDOM.render(<App />, document.getElementById("root"));

This file was deleted.

Oops, something went wrong.
Oops, something went wrong.

0 comments on commit 9682b41

Please sign in to comment.