Created a Book component which inherit from BookList.js

Blockchain-Country · Nov 7, 2024 · 16ab140 · 16ab140
1 parent 52ead46
commit 16ab140
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 90 deletions.
diff --git a/src/components/book/Book.css b/src/components/book/Book.css
@@ -0,0 +1,57 @@
+.book-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: auto;
+  padding: 10px 20px;
+  border-bottom: 1px solid #ccc;
+  background-color: #fff;
+  list-style-type: none;
+}
+
+.book-item:nth-child(even) {
+  background-color: #f2f2f2;
+}
+
+.book-item:hover {
+  background-color: #dbe4f8;
+}
+
+.book-item button {
+  background-color: #fff;
+  color: red;
+  border: 1px solid red;
+  padding: 8px 12px;
+  border-radius: 3px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.book-item button:hover {
+  background-color: #fdd;
+}
+
+.book-item .highlight {
+  background-color: rgba(150, 182, 238, 0.605);
+  border-radius: 5px;
+  padding: 0 0.5px;
+}
+
+.book-item .book-info {
+  flex: 1;
+  text-align: left;
+}
+
+.book-item .book-actions {
+  display: flex;
+  align-items: center;
+}
+
+.book-item .star-icon {
+  width: 24px;
+  height: 24px;
+  margin: 0 20px;
+  cursor: pointer;
+  transition: color 0.3s ease;
+  color: #fca510;
+}
diff --git a/src/components/book/Book.js b/src/components/book/Book.js
@@ -0,0 +1,41 @@
+import { TbStar } from 'react-icons/tb'
+import { TbStarFilled } from 'react-icons/tb'
+import './Book.css'
+
+const book = ({ book, index, onHandleDeleteBook, onToggleFavoriteBook }) => {
+  return (
+    <>
+      <li className="book-item" key={book.id} data-testid={book.id}>
+        <div className="book-info">
+          <span>{++index}. </span>
+          <span>{'"'}</span>
+          <span>{book.title}</span>
+          <span>
+            {'" '}
+            by <strong>{book.authors}</strong>
+          </span>
+        </div>
+        <div className="book-actions">
+          <span
+            onClick={() => onToggleFavoriteBook(book.id)}
+            data-testid={`isFavorite_${book.isFavorite}`}
+          >
+            {book.isFavorite ? (
+              <TbStarFilled className="star-icon" />
+            ) : (
+              <TbStar className="star-icon" />
+            )}
+          </span>
+          <button
+            onClick={() => onHandleDeleteBook(book.id)}
+            data-testid="delete_book_btn"
+          >
+            Delete
+          </button>
+        </div>
+      </li>
+    </>
+  )
+}
+
+export default book
diff --git a/src/components/bookList/BookList.css b/src/components/bookList/BookList.css
@@ -3,61 +3,3 @@
   margin: 20px -20px;
   list-style: none;
 }
-
-.book-list li {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: auto;
-  padding: 10px 20px;
-  border-bottom: 1px solid #ccc;
-  background-color: #fff;
-  list-style-type: none;
-}
-
-.book-list li:nth-child(even) {
-  background-color: #f2f2f2;
-}
-
-.book-list li:hover {
-  background-color: #dbe4f8;
-}
-
-.book-list button {
-  background-color: #fff;
-  color: red;
-  border: 1px solid red;
-  padding: 8px 12px;
-  border-radius: 3px;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-}
-
-.book-list button:hover {
-  background-color: #fdd;
-}
-
-.book-list .highlight {
-  background-color: rgba(150, 182, 238, 0.605);
-  border-radius: 5px;
-  padding: 0 0.5px;
-}
-
-.book-list .book-info {
-  flex: 1;
-  text-align: left;
-}
-
-.book-list .book-actions {
-  display: flex;
-  align-items: center;
-}
-
-.book-list .star-icon {
-  width: 24px;
-  height: 24px;
-  margin: 0 20px;
-  cursor: pointer;
-  transition: color 0.3s ease;
-  color: #fca510;
-}
diff --git a/src/components/bookList/BookList.js b/src/components/bookList/BookList.js
@@ -1,6 +1,5 @@
 import { useDispatch, useSelector } from 'react-redux'
-import { TbStar } from 'react-icons/tb'
-import { TbStarFilled } from 'react-icons/tb'
+import Book from '../book/Book'
 import './BookList.css'
 import {
   selectBook,
@@ -14,8 +13,8 @@ import {
 import { setError } from '../../redux/slices/errorSlice'
 
 const BookList = () => {
-  const books = useSelector(selectBook)
   const dispatch = useDispatch()
+  const books = useSelector(selectBook)
   const titleFilter = useSelector(selectTitleFilter)
   const authorsFilter = useSelector(selectAuthorsFilter)
 
@@ -49,35 +48,13 @@ const BookList = () => {
             <p data-testid="no_books_sign">No books in my list...</p>
           ) : (
             filteredBooksArr.map((book, i) => (
-              <li key={book.id} data-testid={book.id}>
-                <div className="book-info">
-                  <span>{++i}. </span>
-                  <span>{'"'}</span>
-                  <span>{book.title}</span>
-                  <span>
-                    {'" '}
-                    by <strong>{book.authors}</strong>
-                  </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"
-                  >
-                    Delete
-                  </button>
-                </div>
-              </li>
+              <Book
+                key={book.id}
+                book={book}
+                index={i}
+                onHandleDeleteBook={handleDeleteBook}
+                onToggleFavoriteBook={toggleFavoriteBook}
+              />
             ))
           )}
         </ul>