import * as React from 'react'

export default function Index() {
    const [data, setData] = React.useState({ hits: [] })
    const [query, setQuery] = React.useState('react')

    React.useEffect(() => {
        if (query === '') return

        function getFetchUrl() {
            return 'https://hn.algolia.com/api/v1/search?query=' + query
        }

        async function fetchData() {
            const res = await fetch(getFetchUrl())
            const data = await res.json()
            setData(data)
        }

        fetchData()
    }, [query])

    return (
        <>
            <input value={query} onChange={e => setQuery(e.target.value)} />
            <ul>
                {data.hits.map(item => (
                    <li key={item.objectID}>
                        <a href={item.url}>{item.title}</a>
                    </li>
                ))}
            </ul>
        </>
    )
}