sei-eternity · mansour789 · Aug 5, 2019 · Aug 6, 2019 · Aug 6, 2019 · Aug 6, 2019
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.19.0",
+    "dotenv": "^8.0.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-scripts": "3.0.1"

diff --git a/public/index.html b/public/index.html
@@ -10,11 +10,12 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
-
+      
       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
@@ -27,12 +28,14 @@
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
-
+      
       You can add webfonts, meta tags, or analytics to this file.
       The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
+
+        To begin the development, run `npm start` or `yarn start`.
+        To create a production bundle, use `npm run build` or `yarn build`.
+      -->
+
+      <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    </body>
 </html>
diff --git a/src/App.js b/src/App.js
@@ -1,26 +1,60 @@
-import React from 'react';
-import logo from './logo.svg';
+import React, { Component } from 'react';
 import './App.css';
+import FilmListing from './component/FilmListing';
+import FilmDetails from './component/FilmDetails';
+import TMDB from './TMDB';
+import axios from "axios";
 
-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>
-  );
+
+class App extends Component {
+
+  constructor(props){
+    super(props)
+    this.state = {
+      films: TMDB.films,
+      faves: [],
+      current: {}
+    } 
+  }
+
+  handleFaveToggle = (film) => {
+
+    const faves = [...this.state.faves];
+    const filmIndex = faves.indexOf(film)
+
+    if (filmIndex !== -1){
+       faves.splice(filmIndex, 1);
+       console.log(`Removing ${film.title} From Favors`)
+    }else{
+      faves.push(film);
+      console.log(`Adding ${film.title} To Favors`)
+    }
+    this.setState({faves})
+  }
+
+  handleDetailsClick = (film) => {
+
+    const url = `https://api.themoviedb.org/3/movie/${film.id}?api_key=${TMDB.api_key}&append_to_response=videos,images&language=en`
+
+    axios({
+      method: 'GET',
+      url: url
+    }).then(response => {
+      this.setState({ current: response.data })
+    })
+    .catch(e => {
+      console.log(`There is an Error With axios ${e}`)
+    });  
+}
+
+  render(){
+      return (
+          <div className="film-library">
+              <FilmListing handleDetailsClick={this.handleDetailsClick} films={this.state.films} faves={this.state.faves} onFaveToggle={this.handleFaveToggle}/> 
+              <FilmDetails film={this.state.current} /> 
+          </div>
+      );
+  }
 }
 
 export default App;
