Add loading screen and start popular section

public/env.js

@@ -1,12 +1,12 @@
 window.env = {
- "TRENDING": "https://api.themoviedb.org/3/trending/movie/week",
- "DETAILS": "https://api.themoviedb.org/3/movie/",
- "LATEST": "https://api.themoviedb.org/3/movie/latest",
- "NOW_PLAYING": "https://api.themoviedb.org/3/movie/now_playing",
- "POPULAR": "https://api.themoviedb.org/3/movie/popular",
- "TOP_RATED": "https://api.themoviedb.org/3/movie/top_rated",
- "UPCOMING": "https://api.themoviedb.org/3/movie/upcoming",
- "API_KEY": "42cea6b932576c057f794e0128e498c2",
- "IMG_URL": "https://image.tmdb.org/t/p/original",
- "POSTER_URL": "https://image.tmdb.org/t/p/w342"
-};
+ TRENDING: 'https://api.themoviedb.org/3/trending/movie/week',
+ DETAILS: 'https://api.themoviedb.org/3/movie/',
+ LATEST: 'https://api.themoviedb.org/3/movie/latest',
+ NOW_PLAYING: 'https://api.themoviedb.org/3/movie/now_playing',
+ POPULAR: 'https://api.themoviedb.org/3/movie/popular',
+ TOP_RATED: 'https://api.themoviedb.org/3/movie/top_rated',
+ UPCOMING: 'https://api.themoviedb.org/3/movie/upcoming',
+ API_KEY: '42cea6b932576c057f794e0128e498c2',
+ IMG_URL: 'https://image.tmdb.org/t/p/original',
+ POSTER_URL: 'https://image.tmdb.org/t/p/w342',
+};

src/components/BigHero.js

@@ -20,7 +20,13 @@ const BigHero = ({
  <h1 className="title">{title}</h1>
 
  <div className="d-flex genres">
- {genres.map(genre => <p key={genre}>{genre}</p>)}
+ {genres.map(genre => (
+ <p key={genre}>
+ <button type="button" onClick={() => console.log('er')} name={genre}>
+ {genre}
+ </button>
+ </p>
+ ))}
  <p className="rating">
  <FontAwesomeIcon className="rating-star" icon={faStar} />
  {rating}

src/components/Catalogue.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Catalogue = () => {
+
+};
+
+export default Catalogue;

src/components/Loading.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Loading = ({ nothing }) => (
+
+ <div className={`${nothing ? 'nothing' : ''}`}>
+ <div className="loading d-flex justify-content-center align-items-center">
+ <div className="spinner-grow text-warning" role="status">
+ <span className="sr-only">Loading...</span>
+ </div>
+ </div>
+ </div>
+);
+
+Loading.propTypes = {
+ nothing: PropTypes.bool.isRequired,
+};
+
+export default Loading;

src/containers/Popular.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Popular = () => {
+
+};
+
+export default Popular;

src/containers/Trending.js

@@ -7,6 +7,7 @@ import { topTrending } from '../helpers/api_methods/api';
 import { loadTrending, loadVideos } from '../actions';
 import BigHero from '../components/BigHero';
 import GenreList from '../helpers/genres/genre';
+import Loading from '../components/Loading';
 
 const Trending = ({ movie, loader, trailer }) => {
  const [isLoading, setLoading] = useState(true);
@@ -20,7 +21,7 @@ const Trending = ({ movie, loader, trailer }) => {
  } = movie;
 
  if (isLoading) {
- return <div />;
+ return <Loading nothing />;
  }
 
  return (

src/styles/_globals.scss

@@ -35,4 +35,17 @@ a {
  text-decoration: none;
  color: inherit;
  }
+}
+
+.nothing {
+ height: 100vh;
+}
+
+.loading {
+ height: 100%;
+}
+
+.spinner-grow {
+ width: 10em;
+ height: 10em;
 }

src/styles/bighero/BigHero.scss

@@ -37,7 +37,7 @@
 }
 
 .info {
- padding: 30px;
+ padding: 0 30px;
  padding-right: 0;
 
  .title {
@@ -47,7 +47,7 @@
 
  .desc {
  margin-top: 40px;
- margin-bottom: 50px;
+ margin-bottom: 55px;
  font-size: 1.5em;
  }
 }
@@ -70,6 +70,13 @@
  }
  }
  }
+
+ button {
+ @extend p;
+ padding: 0;
+ background-color: transparent;
+ border: none;
+ }
 }
 
 .trailer-cont {