Correctly update function refs when state changes (#611)

src/components/navbar/ReaderNavBar.tsx

@@ -121,7 +121,7 @@ interface IProps {
     chapter: TChapter;
     curPage: number;
     scrollToPage: (page: number) => void;
-    openNextChapter: (offset: ChapterOffset, setHistory: (nextChapterIndex: number) => void) => Promise<void>;
+    openNextChapter: (offset: ChapterOffset) => void;
     retrievingNextChapter: boolean;
 }
 
@@ -310,17 +310,7 @@ export function ReaderNavBar(props: IProps) {
                                 <IconButton
                                     sx={{ gridArea: 'pre' }}
                                     disabled={disableChapterNavButtons || chapter.sourceOrder <= 1}
-                                    onClick={() =>
+                                    onClick={() => openNextChapter(ChapterOffset.PREV)}
-                                        openNextChapter(ChapterOffset.PREV, (prevChapterIndex) => {
-                                            navigate(`/manga/${manga.id}/chapter/${prevChapterIndex}`, {
-                                                replace: true,
-                                                state: {
-                                                    prevDrawerOpen: drawerOpen,
-                                                    prevSettingsCollapseOpen: settingsCollapseOpen,
-                                                },
-                                            });
-                                        })
-                                    }
                                 >
                                     <KeyboardArrowLeftIcon />
                                 </IconButton>
@@ -361,17 +351,7 @@ export function ReaderNavBar(props: IProps) {
                                         chapter.sourceOrder < 1 ||
                                         chapter.sourceOrder >= manga.chapters.totalCount
                                     }
-                                    onClick={() => {
+                                    onClick={() => openNextChapter(ChapterOffset.NEXT)}
-                                        openNextChapter(ChapterOffset.NEXT, (nextChapterIndex) =>
-                                            navigate(`/manga/${manga.id}/chapter/${nextChapterIndex}`, {
-                                                replace: true,
-                                                state: {
-                                                    prevDrawerOpen: drawerOpen,
-                                                    prevSettingsCollapseOpen: settingsCollapseOpen,
-                                                },
-                                            }),
-                                        );
-                                    }}
                                 >
                                     <KeyboardArrowRightIcon />
                                 </IconButton>

src/i18n/locale/en.json

@@ -624,8 +624,8 @@
     },
     "error": {
       "label": {
-        "unable_to_get_next_chapter_skip_dup": "Unable to get the next chapter - \"$t(reader.settings.label.skip_dup_chapters)\" option is enabled",
+        "next_chapter_does_not_exist": "There is no next chapter to open",
-        "unable_to_get_prev_chapter_skip_dup": "Unable to get the previous chapter - \"$t(reader.settings.label.skip_dup_chapters)\" option is enabled"
+        "prev_chapter_does_not_exist": "There is no previous chapter to open"
       }
     },
     "page_info": {

src/screens/Reader.tsx

@@ -11,15 +11,7 @@ import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'r
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { Box } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import {
+import { AllowedMetadataValueTypes, ChapterOffset, IReaderSettings, ReaderType, TChapter, TManga } from '@/typings';
-    AllowedMetadataValueTypes,
-    ChapterOffset,
-    IReaderSettings,
-    ReaderType,
-    TChapter,
-    TManga,
-    TranslationKey,
-} from '@/typings';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import {
     checkAndHandleMissingStoredReaderSettings,
@@ -269,28 +261,33 @@ export function Reader() {
     };
 
     const openNextChapter = useCallback(
-        async (offset: ChapterOffset, setHistory: (nextChapterIndex: number) => void) => {
+        (offset: ChapterOffset) => {
+            const isOpenNextChapter = offset === ChapterOffset.NEXT;
+            const chapterToOpen = isOpenNextChapter ? nextChapter : prevChapter;
+
+            if (!chapterToOpen) {
+                makeToast(
+                    t(
+                        isOpenNextChapter
+                            ? 'reader.error.label.next_chapter_does_not_exist'
+                            : 'reader.error.label.prev_chapter_does_not_exist',
+                    ),
+                    'error',
+                );
+                return;
+            }
+
             setRetrievingNextChapter(true);
             setCurPage(0);
-            try {
-                const chapterToOpen = offset === ChapterOffset.NEXT ? nextChapter : prevChapter;
-                if (!chapterToOpen) {
-                    throw new Error('Failed to find next chapter');
-                }
 
-                setHistory(chapterToOpen.sourceOrder);
+            navigate(`/manga/${manga.id}/chapter/${chapterToOpen.sourceOrder}`, {
-            } catch (error) {
+                replace: true,
-                const offsetToTranslationKeyMap: { [chapterOffset in ChapterOffset]: TranslationKey } = {
+                state: location.state,
-                    [ChapterOffset.PREV]: 'reader.error.label.unable_to_get_prev_chapter_skip_dup',
+            });
-                    [ChapterOffset.NEXT]: 'reader.error.label.unable_to_get_next_chapter_skip_dup',
-                };
 
-                makeToast(t(offsetToTranslationKeyMap[offset]), 'error');
+            setRetrievingNextChapter(false);
-            } finally {
-                setRetrievingNextChapter(false);
-            }
         },
-        [chapter, settings],
+        [manga.id, prevChapter?.id, nextChapter?.id],
     );
 
     useEffect(() => {
@@ -365,41 +362,17 @@ export function Reader() {
     }, [curPageDebounced, isDownloadAheadEnabled]);
 
     const loadNextChapter = useCallback(() => {
-        const doesNextChapterExist = chapter.sourceOrder < manga.chapters.totalCount;
-        if (!doesNextChapterExist) {
-            return;
-        }
-
         updateChapter({
             lastPageRead: chapter.pageCount - 1,
             isRead: true,
         });
 
-        openNextChapter(ChapterOffset.NEXT, (nextChapterIndex) =>
+        openNextChapter(ChapterOffset.NEXT);
-            navigate(`/manga/${manga.id}/chapter/${nextChapterIndex}`, {
+    }, [chapter.pageCount, openNextChapter]);
-                replace: true,
-                state: location.state,
-            }),
-        );
-    }, [
-        chapter.sourceOrder,
-        manga.chapters.totalCount,
-        chapter.pageCount,
-        manga.id,
-        isDownloadAheadEnabled,
-        nextChapter?.id,
-    ]);
 
     const loadPrevChapter = useCallback(() => {
-        if (chapter.sourceOrder > 1) {
+        openNextChapter(ChapterOffset.PREV);
-            openNextChapter(ChapterOffset.PREV, (prevChapterIndex) =>
+    }, [openNextChapter]);
-                navigate(`/manga/${manga.id}/chapter/${prevChapterIndex}`, {
-                    replace: true,
-                    state: location.state,
-                }),
-            );
-        }
-    }, [chapter.sourceOrder, manga.id, prevChapter?.id]);
 
     if (isLoading) {
         return (