<commit_before><commit_msg>Create List component (can add and remove items)<commit_after>import React from "react";
import { Item } from "../../stores/model";
import AddComponent from "./AddComponent";
import { observer } from "mobx-react";

interface ListProps {
    label: string;
    addedValues: string[];
    items: Item[];
    onDelete: (index: number) => void;
    onAdd: (id: string) => void;
}

class List extends React.PureComponent<ListProps> {

    render() {
        const { label, addedValues, items, onAdd, onDelete } = this.props;
        const addedItems = items.filter(item => addedValues.indexOf(item.id) >= 0);
        const itemsToAdd = items.filter(item => addedValues.indexOf(item.id) < 0);
        return (
            <div>
                <div>{label}</div>
                <div>
                    {
                        addedItems.map((item, index) =>
                            <ListItem
                                index={index}
                                item={item}
                                key={index}
                                onDelete={onDelete} />
                        )
                    }
                </div>
                {
                    itemsToAdd.length > 0 && <AddComponent
                    items={itemsToAdd}
                    onAdd={onAdd}
                    label={"+"} />
                }
            </div>
        );
    }
}

interface ItemProps {
    index: number;
    item: Item;
    onDelete: (index: number) => void;
}

const ListItem: React.StatelessComponent<ItemProps> = (props) => {
    const { index, item, onDelete } = props;
    return (
        <div style={{ display: "flex" }}>
            <div>{item.id}</div>
            <div onClick={() => onDelete(index)}>X</div>
        </div>
    );
};

export default observer(List);
{'fraction_non_alphanumeric': 0.1312636165577342, 'fraction_numerical': 0.0016339869281045752, 'mean_word_length': 1.433112582781457, 'pattern_counts': {'":': 0, '<': 20, '<?xml version=': 0, '>': 29, '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': '7543173', 'n_tokens_mistral': 502, 'n_tokens_neox': 484, 'n_words': 112}