feat(*): get the movie from the url params

create 'Movie' presentational component which receives the movie from 'MovieDetails'

scripts/utils/utils.js

@@ -3,7 +3,7 @@ let { join, resolve } = require('path');
 const { SRC } = require('../constants');
 
 // root of the project
-const ROOT = resolve(__dirname, '../..'); // movie-search
+const ROOT = resolve(__dirname, '../..'); // Movie-search
 
 // templates folder path
 const TEMPLATES_PATH = resolve(ROOT, 'scripts/templates') // filia/scripts/templates

src/Main.jsx

@@ -27,7 +27,14 @@ class MainComponent extends React.Component {
               path="/movies"
               component={props => <Movies movies={movies} {...props} />}
             />
-            <Route path="/details/:id" component={MovieDetails} />
+            <Route
+              path="/details/:id"
+              component={props => {
+                const { match: { params } } = props;
+                const movie = movies.filter(({ id }) => +params.id === id)[0];
+                return <MovieDetails movie={movie} {...props} />;
+              }}
+            />
           </div>
           <Footer />
         </main>

src/components/Movie/Movie.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const Movie = ({ movieTitle, description }) => (
+  <div className="card" style={ {width: '20rem'} }>
+    <div className="card-body">
+      <h4 className="card-title">{ movieTitle }</h4>
+      <p className="card-text">{ description }</p>
+      <a href="#" className="btn btn-primary">Watch Trailer</a>
+    </div>
+  </div>
+);
+
+export default Movie;

src/containers/MovieDetails/MovieDetails.jsx

@@ -1,15 +1,18 @@
-import React from 'react';
+import React, { Component } from 'react';
 
-export default class MovieDetails extends React.Component {
+import Movie from '../../components/Movie/Movie';
+
+export default class MovieDetails extends Component {
 
   constructor() {
     super();
   }
 
   render() {
+    const { movie } = this.props;
     return (
-      <div>
-        <h2>Details</h2>
+      <div className="movieDetails d-flex flex-column align-items-center justify-content-center">
+        <Movie {...movie} />
       </div>
     );
   }

src/containers/MovieDetails/MovieDetails.scss

@@ -0,0 +1,3 @@
+.movieDetails {
+  height: 100vh;
+}

src/containers/Movies/Movies.spec.js

@@ -18,7 +18,7 @@ test('Movies snapshot test', () => {
 
 });
 
-test('Render MovieCard for each movie', () => {
+test('Render MovieCard for each Movie', () => {
 
   const component = shallow(<Movies />);
   expect(moviesData.length).toEqual(component.find(MovieCard).length);