267 Book Search Autocomplete

frontend/package.json

@@ -10,6 +10,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.4.2",
     "@fortawesome/react-fontawesome": "^0.1.3",
     "bootstrap": "^4.1.3",
+    "history": "^4.9.0",
     "husky": "^1.1.0",
     "i": "^0.3.6",
     "lint-staged": "^7.3.0",

frontend/src/App.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { Router, Route, Switch } from 'react-router-dom';
+import history from './history';
 import PReadsNavbar from './components/PReadsNavbar';
 import Home from './pages/Home';
 import NoMatchPage from './pages/NoMatchPage';
@@ -59,7 +60,7 @@ function withAuthenticatedProtection(WrappedComponent) {
 class App extends Component {
   render() {
     return (
-      <Router>
+      <Router history={history}>
         <div>
           <Route path="/" component={PReadsNavbar} />
           <Switch>

frontend/src/components/search/AutoComplete.js

@@ -0,0 +1,83 @@
+import React, { useState, useEffect } from 'react';
+import history from '../../history';
+import { Link } from 'react-router-dom';
+import '../../styles/components/AutoComplete.scss';
+
+const AutoComplete = props => {
+  const [activeSuggestion, setActiveSuggestion] = useState(0);
+  const [filteredSuggestions, setFilteredSuggestions] = useState([]);
+  const [userInput, setUserInput] = useState('');
+
+  const onKeyDown = e => {
+    if (e.keyCode === 13) {
+      setActiveSuggestion(0);
+      setUserInput(filteredSuggestions[activeSuggestion]);
+      history.push(`/search?query=${filteredSuggestions[activeSuggestion]}`);
+    } else if (e.keyCode === 38) {
+      if (activeSuggestion === 0) return;
+      setActiveSuggestion(activeSuggestion - 1);
+    } else if (e.keyCode === 40) {
+      if (activeSuggestion === filteredSuggestions.length - 1) return;
+      setActiveSuggestion(activeSuggestion + 1);
+    }
+  };
+
+  const onInputChange = e => {
+    setUserInput(e.currentTarget.value);
+  };
+
+  useEffect(
+    () => {
+      if (userInput) {
+        setFilteredSuggestions(
+          props.suggestions.filter(
+            suggestion =>
+              suggestion.toLowerCase().indexOf(userInput.toLowerCase()) > -1
+          )
+        );
+      }
+      if (userInput === '') setFilteredSuggestions([]);
+    },
+    [userInput]
+  );
+
+  const renderSuggestionListComponent = () =>
+    filteredSuggestions.length ? (
+      <ul className="suggestions">
+        {filteredSuggestions.map((suggestion, i) => {
+          let className;
+
+          if (i === activeSuggestion) {
+            className = 'suggestion-active';
+          }
+          return (
+            <li className={className} key={suggestion}>
+              <Link className="link" to={`/search?query=${suggestion}`}>
+                {suggestion}
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    ) : (
+      <div className="no-suggestions">
+        {userInput && <em>No suggestions, sorry :(</em>}
+      </div>
+    );
+
+  return (
+    <>
+      <input
+        placeholder="Search for a book..."
+        type="text"
+        value={userInput}
+        onChange={onInputChange}
+        onKeyDown={onKeyDown}
+      />
+      <div>{renderSuggestionListComponent()}</div>
+      <br />
+    </>
+  );
+};
+
+export default AutoComplete;

frontend/src/components/search/RedirectingSearchBar.js

@@ -1,35 +1,19 @@
-import React, { Component } from 'react';
-import { Input } from 'reactstrap';
+import React, { useEffect, useState } from 'react';
+import AutoComplete from '../search/AutoComplete';
+import { getAllPublishedBooks } from '../../utils/api';
 
-class RedirectingSearchBar extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      query: ''
-    };
-  }
+const RedirectingSearchBar = () => {
+  const [bookTitles, setBookTitles] = useState([]);
 
-  handleChange = event => {
-    this.setState({ query: event.target.value });
-  };
-
-  handleKeyPress = event => {
-    if (event.key === 'Enter') {
-      event.preventDefault();
-      this.props.history.push(`/search?query=${this.state.query}`);
+  useEffect(() => {
+    async function fetchBooks() {
+      const response = await getAllPublishedBooks();
+      setBookTitles(response.result.results.map(book => book.name));
     }
-  };
+    fetchBooks();
+  }, []);
 
-  render() {
-    return (
-      <Input
-        type="text"
-        placeholder="Search for a book..."
-        onChange={this.handleChange}
-        onKeyPress={this.handleKeyPress}
-      />
-    );
-  }
-}
+  return <AutoComplete suggestions={bookTitles} />;
+};
 
 export default RedirectingSearchBar;