Still a bit messy, but removed unsued sections and redid the naming schema for css items.

client/app/components/MovieObject.jsx

@@ -3,12 +3,11 @@ import React from 'react';
 import Notifications, {notify} from 'react-notify-toast';
 
 // StyleComponents
-import movieStyle from './styles/movieObjectStyle.jsx';
+import searchResultCSS from './styles/searchResult.jsx';
+import buttonsCSS from './styles/buttons.jsx';
 
 var MediaQuery = require('react-responsive');
 
-import RequestButton from './buttons/request_button.jsx';
-
 import { fetchJSON } from './http.jsx';
 
 import Interactive from 'react-interactive';
@@ -20,7 +19,6 @@ class MovieObject {
         this.title = object.title;
         this.year = object.year;
         this.type = object.type;
-		// Check if object.poster != undefined
         this.rating = object.rating;
         this.poster = object.poster;
         this.background = object.background;
@@ -33,29 +31,20 @@ class MovieObject {
     }
 
     requestMovie() {
-		// fetch('http://localhost:31459/api/v1/plex/request/' + this.id + '?type='+this.type, {
-		// fetch('https://apollo.kevinmidboe.com/api/v1/plex/request/' + this.id + '?type='+this.type, {
-		//   method: 'POST'
-		// });
         fetchJSON('https://apollo.kevinmidboe.com/api/v1/plex/request/' + this.id + '?type='+this.type, 'POST')
         .then((response) => {
             console.log(response);
+            notify.show(this.title + ' requested!', 'success', 3000);
+        })
+        .catch((e) => {
+            console.error('Request movie fetch went wrong: '+ e);
         })
 
-		notify.show(this.title + ' requested!', 'success', 3000);
-	}
-
-	invertButtonColors(event) {
-		const event_type = event.type;
-		if (event_type)
-			console.log('test')
-		console.log(event.type)
     }
 
     getElement(index) {
       const element_key = index + this.id;
 
-		// TODO set the poster image async by updating the dom after this is returned
       if (this.poster == null || this.poster == undefined) {
          var posterPath = 'https://openclipart.org/image/2400px/svg_to_png/211479/Simple-Image-Not-Found-Icon.png'
       } else {
@@ -67,21 +56,20 @@ class MovieObject {
       if (this.matchedInPlex) {
          foundInPlex = <Interactive 
             as='button'
-				hover={movieStyle.requestButton_hover}
-				focus={movieStyle.requestButton_hover}
             onClick={() => {this.requestExisting(this)}} 
-				style={movieStyle.requestButton}>
+            style={buttonsCSS.submit}
+            focus={buttonsCSS.submit_hover}
+            hover={buttonsCSS.submit_hover}>
 
             <span>Request Anyway</span>
          </Interactive>;
       } else {
          foundInPlex = <Interactive 
             as='button'
-				hover={movieStyle.requestButton_hover}
-				focus={movieStyle.requestButton_hover}
             onClick={() => {this.requestMovie()}} 
-				onMouseOver={() => {this.invertButtonColors(event)}}
+            style={buttonsCSS.submit}
-				style={movieStyle.requestButton}>
+            focus={buttonsCSS.submit_hover}
+            hover={buttonsCSS.submit_hover}>
 
             <span>&#x0002B; Request</span>
          </Interactive>;
@@ -92,63 +80,56 @@ class MovieObject {
       else if (this.type === 'show')  
          var themoviedbLink = 'https://www.themoviedb.org/tv/' + this.id
 
-		
+      // TODO go away from using mediaQuery, and create custom resizer
-
-		// TODO add request button class
       return (
          <div key={element_key}>
          <Notifications />
-			<div style={movieStyle.resultItem} key={this.id}>
-				<MediaQuery minWidth={600}>
-				<div style={movieStyle.resultPoster}>
-					<img style={movieStyle.resultPosterImg} id='poster' src={posterPath}></img>
-				</div>
-				</MediaQuery>
-				<div>
-					<MediaQuery minWidth={600}>
-						<span style={movieStyle.resultTitleLarge}>{this.title}</span>
-						<br></br>
-						<span style={movieStyle.yearRatingLarge}>Released: { this.year } | Rating: {this.rating}</span>
-						<br></br>
-						<span style={movieStyle.summary}>{this.summary}</span>
-						<br></br>
-					</MediaQuery>
          
+         <div style={searchResultCSS.container} key={this.id}>
+            <MediaQuery minWidth={600}>
+               <div style={searchResultCSS.posterContainer}>
+                  <img style={searchResultCSS.posterImage} id='poster' src={posterPath}></img>
+               </div>
+               <span style={searchResultCSS.title_large}>{this.title}</span>
+               <br></br>
+               <span style={searchResultCSS.stats_large}>Released: { this.year } | Rating: {this.rating}</span>
+               <br></br>
+               <span style={searchResultCSS.summary}>{this.summary}</span>
+               <br></br>
+            </MediaQuery>
 
             <MediaQuery maxWidth={600}>
-						<img src={ backgroundPath } style={movieStyle.background}></img>
+               <img src={ backgroundPath } style={searchResultCSS.backgroundImage}></img>
-						<span style={movieStyle.resultTitleSmall}>{this.title}</span>
+               <span style={searchResultCSS.title_small}>{this.title}</span>
                <br></br>
-						<span style={movieStyle.yearRatingSmall}>Released: {this.year} | Rating: {this.rating}</span>
+               <span style={searchResultCSS.stats_small}>Released: {this.year} | Rating: {this.rating}</span>
             </MediaQuery>
 
-
+            <div style={searchResultCSS.buttons}>
-					<span className='imdbLogo'>				
-
-					</span>
-
-					<div style={movieStyle.buttons}>
                {foundInPlex}
+               
                <a href={themoviedbLink}>
                   <Interactive 
                      as='button'
-								hover={movieStyle.tmdbButton_hover}
+                     hover={buttonsCSS.info_hover}
-								focus={movieStyle.tmdbButton_hover}
+                     focus={buttonsCSS.info_hover}
-								style={movieStyle.tmdbButton}>
+                     style={buttonsCSS.info}>
 
                      <span>Info</span>
                   </Interactive>
                </a>
             </div>
          </div>
-			</div>
+         
          <MediaQuery maxWidth={600}>
-				<br></br>
+             <br />
          </MediaQuery>
-			<div style={movieStyle.row}>
+         
-				<div style={movieStyle.itemDivider}></div>
+         <div style={searchResultCSS.dividerRow}>
+             <div style={searchResultCSS.itemDivider}></div>
          </div>
-		</div>)
+         </div>
+      )
 
     }
 }