Merge pull request #20 from Blockchain-Country/matchtext

added filter matched text highlight
Blockchain-Country · Nov 25, 2024 · de6b6f5 · de6b6f5
2 parents d8d530c + 94af111
commit de6b6f5
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 8 deletions.
diff --git a/src/components/BookListSection/BookListSection.css b/src/components/BookListSection/BookListSection.css
@@ -23,3 +23,9 @@ ul[data-testid='bookList_container'] {
   align-items: center;
   width: 100%;
 }
+
+span[data-testid='highlighted_text'] {
+  background-color: orange;
+  border-radius: 5px;
+  padding: 0 0.5px;
+}
diff --git a/src/components/BookListSection/BookListSection.jsx b/src/components/BookListSection/BookListSection.jsx
@@ -39,6 +39,23 @@ const BookListSection = ({ 'data-testid': testId }) => {
     )
   })
 
+  const highlightFilterMatch = (text, filter) => {
+    if (!filter) return text
+
+    const regex = new RegExp(`(${filter})`, 'gi')
+
+    return text.split(regex).map((substring, i) => {
+      if (substring.toLowerCase() === filter.toLowerCase()) {
+        return (
+          <span key={i} data-testid="highlighted_text">
+            {substring}
+          </span>
+        )
+      }
+      return substring
+    })
+  }
+
   return (
     <section data-testid={testId}>
       <h3 data-testid="bookList_title">My Book List</h3>
@@ -54,6 +71,8 @@ const BookListSection = ({ 'data-testid': testId }) => {
               onHandleDeleteBook={handleDeleteBook}
               onToggleFavoriteBook={toggleFavoriteBook}
               data-testid={`bookList_item id=${book.id}`}
+              bookTitle={highlightFilterMatch(book.title, titleFilter)}
+              bookAuthor={highlightFilterMatch(book.authors, authorsFilter)}
             />
           ))
         )}

diff --git a/src/components/BookListSection/book/Book.css b/src/components/BookListSection/book/Book.css
@@ -95,9 +95,3 @@ button[data-testid='delete_book_btn'] {
 button[data-testid='delete_book_btn']:hover {
   background-color: rgb(255, 204, 204);
 }
-
-/* .highlight {
-  background-color: rgba(150, 182, 238, 0.605);
-  border-radius: 5px;
-  padding: 0 0.5px;
-} */
diff --git a/src/components/BookListSection/book/Book.jsx b/src/components/BookListSection/book/Book.jsx
@@ -8,18 +8,20 @@ const Book = ({
   index,
   onHandleDeleteBook,
   onToggleFavoriteBook,
+  bookTitle,
+  bookAuthor,
   ...rest
 }) => {
   return (
     <li {...rest}>
       <span data-testid="book_index">{++index}.</span>
       <div data-testid="book_title_and_author_wrapper">
         <div data-testid="book_title_wrapper">
-          <span data-testid="book_title">{book.title}</span>
+          <span data-testid="book_title">{bookTitle}</span>
         </div>
         <div data-testid="book_author_wrapper">
           <em>by</em>
-          <span data-testid="book_author">{book.authors}</span>
+          <span data-testid="book_author">{bookAuthor}</span>
         </div>
       </div>
       <div data-testid="book_actions">