Update. Search Book Results Page

[sujinleeme]

TODO

• [x] Install packages: prop-types, escape-string-regexp, sort-by

AJAX

• [x] Use Ajax with BooksAPI.get()to retrieve data
• [x] Get a list of book with search keywords

REDUCX

• [x] Connect React Router and set URL to /search

UI

• [x] If result is not found, render No Book Found words.

Autocomplete Keywords

• [x] mouse event :highlighting selected <li>
• [x] key event : highlighting selected <li>

[sujinleeme]

References

• Conditional Rendering - React Official Docs

[sujinleeme]

Issue

Search Input Field

• [x] 7.23. - After press enter key, query is not updated. I should know how to handleonKeyPress andonChange
• [x] 7.23 - AJAX call failed message
• [x] 7.24 - Book ImageCover URL shows [object Object] instead of the contents of the object
• [x] 7.25 - Search Key Words List Filtering
• [x] 7.26 - Unexpected infinite loop with render => render must be pure (can't do ajax there)
• [x] 8.18 - Spacing is not working Input Field => remove trim() and when pressing enterKey, it goes to trim string.

[sujinleeme]

Learn

1. call onChange event after pressing Enter key

In onKeyDown you can check key. If it is ENTER pressed call event.preventDefault() to prevent onChange call, or if it is not - do nothing Javascript event queue doesn't contain change event until default handler for keydown event is called. If you call event.preventDefault() in onKeyDown handler no change event will be fired.

2. [Object object]

JSON.stringify() is to create a JSON string out of an object/array. Object object is the default string representation of a JavaScript Object. To Fix with : use JSON.stringify(theObject) theObject.toString()

A quick and dirty way to do this is to stringify your object, and then parse that JSON string back into a brand new object. I recommend creating a utility function, since you’ll likely want to re-use this throughout your app. Below is an example: - Comparing and Modifying Objects in React

function deepCopy(obj) {
  if (obj !== undefined && obj !== null) {
    return JSON.parse(JSON.stringify(obj));
  }

  return null;
}

3. Check if an array is empty in React

{this.state.books && this.state.books.length > 0

<ol className="books-grid">
  {this.state.books && this.state.books.length > 0 ? (
  <div>
    <BookShelf {...showingBooks} title="Result" />
  </div> ) : (
  <p>No Books Found :(</p>  )}
</ol>

4. Make Search keywords in Autocomplete

• Get Filtered List by User's input value

  currentMatches() {
    const list = this.state.list.SearchKeywords
    return list.filter((item) => {
      let searchInput = this.props.content;
      return item.label.indexOf(searchInput) > -1;
    })
  }

5. componentWillReceiveProps

Use LifeCyle methods to update state before render

  renderMatches() {
    let searchableKeywords = this.state.matched;
    return (
      <ol 
        className="match-keywords">
        {Object.keys(searchableKeywords).map((k, index) =>
          <AutocompleteItem key={k} keywords={this.state.list} {...searchableKeywords[k]} />
        )} 
      </ol>
   )
  }

  componentWillReceiveProps (nextProps){
    this.setState({matched : this.currentMatches()})
  }

  currentMatches() {
    const list = this.state.list.SearchKeywords
    return list.filter((item) => {
      let searchInput = this.props.content;
      return item.label.indexOf(searchInput) > -1;
    })
  }