<commit_before>import React from 'react';
import ActivityItem from './ActivityItem';

class ActivityList extends React.Component {
    render() {
        let rows = [];
        let currentRow = [];
        this.props.items.forEach((item) => {
            if (currentRow.length % 3 === 0 && currentRow.length > 0) {
                rows.push((
                    <div className="row" key={rows.length}>
                        {currentRow}
                    </div>
                ));
                currentRow = [];
            }
            currentRow.push((
                <div className="ui column" key={currentRow.length}>
                    <ActivityItem activity={item} />
                </div>
            ));
        });
        if (currentRow.length > 0) {
            rows.push((
                <div className="row" key={rows.length}>
                    {currentRow}
                </div>
            ));
        }
        let list = this.props.items.map((node, index) => {
            return (
                <div className="ui item" key={index}>
                    <ActivityItem activity={node} />
                </div>
            );
        });
        const listStyles = {
            'max-height': '400px',
            'overflow-y': 'auto'
        };
        return (
            <div ref="activityList">
                <div className="ui list" style={listStyles}>
                    {list}
                </div>
             </div>
        );
    }
}

export default ActivityList;
<commit_msg>added react styles in camel case<commit_after>import React from 'react';
import ActivityItem from './ActivityItem';

class ActivityList extends React.Component {
    render() {
        let rows = [];
        let currentRow = [];
        this.props.items.forEach((item) => {
            if (currentRow.length % 3 === 0 && currentRow.length > 0) {
                rows.push((
                    <div className="row" key={rows.length}>
                        {currentRow}
                    </div>
                ));
                currentRow = [];
            }
            currentRow.push((
                <div className="ui column" key={currentRow.length}>
                    <ActivityItem activity={item} />
                </div>
            ));
        });
        if (currentRow.length > 0) {
            rows.push((
                <div className="row" key={rows.length}>
                    {currentRow}
                </div>
            ));
        }
        let list = this.props.items.map((node, index) => {
            return (
                <div className="ui item" key={index}>
                    <ActivityItem activity={node} />
                </div>
            );
        });
        const listStyles = {
            maxHeight: '400px',
            overflowY: 'auto'
        };
        return (
            <div ref="activityList">
                <div className="ui list" style={listStyles}>
                    {list}
                </div>
             </div>
        );
    }
}

export default ActivityList;

{'fraction_non_alphanumeric': 0.12920065252854812, 'fraction_numerical': 0.004567699836867863, 'mean_word_length': 1.1350974930362117, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 39, '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': '7582867', 'n_tokens_mistral': 785, 'n_tokens_neox': 741, 'n_words': 163}