Merge pull request #6 from Blockchain-Country/toggle

added toggle favorite functionality and covered with unit tests

package.json

@@ -9,6 +9,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
     "react-redux": "^9.1.2",
     "react-scripts": "5.0.1",
     "uuid": "^10.0.0",
@@ -37,5 +38,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
   }
 }

src/components/bookList/BookList.js

@@ -1,14 +1,27 @@
 import { useDispatch, useSelector } from 'react-redux'
+import { TbStar } from 'react-icons/tb'
+import { TbStarFilled } from 'react-icons/tb'
+import {
+  selectBook,
+  deleteBook,
+  toggleFavorite,
+} from '../../redux/slices/BooksSlice'
 import './BookList.css'
-import { selectBook } from '../../redux/slices/BooksSlice'
-import { deleteBook } from '../../redux/slices/BooksSlice'
 
 const BookList = () => {
   const books = useSelector(selectBook)
   const dispatch = useDispatch()
 
   const handleDeleteBook = (id) => {
-    dispatch(deleteBook(id))
+    books.forEach((book) => {
+      if (book.id === id && !book.isFavorite) {
+        dispatch(deleteBook(id))
+      }
+    })
+  }
+
+  const toggleFavoriteBook = (id) => {
+    dispatch(toggleFavorite(id))
   }
 
   return (
@@ -30,6 +43,16 @@ const BookList = () => {
                   </span>
                 </div>
                 <div className="book-actions">
+                  <span
+                    onClick={() => toggleFavoriteBook(book.id)}
+                    data-testid={`isFavorite_${book.isFavorite}`}
+                  >
+                    {book.isFavorite ? (
+                      <TbStarFilled className="star-icon" />
+                    ) : (
+                      <TbStar className="star-icon" />
+                    )}
+                  </span>
                   <button
                     onClick={() => handleDeleteBook(book.id)}
                     data-testid="delete_book_btn"

src/components/bookList/BookList.test.js

@@ -55,4 +55,46 @@ describe('BookList Component Tests', () => {
     const noBooksSign = within(container).getByTestId('no_books_sign')
     expect(noBooksSign).toBeInTheDocument()
   })
+
+  test('Should not able to delete Favorite book', () => {
+    const mockedStore = createStore({
+      books: [
+        {
+          title: bookTitleName,
+          author: bookAuthorName,
+          id: bookId,
+          isFavorite: false,
+        },
+      ],
+    })
+
+    const { container } = setup(BookList, mockedStore)
+
+    const bookItems = within(container).getByTestId(bookId)
+    let isFavoriteFalse = within(bookItems).getByTestId('isFavorite_false')
+    expect(isFavoriteFalse).toBeInTheDocument()
+
+    fireEvent.click(isFavoriteFalse)
+    let isFavoriteTrue = within(bookItems).getByTestId('isFavorite_true')
+    expect(isFavoriteTrue).toBeInTheDocument()
+
+    //try to delete toggled book:
+    let deleteBookBtn = within(bookItems).getByTestId('delete_book_btn')
+    fireEvent.click(deleteBookBtn)
+    expect(bookItems).toBeInTheDocument()
+
+    //untoggle favorite:
+    isFavoriteTrue = within(bookItems).getByTestId('isFavorite_true')
+    fireEvent.click(isFavoriteTrue)
+    isFavoriteFalse = within(bookItems).getByTestId('isFavorite_false')
+    expect(isFavoriteFalse).toBeInTheDocument()
+
+    //delete book:
+    deleteBookBtn = within(bookItems).getByTestId('delete_book_btn')
+    fireEvent.click(deleteBookBtn)
+
+    //assert if the book deleted from the DOM:
+    const deletedBookItem = within(container).queryByTestId(bookId)
+    expect(deletedBookItem).toBeNull()
+  })
 })

src/redux/slices/BooksSlice.js

@@ -13,10 +13,17 @@ const booksSlice = createSlice({
     deleteBook: (state, action) => {
       return state.filter((book) => book.id !== action.payload)
     },
+    toggleFavorite: (state, action) => {
+      state.forEach((book) => {
+        if (book.id === action.payload) {
+          book.isFavorite = !book.isFavorite
+        }
+      })
+    },
   },
 })
 
-export const { addBook, deleteBook } = booksSlice.actions
+export const { addBook, deleteBook, toggleFavorite } = booksSlice.actions
 
 export const selectBook = (state) => state.books
 

src/utils/createBook.js

@@ -4,6 +4,7 @@ const createBook = (book) => {
   return {
     ...book,
     id: uuidv4(),
+    isFavorite: false,
   }
 }