From 837e55ae0e945a5a12de29f75511445755fe359a Mon Sep 17 00:00:00 2001
From: robo <30987265+Robonau@users.noreply.github.com>
Date: Sat, 5 Mar 2022 21:56:19 +0000
Subject: [PATCH] move sorts to copy tachiyomi

is now in a tab along with filter ad display same as tachiyomi
---
 src/components/library/LibraryOptions.tsx | 217 +++++++++++-----------
 1 file changed, 106 insertions(+), 111 deletions(-)

diff --git a/src/components/library/LibraryOptions.tsx b/src/components/library/LibraryOptions.tsx
index 332f02f2ea..bca0fcce82 100644
--- a/src/components/library/LibraryOptions.tsx
+++ b/src/components/library/LibraryOptions.tsx
@@ -8,7 +8,6 @@
 
 import React, { useState } from 'react';
 import FilterListIcon from '@mui/icons-material/FilterList';
-import SortIcon from '@mui/icons-material/Sort';
 import {
     Drawer,
     FormControlLabel,
@@ -30,11 +29,80 @@ import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 import TabPanel from 'components/util/TabPanel';
 import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
 
-function Options() {
+function filtersTab(currentTab: number) {
     const {
         downloaded, setDownloaded, unread, setUnread,
     } = useLibraryOptions();
-    const [currentTab, setCurrentTab] = useState<number>(0);
+    return (
+        <TabPanel index={0} currentIndex={currentTab}>
+            <Stack direction="column">
+                <FormControlLabel
+                    control={(
+                        <ThreeStateCheckbox
+                            name="Unread"
+                            checked={unread}
+                            onChange={setUnread}
+                        />
+                    )}
+                    label="Unread"
+                />
+                <FormControlLabel
+                    control={(
+                        <ThreeStateCheckbox
+                            name="Downloaded"
+                            checked={downloaded}
+                            onChange={setDownloaded}
+                        />
+                    )}
+                    label="Downloaded"
+                />
+            </Stack>
+        </TabPanel>
+    );
+}
+
+function sortsTab(currentTab: number) {
+    const {
+        sorts, setSorts, sortDesc, setSortDesc,
+    } = useLibraryOptions();
+
+    const handleChange = (event:
+    React.MouseEvent<HTMLDivElement, MouseEvent>, index: string) => {
+        if (sorts === index) {
+            setSortDesc(!sortDesc);
+        } else { setSortDesc(false); }
+        setSorts(index);
+    };
+
+    return (
+        <>
+            <TabPanel index={1} currentIndex={currentTab}>
+                <Stack direction="column">
+                    {
+                        ['sortToRead', 'sortAlph', 'sortID'].map((e) => {
+                            let icon;
+                            if (sorts === e) {
+                                icon = !sortDesc ? (<ArrowUpwardIcon color="primary" />)
+                                    : (<ArrowDownwardIcon color="primary" />);
+                            }
+                            icon = icon === undefined && sortDesc === undefined && e === 'sortID' ? (<ArrowDownwardIcon color="primary" />) : icon;
+                            return (
+                                <ListItem disablePadding>
+                                    <ListItemButton onClick={(event) => handleChange(event, e)}>
+                                        <ListItemIcon>{icon}</ListItemIcon>
+                                        <ListItemText primary={e} />
+                                    </ListItemButton>
+                                </ListItem>
+                            );
+                        })
+                    }
+                </Stack>
+            </TabPanel>
+        </>
+    );
+}
+
+function dispalyTab(currentTab: number) {
     const { options, setOptions } = useLibraryOptionsContext();
 
     function setContextOptions(
@@ -43,6 +111,36 @@ function Options() {
     ) {
         setOptions((prev) => ({ ...prev, [e.target.name]: checked }));
     }
+    return (
+        <TabPanel index={2} currentIndex={currentTab}>
+            <Stack direction="column">
+                <FormControlLabel
+                    label="Unread Badges"
+                    control={(
+                        <Checkbox
+                            name="showUnreadBadge"
+                            checked={options.showUnreadBadge}
+                            onChange={setContextOptions}
+                        />
+                    )}
+                />
+                <FormControlLabel
+                    label="Download Badges"
+                    control={(
+                        <Checkbox
+                            name="showDownloadBadge"
+                            checked={options.showDownloadBadge}
+                            onChange={setContextOptions}
+                        />
+                    )}
+                />
+            </Stack>
+        </TabPanel>
+    );
+}
+
+function Options() {
+    const [currentTab, setCurrentTab] = useState<number>(0);
 
     return (
         <Box>
@@ -55,100 +153,18 @@ function Options() {
                 textColor="primary"
             >
                 <Tab label="Filter" value={0} />
-                <Tab label="Display" value={1} />
+                <Tab label="Sort" value={1} />
+                <Tab label="Display" value={2} />
             </Tabs>
-            <TabPanel index={0} currentIndex={currentTab}>
-                <Stack direction="column">
-                    <FormControlLabel
-                        control={(
-                            <ThreeStateCheckbox
-                                name="Unread"
-                                checked={unread}
-                                onChange={setUnread}
-                            />
-                        )}
-                        label="Unread"
-                    />
-                    <FormControlLabel
-                        control={(
-                            <ThreeStateCheckbox
-                                name="Downloaded"
-                                checked={downloaded}
-                                onChange={setDownloaded}
-                            />
-                        )}
-                        label="Downloaded"
-                    />
-                </Stack>
-            </TabPanel>
-            <TabPanel index={1} currentIndex={currentTab}>
-                <Stack direction="column">
-                    <FormControlLabel
-                        label="Unread Badges"
-                        control={(
-                            <Checkbox
-                                name="showUnreadBadge"
-                                checked={options.showUnreadBadge}
-                                onChange={setContextOptions}
-                            />
-                        )}
-                    />
-                    <FormControlLabel
-                        label="Download Badges"
-                        control={(
-                            <Checkbox
-                                name="showDownloadBadge"
-                                checked={options.showDownloadBadge}
-                                onChange={setContextOptions}
-                            />
-                        )}
-                    />
-                </Stack>
-            </TabPanel>
+            {filtersTab(currentTab)}
+            {sortsTab(currentTab)}
+            {dispalyTab(currentTab)}
         </Box>
     );
 }
 
-function SortOptions() {
-    const {
-        sorts, setSorts, sortDesc, setSortDesc,
-    } = useLibraryOptions();
-
-    const handleChange = (event:
-    React.MouseEvent<HTMLDivElement, MouseEvent>, index: string) => {
-        if (sorts === index) {
-            setSortDesc(!sortDesc);
-        } else { setSortDesc(false); }
-        setSorts(index);
-    };
-
-    return (
-        <>
-            {
-                ['sortToRead', 'sortAlph', 'sortID'].map((e) => {
-                    let icon;
-                    if (sorts === e) {
-                        icon = !sortDesc ? (<ArrowUpwardIcon color="primary" />)
-                            : (<ArrowDownwardIcon color="primary" />);
-                    }
-                    icon = icon === undefined && sortDesc === undefined && e === 'sortID' ? (<ArrowDownwardIcon color="primary" />) : icon;
-                    return (
-                        <ListItem disablePadding>
-                            <ListItemButton onClick={(event) => handleChange(event, e)}>
-                                <ListItemIcon>{icon}</ListItemIcon>
-                                <ListItemText primary={e} />
-                            </ListItemButton>
-                        </ListItem>
-                    );
-                })
-            }
-        </>
-    );
-}
-
 export default function LibraryOptions() {
     const [filtersOpen, setFiltersOpen] = React.useState(false);
-    const [sortsOpen, setSortsOpen] = React.useState(false);
     const { active } = useLibraryOptions();
     return (
         <>
@@ -171,27 +187,6 @@ 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>
-
         </>
     );
 }