<commit_before>import React = require('react');
import {connect} from 'react-redux';
import List = require('material-ui/lib/lists/list');
import ListDivider = require('material-ui/lib/lists/list-divider');
import ListItem = require('material-ui/lib/lists/list-item');
import Avatar = require('material-ui/lib/avatar');
import MenuItem = require('material-ui/lib/menus/menu-item');
import IconMenu = require('material-ui/lib/menus/icon-menu');
import IconButton = require('material-ui/lib/icon-button');
import FontIcon = require('material-ui/lib/font-icon');
import TextField = require('material-ui/lib/text-field');
import {StateType} from '../reducers';

const InsetStyle = {
    paddingTop: process.platform === 'darwin' ? '48px' : undefined
};

class App extends React.Component<{}, {}> {
    render() {
        const iconButton = (
            <IconButton iconClassName="menu-icon-button" tooltip="Actions">;
                <FontIcon className="muidocs-icon-navigation-more-vert"/>
            </IconButton>
        )

        const rightIconMenu = (
            <IconMenu iconButtonElement={iconButton}>
                <MenuItem primaryText="Refresh" />
                <MenuItem primaryText="Send feedback" />
                <MenuItem primaryText="Settings" />
                <MenuItem primaryText="Help" />
                <MenuItem primaryText="Sign out" />
            </IconMenu>
        );

        const divStyle = {
            paddingLeft: '108px',
            paddingTop: '32px',
            paddingBottom: '32px',
        };

        return (
            <div className="root" style={InsetStyle}>
                <div className="search-input">
                    <TextField
                        fullWidth
                        hintText="Search..." />
                </div>
                <List>
                    <ListItem
                        leftAvatar={<Avatar size={72} src="images/ok-128.jpg" />}
                        innerDivStyle={divStyle}
                        rightIconButton={rightIconMenu}
                        primaryText="<NAME>"
                        secondaryText={
                            <p>
                                I&apos;ll be in your neighborhood doing errands this weekend. Do you want to grab brunch?
                            </p>
                        }
                        secondaryTextLines={2} />
                    <ListDivider inset={true} />
                    <ListItem
                        leftAvatar={<Avatar size={72} src="images/kolage-128.jpg" />}
                        innerDivStyle={divStyle}
                        rightIconButton={rightIconMenu}
                        primaryText="me, <NAME>"
                        secondaryText={
                            <p>
                                Wish I could come, but I&apos;m out of town this weekend.
                            </p>
                        }
                        secondaryTextLines={2} />
                    <ListDivider inset={true} />
                    <ListItem
                        leftAvatar={<Avatar size={72} src="images/uxceo-128.jpg" />}
                        innerDivStyle={divStyle}
                        rightIconButton={rightIconMenu}
                        primaryText="<NAME>"
                        secondaryText={
                            <p>
                                Do you have any Paris recs? Have you ever been?
                            </p>
                        }
                        secondaryTextLines={2} />
                    <ListDivider inset={true} />
                    <ListItem
                        leftAvatar={<Avatar size={72} src="images/kerem-128.jpg" />}
                        innerDivStyle={divStyle}
                        rightIconButton={rightIconMenu}
                        primaryText="<NAME>"
                        secondaryText={
                            <p>
                                Do you have any ideas what we can get Heidi for her birthday? How about a pony?
                            </p>
                        }
                        secondaryTextLines={2} />
                    <ListDivider inset={true} />
                    <ListItem
                        leftAvatar={<Avatar size={72} src="images/raquelromanp-128.jpg" />}
                        innerDivStyle={divStyle}
                        rightIconButton={rightIconMenu}
                        primaryText="<NAME>"
                        secondaryText={
                            <p>
                                We should eat this: grated squash. Corn and tomatillo tacos.
                            </p>
                        }
                        secondaryTextLines={2} />
                    </List>
            </div>
        );
    }
}

function select(state: StateType) {
    console.log('foooooooooooo', state);
    return state;
}

export default connect(select)(App);<commit_msg>read test data from json<commit_after>import React = require('react');
import {connect} from 'react-redux';
import {Irasuto} from 'node-irasutoya';
import List = require('material-ui/lib/lists/list');
import ListDivider = require('material-ui/lib/lists/list-divider');
import ListItem = require('material-ui/lib/lists/list-item');
import Avatar = require('material-ui/lib/avatar');
import MenuItem = require('material-ui/lib/menus/menu-item');
import IconMenu = require('material-ui/lib/menus/icon-menu');
import IconButton = require('material-ui/lib/icon-button');
import FontIcon = require('material-ui/lib/font-icon');
import TextField = require('material-ui/lib/text-field');
import {StateType} from '../reducers';

const InsetStyle = {
    paddingTop: process.platform === 'darwin' ? '48px' : undefined
};

interface Props {
    irasutoya?: Irasuto[];
}

class App extends React.Component<Props, {}> {
    renderItems() {
        const divStyle = {
            paddingLeft: '108px',
            paddingTop: '32px',
            paddingBottom: '32px',
        };

        const iconButton = (
            <IconButton iconClassName="menu-icon-button" tooltip="Actions">;
                <FontIcon className="muidocs-icon-navigation-more-vert"/>
            </IconButton>
        )

        const rightIconMenu = (
            <IconMenu iconButtonElement={iconButton}>
                <MenuItem primaryText="Refresh" />
                <MenuItem primaryText="Send feedback" />
                <MenuItem primaryText="Settings" />
                <MenuItem primaryText="Help" />
                <MenuItem primaryText="Sign out" />
            </IconMenu>
        );

        // XXX:
        // Irasuto is too many to render
        return this.props.irasutoya.slice(0, 10).map((irasuto, idx) =>
            <ListItem
                key={'item-' + idx}
                leftAvatar={<Avatar size={72} src={irasuto.image_url} style={{borderRadius: '15%'}}/>}
                innerDivStyle={divStyle}
                rightIconButton={rightIconMenu}
                primaryText={irasuto.name}
                secondaryText={(irasuto as any).category.title}
            />
        );
    }

    render() {
        return (
            <div className="root" style={InsetStyle}>
                <div className="search-input">
                    <TextField
                        fullWidth
                        hintText="Search..." />
                </div>
                <List>
                    {this.renderItems()}
                </List>
            </div>
        );
    }
}

function select(state: StateType) {
    return state;
}

export default connect(select)(App);
{'fraction_non_alphanumeric': 0.11672337084532845, 'fraction_numerical': 0.007197068830149176, 'mean_word_length': 1.408002520478891, 'pattern_counts': {'":': 0, '<': 70, '<?xml version=': 0, '>': 71, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 1, 'word_list_counts': {'cursed_substrings.json': 3, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5909127', 'n_tokens_mistral': 1980, 'n_tokens_neox': 1853, 'n_words': 375}