Select from the top100 books
parent
24586525e7
commit
4058ebb0f7
@ -0,0 +1,43 @@
|
|||||||
|
import React, { useState, useCallback } from 'react'
|
||||||
|
|
||||||
|
import bookIndex from '../../books/index.json'
|
||||||
|
import { Flex, FlexMain } from 'styles/Flex.js'
|
||||||
|
import Axios from 'axios'
|
||||||
|
import { useDispatch } from 'store'
|
||||||
|
|
||||||
|
const bookList = Object.entries(bookIndex).sort()
|
||||||
|
|
||||||
|
export const BookSelect = () => {
|
||||||
|
const [bookId, setBookId] = useState(bookList[0][0])
|
||||||
|
const { setText } = useDispatch()
|
||||||
|
|
||||||
|
const loadBook = useCallback(() => {
|
||||||
|
Axios.get(`/books/${bookId}.txt`)
|
||||||
|
.then(res => res.data)
|
||||||
|
.then(setText)
|
||||||
|
}, [bookId, setText])
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Flex>
|
||||||
|
<FlexMain>
|
||||||
|
<select
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
value={bookId}
|
||||||
|
onChange={evt => setBookId(evt.target.value)}
|
||||||
|
>
|
||||||
|
{/* <option value={0}>Select from Project Gutenberg Top 100</option> */}
|
||||||
|
{bookList.map(([id, title]) => (
|
||||||
|
<option key={id} value={id}>
|
||||||
|
{title}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</FlexMain>
|
||||||
|
<button onClick={loadBook}>Load</button>
|
||||||
|
</Flex>
|
||||||
|
<span>
|
||||||
|
<a href="https://www.gutenberg.org/browse/scores/top">Source</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
Loading…
Reference in New Issue