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

restructured folder project

Browse Source
This commit is contained in:
andres alcocer
2019-03-30 11:28:15 -04:00
parent cd816828ad
commit 8e22fc06d2
29 changed files with 413 additions and 507 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/containers/Navbar/DropdownContent.js → src/components/DropdownContent.js
View File

@@ -1,8 +1,8 @@
import React from 'react';
import React from 'react';
const dropdownContent = () => (
<div className="dropdownContainer">
<div className="navigation__container--userLogo">
<div className="dropdownContent">
@@ -28,9 +28,7 @@ const dropdownContent = () => (
</div>
</div>
</div>
);
export default dropdownContent;
export default dropdownContent;

0
src/components/Footer/Footer.js → src/components/Footer.js
View File

32
src/components/Header.js Normal file
View File

@@ -0,0 +1,32 @@
import React from 'react';
import PlayLogo from '../static/images/play-button.svg';
import AddLogo from '../static/images/add.svg';
export default function Header(props) {
const backgroundStyle = {
backgroundSize: "cover",
backgroundImage: `url(https://image.tmdb.org/t/p/original/${props.movie.backdrop_path})`,
backgroundPosition: "center",
}
return (
<header style={backgroundStyle} className="header">
<div className="header__container">
<h1 className="header__container-heading">{props.movie.name}</h1>
<button onClick={() => alert("not a movie!")} className="header__container-btnPlay">
<PlayLogo className="header__container-btnMyList-play" />
Play
</button>
<button className="header__container-btnMyList">
<AddLogo className="header__container-btnMyList-add" />
My List
</button>
<p className="header__container-overview">{props.movie.overview}</p>
</div>
<div className="header--fadeBottom"></div>
</header>
)
}

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

@@ -1,40 +0,0 @@
import React, { Component } from 'react';
import PlayLogo from '../../static/images/play-button.svg';
import AddLogo from '../../static/images/add.svg';
class Header extends Component {
render() {
/** Background image for the header component */
const backgroundStyle = {
backgroundSize: "cover",
backgroundImage: `url(https://image.tmdb.org/t/p/original/${this.props.movie.backdrop_path})`,
backgroundPosition: "center",
}
return (
<header style={backgroundStyle} className="header">
<div className="header__container">
<h1 className="header__container-heading">{this.props.movie.name}</h1>
<button onClick={() => alert("not a movie!")} className="header__container-btnPlay">
<PlayLogo className="header__container-btnMyList-play" />
Play
</button>
<button className="header__container-btnMyList">
<AddLogo className="header__container-btnMyList-add" />
My List
</button>
<p className="header__container-overview">{this.props.movie.overview}</p>
</div>
<div className="header--fadeBottom"></div>
</header>
)
}
}
export default Header;

37
src/components/ModalMovieDetails.js Normal file
View File

@@ -0,0 +1,37 @@
import React from 'react';
import Aux from '../hoc/Aux';
import AddIcon from '../static/images/add.svg';
import PlayIcon from '../static/images/play-button.svg';
import React from 'react'
export default function ModalMovieDetails(props) {
return (
<Aux>
<div className="modal__container">
<h1 className="modal__title">
{props.movie.title || props.movie.name}
</h1>
<p className="modal__info">
<span className="modal__rating">
Rating: {props.movie.vote_average * 10}%{" "}
</span>
Release date: {props.movie.release_date || props.movie.first_air_date} Runtime: {props.movie.runtime || props.movie.episode_run_time}m
</p>
<p className="modal__episode">
{props.movie.number_of_episodes ? " Episodes: " + props.movie.number_of_episodes : ""}
{props.movie.number_of_seasons ? " Seasons: " + props.movie.number_of_seasons : ""}
</p>
<p className="modal__overview">{props.movie.overview}</p>
<button className="modal__btn modal__btn--red">
<PlayIcon className="modal__btn--icon" />
Play
</button>
<button className="modal__btn">
<AddIcon className="modal__btn--icon" />
My List
</button>
</div>
</Aux>
);
}

41
src/components/ModalMovieDetails/ModalMovieDetails.js
View File

@@ -1,41 +0,0 @@
import React, { Component } from 'react';
import Aux from '../../hoc/Aux/Aux';
import AddIcon from '../../static/images/add.svg';
import PlayIcon from '../../static/images/play-button.svg';
class ModalMovieDetails extends Component {
render() {
return <Aux>
<div className="modal__container">
<h1 className="modal__title">
{this.props.movie.title || this.props.movie.name}
</h1>
<p className="modal__info">
<span className="modal__rating">
Rating: {this.props.movie.vote_average * 10}%{" "}
</span>
Release date: {this.props.movie.release_date || this.props.movie.first_air_date } Runtime: { this.props.movie.runtime || this.props.movie.episode_run_time}m
</p>
<p className="modal__episode">
{this.props.movie.number_of_episodes ? " Episodes: " + this.props.movie.number_of_episodes : ""}
{this.props.movie.number_of_seasons ? " Seasons: " + this.props.movie.number_of_seasons : ""}
</p>
<p className="modal__overview">{this.props.movie.overview}</p>
<button className="modal__btn modal__btn--red">
<PlayIcon className="modal__btn--icon" />
Play
</button>
<button className="modal__btn">
<AddIcon className="modal__btn--icon" />
My List
</button>
</div>
</Aux>;
}
}
export default ModalMovieDetails;

11
src/components/Movie/Movie.js
View File

@@ -1,12 +1,11 @@
import React from 'react';
const movieRow = (props) => (
const movieRow = (props) => (
<div className="movie">
<div onClick={props.movieDetails} className="movie__column-poster">
<img src={props.movieImage} alt="" className="movie__poster" />
</div>
</div>
<div onClick={props.movieDetails} className="movie__column-poster">
<img src={props.movieImage} alt="" className="movie__poster" />
</div>
</div>
);
export default movieRow;

36
src/components/Movie/MovieDetails.js Normal file
View File

@@ -0,0 +1,36 @@
import React from 'react';
import Aux from '../../hoc/Aux';
import AddIcon from '../../static/images/add.svg';
import PlayIcon from '../../static/images/play-button.svg';
export default function MovieDetails(props) {
return (
<Aux>
<div className="modal__container">
<h1 className="modal__title">
{props.movie.title || props.movie.name}
</h1>
<p className="modal__info">
<span className="modal__rating">
Rating: {props.movie.vote_average * 10}%{" "}
</span>
Release date: {props.movie.release_date || props.movie.first_air_date} Runtime: {props.movie.runtime || props.movie.episode_run_time}m
</p>
<p className="modal__episode">
{props.movie.number_of_episodes ? " Episodes: " + props.movie.number_of_episodes : ""}
{props.movie.number_of_seasons ? " Seasons: " + props.movie.number_of_seasons : ""}
</p>
<p className="modal__overview">{props.movie.overview}</p>
<button className="modal__btn modal__btn--red">
<PlayIcon className="modal__btn--icon" />
Play
</button>
<button className="modal__btn">
<AddIcon className="modal__btn--icon" />
My List
</button>
</div>
</Aux>
);
}

41
src/components/Movie/MovieDetails/MovieDetails.js
View File

@@ -1,41 +0,0 @@
import React, { Component } from 'react';
import Aux from '../../../hoc/Aux/Aux';
import AddIcon from '../../../static/images/add.svg';
import PlayIcon from '../../../static/images/play-button.svg';
class MovieDetails extends Component {
render() {
return <Aux>
<div className="modal__container">
<h1 className="modal__title">
{this.props.movie.title || this.props.movie.name}
</h1>
<p className="modal__info">
<span className="modal__rating">
Rating: {this.props.movie.vote_average * 10}%{" "}
</span>
Release date: {this.props.movie.release_date || this.props.movie.first_air_date } Runtime: { this.props.movie.runtime || this.props.movie.episode_run_time}m
</p>
<p className="modal__episode">
{this.props.movie.number_of_episodes ? " Episodes: " + this.props.movie.number_of_episodes : ""}
{this.props.movie.number_of_seasons ? " Seasons: " + this.props.movie.number_of_seasons : ""}
</p>
<p className="modal__overview">{this.props.movie.overview}</p>
<button className="modal__btn modal__btn--red">
<PlayIcon className="modal__btn--icon" />
Play
</button>
<button className="modal__btn">
<AddIcon className="modal__btn--icon" />
My List
</button>
</div>
</Aux>;
}
}
export default MovieDetails;

15
src/components/MovieGenre.js Normal file
View File

@@ -0,0 +1,15 @@
import React from 'react';
export default function MovieGenre(props) {
let netflixUrl = false;
if (props.url === "/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213") {
netflixUrl = true;
}
return (
<div onClick={props.movieDetailsModal}
className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
<img src={props.posterUrl} className="movieShowcase__container--movie-image" />
</div>
);
}

16
src/components/MovieGenreImage.js Normal file
View File

@@ -0,0 +1,16 @@
import React from 'react'
export default function MovieGenreImage(props) {
let netflixUrl = false;
if (props.url === "https://api.themoviedb.org/3/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213") {
netflixUrl = true;
}
return (
<div onClick={props.movieDetailsModal}
className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
<img src={props.posterUrl} className="movieShowcase__container--movie-image" />
</div>
);
}

6
src/components/NavigationItem/NavigationItem.js → src/components/NavigationItem.js
View File

@@ -1,11 +1,9 @@
import React from 'react';
import React from 'react';
import { NavLink } from 'react-router-dom';
const navigationItem = (props) => (
<NavLink className="navigation__container-link" exact={props.exact}
to={props.link}>{props.children}</NavLink>
to={props.link}>{props.children}</NavLink>
)
export default navigationItem;

9
src/components/UI/Backdrop.js Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react';
const backdrop = (props) => (
props.show ? <div
onClick={props.toggleBackdrop}
className="backdrop"></div> : null
);
export default backdrop;

10
src/components/UI/Backdrop/Backdrop.js
View File

@@ -1,10 +0,0 @@
import React from 'react';
const backdrop = (props) => (
props.show ? <div
onClick={props.toggleBackdrop}
className="backdrop"></div> : null
);
export default backdrop;

23
src/components/UI/Modal.js Normal file
View File

@@ -0,0 +1,23 @@
import React from 'react'
import Aux from '../../hoc/Aux';
import Backdrop from './Backdrop'
export default function Modal(props) {
const backgroundStyle = {
backgroundSize: "cover",
backgroundImage: `url(https://image.tmdb.org/t/p/original/${props.movie.backdrop_path || props.movie.poster_path})`,
}
return (
<Aux>
<Backdrop show={props.show} toggleBackdrop={props.modalClosed} />
<div
style={backgroundStyle}
className={(props.show ? "modal show" : "modal hide")}>
{props.children}
</div>
</Aux>
)
}

27
src/components/UI/Modal/Modal.js
View File

@@ -1,27 +0,0 @@
import React, {Component} from 'react';
import Aux from '../../../hoc/Aux/Aux';
import Backdrop from '../Backdrop/Backdrop'
class Modal extends Component {
render() {
const backgroundStyle = {
backgroundSize: "cover",
backgroundImage: `url(https://image.tmdb.org/t/p/original/${this.props.movie.backdrop_path || this.props.movie.poster_path})`,
}
return (
<Aux>
<Backdrop show={this.props.show} toggleBackdrop={this.props.modalClosed} />
<div
style={backgroundStyle}
className={(this.props.show ? "modal show" : "modal hide")}>
{this.props.children}
</div>
</Aux>
);
}
}
export default Modal;

6
src/containers/App.js
View File

@@ -1,16 +1,14 @@
import React, { Component } from 'react';
import Layout from './Layout/Layout';
import Layout from './Layout';
class App extends Component {
render() {
return (
<Layout/>
<Layout />
)
}
}
export default App;

34
src/containers/Layout/Layout.js → src/containers/Layout.js
View File

@@ -1,11 +1,11 @@
import React, { Component } from 'react';
import axios from "axios";
import React, { Component } from 'react';
import axios from "axios";
import Navbar from '../Navbar/Navbar';
import MainContent from '../Layout/MainContent/MainContent';
import Movie from '../../components/Movie/Movie';
import Modal from '../../components/UI/Modal/Modal';
import MovieDetails from '../../components/Movie/MovieDetails/MovieDetails';
import Navbar from './Navbar';
import MainContent from './MainContent';
import Movie from '../components/Movie/Movie';
import Modal from '../components/UI/Modal';
import MovieDetails from '../components/Movie/MovieDetails';
class Layout extends Component {
@@ -39,10 +39,10 @@ class Layout extends Component {
/** Set the movie object to our Movie component */
const movieComponent = <Movie
movieDetails={() => this.selectMovieHandler(movie)}
key={movie.id}
movieImage={movieImageUrl}
movie={movie} />
movieDetails={() => this.selectMovieHandler(movie)}
key={movie.id}
movieImage={movieImageUrl}
movie={movie} />
/** Push our movie component to our movieRows array */
movieRows.push(movieComponent);
@@ -93,7 +93,7 @@ class Layout extends Component {
axios.get(url)
.then(res => {
const movieData = res.data;
this.setState({ movieOverview: movieData });
}).catch(error => {
console.log(error);
@@ -112,13 +112,13 @@ class Layout extends Component {
<Navbar showMovies={this.onSearchHandler} />
{
this.state.toggleMovieList ? <MainContent /> : <div
className="search-container">{this.state.MovieList}</div>
className="search-container">{this.state.MovieList}</div>
}
<Modal show={this.state.toggleModal}
modalClosed={this.closeModal}
movie={this.state.movieOverview}>
<Modal show={this.state.toggleModal}
modalClosed={this.closeModal}
movie={this.state.movieOverview}>
<MovieDetails movie={this.state.movieOverview} />
</Modal>
</div>

6
src/containers/Layout/MainContent/MainContent.js → src/containers/MainContent.js
View File

@@ -1,8 +1,8 @@
import React, { Component } from 'react';
import axios from 'axios';
import Header from '../../../components/Header/Header';
import MovieGenreRow from '../../MovieGenreRow/MovieGenreRow';
import Footer from '../../../components/Footer/Footer';
import Header from '../components/Header';
import MovieGenreRow from './MovieGenreRow';
import Footer from '../components/Footer';
import { BrowserRouter } from "react-router-dom";

176
src/containers/MovieGenreRow/MovieGenreRow.js → src/containers/MovieGenreRow.js
View File

@@ -1,8 +1,8 @@
import React, { Component } from "react";
import axios from '../../axios-movies';
import MovieGenre from './MovieGenre';
import Modal from "../../components/UI/Modal/Modal";
import MovieDetails from '../../components/Movie/MovieDetails/MovieDetails';
import axios from '../axios-movies';
import MovieGenre from '../components/MovieGenre';
import Modal from "../components/UI/Modal";
import MovieDetails from '../components/Movie/MovieDetails';
class MovieGenreRow extends Component {
@@ -23,46 +23,46 @@ class MovieGenreRow extends Component {
/** Make all API calls as soon as our MovieGenreRow component mounts. */
componentWillMount() {
this.getTrending();
this.getTopRated();
this.getComedyMovies();
this.getActionMovies();
this.getHorrorMovies();
this.getNetflixMovies();
this.getRomanceMovies();
this.getDocumentaries();
this.getAnimatedMovies();
this.getTrending();
this.getTopRated();
this.getComedyMovies();
this.getActionMovies();
this.getHorrorMovies();
this.getNetflixMovies();
this.getRomanceMovies();
this.getDocumentaries();
this.getAnimatedMovies();
}
/**
Get the movie details for a single movie
@param {object} movieObject - A single movie object
*/
getMovieDetails = (movieObject) => {
console.log(movieObject);
this.setState({ toggleModal: true });
this.setState({ movieOverview: movieObject });
this.setState({ toggleModal: true });
this.setState({ movieOverview: movieObject });
}
closeModal = () => {
this.setState({toggleModal: false})
this.setState({ toggleModal: false })
}
/** Extract our movie data and pass it to our MovieGenre Component. */
getMovieRows = (res, url) => {
const results = res.data.results;
let movieRows = [];
const results = res.data.results;
let movieRows = [];
results.forEach((movie) => {
let movieImageUrl = "https://image.tmdb.org/t/p/original/" + movie.backdrop_path;
if (url === "/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213") {
movieImageUrl = "https://image.tmdb.org/t/p/original/" + movie.poster_path;
}
if (movie.poster_path && movie.backdrop_path !== null) {
const movieComponent = <MovieGenre
movieDetailsModal={() => this.getMovieDetails(movie)}
key={movie.id}
@@ -72,21 +72,21 @@ class MovieGenreRow extends Component {
movieRows.push(movieComponent);
}
})
return movieRows;
return movieRows;
}
/**
* Send request for movies that are popular right now
*/
getTrending = () => {
const url = "/trending/all/week?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US";
const url = "/trending/all/week?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US";
axios.get(url)
.then(res => {
const movieRows = this.getMovieRows(res, url);
this.setState({ trendingMovieRow: movieRows });
})
.catch(error => {
@@ -98,15 +98,15 @@ class MovieGenreRow extends Component {
* Send request for movies that are top rated
*/
getTopRated = () => {
const url = "/movie/top_rated?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US";
const url = "/movie/top_rated?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US";
axios.get(url)
.then(res => {
const movieRows = this.getMovieRows(res, url);
this.setState({ topRatedRow: movieRows });
this.setState({ topRatedRow: movieRows });
}).catch(error => {
console.log(error);
console.log(error);
})
}
@@ -118,12 +118,12 @@ class MovieGenreRow extends Component {
axios.get(url)
.then(res => {
const movieRows = this.getMovieRows(res, url);
const movieRows = this.getMovieRows(res, url);
this.setState({ netflixOriginalsRow: movieRows });
this.setState({ netflixOriginalsRow: movieRows });
})
.catch(error => {
console.log(error);
console.log(error);
})
}
@@ -211,61 +211,61 @@ class MovieGenreRow extends Component {
})
}
render() {
render() {
return (
<div className="movieShowcase">
<h1 className="movieShowcase__heading">NETFLIX ORIGINALS</h1>
<div className="movieShowcase__container">
{this.state.netflixOriginalsRow}
</div>
<h1 className="movieShowcase__heading">Trending Now</h1>
<div className="movieShowcase__container">
{this.state.trendingMovieRow}
</div>
<h1 className="movieShowcase__heading">Top Rated</h1>
<div className="movieShowcase__container">
{this.state.topRatedRow}
</div>
<h1 className="movieShowcase__heading">Action Movies</h1>
<div className="movieShowcase__container">
{this.state.actionMovieRow}
</div>
<h1 className="movieShowcase__heading">Comedy Movies</h1>
<div className="movieShowcase__container">
{this.state.comedyMovieRow}
</div>
<h1 className="movieShowcase__heading">Horror Movies</h1>
<div className="movieShowcase__container">
{this.state.horrorMovieRow}
</div>
<h1 className="movieShowcase__heading">Romance Movies</h1>
<div className="movieShowcase__container">
{this.state.romanceMovieRow}
</div>
<h1 className="movieShowcase__heading">Animated Films</h1>
<div className="movieShowcase__container">
{this.state.animatedMovieRow}
</div>
<h1 className="movieShowcase__heading">Documentaries</h1>
<div className="movieShowcase__container">
{this.state.documentaryRow}
</div>
<Modal show={this.state.toggleModal} modalClosed={this.closeModal} movie={this.state.movieOverview}>
<MovieDetails movie={this.state.movieOverview}/>
</Modal>
return (
<div className="movieShowcase">
<h1 className="movieShowcase__heading">NETFLIX ORIGINALS</h1>
<div className="movieShowcase__container">
{this.state.netflixOriginalsRow}
</div>
);
}
<h1 className="movieShowcase__heading">Trending Now</h1>
<div className="movieShowcase__container">
{this.state.trendingMovieRow}
</div>
<h1 className="movieShowcase__heading">Top Rated</h1>
<div className="movieShowcase__container">
{this.state.topRatedRow}
</div>
<h1 className="movieShowcase__heading">Action Movies</h1>
<div className="movieShowcase__container">
{this.state.actionMovieRow}
</div>
<h1 className="movieShowcase__heading">Comedy Movies</h1>
<div className="movieShowcase__container">
{this.state.comedyMovieRow}
</div>
<h1 className="movieShowcase__heading">Horror Movies</h1>
<div className="movieShowcase__container">
{this.state.horrorMovieRow}
</div>
<h1 className="movieShowcase__heading">Romance Movies</h1>
<div className="movieShowcase__container">
{this.state.romanceMovieRow}
</div>
<h1 className="movieShowcase__heading">Animated Films</h1>
<div className="movieShowcase__container">
{this.state.animatedMovieRow}
</div>
<h1 className="movieShowcase__heading">Documentaries</h1>
<div className="movieShowcase__container">
{this.state.documentaryRow}
</div>
<Modal show={this.state.toggleModal} modalClosed={this.closeModal} movie={this.state.movieOverview}>
<MovieDetails movie={this.state.movieOverview} />
</Modal>
</div>
);
}
}
export default MovieGenreRow;

25
src/containers/MovieGenreRow/MovieGenre.js
View File

@@ -1,25 +0,0 @@
import React, { Component } from 'react';
class MovieGenre extends Component {
render() {
let netflixUrl = false;
if (this.props.url === "/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213") {
netflixUrl = true;
}
return (
<div onClick={this.props.movieDetailsModal}
className={ "movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
<img src={this.props.posterUrl} className="movieShowcase__container--movie-image"/>
</div>
);
}
}
export default MovieGenre;

25
src/containers/MovieGenreRow/MovieGenreImage.js
View File

@@ -1,25 +0,0 @@
import React, { Component } from 'react';
class MovieGenreImage extends Component {
render() {
let netflixUrl = false;
if (this.props.url === "https://api.themoviedb.org/3/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213") {
netflixUrl = true;
}
return (
<div onClick={this.props.movieDetailsModal}
className={ "movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
<img src={this.props.posterUrl} className="movieShowcase__container--movie-image"/>
</div>
);
}
}
export default MovieGenreImage;

53
src/containers/Navbar/Navbar.js → src/containers/Navbar.js
View File

@@ -1,28 +1,28 @@
import React, { Component } from 'react';
import NavigationItem from '../../components/NavigationItem/NavigationItem'
import SearchLogo from '../../static/images/search-icon.svg';
import NetflixLogo from '../../static/images/Netflix_Logo_RGB.png';
import BellLogo from '../../static/images/bell-logo.svg';
import DropdownArrow from '../../static/images/drop-down-arrow.svg';
import DropdownContent from "./DropdownContent";
import NavigationItem from '../components/NavigationItem'
import SearchLogo from '../static/images/search-icon.svg';
import NetflixLogo from '../static/images/Netflix_Logo_RGB.png';
import BellLogo from '../static/images/bell-logo.svg';
import DropdownArrow from '../static/images/drop-down-arrow.svg';
import DropdownContent from "../components/DropdownContent";
class navigation extends Component {
state = {
scrolling: false
}
state = {
scrolling: false
}
componentDidMount() {
window.addEventListener('scroll', this.handleScroll);
window.addEventListener('scroll', this.handleScroll);
}
componentWillUnmount() {
window.removeEventListener('scroll', this.handleScroll);
window.removeEventListener('scroll', this.handleScroll);
}
/** changes the scrolling state depending on the Y-position */
handleScroll = (event) => {
if (window.scrollY === 0 ) {
if (window.scrollY === 0) {
this.setState({ scrolling: false });
}
else if (window.scrollY > 50) {
@@ -30,44 +30,45 @@ class navigation extends Component {
}
}
render () {
render() {
const { scrolling } = this.state;
const { showMovies } = this.props;
return (
<nav className={"navigation " + (this.state.scrolling ? "black" : "")} >
<nav className={"navigation " + (scrolling ? "black" : "")} >
<ul className="navigation__container">
<NavigationItem link="/" exact><img className="navigation__container--logo" src={NetflixLogo} alt=""/></NavigationItem>
<NavigationItem link="/" exact><img className="navigation__container--logo" src={NetflixLogo} alt="" /></NavigationItem>
<DropdownArrow className="navigation__container--downArrow-2"></DropdownArrow>
<div className="navigation__container-link pseudo-link">Home</div>
<div className="navigation__container-link pseudo-link">TV Shows</div>
<div className="navigation__container-link pseudo-link">Movies</div>
<div className="navigation__container-link pseudo-link">Recently Added</div>
<div className="navigation__container-link pseudo-link">My List</div>
<div className="navigation__container--left">
<SearchLogo className="logo" />
<input
onChange={this.props.showMovies}
onChange={showMovies}
className="navigation__container--left__input"
type="text"
placeholder="Title, genres, people" />
</div>
</div>
<div className="navigation__container-link pseudo-link">KIDS</div>
<div className="navigation__container-link pseudo-link">DVD</div>
<BellLogo className="navigation__container--bellLogo" />
<BellLogo className="navigation__container--bellLogo" />
<DropdownContent />
<DropdownArrow className="navigation__container--downArrow"/>
<DropdownArrow className="navigation__container--downArrow" />
</ul>
</nav>
)
}
}
}
export default navigation;

0
src/hoc/Aux/Aux.js → src/hoc/Aux.js
View File

11
src/index.html
View File

@@ -13,13 +13,4 @@
<div id="app"></div>
</body>
</html>
</html>