sei-relativity · almarrim · Oct 31, 2019 · Nov 2, 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.2.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
@@ -1,16 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <!--
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+  <meta name="theme-color" content="#000000" />
+  <!--
       manifest.json provides metadata used when your web app is installed on a
       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="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
       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.
@@ -19,12 +21,13 @@
       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`.
     -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+  <title>React App</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -34,5 +37,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</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 FilmDetails from './FilmDetails.js';
+import FilmListing from './FilmListing.js';
+import TMDB from './TMDB.js';
+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: {},
+    };
+    this.handleFaveToggle = this.handleFaveToggle.bind(this);
+  }
+  handleFaveToggle = (film) => {
+    const faves = this.state.faves.slice();
+    const filmIndex = faves.indexOf(film)
+    console.log(filmIndex)
+    if (filmIndex >= 0) {
+      faves.splice(filmIndex, 1)
+      console.log("Removing " + film.title + " from faves...")
+    }
+    else {
+      faves.push(film);
+      console.log("Adding " + film.title + " to faves... ")
+    }
+    this.setState({ faves });
+  }
+  handleDetailsClick = (film) => {
+    console.log("Fetching details for " + film.title);
+    const url = `https://api.themoviedb.org/3/movie/${film.id}?api_key=${TMDB.api_key}&append_to_response=videos,images&language=en`
+    // 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 => {
+      console.log(response) // take a look at what you get back!
+      console.log(`Fetching details for ${film.title}`);
+      console.log(response.data)
+      this.setState({ current: response.data })
+    })
+  }
+
+  render() {
+    return (
+      <div className="App" >
+        <div className="film-library">
+          <FilmListing handleDetailsClick={this.handleDetailsClick} faves={this.state.faves} films={TMDB.films} onFaveToggle={this.handleFaveToggle} />
+          <FilmDetails films={TMDB.films} film={this.state.current} />
+        </div>
+      </div>
+    );
+  }
 }
 
-export default App;
+export default App;
diff --git a/src/Fave.js b/src/Fave.js
@@ -0,0 +1,29 @@
+import React, { Component } from 'react'
+
+class Fave extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            // isFave: false,
+
+        };
+    }
+
+    handleClick = (e) => {
+        console.log("handling Fave click!");
+        e.stopPropagation();
+        this.props.onFaveToggle()
+    };
+
+    render() {
+        const isFave = (this.props.isFave) ? 'remove_from_queue' : 'add_to_queue'
+        console.log("isFave", isFave, this.props.isFave)
+        return (
+            <div className={"film-row-fave " + isFave} onClick={this.handleClick}>
+                <p className="material-icons">{(this.props.isFave) ? "remove_from_queue" : "add_to_queue"}</p>
+            </div>
+        );
+    }
+}
+
+export default Fave;
diff --git a/src/FilmDetails.js b/src/FilmDetails.js
@@ -0,0 +1,37 @@
+import React from 'react'
+
+const FilmDetails = props => {
+    const backdropUrl = `https://image.tmdb.org/t/p/w1280/${props.film.backdrop_path}`
+    const posterUrl = `https://image.tmdb.org/t/p/w780/${props.film.poster_path}`
+    let details = (<div className="film-detail">
+        <p>
+            <i className="material-icons">subscriptions</i>
+            <span>No film selected</span>
+        </p>
+    </div>)
+    if (props.film.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>)
+    }
+    return (
+        <div className="film-details">
+            <h1 className="section-title">DETAILS</h1>
+            {details}
+        </div>
+    );
+}
+
+export default FilmDetails;
diff --git a/src/FilmListing.js b/src/FilmListing.js
@@ -0,0 +1,54 @@
+import React, { Component } from 'react'
+import FilmRow from './FilmRow';
+// import FilmPoster from './FilmPoster';
+// import FilmPoster from './FilmPoster';
+
+class FilmListing extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            filter: 'all',
+        };
+    }
+    handleFilterClick = (filter) => {
+        console.log('Setting filter to ' + filter);
+        this.setState({
+            filter: filter,
+        });
+    }
+
+    render() {
+        // console.log(this.props.faves.includes(this.props.films[0]), this.props.films)
+        const allFilms = this.props.films.map((film, index) => {
+            return (
+                <FilmRow handleDetailsClick={() => this.props.handleDetailsClick(film)} isFave={(this.props.faves.includes(film) <= 0) ? false : true} onFaveToggle={() => this.props.onFaveToggle(film)} title={film.title} poster_path={film.poster_path} key={index} year={(new Date(film.release_date)).getFullYear()} />
+
+            )
+        })
+        const allFaves = this.props.faves.map((film, index) => {
+            return (
+                <FilmRow handleDetailsClick={() => this.props.handleDetailsClick(film.title)} isFave={(this.props.faves.includes(film) <= 0) ? false : true} onFaveToggle={() => this.props.onFaveToggle(film)} title={film.title} poster_path={film.poster_path} key={index} year={(new Date(film.release_date)).getFullYear()} />
+
+            )
+        })
+        return (
+            <div className="film-list">
+                <h1 className="section-title">FILMS</h1>
+                <div className="film-list-filters">
+                    <div className={"film-list-filter " + (this.state.filter === "all" ? "is-active" : "")} onClick={() => this.handleFilterClick('all')}>
+                        ALL
+            <span className="section-count">{this.props.films.length} </span>
+                    </div>
+                    <div className={"film-list-filter " + (this.state.filter === "faves" ? "is-active" : "")} onClick={() => this.handleFilterClick('faves')}>
+                        FAVES
+            <span className="section-count">{this.props.faves.length}</span>
+                    </div>
+                </div>
+
+                {(this.state.filter === 'all') ? allFilms : allFaves}
+            </div>
+        );
+    }
+}
+
+export default FilmListing;
diff --git a/src/FilmPoster.js b/src/FilmPoster.js
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const FilmPoster = (props) => {
+    return (
+        <img src={"https://image.tmdb.org/t/p/w780/" + props.poster_path} alt="" />
+    );
+}
+
+export default FilmPoster;
diff --git a/src/FilmRow.js b/src/FilmRow.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import FilmPoster from './FilmPoster'
+import Fave from './Fave'
+
+const FilmRow = props => {
+
+    return (<div className="film-row" onClick={() => props.handleDetailsClick(props.title)}>
+        <FilmPoster poster_path={props.poster_path} />
+        <center className="film-summary">
+            <h1>{props.title}</h1>
+            <p>{props.year}</p>
+            <Fave isFave={props.isFave} onFaveToggle={props.onFaveToggle} />
+        </center>
+    </div>);
+}
+
+export default FilmRow;
diff --git a/src/TMDB.js b/src/TMDB.js
@@ -1,5 +1,8 @@
+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,