Permalink
Browse files

initial commit

  • Loading branch information...
idecay committed Jan 13, 2020
1 parent fc9352c commit 0cd0139908f9ad1ebf1e676908ead87b44ceaf4a
Showing with 171 additions and 18 deletions.
  1. +31 −0 package-lock.json
  2. +1 −0 package.json
  3. +6 −18 src/App.js
  4. +39 −0 src/components/Home.jsx
  5. +18 −0 src/components/Results.jsx
  6. +8 −0 src/components/Search.jsx
  7. +56 −0 src/components/SearchContainer.jsx
  8. +12 −0 src/components/Util.js

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

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>
<div>
<h1>TVMaze React</h1>
<Home />
</div>
);
}
@@ -0,0 +1,39 @@
import React, { Component } from "react";
import SearchContainer from "./SearchContainer";
import Results from "./Results";

export default class Home extends Component {
state = {
movies: [],
query: "",
hasSearched: false
};

toggleHasSearched = () => {
const hasSearched = !this.state.hasSearched;
this.setState({ hasSearched });
};

render() {
return (
<div>
<h1>Hello friend</h1>
{this.state.hasSearched === false ? (
<button onClick={this.toggleHasSearched}>Search</button>
) : (
<button onClick={this.toggleHasSearched}>Search Again?</button>
)}
<SearchContainer
movies={this.state.movies}
query={this.state.query}
hasSearched={this.state.hasSearched}
/>
<h1>this shouldn't reload</h1>
<Results
movies={this.state.movies}
handleSearchInput={this.handleSearchInput}
/>
</div>
);
}
}
@@ -0,0 +1,18 @@
import React, { Component } from "react";

export default class Results extends Component {
render() {
return (
<div>
{this.props.movies.map(movie => {
return (
<div>
<img src={movie.image} alt="movie" />
<h3>{movie.name}</h3>
</div>
);
})}
</div>
);
}
}
@@ -0,0 +1,8 @@
import React, { Component } from "react";
import SearchContainer from "./SearchContainer";

export default class Search extends Component {
render() {
return <div></div>;
}
}
@@ -0,0 +1,56 @@
import React, { Component } from "react";
// import Results from "./Results";
import { queryTVMazeAPI } from "./Util";
import Results from "./Results";

const blankSearchForm = {
movies: [],
query: "",
hasSearched: false
};

export default class SearchContainer extends Component {
state = {
newSearch: { ...blankSearchForm }
};

handleSearchInput = event => {
const newValue = event.target.value;
const field = event.target.name;
const newState = { ...this.state };
newState.newSearch[field] = newValue;
const results = queryTVMazeAPI(newValue);
this.setState(results);
};

onSubmitQuery = event => {
event.preventDefault();
let query = this.query;
console.log("movies: ", this.movies);
this.movies.push(queryTVMazeAPI(query));
const newState = { ...this.state };
this.setState(newState);
// console.log("movies:", this.movies);
};

onSearchAgain = () => {
const newQuery = { ...this.state.newSearch };
this.setState({ newSearch: { ...blankSearchForm } });
};
render() {
return (
<div>
<form action={this.onSubmitQuery}>
<input
type="search"
name="query"
placeholder="Search"
onChange={this.handleSearchInput}
/>

<input type="submit" />
</form>
</div>
);
}
}
@@ -0,0 +1,12 @@
import axios from "axios";

export function queryTVMazeAPI(query) {
// fill url in with a URL based on the example at:
// https://www.tvmaze.com/api#show-search
// replace a part of the example URL with the user input, which you can
// assume will be the parameter of this function, `query`
const url = "http://api.tvmaze.com/search/shows?q=" + { query };
return axios
.get(url) //make sure to return something
.then(response => console.log("hey"));
}

0 comments on commit 0cd0139

Please sign in to comment.