created allert slice and updated some messages

src/App.js

@@ -8,13 +8,14 @@ import SearchBookSection from './components/searchBookSection/SearchBookSection'
 import RandomBookSection from './components/randomBookSection/RandomBookSection'
 import BookListSection from './components/bookListSection/BookListSection'
 import Header from './components/header/Header'
+import Footer from './components/footer/Footer'
 import Login from './components/user/login/Login'
 import Signup from './components/user/signup/Signup'
 import Error from './components/error/Error'
+import Alert from './components/alertMessage/Alert'
 import { syncLoadBook } from './redux/slices/booksSlice'
 import { auth } from './api/services/firebaseConfig'
 import './App.css'
-import Footer from './components/footer/Footer'
 
 function App() {
   const dispatch = useDispatch()
@@ -60,6 +61,7 @@ function App() {
         </main>
         <Footer />
         <Error />
+        <Alert />
       </div>
     </BrowserRouter>
   )

src/components/alertMessage/Alert.jsx

@@ -0,0 +1,28 @@
+import { useEffect } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { ToastContainer, toast } from 'react-toastify'
+import { clearAlert, selectAlertSlice } from '../../redux/slices/alertSlice'
+import 'react-toastify/dist/ReactToastify.css'
+
+const Alert = () => {
+  const dispatch = useDispatch()
+  const alertMessage = useSelector(selectAlertSlice)
+
+  useEffect(() => {
+    if (alertMessage?.trim()) {
+      toast.info(alertMessage, {
+        onClose: () => dispatch(clearAlert()),
+      })
+    }
+  }, [alertMessage, dispatch])
+
+  return (
+    <ToastContainer
+      postion="top-right"
+      autoClose={2000}
+      bodyClassName="toast-message"
+    />
+  )
+}
+
+export default Alert

src/components/bookListSection/BookListSection.jsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { setError } from '../../redux/slices/errorSlice'
+import { setAlert } from '../../redux/slices/alertSlice'
+import BookListModal from './bookListModal/BookListModal'
 import Book from './book/Book'
-import './BookListSection.css'
 import {
   selectBook,
   syncLoadBook,
@@ -13,7 +13,7 @@ import {
   selectTitleFilter,
   selectAuthorsFilter,
 } from '../../redux/slices/filterSlice'
-import BookListModal from './bookListModal/BookListModal'
+import './BookListSection.css'
 
 const BookListSection = ({ 'data-testid': testId }) => {
   const dispatch = useDispatch()
@@ -46,7 +46,7 @@ const BookListSection = ({ 'data-testid': testId }) => {
         setIsModalOpen(false)
         setModalBook(null)
       } else {
-        dispatch(setError("Can't Delete Favorite Book!"))
+        dispatch(setAlert("Can't Delete Favorite Book!"))
       }
     }
   }

src/components/error/Error.jsx

@@ -11,8 +11,9 @@ const Error = () => {
 
   useEffect(() => {
     if (errorMessage?.trim()) {
-      toast.error(errorMessage)
-      dispatch(clearError())
+      toast.error(errorMessage, {
+        onClose: () => dispatch(clearError()),
+      })
     }
   }, [errorMessage, dispatch])
 

src/components/manualAddBookSection/ManualAddBookSection.jsx

@@ -2,10 +2,11 @@ import { useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { selectBook, syncAddBook } from '../../redux/slices/booksSlice'
 import createBook from '../../utils/createBook'
-import './ManualAddBookSection.css'
 import { setError } from '../../redux/slices/errorSlice'
+import { setAlert } from '../../redux/slices/alertSlice'
 import Button from '../common/button/Button'
 import Input from '../common/input/Input'
+import './ManualAddBookSection.css'
 
 const ManualAddBookSection = ({ 'data-testid': testId }) => {
   const dispatch = useDispatch()
@@ -27,7 +28,7 @@ const ManualAddBookSection = ({ 'data-testid': testId }) => {
       if (!filterExistingBooks()) {
         dispatch(syncAddBook(createBook({ title, authors })))
       } else {
-        dispatch(setError('The book is already in the List!'))
+        dispatch(setAlert('The book is already in the List!'))
       }
     } else {
       dispatch(setError('Enter both Title and Author!'))

src/components/randomBookSection/RandomBookSection.jsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { RiLoader2Line } from 'react-icons/ri'
-import RandomBookModal from './randomBookModal/RandomBookModal'
 import { selectBook } from '../../redux/slices/booksSlice'
-import { setError } from '../../redux/slices/errorSlice'
+import { setAlert } from '../../redux/slices/alertSlice'
+import RandomBookModal from './randomBookModal/RandomBookModal'
 import {
   selectRandomBooks,
   selectIsLoading,
@@ -15,11 +15,11 @@ const RandomBookSection = ({ 'data-testid': testId }) => {
   const dispatch = useDispatch()
   const randomBooks = useSelector(selectRandomBooks)
   const isLoading = useSelector(selectIsLoading)
+  const books = useSelector(selectBook)
   const [currentImageIndex, setCurrentImageIndex] = useState(0)
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [isBookExist, setIsBookExist] = useState(false)
   const [modalBook, setModalBook] = useState(null)
-  const books = useSelector(selectBook)
 
   useEffect(() => {
     dispatch(getRandomBooks())
@@ -50,7 +50,7 @@ const RandomBookSection = ({ 'data-testid': testId }) => {
     setIsModalOpen(true)
 
     if (bookExistence) {
-      dispatch(setError('You already have this book in the list!'))
+      dispatch(setAlert('You already have this book in the list!'))
     }
   }
 
@@ -69,7 +69,6 @@ const RandomBookSection = ({ 'data-testid': testId }) => {
             <img
               src={randomBooks[currentImageIndex]?.image || ''}
               alt={randomBooks[currentImageIndex]?.title || 'No book available'}
-              aria-label="Click to see book details"
               onClick={handleOpenBookModal}
               data-testid="random_book_img"
             />

src/components/randomBookSection/randomBookModal/RandomBookModal.jsx

@@ -1,5 +1,5 @@
 import { useDispatch } from 'react-redux'
-import { addBook } from '../../../redux/slices/booksSlice'
+import { syncAddBook } from '../../../redux/slices/booksSlice'
 import createBook from '../../../utils/createBook'
 import Button from '../../common/button/Button'
 import Modal from '../../common/modal/Modal'
@@ -9,7 +9,7 @@ const RandomBookModal = ({ isOpen, onClose, modalBook, isBookExist }) => {
   const dispatch = useDispatch()
 
   const handleAddBook = (book) => {
-    dispatch(addBook(createBook(book)))
+    dispatch(syncAddBook(createBook(book)))
     onClose()
   }
 

src/redux/slices/alertSlice.js

@@ -0,0 +1,22 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+const initialState = ''
+
+const alertSlice = createSlice({
+  name: 'alert',
+  initialState,
+  reducers: {
+    setAlert: (state, action) => {
+      return action.payload
+    },
+    clearAlert: () => {
+      return initialState
+    },
+  },
+})
+
+export const { setAlert, clearAlert } = alertSlice.actions
+
+export const selectAlertSlice = (state) => state.alertMessage
+
+export default alertSlice.reducer

src/redux/slices/booksSlice.js

@@ -130,6 +130,7 @@ export const syncToggleFavorite = (id) => async (dispatch) => {
       const revertedToggle = { ...book, isFavorite: !book.isFavorite }
       await setDoc(bookRef, revertedToggle)
     }
+
     dispatch(toggleFavorite(id))
   } catch (error) {
     console.error('Error toggling favorite in Firebase:', error.message)

src/redux/store.js

@@ -4,6 +4,7 @@ import filterReducer from './slices/filterSlice'
 import searchBookReducer from './slices/searchBookSlice'
 import randomBooksReducer from './slices/randomBooksSlice'
 import errorReducer from './slices/errorSlice'
+import alertReducer from './slices/alertSlice'
 
 const createStore = (preloadedState) => {
   return configureStore({
@@ -13,6 +14,7 @@ const createStore = (preloadedState) => {
       booksSearch: searchBookReducer,
       randomBooks: randomBooksReducer,
       errorMessage: errorReducer,
+      alertMessage: alertReducer,
     },
     preloadedState,
   })