From baa2f680f7a4a5b595ccc1a93b344f14ae7a1cf5 Mon Sep 17 00:00:00 2001
From: Daniel <50052685+schroda@users.noreply.github.com>
Date: Wed, 8 Feb 2023 18:37:39 +0100
Subject: [PATCH] add chapter dropdown to reader nav bar  (#229)

* Add chapter dropdown to reader chapter nav buttons

Makes it possible to select a specific chapter inside the reader without having to leave and open the manga page

* Always show chapter nav buttons

In case they are unusable, they will be disabled
---
 src/components/navbar/ReaderNavBar.tsx | 97 ++++++++++++++++----------
 1 file changed, 61 insertions(+), 36 deletions(-)

diff --git a/src/components/navbar/ReaderNavBar.tsx b/src/components/navbar/ReaderNavBar.tsx
index dbd7eb98..4dcf9408 100644
--- a/src/components/navbar/ReaderNavBar.tsx
+++ b/src/components/navbar/ReaderNavBar.tsx
@@ -13,7 +13,7 @@ import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import React, { useEffect, useState } from 'react';
 import Typography from '@mui/material/Typography';
-import { useHistory, Link, useLocation } from 'react-router-dom';
+import { useHistory, useLocation } from 'react-router-dom';
 import Slide from '@mui/material/Slide';
 import Fade from '@mui/material/Fade';
 import Zoom from '@mui/material/Zoom';
@@ -22,7 +22,6 @@ import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import Collapse from '@mui/material/Collapse';
-import Button from '@mui/material/Button';
 import { styled } from '@mui/system';
 import useBackTo from 'util/useBackTo';
 import ReaderSettingsOptions from 'components/reader/ReaderSettingsOptions';
@@ -81,20 +80,18 @@ const PageNavigation = styled('div')({
 
 const ChapterNavigation = styled('div')({
     display: 'grid',
-    gridTemplateColumns: '1fr 1fr',
-    gridTemplateAreas: '"prev next"',
+    gridTemplateRows: 'auto auto auto',
+    gridTemplateColumns: '0fr 1fr 0fr',
+    gridTemplateAreas: '"pre current next"',
     gridColumnGap: '5px',
     margin: '10px 0',
 
     '& a': {
-        flexGrow: 1,
         textDecoration: 'none',
-
-        '& button': {
-            width: '100%',
-            padding: '5px 8px',
-            textTransform: 'none',
-        },
+        color: 'inherit',
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignContent: 'center',
     },
 });
 
@@ -287,43 +284,71 @@ export default function ReaderNavBar(props: IProps) {
                             <span>{`of ${chapter.pageCount}`}</span>
                         </PageNavigation>
                         <ChapterNavigation>
-                            {chapter.index > 1 && (
-                                <Link
-                                    replace
-                                    to={{
+                            <IconButton
+                                title="Previous Chapter"
+                                sx={{ gridArea: 'pre' }}
+                                disabled={chapter.index <= 1}
+                                onClick={() => {
+                                    history.replace({
                                         pathname: `/manga/${manga.id}/chapter/${chapter.index - 1}`,
                                         state: {
                                             prevDrawerOpen: drawerOpen,
                                             prevSettingsCollapseOpen: settingsCollapseOpen,
                                         },
+                                    });
+                                }}
+                            >
+                                <KeyboardArrowLeftIcon />
+                            </IconButton>
+                            <FormControl
+                                sx={{ gridArea: 'current' }}
+                                size="small"
+                                disabled={chapter.index < 1}
+                            >
+                                <Select
+                                    MenuProps={MenuProps}
+                                    value={chapter.index >= 1 ? chapter.index : ''}
+                                    displayEmpty
+                                    onChange={({ target: { value: selectedChapter } }) => {
+                                        history.replace({
+                                            pathname: `/manga/${manga.id}/chapter/${selectedChapter}`,
+                                            state: {
+                                                prevDrawerOpen: drawerOpen,
+                                                prevSettingsCollapseOpen: settingsCollapseOpen,
+                                            },
+                                        });
                                     }}
                                 >
-                                    <Button
-                                        variant="outlined"
-                                        sx={{ gridArea: 'prev' }}
-                                        startIcon={<KeyboardArrowLeftIcon />}
-                                    >
-                                        Prev. Chapter
-                                    </Button>
-                                </Link>
-                            )}
-                            {chapter.index < chapter.chapterCount && (
-                                <Link
-                                    replace
-                                    style={{ gridArea: 'next' }}
-                                    to={{
+                                    {Array(Math.max(0, chapter.chapterCount))
+                                        .fill(1)
+                                        .map((ignoreValue, index) => (
+                                            // eslint-disable-next-line  max-len
+                                            // eslint-disable-next-line  react/no-array-index-key
+                                            <MenuItem
+                                                key={`Chapter#${index + 1}`}
+                                                value={index + 1}
+                                            >{`Chapter ${index + 1}`}</MenuItem>
+                                        ))}
+                                </Select>
+                            </FormControl>
+                            <IconButton
+                                title="Next Chapter"
+                                sx={{ gridArea: 'next' }}
+                                disabled={
+                                    chapter.index < 1 || chapter.index >= chapter.chapterCount
+                                }
+                                onClick={() => {
+                                    history.replace({
                                         pathname: `/manga/${manga.id}/chapter/${chapter.index + 1}`,
                                         state: {
                                             prevDrawerOpen: drawerOpen,
                                             prevSettingsCollapseOpen: settingsCollapseOpen,
                                         },
-                                    }}
-                                >
-                                    <Button variant="outlined" endIcon={<KeyboardArrowRightIcon />}>
-                                        Next Chapter
-                                    </Button>
-                                </Link>
-                            )}
+                                    });
+                                }}
+                            >
+                                <KeyboardArrowRightIcon />
+                            </IconButton>
                         </ChapterNavigation>
                     </Navigation>
                 </Root>