psmattas/Netflix-Clone
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

search functionality bugs

Browse Source
This commit is contained in:
andres alcocer
2018-11-13 16:52:39 -05:00
parent 859d2f9d8f
commit 1cb135b50c
11 changed files with 318 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Header/Header.js
View File

@@ -1,8 +1,9 @@
import React from 'react';
import SearchMovie from "../../containers/SearchMovie/SearchMovie";
const header = () => (
<header className="header">
Header
{/* <SearchMovie /> */}
</header>
);

6
src/components/MovieRow/MovieRow.js
View File

@@ -3,17 +3,17 @@ import React from 'react';
const movieRow = (props) => (
<div className="movie">
<div className="movie__column-poster">
<div className="no movie__column-poster">
<img src={props.movie.posterSrc} alt="" className="movie__poster" />
</div>
<div className={"movie__column-overview " + (props.val % 2 == 0 ? 'even' : 'odd')}>
{/* <div className={"movie__column-overview " + (props.val % 2 == 0 ? 'even' : 'odd')}>
<h1 className="movie__column-overview-heading">{props.movie.title}</h1>
<p className="movie__column-overview-text">{props.movie.overview}</p>
<a className="movie__column-overview-btn"
onClick={() => { window.location.href = "https://www.themoviedb.org/movie/" + props.movie.id; }}>
view</a>
</div>
</div> */}
</div>
);

72
src/components/NavigationItems/NavigationItems.js
View File

@@ -1,24 +1,58 @@
import React from 'react';
import React, { Component } from 'react';
import NavigationItem from './NavigationItem/NavigationItem';
import SearchLogo from '../../static/images/search-icon.svg';
import SearchMovie from '../../containers/SearchMovie/SearchMovie';
const navigationItems = props => (
<ul className="navigation__container">
<NavigationItem link="/" exact>Netflix</NavigationItem>
<NavigationItem link="/">Home</NavigationItem>
<NavigationItem link="/">TV Shows</NavigationItem>
<NavigationItem link="/">Movies</NavigationItem>
<NavigationItem link="/">Recently Added</NavigationItem>
<NavigationItem link="/">My List</NavigationItem>
// const navigationItems = (props) => (
// <ul className="navigation__container">
// <NavigationItem link="/" exact>Netflix</NavigationItem>
// <NavigationItem link="/">Home</NavigationItem>
// <NavigationItem link="/">TV Shows</NavigationItem>
// <NavigationItem link="/">Movies</NavigationItem>
// <NavigationItem link="/">Recently Added</NavigationItem>
// <NavigationItem link="/">My List</NavigationItem>
<div className="navigation__container--left">
<input
placeholder="Search movie..."
type="text" />
{/* <p>hello</p>
<p>hello</p> */}
</div>
</ul>
);
// <div className="navigation__container--left">
// <SearchLogo className="logo"/>
// <SearchMovie />
// {/* <input
// placeholder="Title, people, genres"
// type="text" /> */}
// {/* <p>hello</p>
// <p>hello</p> */}
// </div>
// </ul>
// );
export default navigationItems;
// export default navigationItems;
class NavigationItems extends Component {
render() {
return (
<ul className="navigation__container">
<NavigationItem link="/" exact>Netflix</NavigationItem>
<NavigationItem link="/">Home</NavigationItem>
<NavigationItem link="/">TV Shows</NavigationItem>
<NavigationItem link="/">Movies</NavigationItem>
<NavigationItem link="/">Recently Added</NavigationItem>
<NavigationItem link="/">My List</NavigationItem>
<div className="navigation__container--left">
<SearchLogo className="logo"/>
{/* <SearchMovie show={this.myF}/> */}
{/* <input
placeholder="Title, people, genres"
type="text" /> */}
{/* <p>hello</p>
<p>hello</p> */}
</div>
</ul>
);
}
}
export default NavigationItems;

18
src/components/Search/Search.js
View File

@@ -1,16 +1,12 @@
import React from 'react';
const search = (props) => (
<div className="search">
<input
onChange={props.onSearch}
type="text"
placeholder="Search movie..."
className="search__input"/>
</div>
);
<input
onChange={props.onSearch}
onClick={props.onShow}
type="text"
placeholder="Title, genres, people" />
)
export default search;
export default search;

