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,
-    left: 2,
-    backgroundColor: theme.palette.primary.dark,
+    top: 5,
+    left: 5,
+    height: 'fit-content',
     borderRadius: '5px',
-    color: 'white',
-    padding: '0.1em',
-    paddingInline: '0.3em',
-    fontSize: '1.05rem',
-}));
+    overflow: 'hidden',
+    '& p': {
+        color: 'white',
+        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
-                            && (
-                                <UnreadBadge>
+
+                        <BadgeContainer>
+                            {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>
     );
 }