ES6 Plato on Github
Report Home
Summary Display
components/Event/NewEvent.js
Maintainability
67.25
Lines of code
178
Difficulty
23.38
Estimated Errors
1.21
Function weight
By Complexity
By SLOC
//React components import React from 'react' import PropTypes from 'prop-types'; import { Grid, Row, Col, FormControl, Panel, Collapse, Label, InputGroup } from "react-bootstrap" import TagContainer from '../../containers/TagContainer' import HTMLEditor from './HTMLEditor' import EventHeader from './EventHeader' import EventFooter from './EventFooter' import { NEW_EVENT_INVISIBLE, ANNOTATION, NEW_EVENT_CONTEXT, EVENT_CATEGORY_COMMENT } from '../../constants/EventTypes'; /* the possible status of the component */ const IDLE_STATUS = "idle"; //const UPLOADING_STATUS = "uploading"; // the data was successfully uploaded to the server const UPLOADED_STATUS = "uploaded"; // the data is being uploaded /* The class represents a new event which is being created */ class NewEvent extends React.Component { constructor(props) { super(props) this.state = { hasText: false, status: IDLE_STATUS, } this.changeStateToUploaded = this.changeStateToUploaded.bind(this); this.createEvent = this.createEvent.bind(this); this.canEnableSaveButton = this.canEnableSaveButton.bind(this); this.onCancelNewEventClicked = this.onCancelNewEventClicked.bind(this); this.setTagContainer = this.setTagContainer.bind(this); } render() { const { investigationId, isVisible, user, onNewEventUploaded } = this.props; if (this.state.status === UPLOADED_STATUS) { this.setState({ status: IDLE_STATUS }); onNewEventUploaded() return null; } else { return ( <Collapse in={isVisible}> <Panel bsStyle='primary' > <EventHeader context={NEW_EVENT_CONTEXT} /> < div id="newEventBox" style={{ display: 'flex' }} > {/* the left panel */} < div style={{ flexGrow: '0', maxWidth: '155px' }}> <div style={{ paddingLeft: '5px' }} > <div style={{ height: '50px' }} /> <a href={"/investigation/" + this.props.investigationId + "/events/tagManager"} target="_blank" style={{ float: 'right', paddingRight: '10px' }}> manage </a> <Label> Tags </Label> <div style={{ paddingTop: '5px', marginRight: '10px' }}> <TagContainer canEnableSaveButton={this.canEnableSaveButton} context={NEW_EVENT_CONTEXT} investigationId={this.props.investigationId} setTagContainer={this.setTagContainer} /> </div> </div> </div > <div style={{ flexGrow: '1' }}> <div> <HTMLEditor user={user} investigationId={investigationId} isEditionMode={true} canEnableSaveButton={this.canEnableSaveButton} /> <div style={{ paddingTop: '8px' }}> <InputGroup> <InputGroup.Addon style={{ backgroundColor: 'transparent', border: 'none' }}> <Label> Title </Label> </InputGroup.Addon> <FormControl type="text" value={this.state.inputTitleValue} onChange={this.onChangeInputValue} placeholder="Optional title here" inputRef={(FormControl) => this.inputTitle = FormControl} /> </InputGroup> </div> </div> <EventFooter isSaveButtonEnabled={this.state.hasText} onCancelButtonClicked={this.onCancelNewEventClicked} onSaveButtonClicked={this.createEvent} /> </div> </div > </Panel> </Collapse> ) } } changeStateToUploaded() { this.setState({ status: UPLOADED_STATUS }) } /** Fuction triggered when the user clicks the 'cancel' button */ onCancelNewEventClicked() { localStorage.removeItem('plainText'); localStorage.removeItem('HTMLText'); this.props.setNewEventVisibility(NEW_EVENT_INVISIBLE); } /** * Callback method called when the editor content changed from empty to not empty and vice versa. * @param {*} change the object representing the change */ canEnableSaveButton(change) { if (change) { if ("hasText" in change) { this.setState({ hasText: change.hasText }) } } } /** * Create the new event */ createEvent() { let investigationId = this.props.investigationId; let currentTagIds = this.tagContainer.state.selectedTags.map((tag) => tag._id); let newEvent = { category: EVENT_CATEGORY_COMMENT, content: [ { format: "plainText", text: localStorage.getItem('plainText') }, { format: "html", text: localStorage.getItem('HTMLText') } ], creationDate: Date(), investigationId: investigationId, title: this.inputTitle.value, tag: currentTagIds, type: ANNOTATION, username: this.props.user.username, } this.props.createEvent(newEvent, this.props.user.sessionId, this.props.investigationId, this.changeStateToUploaded) } setTagContainer(element) { this.tagContainer = element } } NewEvent.propTypes = { /** the investigationId indicating what investigation the new event will belong to*/ investigationId: PropTypes.string.isRequired, /** whether this component is visible (ie panel is expanded) or not */ isVisible: PropTypes.bool.isRequired, /** Callback function to reload events from the server */ reloadEvents: PropTypes.func, // /** the callback function to change the visibility of this component */ setNewEventVisibility: PropTypes.func.isRequired, /** the user who is currently logged in */ user: PropTypes.object.isRequired, } export default NewEvent;