add filter and badge for downloadCount (#62)

* Added the Download filter and download badge

* Update src/components/library/LibraryMangaGrid.tsx

Co-authored-by: Sascha Hahne <ntbm@users.noreply.github.com>

* - corrected some spelling mistakes

Co-authored-by: Sascha Hahne <ntbm@users.noreply.github.com>

src/components/library/LibraryMangaGrid.tsx

@@ -23,15 +23,29 @@ function unreadFilter(unread: NullAndUndefined<boolean>, { unreadCount }: IManga
     }
 }
 
+function downloadedFilter(downloaded: NullAndUndefined<boolean>,
+    { downloadCount }: IMangaCard): boolean {
+    switch (downloaded) {
+        case true:
+            return !!downloadCount && downloadCount >= 1;
+        case false:
+            return downloadCount === 0;
+        default:
+            return true;
+    }
+}
+
 function queryFilter(query: NullAndUndefined<string>, { title }: IMangaCard): boolean {
     if (!query) return true;
     return title.toLowerCase().includes(query.toLowerCase());
 }
 
 function filterManga(mangas: IMangaCard[]): IMangaCard[] {
-    const { unread, query } = useLibraryOptions();
+    const { downloaded, unread, query } = useLibraryOptions();
     return mangas
-        .filter((manga) => unreadFilter(unread, manga) && queryFilter(query, manga));
+        .filter((manga) => downloadedFilter(downloaded, manga)
+        && unreadFilter(unread, manga)
+        && queryFilter(query, manga));
 }
 
 export default function LibraryMangaGrid(props: IMangaGridProps) {

src/components/library/LibraryOptions.tsx

@@ -13,10 +13,13 @@ import useLibraryOptions from 'util/useLibraryOptions';
 import ThreeStateCheckbox from 'components/util/ThreeStateCheckbox';
 
 function Options() {
-    const { unread, setUnread } = useLibraryOptions();
+    const {
+        downloaded, setDownloaded, unread, setUnread,
+    } = useLibraryOptions();
     return (
-        <div>
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
             <FormControlLabel control={<ThreeStateCheckbox name="Unread" checked={unread} onChange={setUnread} />} label="Unread" />
+            <FormControlLabel control={<ThreeStateCheckbox name="Downloaded" checked={downloaded} onChange={setDownloaded} />} label="Downloaded" />
         </div>
     );
 }