<commit_before>import React, { useState, FormEvent, ReactElement, useEffect } from 'react';
import { Card, Form, Button, InputGroup } from 'react-bootstrap';
import { useHistory, useLocation } from 'react-router-dom';
import Icon from '@mdi/react';
import { mdiMagnify } from '@mdi/js';
import { useTranslation } from 'react-i18next';
import { parseFrontendGetParams } from '../api/query';

export default function SearchBar({ projectId }: { projectId?: string }): ReactElement {

    const [queryString, setQueryString] = useState('');
    const history = useHistory();
    const { t } = useTranslation();
    const location = useLocation();

    useEffect(() => {
        setQueryString(parseFrontendGetParams(location.search).q);
    }, [location.search]);

    
    const submitSearch = (e: FormEvent): void => {

        e.preventDefault();
        history.push(`?q=${queryString}`);
    };

    return (
        <Card>
            <Form onSubmit={ submitSearch }>
                <InputGroup>
                    <Form.Control
                        autoFocus={ true }
                        type="text"
                        placeholder={ t('searchBar.search') }
                        value={ queryString }
                        onChange={ e => setQueryString(e.target.value) } />
                    <InputGroup.Append>
                        <Button variant="primary" type="submit">
                            <Icon path={ mdiMagnify } size={ 0.8 } />
                        </Button>
                    </InputGroup.Append>
                </InputGroup>
            </Form>
        </Card>
    );
}<commit_msg>Show empty input field instead of * in case of empty search query<commit_after>import React, { useState, FormEvent, ReactElement, useEffect } from 'react';
import { Card, Form, Button, InputGroup } from 'react-bootstrap';
import { useHistory, useLocation } from 'react-router-dom';
import Icon from '@mdi/react';
import { mdiMagnify } from '@mdi/js';
import { useTranslation } from 'react-i18next';
import { parseFrontendGetParams } from '../api/query';

export default function SearchBar({ projectId }: { projectId?: string }): ReactElement {

    const [queryString, setQueryString] = useState('');
    const history = useHistory();
    const { t } = useTranslation();
    const location = useLocation();

    useEffect(() => {
        setQueryString(parseQueryString(location.search));
    }, [location.search]);

    
    const submitSearch = (e: FormEvent): void => {

        e.preventDefault();
        history.push(`?q=${queryString}`);
    };

    return (
        <Card>
            <Form onSubmit={ submitSearch }>
                <InputGroup>
                    <Form.Control
                        autoFocus={ true }
                        type="text"
                        placeholder={ t('searchBar.search') }
                        value={ queryString }
                        onChange={ e => setQueryString(e.target.value) } />
                    <InputGroup.Append>
                        <Button variant="primary" type="submit">
                            <Icon path={ mdiMagnify } size={ 0.8 } />
                        </Button>
                    </InputGroup.Append>
                </InputGroup>
            </Form>
        </Card>
    );
}


const parseQueryString = (locationSearch: string): string => {

    const queryString = parseFrontendGetParams(locationSearch).q;
    return queryString === '*' ? '' : queryString;
};
{'fraction_non_alphanumeric': 0.1305094447624499, 'fraction_numerical': 0.0022896393817973667, 'mean_word_length': 1.9443976411120472, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 34, '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': '4796593', 'n_tokens_mistral': 915, 'n_tokens_neox': 878, 'n_words': 218}