59
src/containers/App.js
View File

@@ -1,17 +1,28 @@
import React, { Component } from 'react';
import axios from 'axios';
import Navigation from "./Navigation/Navigation"
import Layout from './Layout/Layout';
import MovieRow from '../components/MovieRow/MovieRow';
import axios from 'axios';
import MovieRow from '../components/MovieRow/MovieRow'
// import SearchMovie from './SearchMovie/SearchMovie';
class App extends Component {
state = {
// an array that will hold all of our movies component
rows: []
}
state = {
myVal: true,
//an array that will hold all of our movies component
rows: []
}
makeAipCall = (searchItem) => {
myB = () => {
this.setState({
myVal: true
})
}
makeAipCall = (searchItem) => {
const url = "https://api.themoviedb.org/3/search/movie?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&page=1&query=" + searchItem;
axios.get(url)
.then(res => {
@@ -42,17 +53,33 @@ class App extends Component {
}
// get the user input and pass it to the makeAPICall function
searchHandler = (event) => {
const searchItem = event.target.value;
this.makeAipCall(searchItem);
}
// searchHandler = (event) => {
// // const searchItem = event.target.value;
// // this.makeAipCall(searchItem);
// alert("Hello");
// }
myF = (event) => {
this.setState({
myVal: false
});
const userInput = event.target.value;
this.makeAipCall(userInput);
console.log(userInput);
}
render() {
return (
<div>
<Layout />
{/* <Search onSearch={this.searchHandler}/>
{this.state.rows} */}
<div>
<Navigation showMan={this.myF} />
{this.state.myVal ? <Layout /> : <div onClick={this.myB} className="no">{this.state.rows}</div>}
</div>
);

11
src/containers/Layout/Layout.js
View File

@@ -1,32 +1,27 @@
import React, { Component } from 'react';
import Navigation from '../Navigation/Navigation';
import Header from '../../components/Header/Header';
import MovieShowcase from '../MovieShowcase/MovieShowcase';
import MovieOriginals from '../MovieOriginals/MovieOriginals';
import Footer from '../../components/Footer/Footer';
import { BrowserRouter } from "react-router-dom";
import SearchMovie from '../../containers/SearchMovie/SearchMovie';
// < Navigation />
// <Header />
// <MovieShowcase />
// <MovieOriginals />
// <Footer />
class Layout extends Component {
render() {
return (
<BrowserRouter>
<div className="container">
<Navigation />
<Header />
<MovieShowcase />
<MovieOriginals />
<Footer />
<Footer />
</div>
</BrowserRouter>)
}

13
src/containers/Navigation/Navigation.js
View File

@@ -25,11 +25,22 @@ class navigation extends Component {
}
}
render () {
return (
<nav className={"navigation " + (this.state.scrolling ? "black" : "")} >
<NavigationItems />
<input
onKeyDown={this.props.showMan}
// onClick={this.props.showMan}
// onChange={props.onSearch}
// onClick={props.onShow}
type="text"
placeholder="Title, genres, people" />
<NavigationItems />
</nav>
)
}

75
src/containers/SearchMovie/SearchMovie.js Normal file
View File

@@ -0,0 +1,75 @@
// import React, { Component } from 'react';
// import axios from "axios";
// // import Search from '../../components/Search/Search';
// import MovieRow from '../../components/MovieRow/MovieRow';
// import Layout from '../Layout/Layout';
// class SearchMovie extends Component {
// state = {
// // an array that will hold all of our movies component
// rows: [],
// myVal: false
// }
// makeAipCall = (searchItem) => {
// const url = "https://api.themoviedb.org/3/search/movie?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&page=1&query=" + searchItem;
// axios.get(url)
// .then(res => {
// // extract the data from json object
// const movies = res.data.results;
// // Holds our movieComponent.
// let movieRows = [];
// let total = 0;
// movies.forEach((movie) => {
// // manually build our image url and set it on the movie object
// movie.posterSrc = "https://image.tmdb.org/t/p/w185" + movie.poster_path;
// total+= 1;
// // pass in the movie object to our MovieRow component and keep it in a variable called
// // movieComponent
// const movieComponent = <MovieRow
// val={total}
// key={movie.id}
// movie={movie}
// />
// // push our movieComponent to our movieRows array;
// movieRows.push(movieComponent);
// })
// // update state
// this.setState({ rows: movieRows });
// }).catch(error => {
// console.log(error);
// });
// }
// // get the user input and pass it to the makeAPICall function
// searchHandler = (event) => {
// // const searchItem = event.target.value;
// // this.makeAipCall(searchItem);
// alert("Hello");
// }
// render() {
// return (
// <div>
// <input
// onKeyPress={this.searchHandler}
// onClick={this.props.show}
// type="text"
// placeholder="Title, genres, people" />
// {/* <Search onSearch={this.searchHandler} onShow={this.onChangeHandler} showAll={this.state.myVal}/> */}
// {event.key}
// </div>
// );
// }
// }
// export default SearchMovie;

19
src/static/sass/base/_base.scss
View File

@@ -58,4 +58,23 @@ html {
display: grid;
grid-template-rows: 47vw min-content min-content min-content;
grid-template-columns: 4% repeat(10, 1fr) 4%;
}
.searchContent {
height: 100vh;
background-color: $color-background;
}
.no {
background-color: $color-background;
height: 150%;
padding-bottom: 10rem;
display: flex;
}
.yes {
background-color: purple;
height: 100vh;
}

83
src/static/sass/components/_movie.scss
View File

@@ -0,0 +1,83 @@
.movie {
// margin-top: 5rem;
// padding-left: 16rem;
// padding-right: 6rem;
// padding-bottom: 6rem;
margin-top: 15rem;
height: 1rem;
display: inline-block;
display: flex;
justify-content: center;
* > img {
width: 25rem;
padding-right: 2rem;
}
&__column-poster {
height: 25rem;
}
&__column-overview {
padding-left: 3.5rem;
text-align: left;
width: 60%;
padding-top: .5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
&-heading {
font-size: 3rem;
font-family: 'Fjalla One', sans-serif;
color: $color-white;
}
&-text {
color: $color-white;
font-family: 'Nanum Gothic', sans-serif;
text-align: left;
font-size: 1.6rem;
line-height: 1.5;
}
&-btn {
margin-bottom: 1rem;
color: $color-green;
cursor: pointer;
border-radius: 5rem;
// padding: .5rem;
padding: .8rem 2rem .8rem 2rem;
font-family: 'Nanum Gothic', sans-serif;
font-size: 1.5rem;
border: solid 1.7px $color-green;
transition: all .2s;
&:hover {
background-color: $color-green;
color: #fff;
}
}
}
&__poster {
height: 100%;
}
}
.even {
background-color: $color-purple;
}
.odd {
background-color: $color-light-blue-2;
}

22
src/static/sass/layout/_navigation.scss
View File

@@ -39,17 +39,22 @@
padding-right: 4.6rem;
display: flex;
justify-content: flex-end;
}
}
}
::placeholder {
color: rgb(167, 166, 166);
opacity: 1;
/* Firefox */
}
input[type="text"] {
// display: none;
// color: #fff;
font-size: 1.4rem;
border: none;
outline: none;
background-color: red;
width: 0px;
padding: 10px;
padding-right: 2rem;
@@ -59,12 +64,14 @@ input[type="text"] {
}
input[type="text"]:focus:hover {
z-index: 2;
border-bottom: 1px solid #BBB;
color: #fff;
}
input[type="text"]:focus {
width: 22rem;
color: #fff;
z-index: 1;
background-color: #000;
border: 1px solid #fff;
@@ -75,7 +82,6 @@ input[type="submit"] {
height: 67px;
width: 63px;
color: red;
text-indent: -10000px;
border: none;
position: absolute;
@@ -84,4 +90,12 @@ input[type="submit"] {
opacity: 0.4;
cursor: pointer;
transition: opacity .4s ease;
}
.logo {
z-index: -1;
width: 2rem;
height: 2rem;
transform: translateX(2.4rem) translateY(.5rem);
cursor: pointer;
}