116 lines
3.3 KiB
JavaScript
116 lines
3.3 KiB
JavaScript
import React from "react";
|
|
import { withRouter } from "react-router-dom";
|
|
import { Form, FormGroup, FormControl, FormLabel } from "react-bootstrap";
|
|
|
|
class ExplorerOptions extends React.PureComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
this.handleSourceChange = this.handleSourceChange.bind(this);
|
|
this.handleCategoryChange = this.handleCategoryChange.bind(this);
|
|
}
|
|
handleSourceChange(event) {
|
|
let source = event.target.value;
|
|
let category = this.props.options.get(event.target.value).first();
|
|
this.props.history.push(
|
|
`/${this.props.type}/explore/${source}/${category}`
|
|
);
|
|
}
|
|
handleCategoryChange(event) {
|
|
let source = this.props.params.source;
|
|
let category = event.target.value;
|
|
this.props.history.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;
|
|
}
|
|
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 (this.props.options.size === 0) {
|
|
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.get(this.props.params.source);
|
|
|
|
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>
|
|
<FormLabel>Source</FormLabel>
|
|
<FormControl
|
|
bsPrefix="form-control input-sm"
|
|
as="select"
|
|
onChange={this.handleSourceChange}
|
|
value={source}
|
|
>
|
|
{this.props.options.keySeq().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>
|
|
<FormLabel>Category</FormLabel>
|
|
<FormControl
|
|
bsPrefix="form-control input-sm"
|
|
as="select"
|
|
onChange={this.handleCategoryChange}
|
|
value={category}
|
|
>
|
|
{categories.map(function(category) {
|
|
return (
|
|
<option key={category} value={category}>
|
|
{this.prettyName(category)}
|
|
</option>
|
|
);
|
|
}, this)}
|
|
</FormControl>
|
|
</FormGroup>
|
|
</div>
|
|
</div>
|
|
</Form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withRouter(ExplorerOptions);
|