From 0afa547613c983780692bc6acec6508f7881f3dd Mon Sep 17 00:00:00 2001
From: robo <30987265+Robonau@users.noreply.github.com>
Date: Wed, 23 Feb 2022 21:10:45 +0000
Subject: [PATCH 1/4] sorting

add menu
add sort by left to Read
add sort alphabetical
add sort by ID
add Asc/Desc
---
 src/components/library/LibraryMangaGrid.tsx | 29 ++++++++++++-
 src/components/library/LibraryOptions.tsx   | 47 +++++++++++++++++++++
 src/util/useLibraryOptions.ts               | 20 ++++++++-
 3 files changed, 93 insertions(+), 3 deletions(-)

diff --git a/src/components/library/LibraryMangaGrid.tsx b/src/components/library/LibraryMangaGrid.tsx
index f725ca951d..a7f2dc32df 100644
--- a/src/components/library/LibraryMangaGrid.tsx
+++ b/src/components/library/LibraryMangaGrid.tsx
@@ -48,6 +48,32 @@ 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,
@@ -55,12 +81,13 @@ export default function LibraryMangaGrid(props: IMangaGridProps) {
 
     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}
diff --git a/src/components/library/LibraryOptions.tsx b/src/components/library/LibraryOptions.tsx
index 8d58bee2bc..6fb222b734 100644
--- a/src/components/library/LibraryOptions.tsx
+++ b/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>
+
         </>
     );
 }
diff --git a/src/util/useLibraryOptions.ts b/src/util/useLibraryOptions.ts
index 57934fb948..73ee73306f 100644
--- a/src/util/useLibraryOptions.ts
+++ b/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: (query: NullAndUndefined<string>) => void
+    sortDesc: NullAndUndefined<boolean>
+    setSortDesc: (unread: 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,
     };
 }

From 74fc471c9e4f9a97e276523642e895a1f5f95d4e Mon Sep 17 00:00:00 2001
From: robo <30987265+Robonau@users.noreply.github.com>
Date: Wed, 23 Feb 2022 21:22:27 +0000
Subject: [PATCH 2/4] woops

---
 src/util/useLibraryOptions.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/util/useLibraryOptions.ts b/src/util/useLibraryOptions.ts
index 73ee73306f..c9b692d760 100644
--- a/src/util/useLibraryOptions.ts
+++ b/src/util/useLibraryOptions.ts
@@ -17,9 +17,9 @@ interface IUseLibraryOptions {
     setQuery: (query: NullAndUndefined<string>) => void
     active: boolean
     sorts: NullAndUndefined<string>
-    setSorts: (query: NullAndUndefined<string>) => void
+    setSorts: (Sorts: NullAndUndefined<string>) => void
     sortDesc: NullAndUndefined<boolean>
-    setSortDesc: (unread: NullAndUndefined<boolean>) => void
+    setSortDesc: (SortDesc: NullAndUndefined<boolean>) => void
 }
 
 export default function useLibraryOptions(): IUseLibraryOptions {

From 7ebfed277a490ad03706d52991dbd9ad3ec5e0d7 Mon Sep 17 00:00:00 2001
From: robo <30987265+Robonau@users.noreply.github.com>
Date: Wed, 23 Feb 2022 21:23:02 +0000
Subject: [PATCH 3/4] woops

---
 src/util/useLibraryOptions.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/util/useLibraryOptions.ts b/src/util/useLibraryOptions.ts
index c9b692d760..c18da98d74 100644
--- a/src/util/useLibraryOptions.ts
+++ b/src/util/useLibraryOptions.ts
@@ -17,9 +17,9 @@ interface IUseLibraryOptions {
     setQuery: (query: NullAndUndefined<string>) => void
     active: boolean
     sorts: NullAndUndefined<string>
-    setSorts: (Sorts: NullAndUndefined<string>) => void
+    setSorts: (sorts: NullAndUndefined<string>) => void
     sortDesc: NullAndUndefined<boolean>
-    setSortDesc: (SortDesc: NullAndUndefined<boolean>) => void
+    setSortDesc: (sortDesc: NullAndUndefined<boolean>) => void
 }
 
 export default function useLibraryOptions(): IUseLibraryOptions {

From 5c80999f8404bddf569bc77f9989826cc9ce8da9 Mon Sep 17 00:00:00 2001
From: robo <30987265+Robonau@users.noreply.github.com>
Date: Thu, 24 Feb 2022 00:40:27 +0000
Subject: [PATCH 4/4] Camel case

---
 src/components/library/LibraryMangaGrid.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/library/LibraryMangaGrid.tsx b/src/components/library/LibraryMangaGrid.tsx
index a7f2dc32df..262753705d 100644
--- a/src/components/library/LibraryMangaGrid.tsx
+++ b/src/components/library/LibraryMangaGrid.tsx
@@ -48,17 +48,17 @@ function filterManga(mangas: IMangaCard[]): IMangaCard[] {
         && queryFilter(query, manga));
 }
 
-function ToReadSort(a: IMangaCard, b: IMangaCard): number {
+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 {
+function toSortAlph(a: IMangaCard, b: IMangaCard): number {
     return a.title < b.title ? 1 : -1;
 }
 
-function ToSortID(a: IMangaCard, b: IMangaCard): number {
+function toSortID(a: IMangaCard, b: IMangaCard): number {
     return a.id > b.id ? 1 : -1;
 }
 
@@ -67,9 +67,9 @@ function sortManga(mangas: IMangaCard[]): IMangaCard[] {
     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); }
+        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;
     });
 }