Desenvolvimento do Search e reset ao sair

src/components/Book/Book.jsx

@@ -39,6 +39,10 @@ function Book({book}) {
         return text.slice(0, limiter) + (text.length > limiter ? "..." : "");
     }
 
+    if(!book.authors){
+        book.authors = ["Unknown Author"];
+    }
+
     return (
         <Grid item>
             <Paper className={classes.paper}>

src/components/Navigation/Navigation.jsx

@@ -6,6 +6,7 @@ import NavigationPages from '../../data/NavigationPages';
 import { Tabs, Tab, Grid, Button } from '@material-ui/core';
 import { LibraryBooks, ImportContacts, Bookmarks, CheckCircle } from '@material-ui/icons';
 import SearchInput from '../SearchInput';
+import useSearch from '../../hooks/useSearch';
 
 const useStyles = makeStyles((theme) => ({
     link: {
@@ -20,17 +21,25 @@ function Navigation() {
     const history = useHistory();
     const [value, navValue] = useContent();
 
+    const search = useSearch();
+
     const pages = NavigationPages.pages;
     const pagesIcons = [<ImportContacts />, <Bookmarks />, <CheckCircle />];
 
+    const clearSearch = () => {
+        search[1].selected.alterarValor(null);
+    }
+
     const handleChangeEvent = (event, newValue) => {
         history.push(pages[newValue].link);
         navValue.selected.alterarValor(newValue);
+        clearSearch();
     };
-
+    
     const handleClickEvent = (event) => {
         history.push('');
         navValue.selected.alterarValor(0);
+        clearSearch();
     };
 
     const handleUseSearch = (newSelection) => {

src/components/Search/Search.jsx

@@ -1,13 +1,41 @@
-import React from 'react';
+import React, { useContext, useEffect, useState } from 'react';
+import Book from '../Book';
+import Loading from '../Loading';
+import { Grid, Container } from '@material-ui/core/';
+import ApiContext from '../../contexts/ApiContext';
 import useSearch from '../../hooks/useSearch';
 
 function Search() {
 
     const [value] = useSearch();
 
+    const context = useContext(ApiContext);
+
+    const [library, setLibrary] = useState(null);
+
+    useEffect(() => {
+        setLibrary(null);
+
+        context.controller.searchBooks(value, setLibrary);
+
+    }, [value, context]);
+
+    if (!library) {
+        return <Loading position="middle" padding={4}></Loading>;
+    }
+
     return (
         <>
-            <h1>{value}</h1>
+            <Container>
+                <Grid
+                    container
+                    direction="row"
+                    alignItems="flex-start"
+                    spacing={2}
+                >
+                    {library.map((book) => <Book key={book.id} book={book}></Book>)}
+                </Grid>
+            </Container>
         </>
     );
 }

src/controllers/BooksController.js

@@ -1,4 +1,4 @@
-import { getBook, getMyBooks, searchBooks, updateBook } from '../api/library.js';
+import { getMyBooks, searchBooks, updateBook } from '../api/library.js';
 import NavigationPages from '../data/NavigationPages';
 
 class BooksController {
@@ -19,10 +19,9 @@ class BooksController {
         this._inscritos = this._inscritos.filter(f => f !== func);
     }
 
-    getMyBooksFilterd(type, setDado, isDone) {
+    getMyBooksFilterd(type, setDado) {
         getMyBooks().then(data => {
             const myBooks = data.books.filter(book => book.shelf === type);
-            isDone = true;
             setDado(myBooks);
         });
     }
@@ -34,9 +33,10 @@ class BooksController {
 
     }
 
-    use() {
-        getBook();
-        searchBooks();
+    searchBooks(query, setDado){
+        searchBooks(query).then(data => {
+            setDado(data.books);
+        });
     }
 }