<commit_before>import React, { FormEvent, CSSProperties } from 'react';
import InputGroup from 'react-bootstrap/InputGroup';
import FormControl from 'react-bootstrap/FormControl';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
import Icon from '@mdi/react';
import { mdiMagnify } from '@mdi/js';


const inputGroupStyle: CSSProperties = {
    zIndex: 1,
    position: 'absolute',
    width: '300px',
    margin: '1em'
}


export default ({ onSubmit }: { onSubmit: (query: string) => void}) => {

    let query = '';

    const submit = (event: FormEvent) => {
        event.preventDefault();
        onSubmit(query);
    }

    return (
        <Form onSubmit={submit}>
            <InputGroup style={inputGroupStyle}>
                <FormControl
                    autoFocus
                    placeholder="Suchen ..."
                    aria-label="Suchbegriff"
                    onChange={(event: any) => query = event.target.value}
                />
                <InputGroup.Append>
                    <Button variant="secondary" type="submit">
                        <Icon path={mdiMagnify} size={0.8}/>
                    </Button>
                </InputGroup.Append>
            </InputGroup>
        </Form>
    );

}<commit_msg>Move query to state again<commit_after>import React, { useState, FormEvent, CSSProperties } from 'react';
import InputGroup from 'react-bootstrap/InputGroup';
import FormControl from 'react-bootstrap/FormControl';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
import Icon from '@mdi/react';
import { mdiMagnify } from '@mdi/js';


const inputGroupStyle: CSSProperties = {
    zIndex: 1,
    position: 'absolute',
    width: '300px',
    margin: '1em'
}


export default ({ onSubmit }: { onSubmit: (query: string) => void}) => {

    const [query, setQuery] = useState('');

    const submit = (event: FormEvent) => {
        event.preventDefault();
        onSubmit(query);
    }

    return (
        <Form onSubmit={submit}>
            <InputGroup style={inputGroupStyle}>
                <FormControl
                    autoFocus
                    placeholder="Suchen ..."
                    aria-label="Suchbegriff"
                    onChange={(event: any) => setQuery(event.target.value)}
                />
                <InputGroup.Append>
                    <Button variant="secondary" type="submit">
                        <Icon path={mdiMagnify} size={0.8}/>
                    </Button>
                </InputGroup.Append>
            </InputGroup>
        </Form>
    );

}
{'fraction_non_alphanumeric': 0.12899543378995434, 'fraction_numerical': 0.00532724505327245, 'mean_word_length': 1.9773499433748585, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 31, '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': '7619520', 'n_tokens_mistral': 733, 'n_tokens_neox': 693, 'n_words': 166}