Merge pull request #8 from krismosk/KK/RefiningSearch

Kk/refining search

src/components/Movie.css

@@ -0,0 +1,45 @@
+.MovieCard {
+  display: flex;
+  border: solid 2px black;
+  margin: 5px;
+  border-radius: 10px;
+}
+
+.searchIcon {
+  width: 150px;
+  padding: 10px;
+}
+
+.searchMovieTitle {
+  text-align: left;
+}
+
+.searchDate {
+  text-align: left;
+
+}
+
+.searchOverview {
+  text-align: left;
+  font-style: italic;
+  font-size: .9em;
+  margin-right: 10px;
+
+}
+
+.button {
+  float: right;
+  width: 100px;
+  background: #0099FF;
+  border: 1px solid black;
+  padding: 10px;
+  font-weight: bold;
+  font-size: 1.1em;
+  color: white;
+  border-radius: 10px;
+  margin: 10px;
+}
+
+.inventory {
+  text-align: left;
+}

src/components/Movie.js

@@ -1,23 +1,29 @@
 import React, { Component } from 'react';
+import './Movie.css';
 import PropTypes from 'prop-types';
 
 const Movie = (props) => {
-
-  return(
-    <section>
-      <img src={props.image} alt={`${props.title}`}/>
-      <p> {props.title} </p>
-      <p> {props.overview} </p>
-      <p> {props.releaseDate} </p>
-      <p> {props.inventory} </p>
-
-
 
+  return(
+    <section className='MovieCard'>
+      <div>
+      <img src={props.image} className='searchIcon' alt={`${props.title}`}/>
+      </div>
+      <div>
       <button 
         type='button'
+        className='button'
         onClick={() => {props.findMovie(props.id)}}
       >
       Select</button>
+      <h3 className='searchMovieTitle'> {props.title} </h3>
+      <p className='searchDate'> {props.dateFormatting(props.releaseDate)} </p>
+      <p className='searchOverview'> {props.overview} </p>
+      <p className='inventory'> Inventory Available: {props.inventory} </p>
+      </div>
+
+
+
     </section>
   );
 };

src/components/RentalLibrary.js

@@ -25,6 +25,15 @@ class RentalLibrary extends Component {
     });
   }
 
+  formatDate = (date) => {
+    const monthNames = [ "January", "February", "March", "April", "May", "June",
+      "July", "August", "September", "October", "November", "December" ];
+
+    let newDate = new Date(date);
+    let formattedDate = monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear();
+    return formattedDate;
+  }
+
   findMovie = (movieId) => {
     const selectedMovie = this.state.movies.find((movie) => {
       return movie.id === movieId;
@@ -44,6 +53,7 @@ class RentalLibrary extends Component {
         inventory={1}
         externalId={movie.external_id}
         findMovie={this.findMovie}
+        dateFormatting={this.formatDate}
       />
     });