Feature/batch chapter download (#191)

* Add NavbarToolbar component for rendering items in toolbar through portal

* Refactor Manga screen, move chapters filtering to toolbar menu, cleanup ChapterOptions

* Fix warning

* Update layout of ChapterList and add selection for chapters, add batch download, move stuff around

* Add space to bookmark icon

* Clear actions when leaving source mangas page

* Move bookmark icon back inline and align it correctly with text

* Fixup MangaDetails buttons to update cache properly so buttons in manga menu are updated

* Move chapters filter to ChapterList

* Fixup error display overlapping with loaded content when revalidation fails

* Fixup spacing around ChapterList title

* Only show small progress if manga is loaded so there is not to many spinners

* Prevent title wrapping

* Add icon buttons to desktop sizes of manga toolbar menu

src/components/manga/util.tsx

@@ -0,0 +1,112 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import { useReducerLocalStorage } from 'util/useLocalStorage';
+
+const defaultChapterOptions: ChapterListOptions = {
+    active: false,
+    unread: undefined,
+    downloaded: undefined,
+    bookmarked: undefined,
+    reverse: false,
+    sortBy: 'source',
+    showChapterNumber: false,
+};
+
+function chapterOptionsReducer(state: ChapterListOptions,
+    actions: ChapterOptionsReducerAction)
+    : ChapterListOptions {
+    switch (actions.type) {
+        case 'filter':
+            // eslint-disable-next-line no-case-declarations
+            const active = state.unread !== false
+            && state.downloaded !== false
+            && state.bookmarked !== false;
+            return {
+                ...state,
+                active,
+                [actions.filterType!]: actions.filterValue,
+            };
+        case 'sortBy':
+            return { ...state, sortBy: actions.sortBy };
+        case 'sortReverse':
+            return { ...state, reverse: !state.reverse };
+        case 'showChapterNumber':
+            return { ...state, showChapterNumber: !state.showChapterNumber };
+        default:
+            throw Error('This is not a valid Action');
+    }
+}
+
+export function unreadFilter(unread: NullAndUndefined<boolean>, { read: isChapterRead }: IChapter) {
+    switch (unread) {
+        case true:
+            return !isChapterRead;
+        case false:
+            return isChapterRead;
+        default:
+            return true;
+    }
+}
+
+function downloadFilter(downloaded: NullAndUndefined<boolean>,
+    { downloaded: chapterDownload }: IChapter) {
+    switch (downloaded) {
+        case true:
+            return chapterDownload;
+        case false:
+            return !chapterDownload;
+        default:
+            return true;
+    }
+}
+
+function bookmarkedFilter(bookmarked: NullAndUndefined<boolean>,
+    { bookmarked: chapterBookmarked }: IChapter) {
+    switch (bookmarked) {
+        case true:
+            return chapterBookmarked;
+        case false:
+            return !chapterBookmarked;
+        default:
+            return true;
+    }
+}
+
+export function filterAndSortChapters(chapters: IChapter[], options: ChapterListOptions)
+    : IChapter[] {
+    const filtered = options.active
+        ? chapters.filter((chp) => unreadFilter(options.unread, chp)
+    && downloadFilter(options.downloaded, chp)
+    && bookmarkedFilter(options.bookmarked, chp))
+        : [...chapters];
+    const Sorted = options.sortBy === 'fetchedAt'
+        ? filtered.sort((a, b) => a.fetchedAt - b.fetchedAt)
+        : filtered;
+    if (options.reverse) {
+        Sorted.reverse();
+    }
+    return Sorted;
+}
+
+export const useChapterOptions = (mangaId: string) => useReducerLocalStorage<
+ChapterListOptions,
+ChapterOptionsReducerAction
+>(
+    chapterOptionsReducer,
+    `${mangaId}filterOptions`, defaultChapterOptions,
+);
+
+export const SORT_OPTIONS: [ChapterSortMode, string][] = [
+    ['source', 'By Source'],
+    ['fetchedAt', 'By Fetch date'],
+];
+
+export const isFilterActive = (options: ChapterListOptions) => {
+    const { unread, downloaded, bookmarked } = options;
+    return unread != null || downloaded != null || bookmarked != null;
+};