Display single movie

.eslintcache

@@ -1 +1 @@
-[{"/Users/demaceovincent/rantom/src/index.js":"1","/Users/demaceovincent/rantom/src/App.js":"2","/Users/demaceovincent/rantom/src/Catalogue.js":"3","/Users/demaceovincent/rantom/src/mockData.js":"4","/Users/demaceovincent/rantom/src/MovieCard.js":"5"},{"size":198,"mtime":1606864998007,"results":"6","hashOfConfig":"7"},{"size":491,"mtime":1606867876048,"results":"8","hashOfConfig":"7"},{"size":460,"mtime":1606869592955,"results":"9","hashOfConfig":"7"},{"size":6976,"mtime":1606866733423,"results":"10","hashOfConfig":"7"},{"size":262,"mtime":1606870041064,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"dy5e4r",{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/demaceovincent/rantom/src/index.js",[],"/Users/demaceovincent/rantom/src/App.js",[],"/Users/demaceovincent/rantom/src/Catalogue.js",[],"/Users/demaceovincent/rantom/src/mockData.js",[],"/Users/demaceovincent/rantom/src/MovieCard.js",[]]
+[{"/Users/demaceovincent/rantom/src/index.js":"1","/Users/demaceovincent/rantom/src/App.js":"2","/Users/demaceovincent/rantom/src/mockData.js":"3","/Users/demaceovincent/rantom/src/Components/Catalogue/Catalogue.js":"4","/Users/demaceovincent/rantom/src/Components/MovieCard/MovieCard.js":"5","/Users/demaceovincent/rantom/src/Components/SelectedMovie/SelectedMovie.js":"6","/Users/demaceovincent/rantom/src/Components/NavBar/NavBar.js":"7","/Users/demaceovincent/rantom/src/mockMovie.js":"8"},{"size":198,"mtime":1606864998007,"results":"9","hashOfConfig":"10"},{"size":1347,"mtime":1607035648950,"results":"11","hashOfConfig":"10"},{"size":6976,"mtime":1606952951770,"results":"12","hashOfConfig":"10"},{"size":601,"mtime":1607036459347,"results":"13","hashOfConfig":"10"},{"size":334,"mtime":1607034302631,"results":"14","hashOfConfig":"10"},{"size":843,"mtime":1607036765134,"results":"15","hashOfConfig":"10"},{"size":246,"mtime":1607035750849,"results":"16","hashOfConfig":"10"},{"size":630,"mtime":1607036058744,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},"dy5e4r",{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"29","messages":"30","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/demaceovincent/rantom/src/index.js",[],["35","36"],"/Users/demaceovincent/rantom/src/App.js",[],"/Users/demaceovincent/rantom/src/mockData.js",[],"/Users/demaceovincent/rantom/src/Components/Catalogue/Catalogue.js",[],"/Users/demaceovincent/rantom/src/Components/MovieCard/MovieCard.js",[],"/Users/demaceovincent/rantom/src/Components/SelectedMovie/SelectedMovie.js",["37"],"/Users/demaceovincent/rantom/src/Components/NavBar/NavBar.js",[],"/Users/demaceovincent/rantom/src/mockMovie.js",[],{"ruleId":"38","replacedBy":"39"},{"ruleId":"40","replacedBy":"41"},{"ruleId":"42","severity":1,"message":"43","line":12,"column":9,"nodeType":"44","endLine":12,"endColumn":52},"no-native-reassign",["45"],"no-negated-in-lhs",["46"],"jsx-a11y/alt-text","img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.","JSXOpeningElement","no-global-assign","no-unsafe-negation"]

src/App.js

@@ -1,20 +1,51 @@
 import React, { Component } from 'react'
-import Catalogue from './Catalogue'
+import NavBar from './Components/NavBar/NavBar'
+import SelectedMovie from './Components/SelectedMovie/SelectedMovie'
+import Catalogue from './Components/Catalogue/Catalogue'
 import movieData from './mockData'
 import './App.css';
 
 class App extends Component {
     constructor(){
        super()
        this.state = { 
-           movies: movieData.movies
+           movies: movieData.movies,
+           selectedMovie: 0
         }
     }
+
+    returnToHome = event => {
+      this.setState({
+        selectedMovie: 0
+      })
+    }
+
+    handleClick = event => {
+        this.setState({ 
+            selectedMovie: event.target
+        })
+    }
+
     render() {
         return (
           <React.Fragment>
-            <h1>HELLOOOOOO WORLD</h1>
-            <Catalogue movies={this.state.movies} />
+            <NavBar 
+            returnToHome={this.returnToHome}
+            />
+            {!this.state.selectedMovie && (
+              <Catalogue
+                movies={this.state.movies}
+                handleClick={this.handleClick}
+              />
+            )}
+            {this.state.selectedMovie && (
+            <SelectedMovie 
+            movieID={this.state.selectedMovie.id}
+            poster={this.state.selectedMovie.src}
+            title={this.state.selectedMovie.alt}
+            />
+            )}
+            {console.log(this.state.selectedMovie)}
           </React.Fragment>
         );
     }

src/Catalogue.js → src/Components/Catalogue/Catalogue.js

@@ -1,15 +1,18 @@
 import React from 'react'
-import MovieCard from './MovieCard'
+import MovieCard from '../MovieCard/MovieCard'
 import './Catalogue.css'
 
 function Catalogue(props){
     const movieCards = props.movies.map(movie => {
         return(
         <MovieCard 
+        // onClick={event => props.handleClick(event)}
         poster={movie.poster_path} 
         title={movie.title}
+        // style={"width"="200px"}
         id={movie.id}
         key={movie.id}
+        handleClick={props.handleClick}
         />
         )
     })

src/Components/Catalogue/Catalogue.test.js

@@ -0,0 +1,4 @@
+//it should display movies
+
+//it should display all movies
+

src/Components/MovieCard/MovieCard.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import './MovieCard.css'
+
+function MovieCard(props) {
+    return (
+      <section className="card" onClick={props.handleClick}>
+        <img src={props.poster} alt={props.title} id={props.id} onClick={props.handleClick} />
+        <h3>{props.title}</h3>
+      </section>
+    );
+
+}
+
+
+export default MovieCard;

src/Components/MovieCard/MovieCard.test.js

@@ -0,0 +1,5 @@
+//it should display a movie poster
+
+//it should display a movie title
+
+// should be able to click on a movie card

src/Components/NavBar/NavBar.js

@@ -0,0 +1,14 @@
+import React from "react";
+import "./NavBar.css";
+
+function NavBar(props) {
+    return (
+        <button 
+        className="nav-bar" 
+        onClick={props.returnToHome}>
+            imma DINGUS
+        </button>
+    )
+}
+
+export default NavBar;

src/Components/SelectedMovie/SelectedMovie.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import './SelectedMovie.css'
+import mockMovie from '../../mockMovie.js'
+
+function SelectedMovie(props) {
+    return (
+      <section className="selectedMovie">
+        <h1>{props.title}</h1>
+        <img src={props.poster} alt={props.title} />
+        <h1>{mockMovie.movie.title}</h1>
+        <h2>{mockMovie.movie.tagline}</h2>
+        <img src={mockMovie.movie.backdrop_path} />
+        <p>Overview: {mockMovie.movie.overview}</p>
+        <p>Release Date: {mockMovie.movie.release_date}</p>
+        <p>Rating: {mockMovie.movie.average_rating}</p>
+        <p>Genre: {mockMovie.movie.genres[0].name}</p>
+        <p>Budget: ${mockMovie.movie.budget}</p>
+        <p>Revenue: ${mockMovie.movie.revenue}</p>
+        <p>Duration: {mockMovie.movie.runtime} minutes</p>
+      </section>
+    );
+}
+
+export default SelectedMovie

src/mockMovie.js

@@ -0,0 +1,17 @@
+const mockMovie = {
+    "movie": {
+    id: 1, 
+    title: "Fake Movie Title", 
+    poster_path: "https://image.tmdb.org/t/p/original//7G2VvG1lU8q758uOqU6z2Ds0qpA.jpg", 
+    backdrop_path: "https://image.tmdb.org/t/p/original//oazPqs1z78LcIOFslbKtJLGlueo.jpg", 
+    release_date: "2019-12-04", 
+    overview: "Some overview that is full of buzzwords to attempt to entice you to watch this movie! Explosions! Drama! True love! Robots! A cute dog!", 
+    average_rating: 6, 
+    genres: [{id: 18, name:"Drama"}], 
+    budget:63000000, revenue:100853753, 
+    runtime:139, 
+    tagline: "It's a movie!" 
+}
+}
+
+export default mockMovie;