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/MangaCard.tsx

@@ -40,17 +40,21 @@ const MangaTitle = styled(Typography)({
     textShadow: '0px 0px 3px #000000',
 });
 
-const UnreadBadge = styled(Typography)(({ theme }) => ({
+const BadgeContainer = styled('div')({
+    display: 'flex',
     position: 'absolute',
-    top: 2,
+    top: 5,
-    left: 2,
+    left: 5,
-    backgroundColor: theme.palette.primary.dark,
+    height: 'fit-content',
     borderRadius: '5px',
-    color: 'white',
+    overflow: 'hidden',
-    padding: '0.1em',
+    '& p': {
-    paddingInline: '0.3em',
+        color: 'white',
-    fontSize: '1.05rem',
+        padding: '0.1em',
-}));
+        paddingInline: '0.2em',
+        fontSize: '1.05rem',
+    },
+});
 
 const truncateText = (str: string, maxLength: number) => {
     const ending = '...';
@@ -69,7 +73,7 @@ interface IProps {
 const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref) => {
     const {
         manga: {
-            id, title, thumbnailUrl, unreadCount: unread,
+            id, title, thumbnailUrl, downloadCount, unreadCount: unread,
         },
     } = props;
 
@@ -93,12 +97,24 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
                             height: '100%',
                         }}
                     >
-                        {unread! > 0
+
-                            && (
+                        <BadgeContainer>
-                                <UnreadBadge>
+                            {unread! > 0 && (
+                                <Typography
+                                    sx={{ backgroundColor: 'primary.dark' }}
+                                >
                                     {unread}
-                                </UnreadBadge>
+                                </Typography>
-                            ) }
+                            )}
+                            {downloadCount! > 0 && (
+                                <Typography sx={{
+                                    backgroundColor: 'success.dark',
+                                }}
+                                >
+                                    {downloadCount}
+                                </Typography>
+                            )}
+                        </BadgeContainer>
                         <SpinnerImage
                             alt={title}
                             src={`${serverAddress}${thumbnailUrl}?useCache=${useCache}`}
@@ -107,7 +123,6 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
                                 width: '100%',
                             }}
                             spinnerStyle={{
-                                minHeight: '400px',
                                 display: 'grid',
                                 placeItems: 'center',
                             }}

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>
     );
 }

src/typings.d.ts

@@ -35,6 +35,7 @@ interface IMangaCard {
     title: string
     thumbnailUrl: string
     unreadCount?: number
+    downloadCount?: number
 }
 
 interface IManga {
@@ -58,6 +59,7 @@ interface IManga {
 
     freshData: boolean
     unreadCount?: number
+    downloadCount?: number
 }
 
 interface IChapter {

src/util/useLibraryOptions.ts

@@ -11,6 +11,8 @@ import { BooleanParam, useQueryParams, StringParam } from 'use-query-params';
 export type NullAndUndefined<T> = T | null | undefined;
 
 interface IUseLibraryOptions {
+    downloaded: NullAndUndefined<boolean>
+    setDownloaded: (downloaded: NullAndUndefined<boolean>)=>void
     unread: NullAndUndefined<boolean>
     setUnread: (unread: NullAndUndefined<boolean>) => void
     query: NullAndUndefined<string>
@@ -20,10 +22,14 @@ interface IUseLibraryOptions {
 
 export default function useLibraryOptions(): IUseLibraryOptions {
     const [searchQuery, setSearchQuery] = useQueryParams({
+        downloaded: BooleanParam,
         unread: BooleanParam,
         query: StringParam,
     });
-    const { unread, query } = searchQuery;
+    const { downloaded, unread, query } = searchQuery;
+    const setDownloaded = (newDownloaded: NullAndUndefined<boolean>) => {
+        setSearchQuery(Object.assign(searchQuery, { downloaded: newDownloaded }), 'replace');
+    };
     const setUnread = (newUnread: NullAndUndefined<boolean>) => {
         setSearchQuery(Object.assign(searchQuery, { unread: newUnread }), 'replace');
     };
@@ -31,8 +37,8 @@ export default function useLibraryOptions(): IUseLibraryOptions {
         setSearchQuery(Object.assign(searchQuery, { query: newQuery }), 'replace');
     };
     // eslint-disable-next-line eqeqeq
-    const active = !(unread == undefined);
+    const active = !(unread == undefined) || !(downloaded == undefined);
     return {
-        unread, setUnread, active, query, setQuery,
+        downloaded, setDownloaded, unread, setUnread, active, query, setQuery,
     };
 }