Adds search by genre to WebUI (#238)

* add pagination to library and fix some prettier issues

* add genre search support like tachiyomi android app

* Search by genre like you do in tachiyomi mobile app

---------

Co-authored-by: akxer <>

src/components/library/LibraryMangaGrid.tsx

@@ -41,19 +41,36 @@ const queryFilter = (query: NullAndUndefined<string>, { title }: IMangaCard): bo
     return title.toLowerCase().includes(query.toLowerCase());
 };
 
+const queryGenreFilter = (query: NullAndUndefined<string>, { genre }: IMangaCard): boolean => {
+    if (!query) return true;
+    const queries = query.split(',').map((str) => str.toLowerCase().trim());
+    return queries.every((element) => genre.map((el) => el.toLowerCase()).includes(element));
+};
+
 const filterManga = (
     manga: IMangaCard[],
     query: NullAndUndefined<string>,
     unread: NullAndUndefined<boolean>,
     downloaded: NullAndUndefined<boolean>,
-): IMangaCard[] =>
-    manga.filter((m) => {
-        if (query) {
-            return queryFilter(query, m);
-        }
-
-        return downloadedFilter(downloaded, m) && unreadFilter(unread, m);
-    });
+): IMangaCard[] => {
+    let filteredManga: IMangaCard[] = [];
+    if (query) {
+        const titleFilteredManga = manga.filter((m) => queryFilter(query, m));
+        const genreFilteredManga = manga.filter((m) => queryGenreFilter(query, m));
+        const unique = titleFilteredManga.concat(genreFilteredManga).reduce((acc: Record<number, IMangaCard>, obj) => {
+            const { id } = obj;
+            if (!acc[id]) {
+                acc[id] = obj;
+            }
+            return acc;
+        }, {});
+        filteredManga = Object.values(unique);
+    }
+    filteredManga = (filteredManga.length ? filteredManga : manga).filter(
+        (m) => downloadedFilter(downloaded, m) && unreadFilter(unread, m),
+    );
+    return filteredManga;
+};
 
 const sortByUnread = (a: IMangaCard, b: IMangaCard): number =>
     // eslint-disable-next-line implicit-arrow-linebreak

src/screens/Reader.tsx

@@ -70,6 +70,7 @@ export default function Reader() {
         id: +mangaId,
         title: '',
         thumbnailUrl: '',
+        genre: [],
     });
     const [chapter, setChapter] = useState<IChapter | IPartialChapter>(initialChapter());
     const [curPage, setCurPage] = useState<number>(0);

src/screens/SourceMangas.tsx

@@ -202,6 +202,7 @@ export default function SourceMangas(props: { popular: boolean }) {
                             thumbnailUrl: it.thumbnailUrl,
                             id: it.id,
                             inLibrary: it.inLibrary,
+                            genre: it.genre,
                         })),
                     ]);
                     setHasNextPage(data.hasNextPage);

src/typings.d.ts

@@ -78,6 +78,7 @@ type MetadataKeyValuePair = [AppMetadataKeys, AllowedMetadataValueTypes];
 interface IMangaCard {
     id: number;
     title: string;
+    genre: string[];
     thumbnailUrl: string;
     unreadCount?: number;
     downloadCount?: number;