<commit_before>import React, { useState } from 'react';
import styled from 'styled-components';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';

import space from '../enums/space';
import { search } from '../redux/actions';
import { isSearchPending } from '../redux/selectors';
import { size } from '../enums/typography';

import Header from './Header';
import Spinner from './Spinner';

const Section = styled.section`
  width: 100%;
`;

const Form = styled.form`
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: ${space['sp-12']} 0;
`;

const Input = styled.input`
  background-color: ${({ theme }) => theme.secondary};
  border: 2px solid ${({ theme }) => theme.primary};
  border-radius: 5px;
  color: ${({ theme }) => theme.primary};
  font-size: 16px;
  padding: ${space['sp-12']} ${space['sp-8']};
  transition: 0.25s;
  width: calc(100% - ${space['sp-24']} * 2);
  max-width: 400px;

  &:hover {
    border-color: #34699a;
  }

  &::placeholder {
    text-align: center;
    transition: opacity 0.25s;
  }

  &:focus::placeholder {
    opacity: 0.5;
  }
`;

const Button = styled.button<{ isLoading: boolean }>`
  background-color: ${({ theme }) => theme.buttonBgColor};
  border: ${({ theme }) => theme.buttonBorder};
  border-radius: 5px;
  color: white;
  cursor: pointer;
  font-size: ${size['hecto']};
  height: 44px;
  letter-spacing: 1px;
  margin-top: ${space['sp-36']};
  outline: none;
  padding: ${props =>
    props.isLoading ? 0 : `${space['sp-12']} ${space['sp-8']}`};
  text-transform: uppercase;
  transition: 0.25s;
  width: 160px;

  &:hover {
    background-color: #34699a;
    border-color: #34699a;
  }
`;

type SearchFormProps = {
  isSearchPending: boolean;
  search: (input: string) => void;
};

const SearchForm: React.FC<SearchFormProps> = ({ isSearchPending, search }) => {
  const [input, setInput] = useState('');

  function handleChange(e: any) {
    setInput(e.target.value);
  }

  function handleSubmit(e: any) {
    e.preventDefault();
    search(input);
  }

  return (
    <Section>
      <Header />
      <Form onSubmit={handleSubmit}>
        <Input
          aria-label="Search"
          onChange={handleChange}
          placeholder="🍗      🍔      🧆      🍛"
          value={input}
        />
        <Button type="submit" isLoading={isSearchPending}>
          {isSearchPending ? <Spinner width={24} /> : 'Search'}
        </Button>
      </Form>
    </Section>
  );
};

const mapStateToProps = createStructuredSelector({
  isSearchPending
});

export default connect(mapStateToProps, { search })(SearchForm);<commit_msg>fix: Replace cross-browser unfriendly emoji placeholder text<commit_after>import React, { useState } from 'react';
import styled from 'styled-components';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';

import space from '../enums/space';
import { search } from '../redux/actions';
import { isSearchPending } from '../redux/selectors';
import { size } from '../enums/typography';

import Header from './Header';
import Spinner from './Spinner';

const Section = styled.section`
  width: 100%;
`;

const Form = styled.form`
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: ${space['sp-12']} 0;
`;

const Input = styled.input`
  background-color: ${({ theme }) => theme.secondary};
  border: 2px solid ${({ theme }) => theme.primary};
  border-radius: 5px;
  color: ${({ theme }) => theme.primary};
  font-size: 16px;
  padding: ${space['sp-12']} ${space['sp-8']};
  transition: 0.25s;
  width: calc(100% - ${space['sp-24']} * 2);
  max-width: 400px;

  &:hover {
    border-color: #34699a;
  }

  &::placeholder {
    text-align: center;
    transition: opacity 0.25s;
  }

  &:focus::placeholder {
    opacity: 0.5;
  }
`;

const Button = styled.button<{ isLoading: boolean }>`
  background-color: ${({ theme }) => theme.buttonBgColor};
  border: ${({ theme }) => theme.buttonBorder};
  border-radius: 5px;
  color: white;
  cursor: pointer;
  font-size: ${size['hecto']};
  height: 44px;
  letter-spacing: 1px;
  margin-top: ${space['sp-36']};
  outline: none;
  padding: ${props =>
    props.isLoading ? 0 : `${space['sp-12']} ${space['sp-8']}`};
  text-transform: uppercase;
  transition: 0.25s;
  width: 160px;

  &:hover {
    background-color: #34699a;
    border-color: #34699a;
  }
`;

type SearchFormProps = {
  isSearchPending: boolean;
  search: (input: string) => void;
};

const SearchForm: React.FC<SearchFormProps> = ({ isSearchPending, search }) => {
  const [input, setInput] = useState('');

  function handleChange(e: any) {
    setInput(e.target.value);
  }

  function handleSubmit(e: any) {
    e.preventDefault();
    search(input);
  }

  return (
    <Section>
      <Header />
      <Form onSubmit={handleSubmit}>
        <Input
          aria-label="Search"
          onChange={handleChange}
          placeholder="🍗      🍔      🍣      🍛"
          value={input}
        />
        <Button type="submit" isLoading={isSearchPending}>
          {isSearchPending ? <Spinner width={24} /> : 'Search'}
        </Button>
      </Form>
    </Section>
  );
};

const mapStateToProps = createStructuredSelector({
  isSearchPending
});

export default connect(
  mapStateToProps,
  { search }
)(SearchForm);
{'fraction_non_alphanumeric': 0.17524808088372965, 'fraction_numerical': 0.023591087811271297, 'mean_word_length': 3.280448717948718, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 41, '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': '6620172', 'n_tokens_mistral': 1888, 'n_tokens_neox': 1798, 'n_words': 408}