Update LibraryOptions.tsx (#146)

src/components/library/LibraryOptions.tsx

@@ -6,101 +6,26 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import React, { useState } from 'react';
+import React from 'react';
 import FilterListIcon from '@mui/icons-material/FilterList';
+import SortIcon from '@mui/icons-material/Sort';
 import {
-    Drawer,
+    Drawer, FormControlLabel, IconButton, ListItem, ListItemButton, ListItemIcon, ListItemText,
-    FormControlLabel,
-    IconButton,
-    Tabs,
-    Tab,
-    Box,
-    Stack,
-    Checkbox,
-    Radio,
-    Switch,
 } from '@mui/material';
 import useLibraryOptions from 'util/useLibraryOptions';
 import ThreeStateCheckbox from 'components/util/ThreeStateCheckbox';
-import TabPanel from 'components/util/TabPanel';
+import { Box } from '@mui/system';
-import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
-import SortIcon from '@mui/icons-material/Sort';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 
 function Options() {
     const {
         downloaded, setDownloaded, unread, setUnread,
     } = useLibraryOptions();
-    const [currentTab, setCurrentTab] = useState<number>(0);
-    const { options, setOptions } = useLibraryOptionsContext();
-
-    function setContextOptions(
-        e: React.ChangeEvent<HTMLInputElement>,
-        checked: boolean,
-    ) {
-        setOptions((prev) => ({ ...prev, [e.target.name]: checked }));
-    }
-
     return (
-        <Box>
+        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-            <Tabs
+            <FormControlLabel control={<ThreeStateCheckbox name="Unread" checked={unread} onChange={setUnread} />} label="Unread" />
-                key={currentTab}
+            <FormControlLabel control={<ThreeStateCheckbox name="Downloaded" checked={downloaded} onChange={setDownloaded} />} label="Downloaded" />
-                value={currentTab}
-                variant="fullWidth"
-                onChange={(e, newTab) => setCurrentTab(newTab)}
-                indicatorColor="primary"
-                textColor="primary"
-            >
-                <Tab label="Filter" value={0} />
-                <Tab label="Display" value={1} />
-            </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>
         </Box>
     );
 }
@@ -110,58 +35,35 @@ function SortOptions() {
         sorts, setSorts, sortDesc, setSortDesc,
     } = useLibraryOptions();
 
-    const handleSortChange = (name: string) => (event: { target: { checked: boolean } }) => {
+    const handleChange = (event:
-        setSorts(event.target.checked ? name : undefined);
+    React.MouseEvent<HTMLDivElement, MouseEvent>, index: string) => {
-    };
+        if (sorts === index) {
-
+            setSortDesc(!sortDesc);
-    const handleOrderChange = () => (event: { target: { checked: boolean } }) => {
+        } else { setSortDesc(false); }
-        setSortDesc(event.target.checked);
+        setSorts(index);
     };
 
     return (
-        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+        <>
-            <FormControlLabel
+            {
-                control={(
+                ['sortToRead', 'sortAlph', 'sortID'].map((e) => {
-                    <Switch
+                    let icon;
-                        name="sortDesc"
+                    if (sorts === e) {
-                        checked={sortDesc === true}
+                        icon = !sortDesc ? (<ArrowUpwardIcon color="primary" />)
-                        onChange={handleOrderChange()}
+                            : (<ArrowDownwardIcon color="primary" />);
-                        color="default"
+                    }
-                    />
+                    icon = icon === undefined && sortDesc === undefined && e === 'sortID' ? (<ArrowDownwardIcon color="primary" />) : icon;
-                )}
+                    return (
-                label="Asc/Desc"
+                        <ListItem disablePadding>
-            />
+                            <ListItemButton onClick={(event) => handleChange(event, e)}>
-            <FormControlLabel
+                                <ListItemIcon>{icon}</ListItemIcon>
-                control={(
+                                <ListItemText primary={e} />
-                    <Radio
+                            </ListItemButton>
-                        name="sortToRead"
+                        </ListItem>
-                        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>
     );
 }
 
@@ -184,10 +86,7 @@ export default function LibraryOptions() {
                 onClose={() => setFiltersOpen(false)}
                 PaperProps={{
                     style: {
-                        maxWidth: 600,
+                        maxWidth: 600, padding: '1em', marginLeft: 'auto', marginRight: 'auto',
-                        padding: '1em',
-                        marginLeft: 'auto',
-                        marginRight: 'auto',
                     },
                 }}
             >
@@ -207,15 +106,13 @@ export default function LibraryOptions() {
                 onClose={() => setSortsOpen(false)}
                 PaperProps={{
                     style: {
-                        maxWidth: 600,
+                        maxWidth: 600, padding: '1em', marginLeft: 'auto', marginRight: 'auto',
-                        padding: '1em',
-                        marginLeft: 'auto',
-                        marginRight: 'auto',
                     },
                 }}
             >
                 <SortOptions />
             </Drawer>
+
         </>
     );
 }