109 lines
2.9 KiB
JavaScript
109 lines
2.9 KiB
JavaScript
import React from "react";
|
|
import PropTypes from "prop-types";
|
|
import { withRouter } from "react-router-dom";
|
|
import { Form, FormGroup, FormControl, FormLabel } from "react-bootstrap";
|
|
|
|
const ExplorerOptions = ({ display, params, options, type, history }) => {
|
|
// Should this componennt be displayed
|
|
if (!display) {
|
|
return null;
|
|
}
|
|
|
|
if (
|
|
!params ||
|
|
!params.source ||
|
|
!params.category ||
|
|
params.source === "" ||
|
|
params.category === ""
|
|
) {
|
|
return null;
|
|
}
|
|
|
|
const handleSourceChange = event => {
|
|
let source = event.target.value;
|
|
let category = options.get(event.target.value).first();
|
|
history.push(`/${type}/explore/${source}/${category}`);
|
|
};
|
|
|
|
const handleCategoryChange = event => {
|
|
let source = params.source;
|
|
let category = event.target.value;
|
|
history.push(`/${type}/explore/${source}/${category}`);
|
|
};
|
|
|
|
const prettyName = name => {
|
|
return name
|
|
.replace("_", " ")
|
|
.split(" ")
|
|
.map(w => w[0].toUpperCase() + w.substr(1))
|
|
.join(" ");
|
|
};
|
|
|
|
// Options are not yet fetched
|
|
if (options.size === 0) {
|
|
return null;
|
|
}
|
|
|
|
let source = params.source;
|
|
let category = params.category;
|
|
let categories = options.get(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={handleSourceChange}
|
|
value={source}
|
|
>
|
|
{options.keySeq().map(function(source) {
|
|
return (
|
|
<option key={source} value={source}>
|
|
{prettyName(source)}
|
|
</option>
|
|
);
|
|
})}
|
|
</FormControl>
|
|
</FormGroup>
|
|
</div>
|
|
<div className="col-xs-12 col-md-6">
|
|
<FormGroup>
|
|
<FormLabel>Category</FormLabel>
|
|
<FormControl
|
|
bsPrefix="form-control input-sm"
|
|
as="select"
|
|
onChange={handleCategoryChange}
|
|
value={category}
|
|
>
|
|
{categories.map(function(category) {
|
|
return (
|
|
<option key={category} value={category}>
|
|
{prettyName(category)}
|
|
</option>
|
|
);
|
|
})}
|
|
</FormControl>
|
|
</FormGroup>
|
|
</div>
|
|
</div>
|
|
</Form>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
ExplorerOptions.propTypes = {
|
|
params: PropTypes.object,
|
|
history: PropTypes.object,
|
|
type: PropTypes.string,
|
|
options: PropTypes.object,
|
|
display: PropTypes.bool
|
|
};
|
|
|
|
export default withRouter(ExplorerOptions);
|