<commit_before>/**
 * @license
 * The MIT License (MIT)
 * Copyright 2015 Government of Canada
 *
 * @author
 * <NAME>
 *
 * @exports AddHost
 */

import React from "react";
import { filter } from "lodash";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { Row, Col, ListGroup, Modal } from "react-bootstrap";

import { findFiles } from "../../files/actions";
import { createSubtraction } from "../actions";
import { Button, Icon, Input, ListGroupItem, RelativeTime } from "../../base";

const getInitialState = () => ({
    subtractionId: "",
    fileId: "",
});

/**
 * A component based on React-Bootstrap Modal that presents a form used to add a new host from a FASTA file.
 */
class CreateSubtraction extends React.Component {

    constructor (props) {
        super(props);
        this.state = getInitialState();
    }

    modalEnter = () => {
        this.props.onFindFiles();
        this.idNode.focus()
    };

    modalExited = () => {
        this.setState(getInitialState());
    };

    /**
     * Callback triggered by the form submit event. Sends a request to the server requesting a new job for adding a new
     * host. If the request is successful, the modal will close.
     *
     * @param event {object} - the submit event; used only to prevent the default behaviour
     */
    handleSubmit = (event) => {
        event.preventDefault();
        this.props.onCreate(this.state.subtractionId, this.state.fileId);
    };

    render () {

        let fileComponents = filter(this.props.files, {type: "subtraction"}).map(file => {
            const active = file.id === this.state.fileId;

            return (
                <ListGroupItem
                    key={file.id}
                    active={active}
                    onClick={() => this.setState({fileId: active ? "": file.id})}
                >
                    <Row>
                        <Col xs={7}>
                            <strong>{file.name}</strong>
                        </Col>
                        <Col xs={5}>
                            Uploaded <RelativeTime time={file.uploaded_at} /> by {file.user.id}
                        </Col>
                    </Row>
                </ListGroupItem>
            );
        });

        if (!fileComponents.length) {
            fileComponents = (
                <ListGroupItem className="text-center">
                    <Icon name="info" /> No files found. <Link to="/subtraction/files">Upload some</Link>.
                </ListGroupItem>
            );
        }

        return (
            <Modal bsSize="large" show={this.props.show} onHide={this.props.onHide} onEnter={this.modalEnter}
                   onExited={this.modalExited}
            >
                <Modal.Header>
                    Create Subtraction
                </Modal.Header>

                <form onSubmit={this.handleSubmit}>
                    <Modal.Body>
                        <Input
                            ref={(node) => this.idNode = node}
                            type="text"
                            label="Unique Name"
                            value={this.state.subtractionId}
                            onChange={(e) => this.setState({subtractionId: e.target.value})}
                        />

                        <h5><strong>Files</strong></h5>
                        <ListGroup>
                            {fileComponents}
                        </ListGroup>
                    </Modal.Body>

                    <Modal.Footer className="modal-footer">
                        <Button
                            type="submit"
                            bsStyle="primary"
                            icon="play"
                            pullRight
                        ><commit_msg>Don't autofocus on CreateSubtraction form<commit_after>/**
 * @license
 * The MIT License (MIT)
 * Copyright 2015 Government of Canada
 *
 * @author
 * <NAME>
 *
 * @exports AddHost
 */

import React from "react";
import { filter } from "lodash";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { Row, Col, ListGroup, Modal } from "react-bootstrap";

import { findFiles } from "../../files/actions";
import { createSubtraction } from "../actions";
import { Button, Icon, Input, ListGroupItem, RelativeTime } from "../../base";

const getInitialState = () => ({
    subtractionId: "",
    fileId: "",
});

/**
 * A component based on React-Bootstrap Modal that presents a form used to add a new host from a FASTA file.
 */
class CreateSubtraction extends React.Component {

    constructor (props) {
        super(props);
        this.state = getInitialState();
    }

    modalEnter = () => {
        this.props.onFindFiles();
    };

    modalExited = () => {
        this.setState(getInitialState());
    };

    /**
     * Callback triggered by the form submit event. Sends a request to the server requesting a new job for adding a new
     * host. If the request is successful, the modal will close.
     *
     * @param event {object} - the submit event; used only to prevent the default behaviour
     */
    handleSubmit = (event) => {
        event.preventDefault();
        this.props.onCreate(this.state.subtractionId, this.state.fileId);
    };

    render () {

        let fileComponents = filter(this.props.files, {type: "subtraction"}).map(file => {
            const active = file.id === this.state.fileId;

            return (
                <ListGroupItem
                    key={file.id}
                    active={active}
                    onClick={() => this.setState({fileId: active ? "": file.id})}
                >
                    <Row>
                        <Col xs={7}>
                            <strong>{file.name}</strong>
                        </Col>
                        <Col xs={5}>
                            Uploaded <RelativeTime time={file.uploaded_at} /> by {file.user.id}
                        </Col>
                    </Row>
                </ListGroupItem>
            );
        });

        if (!fileComponents.length) {
            fileComponents = (
                <ListGroupItem className="text-center">
                    <Icon name="info" /> No files found. <Link to="/subtraction/files">Upload some</Link>.
                </ListGroupItem>
            );
        }

        return (
            <Modal bsSize="large" show={this.props.show} onHide={this.props.onHide} onEnter={this.modalEnter}
                   onExited={this.modalExited}
            >
                <Modal.Header>
                    Create Subtraction
                </Modal.Header>

                <form onSubmit={this.handleSubmit}>
                    <Modal.Body>
                        <Input
                            type="text"
                            label="Unique Name"
                            value={this.state.subtractionId}
                            onChange={(e) => this.setState({subtractionId: e.target.value})}
                        />

                        <h5><strong>Files</strong></h5>
                        <ListGroup>
                            {fileComponents}
                        </ListGroup>
                    </Modal.Body>

                    <Modal.Footer className="modal-footer">
                        <Button
                            type="submit"
                            bsStyle="primary"
                            icon="play"
                            pullRight
                        >
{'fraction_non_alphanumeric': 0.11906336817039291, 'fraction_numerical': 0.002116682100806985, 'mean_word_length': 1.3391089108910892, 'pattern_counts': {'":': 2, '<': 67, '<?xml version=': 0, '>': 82, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5822522', 'n_tokens_mistral': 1957, 'n_tokens_neox': 1860, 'n_words': 450}