Moved styles from serachRequest to a seapate file in ./styles
This commit is contained in:
@@ -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=',
|
||||
sendRequest: 'https://apollo.kevinmidboe.com/api/v1/plex/request?query='
|
||||
// request: 'https://apollo.kevinmidboe.com/api/v1/plex/request?page='+this.state.page+'&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 className='backgroundHeader' style={backgroundHeader}>
|
||||
<div className='pageTitle' style={pageTitle}>
|
||||
<span style={pageTitleSpan}>Request new movies or tv shows</span>
|
||||
<div style={searchStyle.body}>
|
||||
<div className='backgroundHeader' style={searchStyle.backgroundHeader}>
|
||||
<div className='pageTitle' style={searchStyle.pageTitle}>
|
||||
<span style={searchStyle.pageTitleSpan}>Request new movies or tv shows</span>
|
||||
</div>
|
||||
|
||||
<div className='box' style={box}>
|
||||
<div style={container}>
|
||||
<span style={searchIcon}><i className="fa fa-search"></i></span>
|
||||
<div className='box' style={searchStyle.box}>
|
||||
<div style={searchStyle.container}>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
134
client/app/components/styles/searchRequestStyle.jsx
Normal file
134
client/app/components/styles/searchRequestStyle.jsx
Normal file
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user