122 lines
3.0 KiB
JavaScript
122 lines
3.0 KiB
JavaScript
import React, { useEffect } from "react";
|
|
import PropTypes from "prop-types";
|
|
import { withRouter } from "react-router-dom";
|
|
import { Form, FormGroup, FormControl, FormLabel } from "react-bootstrap";
|
|
|
|
import { upperCaseFirst } from "../../utils";
|
|
|
|
const ExplorerOptions = ({
|
|
display,
|
|
params,
|
|
options,
|
|
type,
|
|
history,
|
|
fetch,
|
|
}) => {
|
|
useEffect(() => {
|
|
fetch();
|
|
}, [fetch]);
|
|
|
|
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[event.target.value][0];
|
|
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) => upperCaseFirst(w))
|
|
.join(" ");
|
|
};
|
|
|
|
// Options are not yet fetched
|
|
if (Object.keys(options).length === 0) {
|
|
return null;
|
|
}
|
|
|
|
let source = params.source;
|
|
let category = params.category;
|
|
let categories = options[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}
|
|
>
|
|
{Object.keys(options).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,
|
|
fetch: PropTypes.func,
|
|
};
|
|
|
|
export default withRouter(ExplorerOptions);
|