84 lines
2.1 KiB
JavaScript
84 lines
2.1 KiB
JavaScript
import React, { useState, useEffect, useCallback } from 'react'
|
|
import axios from 'axios'
|
|
import { useDispatch } from 'react-redux'
|
|
import { debounce } from 'debounce'
|
|
|
|
import { setText, setLang } from '../store/actions.js'
|
|
|
|
async function search(searchTerm) {
|
|
const regex = new RegExp(searchTerm, 'i')
|
|
const result = []
|
|
const data = await import('../../data/gutenberg.json').then(
|
|
module => module.default
|
|
)
|
|
for (let entry of data) {
|
|
if (regex.test(entry.title[0]) || regex.test(entry.author[0])) {
|
|
result.push(entry)
|
|
}
|
|
|
|
if (result.length >= 20) break
|
|
}
|
|
return result
|
|
}
|
|
|
|
const Book = ({ entry }) => {
|
|
const dispatch = useDispatch()
|
|
const { author, language, rights, subject, title, id } = entry
|
|
|
|
const handleClick = async () => {
|
|
const url = `https://gutenberg.muperfredi.de/texts/${id}/stripped-body`
|
|
const text = await axios.get(url).then(res => res.data.body)
|
|
dispatch(setText(text))
|
|
dispatch(setLang(language[0]))
|
|
}
|
|
return (
|
|
<div>
|
|
<div>
|
|
{id} {title.join(' - ')}
|
|
</div>
|
|
<div>{author[0]}</div>
|
|
<div>{language.join(' - ')}</div>
|
|
<div>
|
|
<button onClick={handleClick}>Load</button>
|
|
</div>
|
|
<br></br>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export const GutenbergSearch = () => {
|
|
const [searchTerm, setSearchTerm] = useState('')
|
|
const [result, setResult] = useState([])
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
const debouncedSearch = useCallback(
|
|
debounce(async term => {
|
|
setLoading(true)
|
|
await search(term).then(setResult)
|
|
setLoading(false)
|
|
}, 500),
|
|
[]
|
|
)
|
|
|
|
useEffect(() => {
|
|
if (searchTerm.length > 0) {
|
|
debouncedSearch(searchTerm)
|
|
}
|
|
}, [searchTerm, debouncedSearch])
|
|
|
|
return (
|
|
<div>
|
|
<h2>Search for books in the Gutenberg Project</h2>
|
|
<input
|
|
value={searchTerm}
|
|
onChange={e => setSearchTerm(e.target.value)}
|
|
></input>
|
|
{loading && 'loading...'}
|
|
{result.map(entry => (
|
|
<Book key={entry.id} entry={entry} />
|
|
))}
|
|
{result.length === 0 && <div>'no results to display'</div>}
|
|
</div>
|
|
)
|
|
}
|