sorting

src/components/library/LibraryMangaGrid.tsx

@@ -48,19 +48,46 @@ function filterManga(mangas: IMangaCard[]): IMangaCard[] {
         && queryFilter(query, manga));
 }
 
+function toReadSort(a: IMangaCard, b: IMangaCard): number {
+    if (!a.unreadCount) return -1;
+    if (!b.unreadCount) return 1;
+    return a.unreadCount > b.unreadCount ? 1 : -1;
+}
+
+function toSortAlph(a: IMangaCard, b: IMangaCard): number {
+    return a.title < b.title ? 1 : -1;
+}
+
+function toSortID(a: IMangaCard, b: IMangaCard): number {
+    return a.id > b.id ? 1 : -1;
+}
+
+function sortManga(mangas: IMangaCard[]): IMangaCard[] {
+    const { sorts, sortDesc } = useLibraryOptions();
+    return (sorts === 'sortID' || sorts === undefined) && !sortDesc ? mangas : mangas.sort((a, b) => {
+        const c = sortDesc === true ? b : a;
+        const d = sortDesc === true ? a : b;
+        if (sorts === 'sortToRead') { return toReadSort(c, d); }
+        if (sorts === 'sortAlph') { return toSortAlph(c, d); }
+        if (sorts === 'sortID' || sorts === undefined) { return toSortID(c, d); }
+        return 1;
+    });
+}
+
 export default function LibraryMangaGrid(props: IMangaGridProps) {
     const {
         mangas, isLoading, hasNextPage, lastPageNum, setLastPageNum, message,
     } = props;
 
     const { active, query } = useLibraryOptions();
     const filteredManga = filterManga(mangas);
+    const sortedManga = sortManga(filteredManga);
     const showFilteredOutMessage = (active || query)
         && filteredManga.length === 0 && mangas.length > 0;
 
     return (
         <MangaGrid
-            mangas={filteredManga}
+            mangas={sortedManga}
             isLoading={isLoading}
             hasNextPage={hasNextPage}
             lastPageNum={lastPageNum}

src/components/library/LibraryOptions.tsx

@@ -8,9 +8,12 @@
 
 import React from 'react';
 import FilterListIcon from '@mui/icons-material/FilterList';
+import SortIcon from '@mui/icons-material/Sort';
 import { Drawer, FormControlLabel, IconButton } from '@mui/material';
 import useLibraryOptions from 'util/useLibraryOptions';
 import ThreeStateCheckbox from 'components/util/ThreeStateCheckbox';
+import Switch from '@mui/material/Switch';
+import Radio from '@mui/material/Radio';
 import { Box } from '@mui/system';
 
 function Options() {
@@ -25,8 +28,32 @@ function Options() {
     );
 }
 
+function SortOptions() {
+    const {
+        sorts, setSorts, sortDesc, setSortDesc,
+    } = useLibraryOptions();
+
+    const handleSortChange = (name: string) => (event: { target: { checked: boolean; }; }) => {
+        setSorts(event.target.checked ? name : undefined);
+    };
+
+    const handleOrderChange = () => (event: { target: { checked: boolean; }; }) => {
+        setSortDesc(event.target.checked);
+    };
+
+    return (
+        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+            <FormControlLabel control={<Switch name="sortDesc" checked={sortDesc === true} onChange={handleOrderChange()} color="default" />} label="Asc/Desc" />
+            <FormControlLabel control={<Radio name="sortToRead" checked={sorts === 'sortToRead'} onChange={handleSortChange('sortToRead')} />} label="Sort by left to read" />
+            <FormControlLabel control={<Radio name="sortAlph" checked={sorts === 'sortAlph'} onChange={handleSortChange('sortAlph')} />} label="Sort alphbetical" />
+            <FormControlLabel control={<Radio name="sortID" checked={sorts === 'sortID' || sorts === undefined} onChange={handleSortChange('sortID')} />} label="Sort by ID" />
+        </Box>
+    );
+}
+
 export default function LibraryOptions() {
     const [filtersOpen, setFiltersOpen] = React.useState(false);
+    const [sortsOpen, setSortsOpen] = React.useState(false);
     const { active } = useLibraryOptions();
     return (
         <>
@@ -50,6 +77,26 @@ export default function LibraryOptions() {
                 <Options />
             </Drawer>
 
+            <IconButton
+                onClick={() => setSortsOpen(!filtersOpen)}
+                color={active ? 'warning' : 'default'}
+            >
+                <SortIcon />
+            </IconButton>
+
+            <Drawer
+                anchor="bottom"
+                open={sortsOpen}
+                onClose={() => setSortsOpen(false)}
+                PaperProps={{
+                    style: {
+                        maxWidth: 600, padding: '1em', marginLeft: 'auto', marginRight: 'auto',
+                    },
+                }}
+            >
+                <SortOptions />
+            </Drawer>
+
         </>
     );
 }

src/util/useLibraryOptions.ts

@@ -10,22 +10,38 @@ import { BooleanParam, useQueryParam, StringParam } from 'use-query-params';
 
 interface IUseLibraryOptions {
     downloaded: NullAndUndefined<boolean>
-    setDownloaded: (downloaded: NullAndUndefined<boolean>)=>void
+    setDownloaded: (downloaded: NullAndUndefined<boolean>) => void
     unread: NullAndUndefined<boolean>
     setUnread: (unread: NullAndUndefined<boolean>) => void
     query: NullAndUndefined<string>
     setQuery: (query: NullAndUndefined<string>) => void
     active: boolean
+    sorts: NullAndUndefined<string>
+    setSorts: (sorts: NullAndUndefined<string>) => void
+    sortDesc: NullAndUndefined<boolean>
+    setSortDesc: (sortDesc: NullAndUndefined<boolean>) => void
 }
 
 export default function useLibraryOptions(): IUseLibraryOptions {
     const [downloaded, setDownloaded] = useQueryParam('downloaded', BooleanParam);
     const [unread, setUnread] = useQueryParam('unread', BooleanParam);
     const [query, setQuery] = useQueryParam('query', StringParam);
+    const [sorts, setSorts] = useQueryParam('sorts', StringParam);
+    const [sortDesc, setSortDesc] = useQueryParam('sortDesc', BooleanParam);
 
     // eslint-disable-next-line eqeqeq
     const active = !(unread == undefined) || !(downloaded == undefined);
     return {
-        downloaded, setDownloaded, unread, setUnread, query, setQuery, active,
+        downloaded,
+        setDownloaded,
+        unread,
+        setUnread,
+        query,
+        setQuery,
+        active,
+        sorts,
+        setSorts,
+        sortDesc,
+        setSortDesc,
     };
 }