Updated error handle and restructured isLoading

src/components/manualBookForm/ManualBookForm.js

@@ -7,22 +7,25 @@ import { setError } from '../../redux/slices/errorSlice'
 
 const BookForm = () => {
   const dispatch = useDispatch()
-
   const [title, setTitle] = useState('')
   const [authors, setAuthors] = useState('')
-
   const books = useSelector(selectBook)
 
+  const filterExistingBooks = () => {
+    return books.find(
+      (existedBook) =>
+        existedBook.title.toLowerCase() === title.toLowerCase() &&
+        existedBook.authors.toLowerCase() === authors.toLowerCase()
+    )
+  }
+
   const handleSubmit = (e) => {
     e.preventDefault()
     if (title.trim() && authors.trim()) {
-      const filteredBooks = books.find(
-        (existedBook) =>
-          existedBook.title.toLowerCase() === title.toLowerCase() &&
-          existedBook.authors.toLowerCase() === authors.toLowerCase()
-      )
-      if (!filteredBooks) {
+      if (!filterExistingBooks()) {
         dispatch(addBook(createBook({ title, authors })))
+      } else {
+        dispatch(setError('The book is already in the List!'))
       }
     } else {
       dispatch(setError('Enter both Title and Author!'))

src/components/searchBookForm/SearchBookForm.js

@@ -15,9 +15,7 @@ const BookFormAPI = () => {
   const dispatch = useDispatch()
   const [bookToSearch, setBookToSearch] = useState('')
   const [isModalOpen, setIsModalOpen] = useState(false)
-
   const isLoading = useSelector(selectIsLoading)
-
   const searchResults = useSelector(selectSearchResults)
 
   const handleBookSearchSubmit = (e) => {
@@ -53,7 +51,11 @@ const BookFormAPI = () => {
             value={bookToSearch}
           ></input>
         </div>
-        <button type="submit" data-testid="bookSearchSubmit_btn">
+        <button
+          type="submit"
+          disabled={isLoading}
+          data-testid="bookSearchSubmit_btn"
+        >
           {isLoading ? <RiLoader2Line className="spinner" /> : 'Search'}
         </button>
       </form>

src/redux/slices/searchBookSlice.js

@@ -3,30 +3,30 @@ import { searchBookService } from '../../services/searchBookService'
 import { selectBook } from './booksSlice'
 import { setError } from './errorSlice'
 
+// Helper function to filter books that are already in the store
+const filterExistingBooks = (state, data) => {
+  const existingBooks = selectBook(state)
+  return data.filter(
+    (foundBook) =>
+      !existingBooks.some(
+        (existingBook) =>
+          existingBook.title.toLowerCase() === foundBook.title.toLowerCase() &&
+          existingBook.authors.toLowerCase() === foundBook.authors.toLowerCase()
+      )
+  )
+}
+
 export const searchBooks = createAsyncThunk(
   'booksSearch/search',
   async (query, thunkAPI) => {
     try {
       const data = await searchBookService(query)
-
       const state = thunkAPI.getState()
-      const existingBooks = selectBook(state)
 
-      const filteredBooks = data.filter(
-        (foundBook) =>
-          !existingBooks.some(
-            (existingBook) =>
-              existingBook.title.toLowerCase() ===
-                foundBook.title.toLowerCase() &&
-              existingBook.authors.toLowerCase() ===
-                foundBook.authors.toLowerCase()
-          )
-      )
-
-      return filteredBooks
+      return filterExistingBooks(state, data)
     } catch (error) {
-      thunkAPI.dispatch(setError(error.message))
-      return thunkAPI.rejectWithValue(error.message)
+      thunkAPI.dispatch(setError(error))
+      return thunkAPI.rejectWithValue(error)
     }
   }
 )
@@ -48,7 +48,6 @@ const searchBooksSlice = createSlice({
     builder
       .addCase(searchBooks.pending, (state) => {
         state.isLoading = true
-        // state.error = null
       })
       .addCase(searchBooks.fulfilled, (state, action) => {
         state.isLoading = false
@@ -64,8 +63,6 @@ const searchBooksSlice = createSlice({
 export const { clearSearchResults } = searchBooksSlice.actions
 
 export const selectSearchResults = (state) => state.booksSearch.searchResults
-
-export const selectIsLoading = (state) => state.booksSearch?.isLoading || false
-// export const selectError = (state) => state.booksSearch?.error || null
+export const selectIsLoading = (state) => state.booksSearch.isLoading
 
 export default searchBooksSlice.reducer

src/services/searchBookService.js

@@ -6,6 +6,10 @@ export async function searchBookService(query) {
 
   try {
     const response = await fetch(url)
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+
     const data = await response.json()
 
     if (data.items && data.items.length > 0) {
@@ -24,7 +28,7 @@ export async function searchBookService(query) {
       return []
     }
   } catch (error) {
-    console.error('Error searching for books:', error)
-    throw error
+    console.error('Error searching for books:', error.message)
+    throw error.message
   }
 }