added error slice and handled empty input enter

package.json

@@ -14,6 +14,7 @@
     "react-icons": "^5.3.0",
     "react-redux": "^9.1.2",
     "react-scripts": "5.0.1",
+    "react-toastify": "^10.0.6",
     "uuid": "^10.0.0",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -3,6 +3,7 @@ import BookFilter from './components/bookFilters/BookFilter'
 import BookForm from './components/manualBookForm/ManualBookForm'
 import SearchBookForm from './components/searchBookForm/SearchBookForm'
 import BookList from './components/bookList/BookList'
+import Error from './components/error/Error'
 
 function App() {
   return (
@@ -20,6 +21,7 @@ function App() {
           <BookList />
         </div>
       </main>
+      <Error />
     </div>
   )
 }

src/components/bookList/BookList.js

@@ -11,6 +11,7 @@ import {
   selectTitleFilter,
   selectAuthorsFilter,
 } from '../../redux/slices/filterSlice'
+import { setError } from '../../redux/slices/errorSlice'
 
 const BookList = () => {
   const books = useSelector(selectBook)
@@ -22,6 +23,8 @@ const BookList = () => {
     books.forEach((book) => {
       if (book.id === id && !book.isFavorite) {
         dispatch(deleteBook(id))
+      } else if (book.isFavorite) {
+        dispatch(setError("Can't Delete Favorite Book!"))
       }
     })
   }

src/components/error/Error.js

@@ -0,0 +1,21 @@
+import { ToastContainer, toast } from 'react-toastify'
+import { useDispatch, useSelector } from 'react-redux'
+import { useEffect } from 'react'
+import { clearError, selectErrorSlice } from '../../redux/slices/errorSlice'
+import 'react-toastify/dist/ReactToastify.css'
+
+const Error = () => {
+  const errorMessage = useSelector(selectErrorSlice)
+  const dispatch = useDispatch()
+
+  useEffect(() => {
+    if (errorMessage) {
+      toast.error(errorMessage)
+      dispatch(clearError())
+    }
+  }, [errorMessage, dispatch])
+
+  return <ToastContainer position="top-right" autoClose={2000} />
+}
+
+export default Error

src/components/manualBookForm/ManualBookForm.js

@@ -3,6 +3,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { addBook, selectBook } from '../../redux/slices/booksSlice'
 import createBook from '../../utils/createBook'
 import './ManualBookForm.css'
+import { setError } from '../../redux/slices/errorSlice'
 
 const BookForm = () => {
   const dispatch = useDispatch()
@@ -23,6 +24,8 @@ const BookForm = () => {
       if (!filteredBooks) {
         dispatch(addBook(createBook({ title, authors })))
       }
+    } else {
+      dispatch(setError('Enter both Title and Author!'))
     }
     setTitle('')
     setAuthors('')

src/components/searchBookForm/SearchBookForm.js

@@ -9,6 +9,7 @@ import {
   selectSearchResults,
   selectIsLoading,
 } from '../../redux/slices/searchBookSlice'
+import { setError } from '../../redux/slices/errorSlice'
 
 const BookFormAPI = () => {
   const dispatch = useDispatch()
@@ -21,9 +22,11 @@ const BookFormAPI = () => {
 
   const handleBookSearchSubmit = (e) => {
     e.preventDefault()
-    if (bookToSearch.trim() !== '') {
+    if (bookToSearch.trim()) {
       dispatch(searchBooks(bookToSearch))
       setIsModalOpen(true)
+    } else {
+      dispatch(setError('Enter Book Name to Search!'))
     }
     setBookToSearch('')
   }

src/redux/slices/errorSlice.js

@@ -0,0 +1,22 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+const initialState = ''
+
+const errorSlice = createSlice({
+  name: 'error',
+  initialState,
+  reducers: {
+    setError: (state, action) => {
+      return action.payload
+    },
+    clearError: () => {
+      return initialState
+    },
+  },
+})
+
+export const { setError, clearError } = errorSlice.actions
+
+export const selectErrorSlice = (state) => state.errorMessage
+
+export default errorSlice.reducer

src/redux/slices/searchBookSlice.js

@@ -1,14 +1,15 @@
 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
-import { searchBookOnGoogle } from '../../services/searchBookService'
+import { searchBookService } from '../../services/searchBookService'
 import { selectBook } from './booksSlice'
+import { setError } from './errorSlice'
 
 export const searchBooks = createAsyncThunk(
-  'booksSearch/searchBooks',
-  async (query, { getState, rejectWithValue }) => {
+  'booksSearch/search',
+  async (query, thunkAPI) => {
     try {
-      const data = await searchBookOnGoogle(query)
+      const data = await searchBookService(query)
 
-      const state = getState()
+      const state = thunkAPI.getState()
       const existingBooks = selectBook(state)
 
       const filteredBooks = data.filter(
@@ -24,7 +25,8 @@ export const searchBooks = createAsyncThunk(
 
       return filteredBooks
     } catch (error) {
-      return rejectWithValue(error.message)
+      thunkAPI.dispatch(setError(error.message))
+      return thunkAPI.rejectWithValue(error.message)
     }
   }
 )
@@ -46,7 +48,7 @@ const searchBooksSlice = createSlice({
     builder
       .addCase(searchBooks.pending, (state) => {
         state.isLoading = true
-        state.error = null
+        // state.error = null
       })
       .addCase(searchBooks.fulfilled, (state, action) => {
         state.isLoading = false
@@ -61,17 +63,9 @@ const searchBooksSlice = createSlice({
 
 export const { clearSearchResults } = searchBooksSlice.actions
 
-let lastSearchResults = []
-
-export const selectSearchResults = (state) => {
-  if (state.booksSearch.searchResults === lastSearchResults) {
-    return lastSearchResults
-  }
-  lastSearchResults = state.booksSearch.searchResults
-  return lastSearchResults
-}
+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 selectError = (state) => state.booksSearch?.error || null
 
 export default searchBooksSlice.reducer

src/redux/store.js

@@ -2,13 +2,15 @@ import { configureStore } from '@reduxjs/toolkit'
 import booksReducer from './slices/booksSlice'
 import filterReducer from './slices/filterSlice'
 import searchBookReducer from './slices/searchBookSlice'
+import errorReducer from './slices/errorSlice'
 
 const createStore = (preloadedState) => {
   return configureStore({
     reducer: {
       books: booksReducer,
       filter: filterReducer,
       booksSearch: searchBookReducer,
+      errorMessage: errorReducer,
     },
     preloadedState,
   })

src/services/searchBookService.js

@@ -1,4 +1,4 @@
-export async function searchBookOnGoogle(query) {
+export async function searchBookService(query) {
   const apiKey = process.env.REACT_APP_GOOGLE_BOOKS_API_KEY
   const url = `https://www.googleapis.com/books/v1/volumes?q=${encodeURIComponent(
     query