Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adds search by genre to WebUI #238

Merged
merged 3 commits into from
Feb 16, 2023
Merged

Adds search by genre to WebUI #238

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8a9324f
add pagination to library and fix some prettier issues
Feb 12, 2023
ba7eba4
add genre search support like tachiyomi android app
Feb 12, 2023
6a3f7c5
Search by genre like you do in tachiyomi mobile app
Feb 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 25 additions & 8 deletions src/components/library/LibraryMangaGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}, {});
Comment on lines +58 to +66
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will keep the mangas that matched by title above the ones that matched by genre. I am working on a more streamlined version that gives a rank to manga objects while filtering, and sorts accordingly. Could be more performant

filteredManga = Object.values(unique);
Copy link
Collaborator

@schroda schroda Feb 12, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this commit reverts #226.
not sure how everyone else sees this, but I'd like to be able to search my whole library and not just the filtered one (e.g. downloaded, unread), since otherwise, if you want to open a manga that is not included in the filters, you have to unset the filters everytime you search for something like that (and set them again after you've found the manga)

Copy link
Contributor Author

@akabhirav akabhirav Feb 12, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this not how the app works? If you want to search something that is not downloaded then you remove the filter and search for it, right?

It felt like a bug that my filters were not being honored when I searched for my manga

I believe we should stick close to the app implementation. If setting and unsetting the filters are cumbersome or buggy we could improve the experience there. I will adhere to the consensus. But, I think we should keep this.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I never used the app (don't have an android), so I can't say.

I guess it's preference. I expected it to search my whole library (or at least the category, since whole library is not possible).
since I know what I'm searching for (a specific title), I wouldn't want a filter to mess with it.

if it should work like the app, what about adding some kind of flag to search all mangas/ignore filters?

Copy link
Contributor Author

@akabhirav akabhirav Feb 13, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That sounds like a good workaround, but for that we need to clarify the following details

  1. Whether this preference will be stored in localStorage or sever [Probably server, but putting this in server, would need input from others]
  2. Where can users find this preference(Settings page or somewhere else) [ Probably Settings page ]
  3. Will it be on/off by default [I prefer off, i.e. search will respect filter as OOB experience]
  4. Any other solutions like displaying a fab while searching and if filters are active, to quicky disable the filters(either for that search or permanently) [I like this idea, but will take much more time/brain to implement]
  5. Should it be done in this PR or another [I prefer another PR]

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@schroda any opinions on these? I'd like to get this PR reviewed

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. I'd say server as well
  2. maybe the library "settings" (filter, sort, ui), or a settings button inside the search, which is only visible when search is open?
  3. should be the same as the app then, so disabled
  4. I wouldn't mess with the filters, since it's also not really required for it to work
  5. yes, should be done in another pr

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@schroda I have created a new PR #242 to find a solution for the issue in this thread

}
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
Expand Down
1 change: 1 addition & 0 deletions src/screens/Reader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
1 change: 1 addition & 0 deletions src/screens/SourceMangas.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
1 change: 1 addition & 0 deletions src/typings.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ type MetadataKeyValuePair = [AppMetadataKeys, AllowedMetadataValueTypes];
interface IMangaCard {
id: number;
title: string;
genre: string[];
thumbnailUrl: string;
unreadCount?: number;
downloadCount?: number;
Expand Down