diff --git a/frontend/js/components/list/explorerOptions.js b/frontend/js/components/list/explorerOptions.js index 83193c1..bbb3afe 100644 --- a/frontend/js/components/list/explorerOptions.js +++ b/frontend/js/components/list/explorerOptions.js @@ -1,115 +1,108 @@ import React from "react"; +import PropTypes from "prop-types"; 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); +const ExplorerOptions = ({ display, params, options, type, history }) => { + // Should this componennt be displayed + if (!display) { + return null; } - handleSourceChange(event) { + + if ( + !params || + !params.source || + !params.category || + params.source === "" || + params.category === "" + ) { + return null; + } + + const 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 = options.get(event.target.value).first(); + history.push(`/${type}/explore/${source}/${category}`); + }; + + const handleCategoryChange = event => { + let source = 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) { + 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; } - 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; - } + let source = params.source; + let category = params.category; + let categories = options.get(params.source); - // 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 ( -