<commit_before>import React, { Component } from "react";

import Dropzone from "react-dropzone";

export default class AttachmentAdder extends Component {
    constructor(props) {
        super(props);
        this.state = {
            attachments: [{ name: "asd" }],
        }
    }

    onDrop = (files) => {
        const droppedFile = files[0];
        this.addAttachment(droppedFile);
        this.props.sendChange(droppedFile);
        console.log("attachment size " + this.state.attachments.length);
    }

    addAttachment = (attachment) => {
        const newAttachmentsList = this.state.attachments;
        newAttachmentsList.push(attachment);
        this.setState({ attachments: newAttachmentsList });
    }

    removeAttachment = (attachment) => {
        const newAttachmentsList = this.state.attachments;
        const index =  newAttachmentsList.indexOf(attachment);
        console.log("ennen poistoa: " + newAttachmentsList);
        newAttachmentsList.splice(index, 1);
        console.log("poiston jälkeen: + newAttachmentsList");
        this.setState({attachments: newAttachmentsList});
    }

    getFileList = () => {
        return (
            <div className="ui form">
                {this.getFileNumberLabel()}
                {this.state.attachments.map(attachment =>

                    <div>
                        <button 
                            className="negative ui icon button "
                            onClick= { () =>this.removeAttachment(attachment)}>
                            <i className="remove icon"></i>
                        </button>
                        &nbsp;
                        {attachment.name}
                        <hr />
                    </div>
                )}
            </div>
        );

    }

    getFileNumberLabel = () => {
        if (this.state.attachments.length === 0) {
            return <h2>No attachments uploaded</h2>;
        }
        return (<h2>
            {this.state.attachments.length + " attachments uploaded:"}
        </h2>);
    }

    render() {
        return (
            <div>
                <div className="field" style={{ borderStyle: 'dashed' }}>
                    <label>Add attachments</label>
                    <Dropzone className="field upload-box"
                        onDrop={this.onDrop}
                        multiple={false}>
                        <p className="upload-p">Click to navigate to the file or drop them from your file system.</p>
                    </Dropzone>
                </div>
                {this.getFileList()}
            </div>

        );
    }
}<commit_msg>started to work on the limit of files<commit_after>import React, { Component } from "react";

import Dropzone from "react-dropzone";

export default class AttachmentAdder extends Component {
    constructor(props) {
        super(props);
        this.state = {
            attachments: [],
        }
    }

    onDrop = (files) => {
        const droppedFile = files[0];
        this.addAttachment(droppedFile);
        this.props.sendChange(droppedFile);
        console.log("attachment size " + this.state.attachments.length);
    }

    addAttachment = (attachment) => {
        const newAttachmentsList = this.state.attachments;
        newAttachmentsList.push(attachment);
        this.setState({ attachments: newAttachmentsList });
    }

    removeAttachment = (attachment) => {
        const newAttachmentsList = this.state.attachments;
        const index =  newAttachmentsList.indexOf(attachment);
        newAttachmentsList.splice(index, 1);
        this.setState({attachments: newAttachmentsList});
    }

    getFileList = () => {
        return (
            <div className="ui form">
                {this.getFileNumberLabel()}
                {this.state.attachments.map(attachment =>

                    <div>
                        <button 
                            className="negative ui icon button "
                            onClick= { () =>this.removeAttachment(attachment)}>
                            <i className="remove icon"></i>
                        </button>
                        &nbsp;
                        {attachment.name}
                        <hr />
                    </div>
                )}
            </div>
        );

    }

    getHeader = () => {
        if (this.props.attachmentCount === undefined) {
            return <h1>Upload attachments as much as you want</h1>
        }
        return <h1>Upload maximum {this.props.attachmentCount} attachments</h1>
    }



    getFileNumberLabel = () => {
        const attachmentsUploaded = this.state.attachments.length;
        if (attachmentsUploaded === 0) {
            return <h2>No attachments uploaded</h2>;
        }
        else if (attachmentsUploaded === 1) {
            return <h2>One attachment uploaded:</h2>
        }
        return (<h2>
            {attachmentsUploaded + " attachments uploaded:"}
        </h2>);
    }

    render() {
        return (
            <div>
                {this.getHeader()}
                <div className="field" style={{ borderStyle: 'dashed' }}>
                    <label>Add attachments</label>
                    <Dropzone className="field upload-box"
                        onDrop={this.onDrop}
                        multiple={false}>
                        <p className="upload-p">Click to navigate to the file or drop them from your file system.</p>
                    </Dropzone>
                </div>
                {this.getFileList()}
            </div>

        );
    }
}
{'fraction_non_alphanumeric': 0.1141528001431383, 'fraction_numerical': 0.003757380568974772, 'mean_word_length': 1.503358710255262, 'pattern_counts': {'":': 0, '<': 55, '<?xml version=': 0, '>': 70, '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': '5441420', 'n_tokens_mistral': 1480, 'n_tokens_neox': 1409, 'n_words': 286}