# components/UserManagement/BeamlineResponsibleForm.js

## Maintainability

74.63

## Lines of code

173

## Difficulty

30.19

## Estimated Errors

1.11

## Function weight

### By Complexity

### By SLOC

import React, { Component } from 'react'; import { Alert, Glyphicon, Grid, Row, Col, InputGroup, Button } from 'react-bootstrap'; import axios from 'axios'; import { Typeahead } from 'react-bootstrap-typeahead'; import 'react-bootstrap-typeahead/css/Typeahead.css'; import Loader from 'react-loader-advanced'; import { getUsers, createInstrumentScientists } from '../../api/icat/icatPlus.js'; import _ from 'lodash'; import { SuccessUserMessage, ErrorUserMessage } from '../UserMessages/UserMessage.js'; export default class BeamlineResposibleForm extends Component { constructor(props) { super(props); this.state = { user: { fetching: false, fetched: false, data: [] }, fetching : false, usersSelected : [], instrumentsSelected : [], message : { isError : false, text : null } }; this.handleClick = this.handleClick.bind(this); } _renderMenuItemChildren = (option, props, index) => { return [ <span> {option.fullName} </span>, <br /> ]; } _renderBeamlineItem = (option, props, index) => { return [ <span> {option} </span>, <br /> ]; } getUsers(){ axios.get(getUsers(this.props.user.sessionId)) .then( response => { if (response.status == 200) { this.setState({ user: { fetching: false, fetched: true, data: response.data } }); } }) .catch(error => { this.setState({ message : { isError : true, text : error.message } }); }); } componentDidMount() { this.getUsers(); } handleClick() { this.setState({ fetching : true }); axios.put(createInstrumentScientists(this.props.user.sessionId), { usernames : this.state.usersSelected.map(function(u){return u.name;}), instrumentnames : this.state.instrumentsSelected }) .then( (response) => { this.setState({ fetching : false, message : { isError : false, text : response.status == 200 ? "User(s) have been added correctly as beamline managers" : "Oopps, something might be wrong" } }); this.props.fetchInstrumentScientistsBySessionId(this.props.user.sessionId); }) .catch( (error) =>{ this.setState({ fetching : false, message : { isError : true, text : error.message } }); }); } render() { if ((!this.props.user) || (!this.props.user.sessionId)) { return null; } let users = _.filter(this.state.user.data, function (u) { return u.fullName; }) return <Loader show={this.state.fetching} > <Grid fluid> <Row> <Col xs={12} md={3}> <InputGroup> <InputGroup.Addon> <span> <Glyphicon glyph="user" /> Users</span> </InputGroup.Addon> <Typeahead id="typeAheadUsers" labelKey="fullName" renderMenuItemChildren={this._renderMenuItemChildren} multiple onChange={(usersSelected) => { this.setState({usersSelected}); }} selected={this.state.usersSelected} options={users} placeholder="Choose a user..." /> </InputGroup> </Col> <Col xs={12} md={3}> <InputGroup> <InputGroup.Addon> <span> <Glyphicon glyph="facetime-video" /> Beamlines</span> </InputGroup.Addon> <Typeahead id="typeAheadBeamlines" renderMenuItemChildren={this._renderBeamlineItem} multiple onChange={(instrumentsSelected) => { this.setState({instrumentsSelected}); }} selected={this.state.instrumentsSelected} options={this.props.instrumentScientists.instrumentNames} placeholder="Choose a beamline..." /> </InputGroup> </Col> <Col xs={12} md={1}> <Button bsStyle="primary" type="submit" onClick={this.handleClick}>Add</Button> </Col> <Col xs={12} md={5}> { this.state.message.text && this.state.message.isError && <ErrorUserMessage text={this.state.message.text} /> } {this.state.message.text && !this.state.message.isError && <SuccessUserMessage text={this.state.message.text} /> } </Col> </Row> </Grid> </Loader>; } };