Chapter filter is woking (#114)

src/components/ChapterCard.tsx

@@ -24,12 +24,15 @@ interface IProps{
     chapter: IChapter
     triggerChaptersUpdate: () => void
     downloadStatusString: string
+    showChapterNumber: boolean
 }
 
 export default function ChapterCard(props: IProps) {
     const theme = useTheme();
 
-    const { chapter, triggerChaptersUpdate, downloadStatusString } = props;
+    const {
+        chapter, triggerChaptersUpdate, downloadStatusString, showChapterNumber,
+    } = props;
 
     const dateStr = chapter.uploadDate && new Date(chapter.uploadDate).toISOString().slice(0, 10);
 
@@ -109,7 +112,7 @@ export default function ChapterCard(props: IProps) {
                                         <span style={{ color: theme.palette.primary.dark }}>
                                             {chapter.bookmarked && <BookmarkIcon />}
                                         </span>
-                                        {chapter.name}
+                                        { showChapterNumber ? `Chapter ${chapter.chapterNumber}` : chapter.name}
                                     </Typography>
                                     <Typography variant="caption" display="block" gutterBottom>
                                         {chapter.scanlator}

src/components/ChapterList.tsx

@@ -0,0 +1,246 @@
+/*
+ * 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 React, { useState, useEffect } from 'react';
+import { Box, styled } from '@mui/system';
+import { Virtuoso } from 'react-virtuoso';
+import Typography from '@mui/material/Typography';
+import ChapterCard from 'components/ChapterCard';
+import { CircularProgress, Fab } from '@mui/material';
+import { Link } from 'react-router-dom';
+import makeToast from 'components/util/Toast';
+import client from 'util/client';
+import PlayArrow from '@mui/icons-material/PlayArrow';
+import ChapterOptions from 'components/ChapterOptions';
+import useLocalStorage from '../util/useLocalStorage';
+
+const List = styled(Virtuoso)(({ theme }) => ({
+    listStyle: 'none',
+    padding: 0,
+    minHeight: '200px',
+    [theme.breakpoints.up('md')]: {
+        width: '50vw',
+        // 64px for the Appbar, 40px for the ChapterCount Header
+        height: 'calc(100vh - 64px - 40px)',
+        margin: 0,
+    },
+}));
+
+const baseWebsocketUrl = JSON.parse(window.localStorage.getItem('serverBaseURL')!).replace('http', 'ws');
+const initialQueue = {
+    status: 'Stopped',
+    queue: [],
+} as IQueue;
+
+interface IProps {
+    id: string
+}
+
+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 bookmarkdFilter(bookmarked: NullAndUndefined<boolean>,
+    { bookmarked: chapterBookmarked }: IChapter) {
+    switch (bookmarked) {
+        case true:
+            return chapterBookmarked;
+        case false:
+            return !chapterBookmarked;
+        default:
+            return true;
+    }
+}
+
+function findFirstUnreadChapter(chapters: IChapter[]): IChapter | undefined {
+    for (let index = chapters.length - 1; index >= 0; index--) {
+        if (!chapters[index].read) return chapters[index];
+    }
+    return undefined;
+}
+
+export default function ChapterList(props: IProps) {
+    const { id } = props;
+
+    const [chapters, setChapters] = useState<IChapter[]>([]);
+    const [noChaptersFound, setNoChaptersFound] = useState(false);
+    const [chapterUpdateTriggerer, setChapterUpdateTriggerer] = useState(0);
+    const [fetchedOnline, setFetchedOnline] = useState(false);
+    const [fetchedOffline, setFetchedOffline] = useState(false);
+    const [firstUnreadChapter, setFirstUnreadChapter] = useState<IChapter>();
+    const [filteredChapters, setFilteredChapters] = useState<IChapter[]>([]);
+    const [options, setOptions] = useLocalStorage<ChapterListOptions>(
+        `${id}filterOptions`,
+        {
+            active: false,
+            unread: undefined,
+            downloaded: undefined,
+            bookmarked: undefined,
+            reverse: false,
+            sortBy: 'source',
+            showChapterNumber: false,
+        },
+    );
+
+    const [, setWsClient] = useState<WebSocket>();
+    const [{ queue }, setQueueState] = useState<IQueue>(initialQueue);
+
+    function triggerChaptersUpdate() {
+        setChapterUpdateTriggerer(chapterUpdateTriggerer + 1);
+    }
+
+    useEffect(() => {
+        const wsc = new WebSocket(`${baseWebsocketUrl}/api/v1/downloads`);
+        wsc.onmessage = (e) => {
+            const data = JSON.parse(e.data) as IQueue;
+            setQueueState(data);
+        };
+
+        setWsClient(wsc);
+
+        return () => wsc.close();
+    }, []);
+
+    useEffect(() => {
+        triggerChaptersUpdate();
+    }, [queue.length]);
+
+    const downloadStatusStringFor = (chapter: IChapter) => {
+        let rtn = '';
+        if (chapter.downloaded) {
+            rtn = ' • Downloaded';
+        }
+        queue.forEach((q) => {
+            if (chapter.index === q.chapterIndex && chapter.mangaId === q.mangaId) {
+                rtn = ` • Downloading (${(q.progress * 100).toFixed(2)}%)`;
+            }
+        });
+        return rtn;
+    };
+
+    useEffect(() => {
+        const shouldFetchOnline = fetchedOffline && !fetchedOnline;
+
+        client.get(`/api/v1/manga/${id}/chapters?onlineFetch=${shouldFetchOnline}`)
+            .then((response) => response.data)
+            .then((data) => {
+                if (data.length === 0 && fetchedOffline) {
+                    makeToast('No chapters found', 'warning');
+                    setNoChaptersFound(true);
+                }
+                setChapters(data);
+            })
+            .then(() => {
+                if (shouldFetchOnline) {
+                    setFetchedOnline(true);
+                } else setFetchedOffline(true);
+            });
+    }, [fetchedOnline, fetchedOffline, chapterUpdateTriggerer]);
+
+    useEffect(() => {
+        const filtered = options.active
+            ? chapters.filter((chp) => unreadFilter(options.unread, chp)
+            && downloadFilter(options.downloaded, chp)
+            && bookmarkdFilter(options.bookmarked, chp))
+            : [...chapters];
+        const Sorted = options.sortBy === 'fetchedAt'
+            ? filtered.sort((a, b) => a.fetchedAt - b.fetchedAt)
+            : filtered;
+        if (options.reverse) {
+            Sorted.reverse();
+        }
+        setFilteredChapters(Sorted);
+
+        setFirstUnreadChapter(findFirstUnreadChapter(filtered));
+    }, [options, chapters]);
+
+    const ResumeFab = () => (firstUnreadChapter === undefined ? null
+        : (
+            <Fab
+                sx={{ position: 'fixed', bottom: '2em', right: '3em' }}
+                component={Link}
+                variant="extended"
+                color="primary"
+                to={`/manga/${id}/chapter/${firstUnreadChapter.index}/page/${firstUnreadChapter.lastPageRead}`}
+            >
+                <PlayArrow />
+                {firstUnreadChapter.index === 1 ? 'Start' : 'Resume' }
+            </Fab>
+        ));
+
+    if (chapters.length === 0 || noChaptersFound) {
+        return (
+            <div style={{
+                margin: '10px auto',
+                display: 'flex',
+                justifyContent: 'center',
+            }}
+            >
+                <CircularProgress thickness={5} />
+            </div>
+        );
+    }
+
+    return (
+        <>
+            <Box sx={{
+                display: 'flex',
+                flexDirection: 'column',
+            }}
+            >
+                <Box sx={{
+                    display: 'flex', justifyContent: 'space-between', px: 1.5, mt: 1,
+                }}
+                >
+                    <Typography variant="h5">
+                        {`${filteredChapters.length} Chapters`}
+                    </Typography>
+                    <ChapterOptions options={options} setOptions={setOptions} />
+                </Box>
+
+                <List
+                    style={{ // override Virtuoso default values and set them with class
+                        height: 'undefined',
+                        // 900 is the md breakpoint in MUI
+                        overflowY: window.innerWidth < 900 ? 'visible' : 'auto',
+                    }}
+                    totalCount={filteredChapters.length}
+                    itemContent={(index:number) => (
+                        <ChapterCard
+                            showChapterNumber={options.showChapterNumber}
+                            chapter={filteredChapters[index]}
+                            downloadStatusString={downloadStatusStringFor(filteredChapters[index])}
+                            triggerChaptersUpdate={triggerChaptersUpdate}
+                        />
+                    )}
+                    useWindowScroll={window.innerWidth < 900}
+                    overscan={window.innerHeight * 0.5}
+                />
+            </Box>
+            <ResumeFab />
+        </>
+    );
+}

src/components/ChapterOptions.tsx

@@ -0,0 +1,155 @@
+/*
+ * 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 React, { useState } from 'react';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import {
+    Drawer, FormControlLabel, IconButton, Typography, Tab, Tabs, Radio, RadioGroup,
+} from '@mui/material';
+import ThreeStateCheckbox from 'components/util/ThreeStateCheckbox';
+import { Box } from '@mui/system';
+import { ArrowDownward, ArrowUpward } from '@mui/icons-material';
+import TabPanel from 'components/util/TabPanel';
+
+interface IProps{
+    options: ChapterListOptions
+    setOptions: React.Dispatch<React.SetStateAction<ChapterListOptions>>
+}
+
+const SortTab: [SortMode, string][] = [['source', 'By Source'], ['fetchedAt', 'By Fetch date']];
+
+export default function ChapterOptions(props: IProps) {
+    const { options, setOptions } = props;
+    const [filtersOpen, setFiltersOpen] = useState(false);
+    const [tabNum, setTabNum] = useState(0);
+
+    const setUnread = (newUnread: NullAndUndefined<boolean>) => {
+        const active = options.unread !== false
+        && options.downloaded !== false
+        && options.bookmarked !== false;
+        setOptions({ ...options, active, unread: newUnread });
+    };
+
+    const setDownloaded = (newDownloaded: NullAndUndefined<boolean>) => {
+        const active = options.unread !== false
+        && options.downloaded !== false
+        && options.bookmarked !== false;
+        setOptions({ ...options, active, downloaded: newDownloaded });
+    };
+
+    const setBookmarked = (newBookmarked: NullAndUndefined<boolean>) => {
+        const active = options.unread !== false
+        && options.downloaded !== false
+        && options.bookmarked !== false;
+        setOptions({ ...options, active, bookmarked: newBookmarked });
+    };
+
+    const setSort = (newSort: SortMode) => {
+        if (newSort !== options.sortBy) {
+            setOptions({ ...options, sortBy: newSort });
+        } else {
+            setOptions({ ...options, reverse: !options.reverse });
+        }
+    };
+
+    const handleDisplay = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const showChapterNumber = e.target.value === 'chapterNumber';
+        if (showChapterNumber !== options.showChapterNumber) {
+            setOptions({ ...options, showChapterNumber });
+        }
+    };
+
+    return (
+        <>
+            <IconButton
+                onClick={() => setFiltersOpen(!filtersOpen)}
+                color={options.active ? 'warning' : 'default'}
+            >
+                <FilterListIcon />
+            </IconButton>
+
+            <Drawer
+                anchor="bottom"
+                open={filtersOpen}
+                onClose={() => setFiltersOpen(false)}
+                PaperProps={{
+                    style: {
+                        maxWidth: 600,
+                        padding: '1em',
+                        marginLeft: 'auto',
+                        marginRight: 'auto',
+                        minHeight: '150px',
+                    },
+                }}
+            >
+                <Box>
+                    <Tabs
+                        key={tabNum}
+                        value={tabNum}
+                        variant="fullWidth"
+                        onChange={(e, newTab) => setTabNum(newTab)}
+                        indicatorColor="primary"
+                        textColor="primary"
+                    >
+                        <Tab value={0} label="Filter" />
+                        <Tab value={1} label="Sort" />
+                        <Tab value={2} label="Display" />
+                    </Tabs>
+                    <TabPanel index={0} currentIndex={tabNum}>
+                        <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '150px' }}>
+                            <FormControlLabel control={<ThreeStateCheckbox name="Unread" checked={options.unread} onChange={setUnread} />} label="Unread" />
+                            <FormControlLabel control={<ThreeStateCheckbox name="Downloaded" checked={options.downloaded} onChange={setDownloaded} />} label="Downloaded" />
+                            <FormControlLabel control={<ThreeStateCheckbox name="Bookmarked" checked={options.bookmarked} onChange={setBookmarked} />} label="Bookmarked" />
+                        </Box>
+                    </TabPanel>
+                    <TabPanel index={1} currentIndex={tabNum}>
+                        <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '150px' }}>
+                            {
+                                SortTab.map((item) => (
+                                    <Box
+                                        onClick={() => setSort(item[0])}
+                                        sx={{
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: 1,
+                                            height: 42,
+                                            py: 1,
+                                        }}
+                                    >
+                                        <Box sx={{
+                                            height: 24,
+                                            width: 24,
+                                        }}
+                                        >
+                                            {options.sortBy === item[0]
+                                            && (options.reverse ? (
+                                                <ArrowUpward color="primary" />
+                                            ) : (
+                                                <ArrowDownward color="primary" />
+                                            ))}
+                                        </Box>
+                                        <Typography>{item[1]}</Typography>
+                                    </Box>
+
+                                ))
+                            }
+                        </Box>
+                    </TabPanel>
+                    <TabPanel index={2} currentIndex={tabNum}>
+                        <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '150px' }}>
+                            <RadioGroup name="chapter-title-display" onChange={handleDisplay} value={options.showChapterNumber}>
+                                <FormControlLabel label="By Source Title" value="title" control={<Radio checked={!options.showChapterNumber} />} />
+                                <FormControlLabel label="By Chapter Number" value="chapterNumber" control={<Radio checked={options.showChapterNumber} />} />
+                            </RadioGroup>
+                        </Box>
+                    </TabPanel>
+                </Box>
+            </Drawer>
+
+        </>
+    );
+}

src/screens/Manga.tsx

@@ -6,34 +6,13 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import React, { useEffect, useState, useContext } from 'react';
-import { Box, styled } from '@mui/system';
+import { Box } from '@mui/system';
-import { Link, useParams } from 'react-router-dom';
-import { Virtuoso } from 'react-virtuoso';
-import ChapterCard from 'components/ChapterCard';
 import MangaDetails from 'components/MangaDetails';
 import NavbarContext from 'components/context/NavbarContext';
 import client from 'util/client';
 import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
-import makeToast from 'components/util/Toast';
+import ChapterList from 'components/ChapterList';
-import { Fab } from '@mui/material';
+import { useParams } from 'react-router-dom';
-import PlayArrow from '@mui/icons-material/PlayArrow';
-
-const StyledVirtuoso = styled(Virtuoso)((({ theme }) => ({
-    listStyle: 'none',
-    padding: 0,
-    minHeight: '200px',
-    [theme.breakpoints.up('md')]: {
-        width: '50vw',
-        height: 'calc(100vh - 64px)',
-        margin: 0,
-    },
-})));
-
-const baseWebsocketUrl = JSON.parse(window.localStorage.getItem('serverBaseURL')!).replace('http', 'ws');
-const initialQueue = {
-    status: 'Stopped',
-    queue: [],
-} as IQueue;
 
 export default function Manga() {
     const { setTitle } = useContext(NavbarContext);
@@ -42,48 +21,6 @@ export default function Manga() {
     const { id } = useParams<{ id: string }>();
 
     const [manga, setManga] = useState<IManga>();
-    const [chapters, setChapters] = useState<IChapter[]>([]);
-    const [noChaptersFound, setNoChaptersFound] = useState(false);
-    const [chapterUpdateTriggerer, setChapterUpdateTriggerer] = useState(0);
-    const [fetchedOnline, setFetchedOnline] = useState(false);
-    const [fetchedOffline, setFetchedOffline] = useState(false);
-    const [firstUnreadChapter, setFirstUnreadChapter] = useState<IChapter>();
-
-    const [, setWsClient] = useState<WebSocket>();
-    const [{ queue }, setQueueState] = useState<IQueue>(initialQueue);
-
-    function triggerChaptersUpdate() {
-        setChapterUpdateTriggerer(chapterUpdateTriggerer + 1);
-    }
-
-    useEffect(() => {
-        const wsc = new WebSocket(`${baseWebsocketUrl}/api/v1/downloads`);
-        wsc.onmessage = (e) => {
-            const data = JSON.parse(e.data) as IQueue;
-            setQueueState(data);
-        };
-
-        setWsClient(wsc);
-
-        return () => wsc.close();
-    }, []);
-
-    useEffect(() => {
-        triggerChaptersUpdate();
-    }, [queue.length]);
-
-    const downloadStatusStringFor = (chapter: IChapter) => {
-        let rtn = '';
-        if (chapter.downloaded) {
-            rtn = ' • Downloaded';
-        }
-        queue.forEach((q) => {
-            if (chapter.index === q.chapterIndex && chapter.mangaId === q.mangaId) {
-                rtn = ` • Downloading (${(q.progress * 100).toFixed(2)}%)`;
-            }
-        });
-        return rtn;
-    };
 
     useEffect(() => {
         if (manga === undefined || !manga.freshData) {
@@ -96,44 +33,6 @@ export default function Manga() {
         }
     }, [manga]);
 
-    useEffect(() => {
-        const shouldFetchOnline = fetchedOffline && !fetchedOnline && (chapterUpdateTriggerer < 2);
-
-        client.get(`/api/v1/manga/${id}/chapters?onlineFetch=${shouldFetchOnline}`)
-            .then((response) => response.data)
-            .then((data) => {
-                if (data.length === 0 && fetchedOffline) {
-                    makeToast('No chapters found', 'warning');
-                    setNoChaptersFound(true);
-                }
-                setChapters(data);
-            })
-            .then(() => {
-                if (shouldFetchOnline) {
-                    setFetchedOnline(true);
-                } else setFetchedOffline(true);
-            });
-    }, [fetchedOnline, fetchedOffline, chapterUpdateTriggerer]);
-
-    useEffect(() => {
-        const a = [...chapters].reverse().find((chp) => !chp.read);
-        setFirstUnreadChapter(a);
-    }, [chapters]);
-
-    const ResumeFab = () => (firstUnreadChapter === undefined ? null
-        : (
-            <Fab
-                sx={{ position: 'fixed', bottom: '2em', right: '3em' }}
-                component={Link}
-                variant="extended"
-                color="primary"
-                to={`/manga/${id}/chapter/${firstUnreadChapter.index}/page/${firstUnreadChapter.lastPageRead}`}
-            >
-                <PlayArrow />
-                {firstUnreadChapter.index === 1 ? 'Start' : 'Resume' }
-            </Fab>
-        ));
-
     return (
         <Box sx={{ display: { md: 'flex' }, overflow: 'hidden' }}>
             <LoadingPlaceholder
@@ -142,27 +41,7 @@ export default function Manga() {
                 componentProps={{ manga }}
             />
 
-            <LoadingPlaceholder
+            <ChapterList id={id} />
-                shouldRender={chapters.length > 0 || noChaptersFound}
-            >
-                <StyledVirtuoso
-                    style={{ // override Virtuoso default values and set them with class
-                        height: 'undefined',
-                        overflowY: window.innerWidth < 900 ? 'visible' : 'auto',
-                    }}
-                    totalCount={chapters.length}
-                    itemContent={(index:number) => (
-                        <ChapterCard
-                            chapter={chapters[index]}
-                            downloadStatusString={downloadStatusStringFor(chapters[index])}
-                            triggerChaptersUpdate={triggerChaptersUpdate}
-                        />
-                    )}
-                    useWindowScroll={window.innerWidth < 900}
-                    overscan={window.innerHeight * 0.5}
-                />
-            </LoadingPlaceholder>
-            <ResumeFab />
         </Box>
     );
 }

src/typings.d.ts

@@ -216,3 +216,17 @@ interface PaginatedList<T> {
     page: T[],
     hasNextPage: boolean
 }
+
+type NullAndUndefined<T> = T | null | undefined;
+
+type SortMode = 'fetchedAt' | 'source';
+
+interface ChapterListOptions {
+    active: boolean
+    unread: NullAndUndefined<boolean>
+    downloaded: NullAndUndefined<boolean>
+    bookmarked: NullAndUndefined<boolean>
+    reverse: boolean
+    sortBy: SortMode
+    showChapterNumber: boolean
+}