{"size": 1357, "ext": "js", "max_stars_repo_path": "src/components/BlogSearchBox/index.js", "max_stars_repo_name": "minhduc3701/tastech-ez", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/BlogSearchBox/index.js", "max_issues_repo_name": "minhduc3701/tastech-ez", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/BlogSearchBox/index.js", "max_forks_repo_name": "minhduc3701/tastech-ez", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 21.203125, "max_line_length": 76, "alphanum_fraction": 0.6256448047}
import React, { useState } from "react";
import { navigate } from "gatsby"
import { Form, Input, Button } from './style'
import { Icon } from '@iconify/react';
import searchLine from '@iconify/icons-ri/search-line';
import { injectIntl } from 'react-intl'
import { connect } from "react-redux"


const BlogSearchBox = props => {
  const [keyword, setKeyword] = useState('')

  const handleSubmit = e => {
    e.preventDefault()

    if (keyword.trim()) {
      props.updateKeyword(keyword.trim())
      
      if (typeof window !== 'undefined') {
        navigate(`${props.langUri}/blog/search?s=${keyword.trim()}`)
      }
      
    }
  }

return (
  <div className="widget">
    <div className="widget-content">
    <Form
    onSubmit={handleSubmit}
  >
    <Input
      type="text"
      value={keyword}
      onChange={e => setKeyword(e.target.value)}
      placeholder={props.intl.formatMessage({id: "blog.searchPlaceholder"})}
    />

    <Button type="submit">
      <Icon icon={searchLine} />
    </Button>
  </Form>
  </div>
  </div>
  )

}

const mapStateToProps = state => {
  return {
    keyword: state.keyword
  }
}

const mapDispatchToProps = dispatch => {
  return {
    updateKeyword: payload => dispatch({ type: `SET_KEYWORD`, payload })
  }
}

export default injectIntl(
  connect(mapStateToProps, mapDispatchToProps)(BlogSearchBox)
  )