diff --git a/src/TMDB.js b/src/TMDB.js
@@ -1,5 +1,10 @@
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+
 const TMDB = {
-  api_key: '<REPLACE_THIS_WITH_TMDB_API_KEY>',
+  api_key: process.env.REACT_APP_TMDB_API_KEY,
   films: [
     {
       "id": 346364,

diff --git a/src/component/Fave.js b/src/component/Fave.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+function Fave(props){
+
+   const handleFaveClick = (e) => {
+        e.stopPropagation()
+
+        props.onFaveToggle()
+    }
+    const isFave = props.isFave ? 'remove_from_queue' : 'add_to_queue'
+    const message = props.isFave ? "remove_from_queue" : "add_to_queue"
+
+    return ( 
+        <div  onClick={handleFaveClick} className={`film-row-fave ${isFave}`}  >
+            <p className="material-icons">{message}</p>
+        </div>
+    );
+
+}
+
+export default Fave;
diff --git a/src/component/FilmDetails.js b/src/component/FilmDetails.js
@@ -0,0 +1,47 @@
+import React from 'react';
+
+function FilmDetails(props){
+
+    const films = props.film
+    const backdropUrl = `https://image.tmdb.org/t/p/w1280/${films.backdrop_path}`
+    const posterUrl = `https://image.tmdb.org/t/p/w780/${films.poster_path}`
+    let details;
+
+    if(films.id){
+       details =  <div className="film-detail is-hydrated">
+                    <figure className="film-backdrop">
+                        <img src={backdropUrl} alt="" />
+                        <h1 className="film-title">{props.film.title}</h1>
+                    </figure>
+
+                    <div className="film-meta">
+                        <h2 className="film-tagline">{props.film.tagline}</h2>
+                        <p className="film-detail-overview">
+                            <img src={posterUrl} className="film-detail-poster" alt={props.film.title} />
+                            {props.film.overview}
+                        </p>
+                    </div>
+                 </div>
+    }else{
+
+        details =  <div className="film-detail">
+                        <p>
+                            <i className="material-icons">subscriptions</i>
+                            <span>No film selected</span>
+                        </p>
+                    </div> 
+    }
+    return(
+        <div className="film-details">
+             <h1 className="section-title">DETAILS</h1>
+             {details}
+        </div>
+    ); 
+}
+
+export default FilmDetails;
+
+
+
+
+
diff --git a/src/component/FilmListing.js b/src/component/FilmListing.js
@@ -0,0 +1,51 @@
+import React, { Component } from 'react';
+import FilmRow from './FilmRow';
+
+
+class FilmListing extends Component {
+
+    constructor(props){
+        super(props)
+        this.state = {
+            filters: "all"
+        }   
+    }
+
+    handleFilterClick(filter){
+        this.setState({
+            filters: filter
+        });
+    }
+
+    render(){
+
+        const { films, faves} = this.props;
+        let showFilms = [];
+        const allFilms = films.map((film) => <FilmRow key={film.id} film={film} isFave={faves.includes(film)} onFaveToggle={() => this.props.onFaveToggle(film)}  handleDetailsClick ={this.props.handleDetailsClick}/>)
+        const favesFilms = faves.map((film) => <FilmRow key={film.id} film={film} isFave={faves.includes(film)} onFaveToggle={() => this.props.onFaveToggle(film)} handleDetailsClick ={this.props.handleDetailsClick}/>)
+        this.state.filters === "all" ? showFilms = allFilms : showFilms = favesFilms
+
+        return(
+            <div className="film-list" >
+                <h1 className="section-title">FILMS</h1>
+                    <div className="film-list-filters">
+                        <div onClick={() => this.handleFilterClick('all')} className={`film-list-filter ${this.state.filters === 'all' ? 'is-active' : ''}`}>
+                            ALL
+                            <span className="section-count">{films.length}</span>
+                        </div>
+                        <div onClick={() => this.handleFilterClick('faves')} className={`film-list-filter ${this.state.filters === 'faves' ? 'is-active' : ''}`}>
+                            FAVES
+                            <span className="section-count">{faves.length}</span>
+                        </div>
+                     </div>
+                        {showFilms}       
+            </div>
+        );
+    }
+}
+
+
+export default FilmListing;
+
+
+
diff --git a/src/component/FilmPoster.js b/src/component/FilmPoster.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+function FilmPoster(props) {
+    return <img src={`https://image.tmdb.org/t/p/w780/${props.poster}`} alt="" /> ;    
+}
+
+export default FilmPoster;
diff --git a/src/component/FilmRow.js b/src/component/FilmRow.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import FilmPoster from './FilmPoster';
+import Fave from './Fave';
+
+function FilmRow(props){
+
+        const year = new Date(props.film.release_date);
+
+        return ( 
+            <div onClick={() => props.handleDetailsClick(props.film)} className="film-row">
+                <FilmPoster poster={props.film.poster_path} />
+                    <div className="film-summary">
+                        <h1>{props.film.title}</h1>
+                        <p>{year.getFullYear()}</p>
+                    </div>
+                    <div>
+                         <Fave onFaveToggle={props.onFaveToggle} isFave={props.isFave}/>
+                    </div>
+             </div>
+         );  
+}
+
+export default FilmRow;
diff --git a/src/index.css b/src/index.css
@@ -36,6 +36,7 @@ figure {
 
 .film-list {
   position: relative;
+
   flex: 1 0 33.333333%;
   height: 100%;
   padding: 3.6em 0 0;
@@ -89,17 +90,21 @@ figure {
 .film-summary {
   padding: 0.5em 1.5em;
   background-color: white;
+
 }
 
 .film-summary > h1 {
   margin-bottom: 0.35em;
+  text-align: center;
 }
 
 .film-summary > p {
   font-size: 1.6em;
   line-height: 1.35;
   font-weight: 200;
   margin-top: 0;
+  text-align: center;
+
 }
 
 .section-title {