Permalink
Browse files

add api

  • Loading branch information...
ozzie0428 committed Jan 11, 2020
1 parent 2f98efb commit 5bd368fb5de6bd4b621d11beb80e7b480e647371
Showing with 90 additions and 67 deletions.
  1. +31 −0 package-lock.json
  2. +1 −0 package.json
  3. +11 −8 src/conponents /Results.jsx
  4. +34 −5 src/conponents /Search.jsx
  5. +1 −54 src/conponents /dummyData/officeData.js
  6. +12 −0 src/index.css

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -6,6 +6,7 @@
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.4.0",
"@testing-library/user-event": "^7.2.1",
"axios": "^0.19.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0"
@@ -2,18 +2,21 @@ import React, { Component } from 'react'

export default class Results extends Component {
render() {
console.log('inside reults', this.props)
// console.log('inside reults', this.props)
return (
<div>
<div className="resultContainer">
{this.props.moviesList.map((movie, i) => {
console.log("movie", movie);
return (
<div key={i}>
<h1>{movie.name}</h1>
<img src={movie.image} alt="movie pic" />
</div>
);
console.log("movie", movie.show.image);
if(movie.show.image) {
return (
<div key={i}>
<img src={movie.show.image.medium} alt="movie pic" />
<h5>{movie.show.name}</h5>
</div>
);
}

})}
</div>

@@ -1,19 +1,48 @@
import React, { Component } from "react";
import axios from 'axios'
import Results from './Results'
import { movieData } from "./dummyData/officeData";



export default class Search extends Component {
state = {
moviesList: movieData
moviesList: [],
searchInput: 'atl',


};
handleSearchInput = evt => {
const inputName=evt.target.name
const inputValue=evt.target.value


// key : value
this.setState({ [inputName] : inputValue})
};
handleSearchInput = () => {};

onSubmitQuery = (input) =>{
axios.get(`http://api.tvmaze.com/search/shows?q=${input}`) //make sure to return something
.then(response => {
console.log(response.data)
this.setState(
{
moviesList :response.data
}

)

})

}
render() {

return (
<div>
<input onChange={this.handleSearchInput} type="text" value="" />
<div>
<button>Search</button>
<input onChange={this.handleSearchInput} placeholder="Enter a Movie Title..." type="text" name="searchInput" value={this.state.place} />

<div className="btn-container">
<button onClick={() =>this.onSubmitQuery(this.state.searchInput)} >Search</button>
</div>
<Results moviesList={this.state.moviesList}/>

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -17,4 +17,16 @@ code {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
}

h1 {
color: blue
}

h5 {
color: gray
}

.btn-container {
padding-bottom: 5%
}

0 comments on commit 5bd368f

Please sign in to comment.