diff --git a/assets/erik-witsoe-647316-unsplash.jpg b/assets/erik-witsoe-647316-unsplash.jpg new file mode 100644 index 0000000..8843ff0 Binary files /dev/null and b/assets/erik-witsoe-647316-unsplash.jpg differ diff --git a/assets/james-pond.jpg b/assets/james-pond.jpg new file mode 100644 index 0000000..f5c079f Binary files /dev/null and b/assets/james-pond.jpg differ diff --git a/assets/woops.jpg b/assets/woops.jpg new file mode 100644 index 0000000..b560775 Binary files /dev/null and b/assets/woops.jpg differ diff --git a/index.html b/index.html index 345f9d3..8d82843 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,18 @@ - - - - Hello World - - -
- - + + + + + + + + Hamzah Cracks React + + + +
+ + + diff --git a/src/App.js b/src/App.js deleted file mode 100644 index 9520f77..0000000 --- a/src/App.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -class App extends React.Component { - constructor(){ - super(); - } - - render(){ - return ( -
- React cinema app -
- ) - } -} - -export default App; diff --git a/src/Components/App.js b/src/Components/App.js new file mode 100644 index 0000000..894ac03 --- /dev/null +++ b/src/Components/App.js @@ -0,0 +1,102 @@ +import React from "react"; +import Search from "./Search"; +import Results from "./Results"; +import MoreInfo from "./MoreInfo"; + +const config = { + apiKey: "77c3b516", + url: "http://www.omdbapi.com/?i=" +}; + +class App extends React.Component { + constructor(props) { + super(); + + this.state = { + films: [], + showDetailedInfo: false, + imdbLink: "https://www.imdb.com/title/", + imdbID: "", + details: {}, + errorPic: "./assets/woops.jpg" + }; + + this.recieveFilmInfo = this.recieveFilmInfo.bind(this); + this.recieveMoreInfo = this.recieveMoreInfo.bind(this); + this.closeDetails = this.closeDetails.bind(this); + } + + recieveFilmInfo(results) { + this.setState({ + films: results.Search, + imdbID: results.Search.imdbID + }); + } + + recieveMoreInfo(imdbID) { + this.setState({ + imdbID, + showDetailedInfo: true + }); + this.fetchDetails(imdbID); + } + + closeDetails(showDetailedInfo) { + this.setState({ + showDetailedInfo: false + }); + } + + fetchDetails(imdbID) { + fetch(`${config.url}${imdbID}&plot=small&apikey=${config.apiKey}`) + .then(response => response.json()) + .then(data => { + this.setState({ + details: data + }); + }); + } + + render() { + return ( +
+
+

Hamzah's Online Movie Search Engine

+
+ + +
+ +
+ {this.state.showDetailedInfo ? ( + + ) : null} +
+ +
+
+ ); + } +} + +export default App; diff --git a/src/Components/MoreInfo.js b/src/Components/MoreInfo.js new file mode 100644 index 0000000..46cbd6f --- /dev/null +++ b/src/Components/MoreInfo.js @@ -0,0 +1,41 @@ +import React from "react"; + +function MoreInfo({ details, closeDetails }) { + console.log(details); + return ( +
+ +
+ ); +} + +export default MoreInfo; diff --git a/src/Components/Results.js b/src/Components/Results.js new file mode 100644 index 0000000..6d78b7d --- /dev/null +++ b/src/Components/Results.js @@ -0,0 +1,73 @@ +import React from "react"; + +function Results({ + films, + imdbLink, + recieveMoreInfo, + recieveFavourite, + errorPic +}) { + return ( +
+ +
+ ); +} + +export default Results; + +// {film.Poster.value != "N/A" ? ( +//
+// +// +// +//
+// ) : ( +//
+// +// +// diff --git a/src/Components/Search.js b/src/Components/Search.js new file mode 100644 index 0000000..d72a8f9 --- /dev/null +++ b/src/Components/Search.js @@ -0,0 +1,140 @@ +import React from "react"; + +const config = { + apiKey: "77c3b516", + url: "http://www.omdbapi.com/?s=" +}; + +class Search extends React.Component { + constructor() { + super(); + + this.state = { + film: "Gladiator", + favourites: [], + page: 1 + }; + + this.handleChange = this.handleChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + this.reducePage = this.reducePage.bind(this); + this.addPage = this.addPage.bind(this); + } + + handleChange(event) { + this.setState({ + film: event.target.value + }); + } + + fetchFilm() { + fetch(`${config.url}${this.state.film}&page=1&apikey=${config.apiKey}`) + .then(response => response.json()) + .then(data => { + console.log(data); + this.props.recieveFilmInfo(data); + }); + } + + // fetchFav(fav) { + // fetch(`${config.url}${fav}&page=1&apikey=${config.apiKey}`) + // .then(response => response.json()) + // .then(data => { + // console.log(data); + // this.props.recieveFavourite(data); + // }); + // } + + // still need to get pagination working + + // paginationFetch() { + // fetch( + // `${config.url}${this.state.film}&${this.state.page}&apikey=${ + // config.apiKey + // }` + // ) + // .then(response => response.json()) + // .then(data => { + // console.log(data); + // this.props.recieveFilmInfo(data); + // }); + // } + + handleSubmit(event) { + event.preventDefault(); + this.fetchFilm(); + // this.setState({ + // favourites: [...favourites, event.target.value] + // }); + } + + // still need to get favourites working + + handleFav(event) { + event.preventDefault(); + this.fetchFav(event.target.value); + } + + // still not working + + addPage(event) { + event.preventDefault(); + this.setState({ + page: page + 1 + }); + this.paginationFetch(); + } + + reducePage(event) { + event.preventDefault(); + if (this.state.page > 0) { + this.setState({ + page: page-- + }); + this.paginationFetch(); + } else { + this.setState({ + page + }); + } + } + + // componentDidMount() { + // this.fetchFilm(); + // } + + render() { + return ( +
+ + + +
+ + +
+
+ ); + } +} + +export default Search; diff --git a/src/index.js b/src/index.js index 0ea3619..78d8d5e 100644 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,5 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App'; +import React from "react"; +import ReactDOM from "react-dom"; +import App from "./Components/App"; -ReactDOM.render( - , - document.getElementById('root') -); +ReactDOM.render(, document.getElementById("root")); diff --git a/stylesheet.css b/stylesheet.css new file mode 100644 index 0000000..43119cb --- /dev/null +++ b/stylesheet.css @@ -0,0 +1,147 @@ +body { + margin: 0; + height: 100%; + + background: url("./assets/james-pond.jpg") no-repeat center center fixed; + background-size: cover; + + font-family: "Roboto Mono", monospace; +} + +.header { + margin: auto; + padding: 20px; + + text-align: center; + color: white; + background-color: transparent; +} + +.form { + display: flex; + + margin: auto; + padding: 20px; + + justify-content: center; + align-items: center; + text-align: center; + background-color: transparent; +} + +#movie_input { + display: flex; + + align-items: center; + border-color: darkgreen; +} + +.submit { + display: flex; + size: 20px; + + justify-content: center; + background-color: #228b22; + color: white; +} + +.results_container { + display: flex; + position: relative; + overflow: auto; + + border-color: white; +} + +.result_sections { + border-style: solid; + border-color: antiquewhite; +} + +ul { + display: flex; + flex-wrap: wrap; + + justify-content: space-evenly; + + background-color: black; +} + +li { + list-style: none; +} + +.title { + justify-content: center; + + background-color: transparent; + color: white; +} + +.movie_title { + display: flex; + + font-size: 17px; + justify-content: center; +} + +.movie_year { + display: flex; + + font-size: 15px; + justify-content: center; +} + +.poster { + display: block; + text-align: center; + + max-width: 100%; + /* height: 200px; */ +} + +.poster__error { + display: block; + + justify-content: center; + max-width: 100%; + width: 300px; +} + +#More_Info { + display: flex; + flex-direction: row; + + justify-content: center; +} + +footer { + width: 100%; + + position: fixed; + left: 0; + bottom: 0; + text-align: center; + + background-color: black; +} + +a { + color: white; +} + +.amazon_link { + color: black; +} + +.details__section { + display: flex; + position: absolute; + + top: 300px; + left: 20px; + + border-style: groove; + border-color: slategray; + background-color: white; +}