<commit_before>import React from 'react'
import { connect } from 'reactReduxUtils'
import Button from './inputs/Button.jsx'
import ParticipantTile from './ParticipantTile.jsx'
import ItemTile from './ItemTile.jsx'

let List = ({ children, onAddClick }) => (
	<div>
        {children}
		<Button value='ADD' onClick={() => onAddClick()} />
	</div>
);

let participantListMappings = {
    mapStateToProps: state => ({
	    children: state.data.participants.ids.map(id => (<ParticipantTile key={id} participantId={id} />))
    }),
    mapEventsToProps: events => ({
        onAddClick: () => events.participantAdded()
    })
};

let ParticipantList = connect(participantListMappings.mapStateToProps, participantListMappings.mapEventsToProps)(List);

let itemListMappings = {
    mapStateToProps: state => ({
	    children: state.data.items.ids.map(id => (<ItemTile key={id} itemId={id} />))
    }),
    mapEventsToProps: events => ({
        onAddClick: () => events.itemAdded()
    })
};

let ItemList = connect(itemListMappings.mapStateToProps, itemListMappings.mapEventsToProps)(List);

export { ParticipantList, ItemList };
<commit_msg>Styled list<commit_after>import React from 'react'
import { connect } from 'reactReduxUtils'
import Button from './inputs/Button.jsx'
import ParticipantTile from './ParticipantTile.jsx'
import ItemTile from './ItemTile.jsx'

let List = ({ title, children, onAddClick }) => {
    let items = children.map(child => <a key={child.key} href="#" className="list-group-item">{child}</a>);

    return (
        <div className="panel panel-default">
            <div className="panel-heading">
                <h3 className="panel-title">{title}</h3>
            </div>
            <div className="panel-body">
                <div className="list-group">
                    {items}
                </div>
                <Button value='ADD' onClick={() => onAddClick()} />
            </div>
        </div>
    );
};

let participantListMappings = {
    mapStateToProps: state => ({
        title: 'Participants',
	    children: state.data.participants.ids.map(id => (<ParticipantTile key={id} participantId={id} />))
    }),
    mapEventsToProps: events => ({
        onAddClick: () => events.participantAdded()
    })
};

let ParticipantList = connect(participantListMappings.mapStateToProps, participantListMappings.mapEventsToProps)(List);

let itemListMappings = {
    mapStateToProps: state => ({
        title: 'Items',
	    children: state.data.items.ids.map(id => (<ItemTile key={id} itemId={id} />))
    }),
    mapEventsToProps: events => ({
        onAddClick: () => events.itemAdded()
    })
};

let ItemList = connect(itemListMappings.mapStateToProps, itemListMappings.mapEventsToProps)(List);

export { ParticipantList, ItemList };

{'fraction_non_alphanumeric': 0.14984282221446035, 'fraction_numerical': 0.0006985679357317499, 'mean_word_length': 2.977777777777778, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 44, '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': '4084323', 'n_tokens_mistral': 887, 'n_tokens_neox': 844, 'n_words': 163}