From 120c3feda416ccdf2244bae1268740e32fb2dfc5 Mon Sep 17 00:00:00 2001 From: Ariana Bray Date: Wed, 26 Jun 2019 09:26:07 -0700 Subject: [PATCH 1/2] added search functionality/component --- .gitignore | 1 + package-lock.json | 45 ++++++++++++++++++-- package.json | 2 + src/App.js | 31 ++++++++------ src/components/Search.js | 92 ++++++++++++++++++++++++++++++++++++++++ 5 files changed, 155 insertions(+), 16 deletions(-) create mode 100644 src/components/Search.js diff --git a/.gitignore b/.gitignore index d30f40ef4..fbc176002 100644 --- a/.gitignore +++ b/.gitignore @@ -15,6 +15,7 @@ .env.development.local .env.test.local .env.production.local +.env npm-debug.log* yarn-debug.log* diff --git a/package-lock.json b/package-lock.json index 3e0662036..5adc4b8ab 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1902,6 +1902,38 @@ "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz", "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==" }, + "axios": { + "version": "0.19.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz", + "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==", + "requires": { + "follow-redirects": "1.5.10", + "is-buffer": "^2.0.2" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "requires": { + "ms": "2.0.0" + } + }, + "follow-redirects": { + "version": "1.5.10", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz", + "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==", + "requires": { + "debug": "=3.1.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + } + } + }, "axobject-query": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.0.2.tgz", @@ -4287,9 +4319,9 @@ } }, "dotenv": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-6.2.0.tgz", - "integrity": "sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w==" + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.0.0.tgz", + "integrity": "sha512-30xVGqjLjiUOArT4+M5q9sYdvuR4riM6yK9wMcas9Vbp6zZa+ocC9dp6QoftuhTPhFAiLK/0C5Ni2nou/Bk8lg==" }, "dotenv-expand": { "version": "4.2.0", @@ -10334,6 +10366,13 @@ "webpack-dev-server": "3.2.1", "webpack-manifest-plugin": "2.0.4", "workbox-webpack-plugin": "4.2.0" + }, + "dependencies": { + "dotenv": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-6.2.0.tgz", + "integrity": "sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w==" + } } }, "read-pkg": { diff --git a/package.json b/package.json index d63126caa..12575d78b 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,8 @@ "version": "0.1.0", "private": true, "dependencies": { + "axios": "^0.19.0", + "dotenv": "^8.0.0", "react": "^16.8.6", "react-dom": "^16.8.6", "react-router-dom": "^5.0.1", diff --git a/src/App.js b/src/App.js index deb93bd72..71df8aaf7 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ import './App.css'; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; import CustomerList from './components/CustomerList'; import RentalLibrary from './components/RentalLibrary'; +import Search from './components/Search'; @@ -13,8 +14,8 @@ class App extends Component { selectedMovie: "", selectedCustomer: "", allRentals: [], - showMovies: false, - showCustomers: false + // showMovies: false, + // showCustomers: false } } @@ -30,18 +31,18 @@ class App extends Component { // return

Users

; // } - showCustomerToggle = () => { - const status = !this.state.showCustomers; - this.setState({showCustomers: status, - showMovies: !status - }); - } + // showCustomerToggle = () => { + // const status = !this.state.showCustomers; + // this.setState({showCustomers: status, + // showMovies: !status + // }); + // } - showMovieToggle = () => { - const status = !this.state.showMovies; - this.setState({showMovies: status, - showCustomers: !status}); - } + // showMovieToggle = () => { + // const status = !this.state.showMovies; + // this.setState({showMovies: status, + // showCustomers: !status}); + // } render() { return ( @@ -57,6 +58,9 @@ class App extends Component {
  • Customers
    • +
  • + Search +
    • {/* */} @@ -65,6 +69,7 @@ class App extends Component {
    + {/* {this.state.showCustomers && } {this.state.showMovies && } */}
    diff --git a/src/components/Search.js b/src/components/Search.js new file mode 100644 index 000000000..30d14d7c4 --- /dev/null +++ b/src/components/Search.js @@ -0,0 +1,92 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import axios from 'axios'; + +require('dotenv').config(); + +class Search extends Component { + constructor(props) { + super(props); + + this.state = { + result: [], + searchTitle: "", + errorMessage: "", + } + } + + onInputChange = (event) => { + const updatedState = {}; + + const field = event.target.name; + const value = event.target.value; + + updatedState[field] = value; + this.setState(updatedState); + } + + onSearch = (event) => { + event.preventDefault(); + + this.searchMovie(this.state.searchTitle); + + this.setState({ + searchTitle: "", + }); + } + + componentDidMount () { + this.searchMovie(); + }; + + searchMovie = (searchTitle) => { + const URL = `https://api.themoviedb.org/3/search/movie?api_key=${process.env.REACT_APP_API_KEY}&language=en-US&query=${searchTitle}page=1&include_adult=false` + + axios.get(URL) + .then((response) => { + console.log(URL) + const movies = response.data.map((movie) => { + return { + id: movie.id, + key: movie.id, + title: movie.title, + overview: movie.overview, + release_date: movie.release_date, + image_url: movie.image_url, + external_id: movie.external_id + } + }) + this.setState({ + result: movies, + }); + }) + .catch((error) => { + this.setState({ + errorMessage: error.message, + }) + }) + } + + render() { + return ( +
    +
    +

    Search Movie

    +
    +
    + + + +
    + +
    + )}; + } + + export default Search; + From 7d71cc5ae67e1c44b8bca3611d14b80153c98824 Mon Sep 17 00:00:00 2001 From: Ariana Bray Date: Wed, 26 Jun 2019 10:38:05 -0700 Subject: [PATCH 2/2] added rendering of search results with photo within search component --- src/components/Movie.js | 10 +++---- src/components/Search.js | 60 ++++++++++++++++++++++++++-------------- 2 files changed, 43 insertions(+), 27 deletions(-) diff --git a/src/components/Movie.js b/src/components/Movie.js index e4344ce82..9c7c363c5 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -6,19 +6,17 @@ const Movie = (props) => { return (
    -
  • +

    {props.title}

    this is an image -
    -
    {props.overview}
    +
    +
    {props.overview}
    - -

    {props.title}

    +
    -
    • ) } diff --git a/src/components/Search.js b/src/components/Search.js index 30d14d7c4..31cb3e483 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import axios from 'axios'; +import Movie from './Movie' require('dotenv').config(); @@ -40,20 +41,19 @@ class Search extends Component { }; searchMovie = (searchTitle) => { - const URL = `https://api.themoviedb.org/3/search/movie?api_key=${process.env.REACT_APP_API_KEY}&language=en-US&query=${searchTitle}page=1&include_adult=false` + const URL = `https://api.themoviedb.org/3/search/movie?api_key=${process.env.REACT_APP_API_KEY}&language=en-US&query=${searchTitle}&page=1&include_adult=false` axios.get(URL) .then((response) => { - console.log(URL) - const movies = response.data.map((movie) => { + const movies = response.data.results.map((movie) => { return { id: movie.id, key: movie.id, title: movie.title, overview: movie.overview, release_date: movie.release_date, - image_url: movie.image_url, - external_id: movie.external_id + image_url: `http://image.tmdb.org/t/p/w185//${movie.poster_path}`, + external_id: movie.external_id, } }) this.setState({ @@ -68,23 +68,41 @@ class Search extends Component { } render() { + const results = this.state.result.map((movie, i) => { + + return + }) return ( -
    -
    -

    Search Movie

    -
    -
    - - - -
    - -
    +
    +
    +
    +

    Search Movie

    +
    +
    + + + +
    + + +
    +
    + {results} +
    +
    )}; }