This commit add searchInput, search and SearchedList Component html a…

…nd functionality Removed getBooks and move function from Home component and placed in App component

package.json

@@ -13,6 +13,7 @@
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
+    "throttle-debounce": "^3.0.1",
     "web-vitals": "^1.1.2"
   },
   "scripts": {

src/App.js

@@ -1,13 +1,74 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+
+import { debounce } from 'throttle-debounce';
 
 // Styling
 import './App.css';
 
+// Api
+import * as BooksApi from './api/booksApi';
+
 // Importing Navigation which contain our app links
 import Navigation from './navigation/Navigation';
 
 const App = () => {
-  return <Navigation />;
+  const [books, setBooks] = useState([]);
+  const [searchbooks, setSearchBooks] = useState([]);
+
+  // Calling Api and fetching all books
+  useEffect(() => {
+    const fetchApi = async () => {
+      await BooksApi.getAll()
+        .then((book) => {
+          setBooks(book);
+        })
+        .catch((err) => console.log(err));
+    };
+    fetchApi();
+  }, []);
+
+  // Move books on different shelf function
+  const updateShelf = (book, shelf) => {
+    console.log('Move to =>', book, shelf);
+    BooksApi.update(book, shelf).catch((err) => {
+      console.log(err);
+    });
+    if (shelf === 'none') {
+      setBooks(books.filter((b) => b.id !== book.id));
+    } else {
+      book.shelf = shelf;
+      setBooks(books.filter((b) => b.id !== book.id).concat(book));
+    }
+  };
+
+  // Search books function
+  const searchBooks = debounce(200, false, (query) => {
+    if (query.length > 0) {
+      BooksApi.search(query).then((book) => {
+        if (book.error) {
+          setSearchBooks([]);
+        } else {
+          setSearchBooks(book);
+        }
+      });
+    } else {
+      setSearchBooks([]);
+    }
+  });
+
+  const resetSearch = () => {
+    setSearchBooks([]);
+  };
+
+  return (
+    <Navigation
+      books={books}
+      move={updateShelf}
+      search={searchBooks}
+      searchedBooks={searchbooks}
+      reset={resetSearch}
+    />
+  );
 };
 
 export default App;

src/components/search/SearchInput.js

@@ -1,15 +1,20 @@
 import React, { useState } from 'react';
 
-const SearchInput = () => {
+const SearchInput = (props) => {
+  const { search } = props;
+
   const [value, setValue] = useState('');
 
-  const handleSearch = () => {};
+  const handleSearch = (e) => {
+    setValue(e.target.value);
+    search(value);
+  };
 
   return (
     <div className='search-books-input-wrapper'>
       <input
         type='text'
-        value={value}
+        // value={value}
         onChange={handleSearch}
         placeholder='Search by title or author'
         autoFocus

src/components/search/SearchedList.js

@@ -1,7 +1,35 @@
 import React from 'react';
 
-const SearchedList = () => {
-  return <div></div>;
+// Components
+import Book from '../book/Book';
+
+const SearchedList = (props) => {
+  const { searchedBooks, books, move } = props;
+
+  const searchedlist = searchedBooks.map((book) => {
+    books.map((b) => {
+      if (b.id === book.id) {
+        book.shelf = b.shelf;
+      }
+      return b;
+    });
+    return book;
+  });
+
+  return (
+    <div className='search-books-results'>
+      <ol className='books-grid'>
+        {searchedlist.map((book) => (
+          <Book
+            key={book.id}
+            book={book}
+            shelf={book.shelf ? book.shelf : 'none'}
+            move={move}
+          />
+        ))}
+      </ol>
+    </div>
+  );
 };
 
 export default SearchedList;

src/containers/Home.js

@@ -1,49 +1,20 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 
 // Importing link from react-router-dom to link search page
 import { Link } from 'react-router-dom';
 
 // Components
 import BookShelf from '../components/book/BookShelf';
 
-// Api
-import * as BooksApi from '../api/booksApi';
-
 // Book Shelves
 const bookshelves = [
   { key: 'currentlyReading', name: 'Currently Reading' },
   { key: 'wantToRead', name: 'Want to Read' },
   { key: 'read', name: 'Read' },
 ];
 
-const Home = () => {
-  const [books, setBooks] = useState([]);
-
-  // Calling Api and fetching all books
-  useEffect(() => {
-    const fetchApi = async () => {
-      await BooksApi.getAll()
-        .then((book) => {
-          setBooks(book);
-        })
-        .catch((err) => console.log(err));
-    };
-    fetchApi();
-  }, []);
-
-  // Move books on different shelf function
-  const updateShelf = (book, shelf) => {
-    console.log('Move to =>', book, shelf);
-    BooksApi.update(book, shelf).catch((err) => {
-      console.log(err);
-    });
-    if (shelf === 'none') {
-      setBooks(books.filter((b) => b.id !== book.id));
-    } else {
-      book.shelf = shelf;
-      setBooks(books.filter((b) => b.id !== book.id).concat(book));
-    }
-  };
+const Home = (props) => {
+  const { books, move } = props;
 
   return (
     <div className='list-books'>
@@ -57,7 +28,7 @@ const Home = () => {
               key={shelf.key}
               shelf={shelf}
               books={books}
-              move={updateShelf}
+              move={move}
             />
           ))}
         </div>

src/containers/Search.js

@@ -1,7 +1,28 @@
 import React from 'react';
 
-const Search = ({ navigation }) => {
-  return <div></div>;
+// Importing link from react-router-dom to link home page
+import { Link } from 'react-router-dom';
+
+// Components
+import SearchedList from '../components/search/SearchedList';
+import SearchInput from '../components/search/SearchInput';
+
+const Search = (props) => {
+  const { search, books, move, reset, searchedBooks } = props;
+
+  return (
+    <div className='search-books'>
+      <div className='search-books-bar'>
+        <Link to='/'>
+          <button className='close-search' onClick={reset}>
+            Close
+          </button>
+        </Link>
+        <SearchInput search={search} />
+      </div>
+      <SearchedList searchedBooks={searchedBooks} books={books} move={move} />
+    </div>
+  );
 };
 
 export default Search;

src/navigation/Navigation.js

@@ -7,12 +7,29 @@ import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import Home from '../containers/Home';
 import Search from '../containers/Search';
 
-const Navigation = () => {
+const Navigation = (props) => {
+  const { books, move, search, reset, searchedBooks } = props;
   return (
     <Router>
       <Switch>
-        <Route exact path='/' component={Home} />
-        <Route exact path='/search' component={Search} />
+        <Route
+          exact
+          path='/'
+          render={() => <Home books={books} move={move} />}
+        />
+        <Route
+          exact
+          path='/search'
+          render={() => (
+            <Search
+              books={books}
+              move={move}
+              search={search}
+              reset={reset}
+              searchedBooks={searchedBooks}
+            />
+          )}
+        />
         <Route>Error 404</Route>
       </Switch>
     </Router>