ODWRTW/canape
2
2
Fork 0
Code Issues 3 Pull Requests 1 Releases Activity

Merge branch 'dev/fixWishlist' into 'master'

Browse Source 
MoarStability

See merge request !55
This commit is contained in:
Lucas 2017-04-19 12:40:01 +00:00
commit 7d308927e1
5 changed files with 125 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
src/public/js/components/list/explorerOptions.js
View File

@ -4,67 +4,57 @@ import { Form, FormGroup, FormControl, ControlLabel } from 'react-bootstrap'
export default class ExplorerOptions extends React.Component {
constructor(props) {
super(props);
let source = null;
let category = null;
let categories = [];
// Check if the options are present
if (Object.keys(this.props.options).length === 0) {
// Fetch options
this.props.fetchOptions();
// Explore
this.props.explore(this.props.params.source, this.props.params.category);
} else {
source = this.props.params.source;
category = this.props.params.category;
categories = this.props.options[this.props.params.source];
}
this.state = {
selectedSource: source,
selectedCategory: category,
categories: categories,
};
// Initial explore
if (this.propsValid(props)) {
props.explore(props.params.source, props.params.category);
}
this.handleSourceChange = this.handleSourceChange.bind(this);
this.handleCategoryChange = this.handleCategoryChange.bind(this);
}
handleSourceChange(event) {
let source = event.target.value;
let category = this.props.options[event.target.value][0];
this.setState({
selectedSource: source,
selectedCategory: category,
categories: this.props.options[source],
});
this.props.explore(source, category);
this.props.router.push(`/${this.props.type}/explore/${source}/${category}`);
}
handleCategoryChange(event) {
this.setState({ selectedCategory: event.target.value });
this.props.router.push(`/${this.props.type}/explore/${this.state.selectedSource}/${event.target.value}`);
let source = this.props.params.source;
let category = event.target.value;
this.props.explore(source, category);
this.props.router.push(`/${this.props.type}/explore/${source}/${category}`);
}
propsValid(props) {
if (!props.params
|| !props.params.source
|| !props.params.category
|| (props.params.source === "")
|| (props.params.category === "")) {
return false
}
return true;
}
componentWillUpdate(nextProps, nextState) {
// Check props
if (!nextProps.params.source
|| !nextProps.params.category
|| (nextProps.params.source === "")
|| (nextProps.params.category === "")) {
if (!this.propsValid(nextProps)) {
return
}
// No previous params
if (!this.props.params.source && !this.props.params.category) {
this.props.explore(this.props.params.source, this.props.params.category);
return;
}
// Explore params changed
if ((this.props.params.source !== nextProps.params.source)
|| (this.props.params.category !== nextProps.params.category)) {
this.props.explore(nextProps.params.source, nextProps.params.category);
}
// State must be updated
if ((this.state.selectedSource !== nextProps.params.source)
|| (this.state.selectedCategory !== nextProps.params.category)) {
this.setState({
selectedSource: nextProps.params.source,
selectedCategory: nextProps.params.category,
categories: nextProps.options[nextProps.params.source],
});
return;
}
}
prettyName(name) {
@ -84,11 +74,15 @@ export default class ExplorerOptions extends React.Component {
return null;
}
// State is not yet set
if (!this.state.selectedSource && !this.state.selectedCategory) {
return null;
// Invalid props
if (!this.propsValid(this.props)) {
return
}
let source = this.props.params.source;
let category = this.props.params.category;
let categories = this.props.options[this.props.params.source];
return (
<div className="row">
<div className="col-xs-12 col-md-12">
@ -101,7 +95,7 @@ export default class ExplorerOptions extends React.Component {
bsClass="form-control input-sm"
componentClass="select"
onChange={this.handleSourceChange}
value={this.state.selectedSource}
value={source}
>
{Object.keys(this.props.options).map(function(source) {
return (<option key={source} value={source}>{this.prettyName(source)}</option>)
@ -116,9 +110,9 @@ export default class ExplorerOptions extends React.Component {
bsClass="form-control input-sm"
componentClass="select"
onChange={this.handleCategoryChange}
value={this.state.selectedCategory}
value={category}
>
{this.state.categories.map(function(category) {
{categories.map(function(category) {
return (<option key={category} value={category}>{this.prettyName(category)}</option>)
}, this)}
</FormControl>

40
src/public/js/components/list/posters.js
View File

@ -7,6 +7,8 @@ import ListFilter from './filter'
import ExplorerOptions from './explorerOptions'
import ListPoster from './poster'
import Loader from '../loader/loader'
export default class ListPosters extends React.Component {
constructor(props) {
super(props);
@ -78,30 +80,52 @@ export default class ListPosters extends React.Component {
options={this.props.exploreOptions}
explore={this.props.explore}
/>
{elmts.length === 0 &&
<Posters
elmts={elmts}
loading={this.props.loading}
hasMore={this.state.hasMore}
loadMore={this.loadMore}
selectedImdbId={this.props.selectedImdbId}
onClick={this.props.onClick}
/>
</div>
);
}
}
function Posters(props) {
if (props.loading) {
return (<Loader />);
}
if (props.elmts.length === 0) {
return (
<div className="jumbotron">
<h2>No result</h2>
</div>
);
}
return (
<div>
<InfiniteScroll
hasMore={this.state.hasMore}
loadMore={this.loadMore}
hasMore={props.hasMore}
loadMore={props.loadMore}
className="row"
>
{elmts.map(function(el, index) {
const selected = (el.imdb_id === this.props.selectedImdbId) ? true : false;
{props.elmts.map(function(el, index) {
const selected = (el.imdb_id === props.selectedImdbId) ? true : false;
return (
<ListPoster
index={index}
data={el}
key={el.imdb_id}
selected={selected}
onClick={() => this.props.onClick(el.imdb_id)}
onClick={() => props.onClick(el.imdb_id)}
/>
)}
, this)}
)}
</InfiniteScroll>
</div>
);
}
}

44
src/public/js/components/movies/list.js
View File

@ -5,7 +5,6 @@ import TorrentsButton from './torrents'
import ActionsButton from './actions'
import ListPosters from '../list/posters'
import ListDetails from '../list/details'
import Loader from '../loader/loader'
function MovieButtons(props) {
const imdb_link = `http://www.imdb.com/title/${props.movie.imdb_id}`;
@ -41,41 +40,12 @@ function MovieButtons(props) {
}
export default class MovieList extends React.Component {
handleParams(props = this.props) {
// Check if the URL to fetch is in the props
if (props.moviesUrl) {
this.props.fetchMovies(props.moviesUrl);
return
}
// Check for URL parameters
if (!props.params) {
return
}
// Search param
if (props.params.search && props.params.search !== "") {
props.searchMovies({
key: props.params.search
});
return
}
constructor(props) {
super(props);
}
componentWillMount() {
this.handleParams();
}
componentWillUpdate(nextProps, nextState) {
// No params
if (!nextProps.params) {
return
}
// Search field changed
if (this.props.params.search
&& (this.props.params.search !== nextProps.params.search)
&& (nextProps.params.search !== "")) {
this.handleParams(nextProps);
return
if (this.props.moviesUrl) {
this.props.fetchMovies(this.props.moviesUrl);
}
}
render() {
@ -87,11 +57,6 @@ export default class MovieList extends React.Component {
}
const selectedMovie = movies[index];
// Loading
if (this.props.movieStore.loading) {
return (<Loader />);
}
return (
<div className="row" id="container">
<ListPosters
@ -109,6 +74,7 @@ export default class MovieList extends React.Component {
onClick={this.props.selectMovie}
params={this.props.params}
router={this.props.router}
loading={this.props.movieStore.loading}
/>
{selectedMovie &&
<ListDetails data={selectedMovie}>

38
src/public/js/components/navbar.js
View File

@ -30,8 +30,10 @@ export default function NavBar(props) {
placeholder="Search movies"
router={props.router}
search={props.movieStore.search}
searchFunc={props.searchMovies}
path='/movies/search'
pathMatch='movies'
params={props.params}
/>
<Search
model="showStore"
@ -39,8 +41,10 @@ export default function NavBar(props) {
placeholder="Search shows"
router={props.router}
search={props.showStore.search}
searchFunc={props.searchShows}
path='/shows/search'
pathMatch='shows'
params={props.params}
/>
</Navbar.Collapse>
</Navbar>
@ -52,14 +56,40 @@ class Search extends React.Component {
constructor(props) {
super(props);
this.handleSearch = this.handleSearch.bind(this);
this.search(this.props);
}
handleSearch() {
this.props.router.push(`${this.props.path}/${encodeURI(this.props.search)}`)
if (this.props.search === "") {
return;
}
this.search(this.props);
this.props.router.push(`${this.props.path}/${encodeURI(this.props.search)}`);
}
isActive() {
const location = this.props.router.getCurrentLocation().pathname;
return (location.indexOf(this.props.pathMatch) !== -1)
}
search(props) {
if (!this.isActive()) {
return;
}
// Search from the props if defined
if (props.search !== "") {
props.searchFunc({ key: props.search });
return;
}
// Search from the url params
if (props.params
&& props.params.search
&& props.params.search !== "") {
props.searchFunc({ key: props.params.search });
return;
}
}
render() {
const location = this.props.router.getCurrentLocation().pathname;
if (location.indexOf(this.props.pathMatch) === -1)
{
if (!this.isActive()) {
return null;
}

42
src/public/js/components/shows/list.js
View File

@ -2,44 +2,12 @@ import React from 'react'
import ListDetails from '../list/details'
import ListPosters from '../list/posters'
import Loader from '../loader/loader'
import ShowButtons from './listButtons'
export default class ShowList extends React.Component {
handleParams(props = this.props) {
// Check if the URL to fetch is in the props
if (props.showsUrl) {
this.props.fetchShows(props.showsUrl);
return
}
// Check for URL parameters
if (!props.params) {
return
}
// Search param
if (props.params.search && props.params.search !== "") {
this.props.searchShows({
key: this.props.params.search
});
return
}
}
componentWillMount() {
this.handleParams();
}
componentWillUpdate(nextProps, nextState) {
// No params
if (!nextProps.params) {
return
}
// Search field changed
if (this.props.params.search
&& (this.props.params.search !== nextProps.params.search)
&& (nextProps.params.search !== "")) {
this.handleParams(nextProps);
if (this.props.showsUrl) {
this.props.fetchShows(this.props.showsUrl);
return
}
}
@ -52,11 +20,6 @@ export default class ShowList extends React.Component {
}
const selectedShow = shows[index];
// Loading
if (this.props.showStore.loading) {
return (<Loader />);
}
return (
<div className="row" id="container">
<ListPosters
@ -74,6 +37,7 @@ export default class ShowList extends React.Component {
onClick={this.props.selectShow}
router={this.props.router}
params={this.props.params}
loading={this.props.showStore.loading}
/>
{selectedShow &&
<ListDetails data={selectedShow} >