From 5daac7df1d24148d157c8587970cb3dca3a23274 Mon Sep 17 00:00:00 2001
From: Kot Anton <707myemail@gmail.com>
Date: Wed, 23 Oct 2024 21:44:31 -0400
Subject: [PATCH 1/2] added toggle favorite functionality and covered with unit
 tests

---
 package-lock.json                        |  9 +++++
 package.json                             |  1 +
 src/components/bookList/BookList.js      | 29 ++++++++++++++--
 src/components/bookList/BookList.test.js | 42 ++++++++++++++++++++++++
 src/redux/slices/BooksSlice.js           |  9 ++++-
 src/utils/createBook.js                  |  1 +
 6 files changed, 87 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d388125..64f25ea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,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",
@@ -14866,6 +14867,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-icons": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
+      "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index 60a88b1..834e960 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/bookList/BookList.js b/src/components/bookList/BookList.js
index 86f4a4a..6e85a31 100644
--- a/src/components/bookList/BookList.js
+++ b/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"
diff --git a/src/components/bookList/BookList.test.js b/src/components/bookList/BookList.test.js
index c658664..5ea5227 100644
--- a/src/components/bookList/BookList.test.js
+++ b/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()
+  })
 })
diff --git a/src/redux/slices/BooksSlice.js b/src/redux/slices/BooksSlice.js
index 5136193..217a953 100644
--- a/src/redux/slices/BooksSlice.js
+++ b/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.map((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
 
diff --git a/src/utils/createBook.js b/src/utils/createBook.js
index ec96866..9c47660 100644
--- a/src/utils/createBook.js
+++ b/src/utils/createBook.js
@@ -4,6 +4,7 @@ const createBook = (book) => {
   return {
     ...book,
     id: uuidv4(),
+    isFavorite: false,
   }
 }
 

From ecdefe6918c184413913d1fe843d99c8769ba802 Mon Sep 17 00:00:00 2001
From: Kot Anton <707myemail@gmail.com>
Date: Wed, 23 Oct 2024 22:09:27 -0400
Subject: [PATCH 2/2] updated dependency and updated the BooksSlice reducer
 toggleFavorite

---
 package-lock.json              | 28 +++++++++++++++++++++++++---
 package.json                   |  3 +++
 src/redux/slices/BooksSlice.js |  2 +-
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 64f25ea..396cdf9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,9 @@
         "react-scripts": "5.0.1",
         "uuid": "^10.0.0",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -631,9 +634,17 @@
       }
     },
     "node_modules/@babel/plugin-proposal-private-property-in-object": {
-      "version": "7.21.0-placeholder-for-preset-env.2",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
-      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+      "version": "7.21.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz",
+      "integrity": "sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==",
+      "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.21.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+      },
       "engines": {
         "node": ">=6.9.0"
       },
@@ -1843,6 +1854,17 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-private-property-in-object": {
+      "version": "7.21.0-placeholder-for-preset-env.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/preset-env/node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
diff --git a/package.json b/package.json
index 834e960..0cc0986 100644
--- a/package.json
+++ b/package.json
@@ -38,5 +38,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
   }
 }
diff --git a/src/redux/slices/BooksSlice.js b/src/redux/slices/BooksSlice.js
index 217a953..bc66fa7 100644
--- a/src/redux/slices/BooksSlice.js
+++ b/src/redux/slices/BooksSlice.js
@@ -14,7 +14,7 @@ const booksSlice = createSlice({
       return state.filter((book) => book.id !== action.payload)
     },
     toggleFavorite: (state, action) => {
-      state.map((book) => {
+      state.forEach((book) => {
         if (book.id === action.payload) {
           book.isFavorite = !book.isFavorite
         }