+
)
}
}
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/components/MovieDisplay.js b/src/components/MovieDisplay.js
new file mode 100644
index 0000000..c1667a3
--- /dev/null
+++ b/src/components/MovieDisplay.js
@@ -0,0 +1,78 @@
+import React from 'react';
+import cx from "classnames";
+// @ts-ignore
+import noImage from '../images/no-image.png';
+
+class MovieDisplay extends React.Component {
+ constructor (props) {
+ super(props)
+ this.toggleTextDisplay = this.toggleTextDisplay.bind(this)
+ this.state = { textDisplay: false }
+ }
+
+ toggleTextDisplay () {
+ this.setState ({ textDisplay: !this.state.textDisplay })
+ }
+
+ render () {
+ // ignore these properties when looping through all the keys so they don't display in the content
+ const ignore = ["Website", "Poster", "Title", "Plot", "Response", "Ratings"];
+ const movie = this.props.currentMovie;
+ const imdbURL = `https://www.imdb.com/title/${movie.imdbID}`;
+ const imgURL = (!movie.Poster || movie.Poster === "N/A") ? noImage : movie.Poster;
+ const noPlot = !movie.Plot || movie.Plot === "N/A";
+
+ // toggle the visibility of the search results display
+ const classes = cx({
+ "article__text-full": this.state.textDisplay,
+ "article__text-none": !this.state.textDisplay
+ })
+
+ return (
+
+
+
+ { /* render Pagination component for 10 or more total pages */ }
+ {(this.state.pages > 10 && qLength > 2) ?
+
+
+ {errorMsg}
:
+ (searchDisplayOn &&
+
+
+ { /* if a movie has NOT been selected render a loading message */ }
+ {(this.state.searchQuery === "") ?
+ }
+
+
+
Find movies quickly and easily
: ""
+ }
+
+ {/* if a movie has been selected render MovieDisplay component */}
+ {(this.state.searchQuery !== "") &&
+ {/* render HTML for displaying movie info */}
+
+
+ )
+ }
+}
+
+export default MovieDisplay
\ No newline at end of file
diff --git a/src/components/Pagination.js b/src/components/Pagination.js
new file mode 100644
index 0000000..689cb6f
--- /dev/null
+++ b/src/components/Pagination.js
@@ -0,0 +1,53 @@
+import React from 'react';
+
+class Pagination extends React.Component {
+ constructor (props) {
+ super(props)
+ this.handleClick = this.handleClick.bind(this)
+ this.getClass = this.getClass.bind(this)
+ this.state = { activePage: 1 }
+ }
+
+ handleClick(pageNumber, event) {
+ this.props.receivePageNumber(event.target.id)
+ this.setState({ activePage: pageNumber });
+ }
+
+ // toggle selected button for pages
+ getClass(pageNumber) {
+ return (pageNumber === this.state.activePage) ? "page__button-selected" : "page__button-none"
+ }
+
+ render () {
+
+ const totalPages = this.props.pages || 1;
+ const totalButtons = Math.ceil(totalPages / 10);
+ // create an array of numbers between 1 and totalButtons
+ const totalArray = (max=1, n=1) => new Array(max).fill(0).map(e => e = n++);
+ return (
+
+ { movie && 
}
+
+ }
+
+
+
+ {movie.Title}
+
+
+ { movie && }
+
+ }
+
+ { (noPlot) ||
+ Plot
} + { (noPlot) || movie.Plot} + { movie && } +
+
+ -
+ { // display details which ar not set to "N/A"
+ Object.keys(movie)
+ .filter(n => ignore.indexOf(n) < 0)
+ .reduce((acc, item) => {
+ if (movie[item] && movie[item] !== "N/A") {
+ acc.push(
- {item}: {movie[item]} ) + } + return acc; + }, []) + } + + { + (!movie.Website || movie.Website === "N/A") ||
- Visit website + } + { + movie &&
- View details on IMDB + } +
+ {
+ // display page n of max pages
+ // (totalButtons > 1) && (
+ )
+ }
+}
+
+export default Pagination
diff --git a/src/components/Search.js b/src/components/Search.js
new file mode 100644
index 0000000..fce560d
--- /dev/null
+++ b/src/components/Search.js
@@ -0,0 +1,47 @@
+import React from 'react';
+
+class Search extends React.Component {
+ constructor (props) {
+ super(props)
+ this.handleChange = this.handleChange.bind(this)
+ this.handleSubmit = this.handleSubmit.bind(this)
+ this.handleFocus = this.handleFocus.bind(this)
+ this.handleBlur = this.handleBlur.bind(this)
+ }
+
+ handleChange (event) {
+ this.props.receiveInput(event.target.value)
+ }
+
+ handleSubmit (event) {
+ event.preventDefault()
+ this.props.receiveSubmit()
+ }
+
+ handleFocus () {
+ this.props.receiveFocus()
+ }
+
+ handleBlur () {
+ this.props.receiveBlur()
+ }
+
+ render () {
+ return (
+
+ )
+ }
+}
+
+export default Search;
diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js
new file mode 100644
index 0000000..d050f50
--- /dev/null
+++ b/src/components/SearchResults.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import cx from "classnames";
+
+// show a list of 10 search results from user input
+
+class SearchResults extends React.Component {
+
+ constructor (props) {
+ super(props)
+ this.handleClick = this.handleClick.bind(this)
+ }
+
+ // send the selected ID to App
+ handleClick (event) {
+ this.props.receiveMovieID(event.target.id)
+ }
+
+ render () {
+ // toggle search results display with classNames
+ const classes = cx({
+ "search-results": this.props.searchDisplay,
+ "search-results-hidden": !this.props.searchDisplay
+ })
+
+ return (
+ Page currentPage of {totalButtons}
)
+ }
+
+ {
+
+ // generate page buttons
+ totalArray(totalButtons).map(item => {
+ return
+ this.handleClick(item, event)}>
+ {item}
+
+ })
+ }
+
+ {
+ // render 10 results as clickable buttons
+ this.props.resultsArray.map(movie => {
+ return
+ )
+ }
+}
+
+export default SearchResults
\ No newline at end of file
diff --git a/src/components/SetInnerHTML.js b/src/components/SetInnerHTML.js
new file mode 100644
index 0000000..4d54c72
--- /dev/null
+++ b/src/components/SetInnerHTML.js
@@ -0,0 +1,13 @@
+import React from 'react';
+
+class SetInnerHTML extends React.Component {
+
+ render () {
+ return (
+
+ {movie.Title}
+
+ })
+ }
+
+
+ )
+ }
+}
+
+export default SetInnerHTML;
diff --git a/src/images/no-image.png b/src/images/no-image.png
new file mode 100644
index 0000000..26d2cab
Binary files /dev/null and b/src/images/no-image.png differ
diff --git a/src/images/popcorn-bg-pink.png b/src/images/popcorn-bg-pink.png
new file mode 100644
index 0000000..2413711
Binary files /dev/null and b/src/images/popcorn-bg-pink.png differ
diff --git a/src/images/popcorn-bg-smaller-brighter-pink.afphoto b/src/images/popcorn-bg-smaller-brighter-pink.afphoto
new file mode 100644
index 0000000..37ed2e4
Binary files /dev/null and b/src/images/popcorn-bg-smaller-brighter-pink.afphoto differ
diff --git a/src/images/popcorn-bg-smaller-brighter.afphoto b/src/images/popcorn-bg-smaller-brighter.afphoto
new file mode 100644
index 0000000..fb42575
Binary files /dev/null and b/src/images/popcorn-bg-smaller-brighter.afphoto differ
diff --git a/src/images/popcorn-bg-smaller-brighter.png b/src/images/popcorn-bg-smaller-brighter.png
new file mode 100644
index 0000000..be7ecbb
Binary files /dev/null and b/src/images/popcorn-bg-smaller-brighter.png differ
diff --git a/src/images/popcorn-bg-smaller.afphoto b/src/images/popcorn-bg-smaller.afphoto
new file mode 100644
index 0000000..5c78193
Binary files /dev/null and b/src/images/popcorn-bg-smaller.afphoto differ
diff --git a/src/images/popcorn-bg-smaller.png b/src/images/popcorn-bg-smaller.png
new file mode 100644
index 0000000..15ddf15
Binary files /dev/null and b/src/images/popcorn-bg-smaller.png differ
diff --git a/src/images/popcorn-bg.afphoto b/src/images/popcorn-bg.afphoto
new file mode 100644
index 0000000..c98c65b
Binary files /dev/null and b/src/images/popcorn-bg.afphoto differ
diff --git a/src/images/popcorn-bg.png b/src/images/popcorn-bg.png
new file mode 100644
index 0000000..05a02d2
Binary files /dev/null and b/src/images/popcorn-bg.png differ
diff --git a/src/images/react-cinema-screenshot-ipad.afphoto b/src/images/react-cinema-screenshot-ipad.afphoto
new file mode 100644
index 0000000..525c7e0
Binary files /dev/null and b/src/images/react-cinema-screenshot-ipad.afphoto differ
diff --git a/src/images/react-cinema-screenshot-ipad.png b/src/images/react-cinema-screenshot-ipad.png
new file mode 100644
index 0000000..b566bf1
Binary files /dev/null and b/src/images/react-cinema-screenshot-ipad.png differ
diff --git a/src/images/react-cinema-screenshot-mobile.afphoto b/src/images/react-cinema-screenshot-mobile.afphoto
new file mode 100644
index 0000000..2ba33e9
Binary files /dev/null and b/src/images/react-cinema-screenshot-mobile.afphoto differ
diff --git a/src/images/react-cinema-screenshot-mobile.png b/src/images/react-cinema-screenshot-mobile.png
new file mode 100644
index 0000000..9d86872
Binary files /dev/null and b/src/images/react-cinema-screenshot-mobile.png differ
diff --git a/src/images/trailer.js b/src/images/trailer.js
new file mode 100644
index 0000000..2837152
--- /dev/null
+++ b/src/images/trailer.js
@@ -0,0 +1,28 @@
+let id = "tt0307987";
+let trailerURL = `https://api.themoviedb.org/3/movie/${movies.imdbID}/videos?api_key=8aed3c92a5c6ef5e792ffaf51ac22616&language=en-US`
+
+// https://api.themoviedb.org/3/movie/tt0307987/videos?api_key=8aed3c92a5c6ef5e792ffaf51ac22616&language=en-US
+
+fetchTrailer(trailerURL);
+
+function fetchTrailer(trailerURL){
+ fetch(trailerURL)
+ .then(function(response) {
+ return response.json();
+ })
+ .then(function(result){
+ if (result.Response === 'False') {
+ console.log(result)
+ } else {
+ trailerVideo(result);
+ }
+ });
+
+}
+
+function trailerVideo(result){
+ trailerClip = `https://www.youtube.com/watch?v=${result.results[0].key}`;
+ // https://www.youtube.com/watch?v=xQvaoRScND4
+};
+
+console.log(trailerClip);
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index e0728fe..bdcdb9e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,8 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
+import "./styles.css";
ReactDOM.render(