Moved styles from serachRequest to a seapate file in ./styles

client/app/components/SearchRequest.jsx

@@ -2,8 +2,10 @@ import React from 'react';
 
 import MovieObject from './MovieObject.jsx';
 
-// TODO add option for searching multi, movies or tv shows
+// StyleComponents
+import searchStyle from './styles/searchRequestStyle.jsx';
 
+// TODO add option for searching multi, movies or tv shows
 class SearchRequest extends React.Component {
   constructor(props){
     super(props)
@@ -17,15 +19,20 @@ class SearchRequest extends React.Component {
     }
 
     this.URLs = {
-      request: 'https://apollo.kevinmidboe.com/api/v1/plex/request?page='+this.props.page+'&query=',
+      // request: 'https://apollo.kevinmidboe.com/api/v1/plex/request?page='+this.state.page+'&query=',
-      sendRequest: 'https://apollo.kevinmidboe.com/api/v1/plex/request?query='
+      request: 'http://localhost:31459/api/v1/plex/request?page='+this.state.page+'&query=',
+      // upcoming: 'https://apollo.kevinmidboe.com/api/v1/tmdb/upcoming',
+      upcoming: 'http://localhost:31459/api/v1/tmdb/upcoming',
+      // sendRequest: 'https://apollo.kevinmidboe.com/api/v1/plex/request?query='
+      sendRequest: 'http://localhost:31459/api/v1/plex/request?query='
     }
   }
 
 
   componentDidMount(){
     var that = this;
-    this.setState({responseMovieList: null})
+    // this.setState({responseMovieList: null})
+    this.getUpcoming();
   }
   
   // Handles all errors of the response of a fetch call
@@ -36,6 +43,28 @@ class SearchRequest extends React.Component {
     return response;
   }
 
+  getUpcoming() {
+    let url = this.URLs.upcoming + '?page=' + this.state.page;
+
+    fetch(url)
+      .then(response => this.handleErrors(response))
+      .then(response => response.json())
+      .then(data => {
+        console.log(data.total_pages)
+        if (data.results.length > 0) {
+          this.setState({
+            responseMovieList: data.results.map(item => this.createMovieObjects(item))
+          })
+        }
+      })
+      .catch(error => {
+        console.log(error);
+        this.setState({
+          reposemovieList: <h1>Not found (upcoming)</h1>
+        })
+      })
+  }
+
   fetchQuery() {
     let url = this.URLs.request + this.state.searchQuery
     if (this.state.tvshowFilter) {
@@ -102,163 +131,45 @@ class SearchRequest extends React.Component {
     }
   }
 
+  pageBackwards() {
+    if (this.state.page > 1) {
+      console.log('backwards');
+      this.state.page--;
+      this.getUpcoming();
+    }
+    console.log(this.state.page)
+  }
+
+  pageForwards() {
+    this.state.page++;
+    this.getUpcoming();
+    console.log('forwards');
+    console.log(this.state.page)
+  }
+
 
   render(){
-
-    var body = {
-      fontFamily: "'Open Sans', sans-serif",
-      backgroundColor: '#f7f7f7',
-      margin: 0,
-      padding: 0,
-      minHeight: '100%',
-      position: 'relative'
-    }
-
-    var backgroundHeader = {
-      width: '100%',
-      minHeight: '400px',
-      backgroundColor: '#011c23',
-      zIndex: 1,
-      position: 'absolute'
-    }
-
-
-    var requestWrapper = {
-      top: '300px',
-      width: '90%',
-      maxWidth: '1200px',
-      margin: 'auto',
-      paddingTop: '20px',
-      backgroundColor: 'white',
-      position: 'relative',
-      zIndex: '10',
-      boxShadow: '0 2px 10px grey'
-    }
-
-    var pageTitle = {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }
-
-    var pageTitleSpan = {
-      color: 'white',
-      fontSize: '3em',
-      marginTop: '4vh',
-      marginBottom: '6vh'
-    }
-
-    var box = {
-      width: '90%',
-      height: '50px',
-      maxWidth: '1200px',
-      margin: '0 auto'
-    }
-
-    var container = {
-      verticalAlign: 'middle',
-      whiteSpace: 'nowrap',
-      position: 'relative',
-      display: 'flex',
-      justifyContent: 'center'
-    }
-
-    var searchIcon = {
-      position: 'absolute',
-      marginLeft: '17px',
-      marginTop: '17px',
-      zIndex: '1',
-      color: '#4f5b66'
-    }
-
-    var searchBar = {
-      width: '60%',
-      minWidth: '120px',
-      height: '50px',
-      background: '#ffffff',
-      border: 'none',
-      fontSize: '10pt',
-      float: 'left',
-      color: '#63717f',
-      paddingLeft: '45px',
-      borderRadius: '5px',
-      marginRight: '15px'
-    }
-
-    var searchFilter = {
-      color: 'white',
-      fontSize: '1em',
-      paddingTop: '12px',
-      marginBottom: '12px',
-      marginLeft: '10px',
-      cursor: 'pointer'
-    }
-
-    var hvrUnderlineFromCenter = {
-      color: 'white',
-      fontSize: '1em',
-      paddingTop: '12px',
-      marginBottom: '12px',
-      marginLeft: '10px',
-      cursor: 'pointer',
-      display: 'inline-block',
-      verticalAlign: 'middle',
-      WebkitTransform: 'perspective(1px) translateZ(0)',
-      transform: 'perspective(1px) translateZ(0)',
-      boxShadow: '0 0 1px transparent',
-      position: 'relative',
-      overflow: 'hidden',
-      ':before': {
-          content: "",
-          position: 'absolute',
-          zIndex: '-1',
-          left: '50%',
-          right: '50%',
-          bottom: '0',
-          background: '#00d17c',
-          height: '2px',
-          WebkitTransitionProperty: 'left, right',
-          transitionProperty: 'left, right',
-          WebkitTransitionDuration: '0.3s',
-          transitionDuration: '0.3s',
-          WebkitTransitionTimingFunction: 'ease-out',
-          transitionTimingFunction: 'ease-out'
-      },
-      ':hover:before': {
-        left: 0,
-        right: 0
-      },
-      'focus:before': {
-        left: 0,
-        right: 0
-      },
-      'active:before': {
-        left: 0,
-        right: 0
-      }
-    }
-
     return(
-     <div style={body}>
+     <div style={searchStyle.body}>
-          <div className='backgroundHeader' style={backgroundHeader}>
+          <div className='backgroundHeader' style={searchStyle.backgroundHeader}>
-            <div className='pageTitle' style={pageTitle}>
+            <div className='pageTitle' style={searchStyle.pageTitle}>
-              <span style={pageTitleSpan}>Request new movies or tv shows</span>
+              <span style={searchStyle.pageTitleSpan}>Request new movies or tv shows</span>
             </div>
 
-            <div className='box' style={box}>
+            <div className='box' style={searchStyle.box}>
-              <div style={container}>
+              <div style={searchStyle.container}>
-                <span style={searchIcon}><i className="fa fa-search"></i></span>
+                <span style={searchStyle.searchIcon}><i className="fa fa-search"></i></span>
 
-                <input style={searchBar} type="text" id="search" placeholder="Search for new content..." 
+                <input style={searchStyle.searchBar} type="text" id="search" placeholder="Search for new content..." 
                   onKeyPress={(event) => this._handleQueryKeyPress(event)}
                   onChange={event => this.updateQueryState(event)}
                   value={this.state.searchQuery}/>
 
-                <span style={searchFilter}
+                <span style={searchStyle.searchFilter}
                   className="search_category hvrUnderlineFromCenter" 
                   onClick={() => {this.toggleFilter('movies')}}
                   id="category_active">Movies</span>
-                <span style={searchFilter} 
+                <span style={searchStyle.searchFilter} 
                   className="search_category hvrUnderlineFromCenter" 
                   onClick={() => {this.toggleFilter('tvshows')}}
                   id="category_inactive">TV Shows</span>
@@ -266,9 +177,13 @@ class SearchRequest extends React.Component {
             </div>
           </div>
 
-          <div id='requestMovieList' ref='requestMovieList' style={requestWrapper}>
+          <div id='requestMovieList' ref='requestMovieList' style={searchStyle.requestWrapper}>
             {this.state.responseMovieList}     
           </div>
+          <div>
+            <button onClick={() => {this.pageBackwards()}}>Back</button>
+            <button onClick={() => {this.pageForwards()}}>Forward</button>
+          </div>
       </div>
     )
   }

client/app/components/styles/searchRequestStyle.jsx

@@ -0,0 +1,134 @@
+
+export default {
+	body: {
+      fontFamily: "'Open Sans', sans-serif",
+      backgroundColor: '#f7f7f7',
+      margin: 0,
+      padding: 0,
+      minHeight: '100%',
+      position: 'relative'
+    },
+
+    backgroundHeader: {
+      width: '100%',
+      minHeight: '400px',
+      backgroundColor: '#011c23',
+      zIndex: 1,
+      position: 'absolute'
+    },
+
+    requestWrapper: {
+      top: '300px',
+      width: '90%',
+      maxWidth: '1200px',
+      margin: 'auto',
+      paddingTop: '20px',
+      backgroundColor: 'white',
+      position: 'relative',
+      zIndex: '10',
+      boxShadow: '0 2px 10px grey'
+    },
+
+    pageTitle: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+
+    pageTitleSpan: {
+      color: 'white',
+      fontSize: '3em',
+      marginTop: '4vh',
+      marginBottom: '6vh'
+    },
+
+    box: {
+      width: '90%',
+      height: '50px',
+      maxWidth: '1200px',
+      margin: '0 auto'
+    },
+
+    container: {
+      verticalAlign: 'middle',
+      whiteSpace: 'nowrap',
+      position: 'relative',
+      display: 'flex',
+      justifyContent: 'center'
+    },
+
+    searchIcon: {
+      position: 'absolute',
+      marginLeft: '17px',
+      marginTop: '17px',
+      zIndex: '1',
+      color: '#4f5b66'
+    },
+
+    searchBar: {
+      width: '60%',
+      minWidth: '120px',
+      height: '50px',
+      background: '#ffffff',
+      border: 'none',
+      fontSize: '10pt',
+      float: 'left',
+      color: '#63717f',
+      paddingLeft: '45px',
+      borderRadius: '5px',
+      marginRight: '15px'
+    },
+
+    searchFilter: {
+      color: 'white',
+      fontSize: '1em',
+      paddingTop: '12px',
+      marginBottom: '12px',
+      marginLeft: '10px',
+      cursor: 'pointer'
+    },
+
+    hvrUnderlineFromCenter: {
+      color: 'white',
+      fontSize: '1em',
+      paddingTop: '12px',
+      marginBottom: '12px',
+      marginLeft: '10px',
+      cursor: 'pointer',
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      WebkitTransform: 'perspective(1px) translateZ(0)',
+      transform: 'perspective(1px) translateZ(0)',
+      boxShadow: '0 0 1px transparent',
+      position: 'relative',
+      overflow: 'hidden',
+      ':before': {
+          content: "",
+          position: 'absolute',
+          zIndex: '-1',
+          left: '50%',
+          right: '50%',
+          bottom: '0',
+          background: '#00d17c',
+          height: '2px',
+          WebkitTransitionProperty: 'left, right',
+          transitionProperty: 'left, right',
+          WebkitTransitionDuration: '0.3s',
+          transitionDuration: '0.3s',
+          WebkitTransitionTimingFunction: 'ease-out',
+          transitionTimingFunction: 'ease-out'
+      },
+      ':hover:before': {
+        left: 0,
+        right: 0
+      },
+      'focus:before': {
+        left: 0,
+        right: 0
+      },
+      'active:before': {
+        left: 0,
+        right: 0
+      }
+    }
+}