CODEWITHSUNDEEP
javascriptjsonreactjs
Marwan Bshara
Marwan Bshara

Reputation: 57

My BooksAPI can not be resolved in my code?

I'm trying to solve this problem but I have found no solution because I believe my implementation is right. I'm writing code for books reading web which will have books that I read, want to read and reading. In the search page, I fetch all the books in the database, and I do search for a book then add that book to my shelves. I have implemented the function, but for some reason, I keep getting the same error which is ./src/Components/Search.js Module not found: Can't resolve './src/BooksAPI'

Here is my code:

import React from 'react'
import * as BooksAPI from './src/BooksAPI'
import escapeRegExp from 'escape-string-regexp'
class Search extends React.Component {
state = {
  query: '',
  allBooks: [],
  booksToSearch: []
 }
 handleChange = (query) => {
 this.setState({query: query });
 }
 componentDidMount = () => {
 BooksAPI.getAll()
  .then((response) => {
    this.setState({allBooks: response}
    );
  });
 }
 render() {
 const booksOnShelves = this.props.booksOnShelves;

 if (this.state.allBooks){
  for (const book in this.allBooks){
    for (const aBook in booksOnShelves){
      if (book.id !== aBook.id){
          this.state.booksToSearch.push(book.id);
      }
    }
  }
}
let showingBooks
if (this.state.query){
  const match = new RegExp(escapeRegExp(this.state.query), 'i')
  showingBooks = this.booksToSearch.filter( (book)=> match.test(book.title))
} else {
  showingBooks = this.state.allBooks;
 }
 return(
  <div className="search-books">
    <div className="search-books-bar">
      <button className="close-search" onClick={() => 
       this.props.showHomePage(false)}>Close</button>
      <div className="search-books-input-wrapper">
        <input type="text" placeholder="Search by title or author" value= 
         {this.state.query} onChange={ event => 
           this.handleChange(event.target.value)}/>
      </div>
    </div>
    <div className="search-books-results">
    <ol className="books-grid">
    {showingBooks.map( book=> (
      <li key={book.id}>
        <div className="book">
          <div className="book-top">
            <div className="book-cover" style={{
               width: 128,
               height: 193,
               backgroundImage: `url(${book.imageLinks.thumbnail})`
             }}>
             </div>
             <div className="book-shelf-changer">
               <select onChange={ event => this.props.moveBook(book, 
                  event.target.value)}>
                 <option value="move" disabled>Move to...</option>
                 <option value="currentlyReading">Currently Reading</option>
                 <option value="wantToRead">Want to Read</option>
                 <option value="read">Read</option>
                 <option value="none">None</option>
               </select>
             </div>
          </div>
          <div className="book-title">{book.title}</div>
          <div className="book-authors">{book.authors}</div>
        </div>
      </li>
    ))}
      </ol>
    </div>
  </div>
   )
  }
 }
 export default Search

Please, I need some help! I have checked to make sure that the json file is in the same folder I'm importing from. But My code is not working! and I believe that is the only issue.

P.s My code doesn't have indentation issue!

Upvotes: 0

Views: 28

Answers (1)

miles_b
miles_b

Reputation: 335

It's a problem with your directory structure and your import statements. The file you're working in is located at:

/src/Components/Search.js

and you're trying to import a file located at:

/src/BooksAPI

But the "." character says to start at the current directory, so what your import statement does is to try to import a file located at:

/src/Components/src/BooksAPI

Which I'm guessing probably doesn't exist in your project. This should work if you change your import statement to:

import * as BooksAPI from '../BooksAPI'

".." represents one directory level up from your current source file that's performing the import.

Upvotes: 1

Related Questions