Skip to content
Permalink
Browse files

deleted search container component, set up input box function

  • Loading branch information
Colton committed Jan 13, 2020
1 parent b2d2c2b commit 753bedeb2ee92990f7a1827a1341aab6fe00cf4c

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

@@ -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"
@@ -1,24 +1,11 @@
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Home from "./Components/Home.jsx"

function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<Home />
</div>
);
}
@@ -1,11 +1,75 @@
import React, { Component } from "react";
import SearchContainer from "./SearchContainer.jsx";
import Results from "./Results.jsx";
import Search from "./Search.jsx";

export default class Home extends Component {
state = {
movies: [
{
name: "The Office",
image:
"http://static.tvmaze.com/uploads/images/medium_portrait/85/213184.jpg"
},
{
name: "Radiant Office",
image:
"http://static.tvmaze.com/uploads/images/medium_portrait/101/254702.jpg"
},
{
name: "The Office",
image:
"http://static.tvmaze.com/uploads/images/medium_portrait/93/234802.jpg"
},
{
name: "Mr. Box Office",
image:
"http://static.tvmaze.com/uploads/images/medium_portrait/97/244942.jpg"
},
{
name: "The Queen of Office",
image:
"http://static.tvmaze.com/uploads/images/medium_portrait/58/146476.jpg"
},
{
name: "No Offence",
image:
"http://static.tvmaze.com/uploads/images/medium_portrait/48/121682.jpg"
},
{
name: "Oficer",
image:
"http://static.tvmaze.com/uploads/images/medium_portrait/29/73047.jpg"
},
{
name: "Trzeci oficer",
image:
"http://static.tvmaze.com/uploads/images/medium_portrait/29/73053.jpg"
},
{
name: "Line Offline: Salaryman",
image:
"http://static.tvmaze.com/uploads/images/medium_portrait/57/143508.jpg"
},
{
name: "Utenai Keikan",
image:
"http://static.tvmaze.com/uploads/images/medium_portrait/42/106093.jpg"
}
],
query: "",
hasSearched: false
};
onQueryChange = event => {
const value = event.target.value;
this.setState({ query: value });
};

render() {
return (
<div>
<SearchContainer />
<h1>TVMaze</h1>
<Search query={this.state.query} onQueryChange={this.onQueryChange} />
<Results movies={this.state.movies} />
</div>
);
}
@@ -1,7 +1,15 @@
import React, { Component } from "react";
// import Result from "SingleResult.jsx";

export default class Results extends Component {
render() {
return <div></div>;
return (
<div>
<h3>Results go Here</h3>
{this.props.movies.map(movie => {
return <div>{movie.name}</div>;
})}
</div>
);
}
}
@@ -2,6 +2,15 @@ import React, { Component } from "react";

export default class Search extends Component {
render() {
return <div></div>;
return (
<div>
<input
type="text"
value={this.props.query}
onChange={this.props.onQueryChange}
/>
<button>Search</button>
</div>
);
}
}

This file was deleted.

@@ -1,6 +1,6 @@
import React, { Component } from "react";

export default class Result extends Component {
export default class SingleResult extends Component {
render() {
return <div></div>;
}

0 comments on commit 753bede

Please sign in to comment.
You can’t perform that action at this time.