<commit_before>import React, { Component } from 'react';



class SearchPage extends Component {
    constructor () {
        super();
        this.state = {
            accounts: [],
            searchQuery: ''
        };
    }

    onSearchChange (value) {
        this.setState({searchQuery: value});
    }

    searchAccounts () {
        axios.get('/account/search?q=' + this.state.searchQuery).then((response) => {
            let accounts = [];
            response.data.forEach((account, index) => {
                accounts.push({
                    name: account.name,
                    id: account.account_id,
                    lastCredit: account.last_add,
                    lastMeal: account.last_subtract,
                    currentCredit: Number(account.balance)
                });
            });
            this.setState({accounts: accounts});
        });
    }

    render () {
        const {
            accounts,
            searchQuery
        } = this.state;
        return (
            <div class="SearchPage pa4">
                <div id="searchbar" class="">
                  <input class="h3 f3 pl2 w-70 b--purple ttu oswald"
                         type="text"
                         placeholder="search accounts"
                         onChange={(event) => this.onSearchChange(event.target.value)}/>
                  <input class="h3 f4 ph3 w-20 b--purple white bg-purple mb2 mr3 absolute oswald"
                         type="submit"
                         value="SEARCH"
                         onClick={() => this.searchAccounts(searchQuery)}
                         />
                </div>

                <div id='results'>
                  <ul class="list">
                    {accounts.map((account) =>
                        <li class="stripe-dark pv2 pl4"
                            onClick={() => this.props.switchView('accountpage', account)}
                            key={account.id}>
                            <p> {account.name} </p>
                            <p> {account.balance} </p>
                            <p>Last credit: {account.lastCredit}</p>
                            <p>Last purchase: {account.lastMeal}</p>
                        </li>
                    )}
                  </ul>
                </div>

            </div>
         );
    }
}

export default SearchPage;
<commit_msg>updated tachyons classes to get search bar and results to align<commit_after>import React, { Component } from 'react';



class SearchPage extends Component {
    constructor () {
        super();
        this.state = {
            accounts: [],
            searchQuery: ''
        };
    }

    onSearchChange (value) {
        this.setState({searchQuery: value});
    }

    searchAccounts () {
        axios.get('/account/search?q=' + this.state.searchQuery).then((response) => {
            let accounts = [];
            response.data.forEach((account, index) => {
                accounts.push({
                    name: account.name,
                    id: account.account_id,
                    lastCredit: account.last_add,
                    lastMeal: account.last_subtract,
                    currentCredit: Number(account.balance)
                });
            });
            this.setState({accounts: accounts});
        });
    }

    render () {
        const {
            accounts,
            searchQuery
        } = this.state;
        return (
            <div class="SearchPage pa4">
                <div id="searchbar" class="">
                  <input class="h3 f3 pl2 w-70 b--purple ttu oswald"
                         type="text"
                         placeholder="search accounts"
                         onChange={(event) => this.onSearchChange(event.target.value)}/>
                  <input class="h3 f4 ph0 w-25 b--purple white bg-purple mb2 mr3 absolute oswald"
                         type="submit"
                         value="SEARCH"
                         onClick={() => this.searchAccounts(searchQuery)}
                         />
                </div>

                <div id='results'>
                  <ul class="list pa0">
                    {accounts.map((account) =>
                        <li class="stripe-dark pv2 pa3"
                            onClick={() => this.props.switchView('accountpage', account)}
                            key={account.id}>
                            <p> {account.name} </p>
                            <p> {account.balance} </p>
                            <p>Last credit: {account.lastCredit}</p>
                            <p>Last purchase: {account.lastMeal}</p>
                        </li>
                    )}
                  </ul>
                </div>

            </div>
         );
    }
}

export default SearchPage;

{'fraction_non_alphanumeric': 0.11779344670261302, 'fraction_numerical': 0.006428867689755288, 'mean_word_length': 1.098781549173194, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 55, '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': '4403955', 'n_tokens_mistral': 1234, 'n_tokens_neox': 1169, 'n_words': 235}