apps/Radio/components/Search.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

import { useState } from 'react'
import styles from '../styles/Radio.module.scss'
import fetchJson from 'helpers/fetchJson'

const searchQuery = async (query, setResults) => {
  const results = await fetchJson('/api/radio/stations', {
    method: 'POST',
    body: JSON.stringify({ query })
  })

  setResults(results)
}

const Search = ({ setResults }) => {
  const [query, setQuery] = useState('')
  const changeQuery = e => setQuery(e.target.value)

  return (
    <div className={styles.search}>
      <input type="text" onChange={changeQuery} value={query} />
      <span
        className="window__button"
        onClick={() => searchQuery(query, setResults)}
      >
        Search
      </span>
    </div>
  )
}

export default Search