134 lines
4.4 KiB
JavaScript
134 lines
4.4 KiB
JavaScript
import React from 'react'
|
|
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,
|
|
};
|
|
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.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}`);
|
|
}
|
|
componentWillUpdate(nextProps, nextState) {
|
|
// Check props
|
|
if (!nextProps.params.source
|
|
|| !nextProps.params.category
|
|
|| (nextProps.params.source === "")
|
|
|| (nextProps.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],
|
|
});
|
|
}
|
|
}
|
|
prettyName(name) {
|
|
return name.replace("_", " ")
|
|
.split(" ")
|
|
.map((w) => w[0].toUpperCase() + w.substr(1))
|
|
.join(" ");
|
|
}
|
|
render() {
|
|
// Should this componennt be displayed
|
|
if (!this.props.display) {
|
|
return null;
|
|
}
|
|
|
|
// Options are not yet fetched
|
|
if (Object.keys(this.props.options).length === 0) {
|
|
return null;
|
|
}
|
|
|
|
// State is not yet set
|
|
if (!this.state.selectedSource && !this.state.selectedCategory) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="row">
|
|
<div className="col-xs-12 col-md-12">
|
|
<Form>
|
|
<div className="row">
|
|
<div className="col-xs-12 col-md-6">
|
|
<FormGroup>
|
|
<ControlLabel>Source</ControlLabel>
|
|
<FormControl
|
|
bsClass="form-control input-sm"
|
|
componentClass="select"
|
|
onChange={this.handleSourceChange}
|
|
value={this.state.selectedSource}
|
|
>
|
|
{Object.keys(this.props.options).map(function(source) {
|
|
return (<option key={source} value={source}>{this.prettyName(source)}</option>)
|
|
}, this)}
|
|
</FormControl>
|
|
</FormGroup>
|
|
</div>
|
|
<div className="col-xs-12 col-md-6">
|
|
<FormGroup>
|
|
<ControlLabel>Category</ControlLabel>
|
|
<FormControl
|
|
bsClass="form-control input-sm"
|
|
componentClass="select"
|
|
onChange={this.handleCategoryChange}
|
|
value={this.state.selectedCategory}
|
|
>
|
|
{this.state.categories.map(function(category) {
|
|
return (<option key={category} value={category}>{this.prettyName(category)}</option>)
|
|
}, this)}
|
|
</FormControl>
|
|
</FormGroup>
|
|
</div>
|
|
</div>
|
|
</Form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|