naught-or-nice-component.js

naught-or-nice-component.js

import React from 'react';
import { Input, ButtonToolbar, Button } from 'react-bootstrap';
import _ from 'lodash';

export default class FormProjectContext extends React.Component {

    setAnalysis(evt) {
        const { dispatch, setAnalysis } = this.props;
        const matches = consortium.analyses.filter(sis => sis._id === evt.target.value);
        dispatch(setAnalysis(matches[0]));
    }

    setConsortium(evt) {
        const { dispatch, setConsortium } = this.props;
        const matches = consortia.filter(tium => tium._id === evt.target.value)
        dispatch(receiveConsortium(matches[0]));
    }

    render() {
        const {
            consortia,
            consortium,
            analysis,
            setConsortium,
            setDefaultConsortium,
            setAnalysis,
            setDefaultAnalysis,
        } = this.props;

        const selectedConsortium = consortium ? consortium._id : null;
        const selectedAnalysis = analysis ? analysis._id : null;

        let setDefaultConsortiumBtn = setDefaultConsortium ? (
            <Button className="pull-right"
                onClick={ this.props.setDefaultConsortium }
                bsSize="xsmall"
                disabled={ this.props.loading.isLoading }>
                <span className="glyphicon glyphicon-floppy-save" aria-hidden="true">&nbsp;</span>
                Set as default consortium
            </Button>
        ) : '';

        let consortiumSelector = (
            <div>
                { setDefaultConsortiumBtn }
                <Input
                    ref="consortium"
                    type="select"
                    label="Consortia:"
                    onChange={ this.setConsortium.bind(this) } >
                    <option key="0" value=''>Choose consortium…</option>
                    {consortia.map(consortium => {
                        const hasAnalyses = consortium.analyses && consortium.analyses.length;
                        const isSelected = selectedConsortium === consortium._id;
                        const optionText = consortium.label + (hasAnalyses ? '' : ' (no analyses available)');
                        return (
                            <option
                            key={consortium._id}
                            value={consortium._id}
                            disabled={!hasAnalyses}
                            title={!hasAnalyses ? 'Please add analyses to consortium' : ''}
                            selected={isSelected ? 'selected': ''}>
                            {optionText}
                            </option>
                        );
                    })}
                </Input>
            </div>
        )

        // permit setting analysis context if setAnalysis fn passed
        let setDefaultAnalysisBtn = setDefaultConsortium ? (
            <Button className="pull-right"
                onClick={this.props.setDefaultAnalysis}
                bsSize="xsmall">
                <span className="glyphicon glyphicon-floppy-save" aria-hidden="true">&nbsp;</span>
                Set as default analysis
            </Button>
        ) : '';

        // permit selection of analysis if consortium context already exists
        let analysisSelector = consortium ? (
            <div>
                { setDefaultAnalysisBtn }
                <Input
                    ref="analysis"
                    type="select"
                    label="Analysis:"
                    onChange={ this.setAnalysis.bind(this) } >
                    <option key="0" value="">Choose analysis…</option>
                    {consortium.analyses.map(analysis => {
                        const isSelected = selectedAnalysis === analysis.id;
                        return (
                            <option
                                key={analysis.id}
                                value={analysis.id}
                                selected={isSelected}>
                                {analysis.label}
                            </option>
                        );
                    })}
                </Input>
            </div>
        ) : '';

        return (
            <div>
                { consortiumSelector }
                { analysisSelector }
            </div>
        )

    }
}