Merge pull request #34 from neuefische/Feat/number-of-books

Feat/number of books
neuefische · Aug 21, 2024 · 44468a2 · 44468a2
2 parents 0dc12e7 + d14b5f9
commit 44468a2
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 5 deletions.
diff --git a/frontend/src/pages/BookGalleryPage/bookGalleryPage/BookGalleryPage.css b/frontend/src/pages/BookGalleryPage/bookGalleryPage/BookGalleryPage.css
@@ -54,4 +54,13 @@
 .filter-tag-close:focus {
     border-color: #c44900;
     outline: none;
+}
+
+.number-of-books {
+    margin-left: auto;
+    font-size: 16px;
+    padding-right: 3px;
+    color: BEIGE;
+    font-style: italic;
+    font-weight: bold;
 }
diff --git a/frontend/src/pages/BookGalleryPage/bookGalleryPage/BookGalleryPage.tsx b/frontend/src/pages/BookGalleryPage/bookGalleryPage/BookGalleryPage.tsx
@@ -30,6 +30,10 @@ export default function BookGalleryPage({filteredBooks, setSearchInput}: BookGal
         setSelectedGenre('Select');
     }
 
+    const filteredBooksByGenreAndStatus = filteredBooks
+        .filter(book => selectedGenre !== 'Select' ? book.genre === selectedGenre : true)
+        .filter(book => statusFilter !== "ALL" ? book.readingStatus === statusFilter : true);
+
     return (
         <div id={"galleryPage"}>
             <SearchBar setSearchInput={setSearchInput}/>
@@ -60,12 +64,18 @@ export default function BookGalleryPage({filteredBooks, setSearchInput}: BookGal
                     </div>
                 }
             </div>
-            <StatusFilter statusFilter={statusFilter} setStatusFilter={setStatusFilter}/>
+                <StatusFilter statusFilter={statusFilter} setStatusFilter={setStatusFilter}/>
+                <p className={"number-of-books"}>
+                    {
+                        filteredBooksByGenreAndStatus.length == 1
+                            ? filteredBooksByGenreAndStatus.length + " book"
+                            : filteredBooksByGenreAndStatus.length + " books"
+                    }
+                </p>
             {
-                filteredBooks.length > 0
-                    ? <BookGallery data={filteredBooks.filter(book => selectedGenre !== 'Select' ? book.genre === selectedGenre : book)
-                        .filter((book) => statusFilter != "ALL" ? book.readingStatus === statusFilter : book)}/>
-                    : <p>No Books found</p>
+                filteredBooksByGenreAndStatus.length > 0
+                    ? <BookGallery data={filteredBooksByGenreAndStatus} />
+                    : <p style={{textAlign: "center", marginTop: "50px"}}>No Books found</p>
             }
             <GoToTopButton/>
         </div>