Select from the top100 books

src/App.js

@@ -14,6 +14,7 @@ import { TextInput } from 'components/TextInput'
 import { TextOutput } from 'components/TextOutput'
 import { TotalTime } from 'components/TotalTime'
 import { Div } from 'styles/Div'
+import { BookSelect } from 'components/BookSelect'
 
 export const App = () => {
   const { t } = useTranslation()
@@ -36,6 +37,8 @@ export const App = () => {
           <Div maxWidth="600px" margin="0 auto">
             <RsvpWidget />
           </Div>
+          <h2>Text Cursor</h2>
+          <TextOutput />
           <Flex flexWrap="wrap">
             <FlexMain padding="10px" minWidth="300px">
               <h2>Options</h2>
@@ -46,10 +49,10 @@ export const App = () => {
               <TextInput />
             </FlexMain>
           </Flex>
-          <h2>Text Output</h2>
-          <TextOutput />
           <h2>Time needed</h2>
           <TotalTime />
+          <h2>Select from Project Gutenberg Top 100</h2>
+          <BookSelect />
         </Container>
       </main>
       <footer>

src/components/BookSelect.js

@@ -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>
+  )
+}

src/components/SearchBar.js

@@ -32,8 +32,8 @@ export const SearchBar = () => {
   )
 
   const handleSelect = async idx => {
-    const { id, language } = results[idx]
-    setText(await getBook(id))
+    const { textUris, language } = results[idx]
+    setText(await getBook(textUris[0]))
     setLang(language[0])
   }
 

src/lib/gutenberg.js

@@ -3,7 +3,7 @@ import Axios from 'axios'
 export async function search(searchTerm, maxResults = Infinity) {
   const regex = new RegExp(searchTerm, 'i')
   const result = []
-  const data = await import('../../data/gutenberg.json').then(
+  const data = await import('../../data/PG-meta.json').then(
     module => module.default
   )
   for (let entry of data) {
@@ -16,8 +16,8 @@ export async function search(searchTerm, maxResults = Infinity) {
   return result
 }
 
-export async function getBook(bookId) {
-  const url = `https://gutenberg.muperfredi.de/texts/${bookId}/stripped-body`
+export async function getBook(textUri) {
+  const url = `https://aleph.gutenberg.org${textUri}`
   const text = await Axios.get(url).then(res => res.data.body)
   return text
 }