Merge pull request #16 from AndresXI/setup-run-script

Setup run script

src/components/DropdownContent.js

@@ -1,8 +1,6 @@
 import React from 'react';
 
-
 const dropdownContent = () => (
-
   <div className="dropdownContainer">
     <div className="navigation__container--userLogo">
       <div className="dropdownContent">
@@ -19,7 +17,6 @@ const dropdownContent = () => (
           <p className="dropdownContent--user-text">Luis</p>
         </div>
         <p className="dropdownContent-text">Manage Profiles</p>
-
       </div>
       <div className="dropdownContent dropdownContent--2">
         <p className="dropdownContent-textOutside">Account</p>
@@ -31,4 +28,3 @@ const dropdownContent = () => (
 );
 
 export default dropdownContent;
-

src/components/Footer.js

@@ -1,11 +1,15 @@
 import React from 'react';
 
 const footer = () => (
-  
-   <footer className="footer">
-      <div className="footer__copyright">
-      &copy; 2018 Made with ❤️ by <a className="footer__copyright--link" href="http://andresio.com"> Andres Alcocer</a></div>
-   </footer>
+  <footer className="footer">
+    <div className="footer__copyright">
+      &copy; 2018 Made with ❤️ by{' '}
+      <a className="footer__copyright--link" href="http://andresio.com">
+        {' '}
+        Andres Alcocer
+      </a>
+    </div>
+  </footer>
 );
 
-export default footer; 
+export default footer;

src/components/Header.js

@@ -3,19 +3,21 @@ 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",
+    backgroundSize: 'cover',
     backgroundImage: `url(https://image.tmdb.org/t/p/original/${props.movie.backdrop_path})`,
-    backgroundPosition: "center",
-  }
+    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">
+        <button
+          onClick={() => alert('not a movie!')}
+          className="header__container-btnPlay"
+        >
           <PlayLogo className="header__container-btnMyList-play" />
           Play
         </button>
@@ -28,5 +30,5 @@ export default function Header(props) {
       </div>
       <div className="header--fadeBottom"></div>
     </header>
-  )
-}
+  );
+}

src/components/Movie/Movie.js

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

src/components/Movie/MovieDetails.js

@@ -13,13 +13,18 @@ export default function MovieDetails(props) {
         </h1>
         <p className="modal__info">
           <span className="modal__rating">
-            Rating: {props.movie.vote_average * 10}%{" "}
+            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
+          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 : ""}
+          {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">
@@ -33,4 +38,4 @@ export default function MovieDetails(props) {
       </div>
     </Aux>
   );
-}
+}

src/components/MovieGenre.js

@@ -18,7 +18,7 @@ export default class MovieGenre extends Component {
 
    render() {
       let netflixUrl = false;
-      if (this.props.url === "/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213") {
+      if (this.props.url === `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`) {
          netflixUrl = true;
       }
 

src/components/MovieGenreImage.js

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

src/components/NavigationItem.js

@@ -2,8 +2,13 @@ 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>
-)
+  <NavLink
+    className="navigation__container-link"
+    exact={props.exact}
+    to={props.link}
+  >
+    {props.children}
+  </NavLink>
+);
 
-export default navigationItem;
+export default navigationItem;

src/components/UI/Backdrop.js

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

src/components/UI/Modal.js

@@ -1,23 +1,25 @@
-import React from 'react'
+import React from 'react';
 
 import Aux from '../../hoc/Aux';
-import Backdrop from './Backdrop'
-
+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})`,
-   }
+  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>
-   )
+  return (
+    <Aux>
+      <Backdrop show={props.show} toggleBackdrop={props.modalClosed} />
+      <div
+        style={backgroundStyle}
+        className={props.show ? 'modal show' : 'modal hide'}
+      >
+        {props.children}
+      </div>
+    </Aux>
+  );
 }