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