Pricerange.js

pricerange.js

import React, {Component} from "react";
import {bindActionCreators} from "redux";
import {connect} from "react-redux";
import InputRange from "react-input-range";
import "react-input-range/lib/css/index.css";

import {fetchSearch} from "../../actions/action-fetch-search";

class PriceRange extends Component {
    constructor(props){
        super(props);

        const minprice = this.props.fetchData.data.pricerange.min;
        const minpricelimit = this.props.fetchData.data.pricerangelimit.min;
        const maxprice = this.props.fetchData.data.pricerange.max;
        const maxpricelimit = this.props.fetchData.data.pricerangelimit.max;

        this.state = {
            value: { min: minprice, max: maxprice},
            minprice: minpricelimit,
            maxprice: maxpricelimit
        };
    }

    getSymbol(currency){
        switch (currency) {
            case "GBP":
                return "£";
            case "BRL":
                return "R$";
            case "JPY":
                return "¥";
            default:
                return "$";
        }
    }

    searchPriceRange(value){
        this.props.fetchSearch({
            name: this.props.shop.name,
            type: this.props.shop.type,
            param: this.props.shop.param,
            pricerange: Object.assign({}, value, {
                currency: this.props.fetchData.data.pricerange.currency
            }),
            pricerangelimit: {
                min: this.state.minprice,
                max: this.state.maxprice,
                currency: this.props.fetchData.data.pricerangelimit.currency
            }
        })
    }

    render() {
        const symbol = this.getSymbol(this.props.fetchData.data.pricerange.currency);
        return (
            <InputRange
                ref={(node) => { this.node = node; }}
                formatLabel={value => symbol + value}
                minValue={this.state.minprice}
                maxValue={this.state.maxprice}
                value={this.state.value}
                onChange={value => this.setState({["value"]: value})}
                onChangeComplete={value => this.searchPriceRange(value)}
            />
        )
    }
}

function mapStateToProps(state) {
    return {
        fetchData: state.fetchData,
        shop: state.activeShop
    }
}

function matchDispatchToProps(dispatch){
    return bindActionCreators(
        {
            fetchSearch: fetchSearch
        },
        dispatch
    )
}

export default connect(mapStateToProps, matchDispatchToProps)(PriceRange);