Use lib function to fetch book

src/components/Book.js

@@ -1,18 +1,10 @@
 import React from 'react'
-import { getBook } from '../lib/gutenberg'
 
 import styles from './Book.css'
-import { useStore } from '../store'
 
-export const Book = ({ author, language, title, id }) => {
+export const Book = ({ author, language, title }) => {
-  const [_, { setText, setLang }] = useStore()
-
-  const handleClick = async () => {
-    setText(await getBook(id))
-    setLang(language[0])
-  }
   return (
-    <div className={styles.book} onClick={handleClick}>
+    <div className={styles.book}>
       <div className={styles.title}>{title.join(' – ')}</div>
       <div className={styles.author}>{author[0]}</div>
       <div className={styles.language}>{language.join(' – ')}</div>

src/components/SearchBar.js

@@ -5,9 +5,8 @@ import { FiSearch } from 'react-icons/fi'
 import { useDispatch } from '../store'
 
 import { useTranslation } from 'react-i18next'
-import axios from 'axios'
 
-import { search } from '../lib/gutenberg'
+import { search, getBook } from '../lib/gutenberg'
 import { Spinner } from '../styles/Spinner'
 import { Dropdown } from './generics/Dropdown'
 import { Book } from './Book'
@@ -32,12 +31,10 @@ export const SearchBar = () => {
     []
   )
 
-  const handleClick = async idx => {
+  const handleSelect = async idx => {
     const { id, language } = results[idx]
-    const url = `https://gutenberg.muperfredi.de/texts/${id}/stripped-body`
+    setText(await getBook(id))
-    const text = await axios.get(url).then(res => res.data.body)(setText(text))(
+    setLang(language[0])
-      setLang(language[0])
-    )
   }
 
   useEffect(() => {
@@ -72,7 +69,7 @@ export const SearchBar = () => {
             items={results.map(entry => (
               <Book {...entry} />
             ))}
-            onSelect={handleClick}
+            onSelect={handleSelect}
           />
         </Dropdown>
       </div>