<commit_before>import React, { Component } from 'react'
import BlacklistUserService from '../services/BlacklistUserService';
import { Table, Button, FormControl } from 'react-bootstrap';

class BlacklistUserComponent extends Component {
    constructor(props) {
        super(props)

        this.changeBlacklistUsername = this.changeBlacklistUsername.bind(this);

        this.state = {
            blacklistUsers: [],
            blacklistUsername: ''
        }
    }

    componentDidMount() {
        this.refreshBlacklistUsers();
    }

    refreshBlacklistUsers() {
        BlacklistUserService.getBlacklistUsers().then((res) => {
            res.data.sort((a, b) => a.username.localeCompare(b.username));
            this.setState({ blacklistUsers: res.data });
        }).catch((error) => {
            console.log(error);
        });
    }

    deleteBlacklistUser(id) {
        BlacklistUserService.deleteBlacklistUser(id).then(res => {
            this.refreshBlacklistUsers();
        });
    }

    changeBlacklistUsername = (event) => {
        this.setState({ blacklistUsername: event.target.value });
    }

    createBlacklistUser = () => {
        let blacklistUser = { username: this.state.blacklistUsername }

        BlacklistUserService.createBlacklistUser(blacklistUser).then(res => {
            this.refreshBlacklistUsers();
        }).catch((error) => {
            console.log(error);
        });
    }

    render() {
        return (
            <div>
                <div className="container">
                    <Table className="table">
                        <thead>
                            <tr>
                                <th>Username</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <td>
                                <FormControl placeholder="username to blacklist" value={this.state.blacklistUsername} onChange={this.changeBlacklistUsername} ></FormControl>
                            </td>
                            <td>
                                <Button style={{ marginLeft: "10px" }} onClick={this.createBlacklistUser}>
                                    Add
                            </Button>
                            </td>
                            {
                                this.state.blacklistUsers.map(<commit_msg>FRONTEND: Clear blacklist user field when is already created.<commit_after>import React, { Component } from 'react'
import BlacklistUserService from '../services/BlacklistUserService';
import { Table, Button, FormControl } from 'react-bootstrap';

class BlacklistUserComponent extends Component {
    constructor(props) {
        super(props)

        this.changeBlacklistUsername = this.changeBlacklistUsername.bind(this);

        this.state = {
            blacklistUsers: [],
            blacklistUsername: ''
        }
    }

    componentDidMount() {
        this.refreshBlacklistUsers();
    }

    refreshBlacklistUsers() {
        BlacklistUserService.getBlacklistUsers().then((res) => {
            res.data.sort((a, b) => a.username.localeCompare(b.username));
            this.setState({ blacklistUsers: res.data });
        }).catch((error) => {
            console.log(error);
        });
    }

    deleteBlacklistUser(id) {
        BlacklistUserService.deleteBlacklistUser(id).then(res => {
            this.refreshBlacklistUsers();
        });
    }

    changeBlacklistUsername = (event) => {
        this.setState({ blacklistUsername: event.target.value });
    }

    createBlacklistUser = () => {
        let blacklistUser = { username: this.state.blacklistUsername }

        BlacklistUserService.createBlacklistUser(blacklistUser).then(res => {
            this.refreshBlacklistUsers();
            this.setState({ blacklistUsername: "" });
        }).catch((error) => {
            console.log(error);
        });
    }

    render() {
        return (
            <div>
                <div className="container">
                    <Table className="table">
                        <thead>
                            <tr>
                                <th>Username</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <td>
                                <FormControl placeholder="username to blacklist" value={this.state.blacklistUsername} onChange={this.changeBlacklistUsername} ></FormControl>
                            </td>
                            <td>
                                <Button style={{ marginLeft: "10px" }} onClick={this.createBlacklistUser}>
                                    Add
                            </Button>
                            </td>
                            {
                                this.state.blacklistUsers.map(
{'fraction_non_alphanumeric': 0.11180499597099114, 'fraction_numerical': 0.0008058017727639, 'mean_word_length': 1.418412079883098, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 59, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3518797', 'n_tokens_mistral': 1211, 'n_tokens_neox': 1172, 'n_words': 185}