From 4058ebb0f7523c7649a7bc7c04674c3326d33530 Mon Sep 17 00:00:00 2001
From: Alfred Melch <dev@melch.pro>
Date: Sat, 14 Mar 2020 17:22:16 +0100
Subject: [PATCH] Select from the top100 books

---
 src/App.js                   |  7 ++++--
 src/components/BookSelect.js | 43 ++++++++++++++++++++++++++++++++++++
 src/components/SearchBar.js  |  4 ++--
 src/lib/gutenberg.js         |  6 ++---
 4 files changed, 53 insertions(+), 7 deletions(-)
 create mode 100644 src/components/BookSelect.js

diff --git a/src/App.js b/src/App.js
index 6475a11..b9e334c 100644
--- a/src/App.js
+++ b/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>
diff --git a/src/components/BookSelect.js b/src/components/BookSelect.js
new file mode 100644
index 0000000..e5ff1b5
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js
index 38bd950..14db776 100644
--- a/src/components/SearchBar.js
+++ b/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])
   }
 
diff --git a/src/lib/gutenberg.js b/src/lib/gutenberg.js
index 6e09236..472f455 100644
--- a/src/lib/gutenberg.js
+++ b/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
 }