old-psihologija/client/src/scenes/UploadDLockData/components/UnknownMapping.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import {Button, Dropdown, Message} from 'semantic-ui-react';
import Fuse from 'fuse.js';
import { addNewMapping } from '../../../store/actions';

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

        const guessedValues = this.guessDropdownValues(this.props);

        this.state = {
            selectedOfficeId: guessedValues.officeValue,
            selectedResourceId: guessedValues.resourceValue,
        }
    }

    componentWillReceiveProps(nextProps, nextContext) {
        const guessedValues = this.guessDropdownValues(nextProps);
        this.setState({selectedOfficeId: guessedValues.officeValue, selectedResourceId: guessedValues.resourceValue});
    }

    guessDropdownValues(props){
        const { mappings, mapping } = props;

        const offices = mappings && mappings.offices ? mappings.offices : [];
        const resources = mappings && mappings.resources ? mappings.resources : [];

        const fuzzySearchOptions = {
            shouldSort: true,
            threshold: 0.5,
            location: 0,
            distance: 100,
            maxPatternLength: 32,
            minMatchCharLength: 1,
            keys: [
                "officeName",
                "resourceName",
            ]
        };

        const officesFuse = new Fuse(offices, fuzzySearchOptions);
        const fuzzyOfficeSearchResults = officesFuse.search(mapping.officeSlug);

        let officeValue = null;
        if (fuzzyOfficeSearchResults.length > 0){
            officeValue = fuzzyOfficeSearchResults[0].officeId;
        }else if (offices.length > 0){
            officeValue = offices[0].officeId;
        }

        const filteredResources = resources.filter(resource => resource.officeId === officeValue);

        const resourcesFuse = new Fuse(filteredResources, fuzzySearchOptions);
        const fuzzyResourcesSearchResults = resourcesFuse.search(mapping.resourceSlug);

        let resourceValue = null;
        if (fuzzyResourcesSearchResults.length > 0){
            resourceValue = fuzzyResourcesSearchResults[0].resourceId;
        }else if (filteredResources.length > 0){
            resourceValue = filteredResources[0].resourceId;
        }

        return {
            officeValue,
            resourceValue,
        }
    }

    onOfficeChange(event, data) {
        const { mappings } = this.props;

        const selectedOfficeId = data.value || null;
        const resources = mappings && mappings.resources ? mappings.resources : [];
        const filteredResources = resources.filter(resource => resource.officeId === selectedOfficeId);
        const selectedResourceId = filteredResources.length > 0 ? filteredResources[0].resourceId : null;
        this.setState({selectedOfficeId, selectedResourceId});
    }

    onResourceChange(event, data) {
        const selectedResourceId = data.value || null;
        this.setState({selectedResourceId});
    }

    onSave(){
        const { addNewMapping, mapping } = this.props;
        const { selectedOfficeId, selectedResourceId } = this.state;
        const officeSlug = mapping.officeSlug;
        const resourceSlug = mapping.resourceSlug;

        const newMapping = {
            officeSlug,
            resourceSlug,
            officeId: selectedOfficeId,
            resourceId: selectedResourceId,
        };

        addNewMapping(newMapping);
    }

    render() {
        const { mapping, mappings } = this.props;
        const { selectedOfficeId, selectedResourceId } = this.state;

        const offices = mappings && mappings.offices ? mappings.offices : [];
        const resources = mappings && mappings.resources ? mappings.resources : [];

        const officeDropdownOptions = offices.map(office => {
            return {
                key: office.officeId,
                value: office.officeId,
                text: office.officeName,
            }
        });

        const filteredResources = resources.filter(resource => resource.officeId === selectedOfficeId);

        const resourceDropdownOptions = filteredResources.map(resource => {
            return {
                key: resource.resourceId,
                value: resource.resourceId,
                text: resource.resourceName,
            }
        });

        const saveButtonDisabled = !selectedOfficeId || !selectedResourceId;

        return (
        <div>
            <br/>
            <Message>
                <Message.Header>{mapping.file}</Message.Header>
                <br/>
                <span>
                    This file contains the unknown location. Based on ORD data, it seems that this file is related to {' '}
                    <Dropdown
                        inline
                        options={officeDropdownOptions}
                        onChange={this.onOfficeChange.bind(this)}
                        value={selectedOfficeId}
                    />
                    {' '}
                    /
                    {' '}
                    <Dropdown
                        inline
                        options={resourceDropdownOptions}
                        onChange={this.onResourceChange.bind(this)}
                        value={selectedResourceId}
                    />
                </span>
                <br/>
                <Button
                    disabled={saveButtonDisabled}
                    onClick={this.onSave.bind(this)}
                >Save</Button>
            </Message>
        </div>);
    }
}

const mapStateToProps = (state) => ({
    mappings: state.mappingsData.result,
});

const mapDispatchToProps = (dispatch) => ({
    addNewMapping: (mapping) => addNewMapping(dispatch, mapping),
});


export default connect(mapStateToProps, mapDispatchToProps)(UnknownMapping);