Remove old search

src/App.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { RsvpReader } from './components/RsvpReader'
-import { GutenbergSearch } from './components/GutenbergSearch'
+import { SearchBar } from './components/SearchBar'
 
 import './App.css'
 import { LangSelect } from './components/LangSelect'
@@ -13,11 +13,11 @@ export const App = () => {
     <>
       <header>
         <h1>{t('title')}</h1>
+        <SearchBar></SearchBar>
         <LangSelect />
       </header>
       <main>
         <RsvpReader></RsvpReader>
-        <GutenbergSearch></GutenbergSearch>
       </main>
       <footer>Made by Alfred Melch</footer>
     </>

src/components/GutenbergSearch.js

@@ -1,83 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react'
-import axios from 'axios'
-import { useDispatch } from 'react-redux'
-import { debounce } from 'debounce'
-
-import { setText, setLang } 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))
-    dispatch(setLang(language[0]))
-  }
-  return (
-    <div>
-      <div>
-        {id} {title.join(' – ')}
-      </div>
-      <div>{author[0]}</div>
-      <div>{language.join(' – ')}</div>
-      <div>
-        <button onClick={handleClick}>Load</button>
-      </div>
-      <br></br>
-    </div>
-  )
-}
-
-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 (
-    <div>
-      <h2>Search for books in the Gutenberg Project</h2>
-      <input
-        value={searchTerm}
-        onChange={e => setSearchTerm(e.target.value)}
-      ></input>
-      {loading && 'loading...'}
-      {result.map(entry => (
-        <Book key={entry.id} entry={entry} />
-      ))}
-      {result.length === 0 && <div>'no results to display'</div>}
-    </div>
-  )
-}