diff --git a/src/App.js b/src/App.js
index 6657576..da8f1a5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,13 @@
import React from 'react'
import { RsvpReader } from './components/RsvpReader'
+import { GutenbergSearch } from './components/GutenbergSearch'
export const App = () => {
- return
+ return (
+ <>
+
+
+ >
+ )
}
diff --git a/src/components/GutenbergSearch.js b/src/components/GutenbergSearch.js
new file mode 100644
index 0000000..c797316
--- /dev/null
+++ b/src/components/GutenbergSearch.js
@@ -0,0 +1,82 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import axios from 'axios'
+import { useDispatch } from 'react-redux'
+import { debounce } from 'debounce'
+
+import { setText } 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))
+ }
+ return (
+
+
+ {id} {title.join(' - ')}
+
+
{author[0]}
+
{language.join(' - ')}
+
+
+
+
+
+ )
+}
+
+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 (
+
+
Search for books in the Gutenberg Project
+
setSearchTerm(e.target.value)}
+ >
+ {loading && 'loading...'}
+ {result.map(entry => (
+
+ ))}
+ {result.length === 0 &&
'no results to display'
}
+
+ )
+}
diff --git a/src/components/RsvpReader.js b/src/components/RsvpReader.js
index 12f9b6b..392d030 100644
--- a/src/components/RsvpReader.js
+++ b/src/components/RsvpReader.js
@@ -7,7 +7,7 @@ import { Options } from './Options'
import { PlayerControl } from './PlayerControl'
import styles from './RsvpReader.css'
-import { PipeMarker, BorderMarker } from './PivotMarker'
+import { BorderMarker } from './PivotMarker'
import { Progress } from './Progress'
import { TimeCalc } from './TimeCalc'
@@ -30,9 +30,7 @@ export const RsvpReader = () => {
-
-
-
+ {/* */}
)
}
diff --git a/src/index.js b/src/index.js
index 26d16de..09195c7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,3 +1,5 @@
+import 'regenerator-runtime/runtime'
+
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'