refactor ChapterList (#125)

* Refactor to move all the Data fetch logic for chapters to seperate Hook called useChapterFetch

* Bug fix: No Chapters found Toast

src/components/chapter/ChapterList.tsx

@@ -12,11 +12,11 @@ import Typography from '@mui/material/Typography';
 import { CircularProgress, Fab } from '@mui/material';
 import { Link } from 'react-router-dom';
 import makeToast from 'components/util/Toast';
-import client from 'util/client';
 import PlayArrow from '@mui/icons-material/PlayArrow';
 import ChapterOptions from 'components/chapter/ChapterOptions';
 import ChapterCard from 'components/chapter/ChapterCard';
 import useLocalStorage from 'util/useLocalStorage';
+import useFetchChapters from './useFetchChapters';
 
 const CustomVirtuoso = styled(Virtuoso)(({ theme }) => ({
     listStyle: 'none',
@@ -85,11 +85,7 @@ function findFirstUnreadChapter(chapters: IChapter[]): IChapter | undefined {
 export default function ChapterList(props: IProps) {
     const { id } = props;
 
-    const [chapters, setChapters] = useState<IChapter[]>([]);
+    const [chapters, triggerChaptersUpdate, noChaptersFound] = useFetchChapters(id);
-    const [noChaptersFound, setNoChaptersFound] = useState(false);
-    const [chapterUpdateTriggerer, setChapterUpdateTriggerer] = useState(0);
-    const [fetchedOnline, setFetchedOnline] = useState(false);
-    const [fetchedOffline, setFetchedOffline] = useState(false);
     const [firstUnreadChapter, setFirstUnreadChapter] = useState<IChapter>();
     const [filteredChapters, setFilteredChapters] = useState<IChapter[]>([]);
     const [options, setOptions] = useLocalStorage<ChapterListOptions>(
@@ -108,10 +104,6 @@ export default function ChapterList(props: IProps) {
     const [, setWsClient] = useState<WebSocket>();
     const [{ queue }, setQueueState] = useState<IQueue>(initialQueue);
 
-    function triggerChaptersUpdate() {
-        setChapterUpdateTriggerer(chapterUpdateTriggerer + 1);
-    }
-
     useEffect(() => {
         const wsc = new WebSocket(`${baseWebsocketUrl}/api/v1/downloads`);
         wsc.onmessage = (e) => {
@@ -141,25 +133,6 @@ export default function ChapterList(props: IProps) {
         return rtn;
     };
 
-    useEffect(() => {
-        const shouldFetchOnline = fetchedOffline && !fetchedOnline;
-
-        client.get(`/api/v1/manga/${id}/chapters?onlineFetch=${shouldFetchOnline}`)
-            .then((response) => response.data)
-            .then((data) => {
-                if (data.length === 0 && fetchedOffline) {
-                    makeToast('No chapters found', 'warning');
-                    setNoChaptersFound(true);
-                }
-                setChapters(data);
-            })
-            .then(() => {
-                if (shouldFetchOnline) {
-                    setFetchedOnline(true);
-                } else setFetchedOffline(true);
-            });
-    }, [fetchedOnline, fetchedOffline, chapterUpdateTriggerer]);
-
     useEffect(() => {
         const filtered = options.active
             ? chapters.filter((chp) => unreadFilter(options.unread, chp)
@@ -191,6 +164,12 @@ export default function ChapterList(props: IProps) {
             </Fab>
         ));
 
+    useEffect(() => {
+        if (noChaptersFound) {
+            makeToast('No chapters found', 'warning');
+        }
+    }, [noChaptersFound]);
+
     if (chapters.length === 0 || noChaptersFound) {
         return (
             <div style={{

src/components/chapter/useFetchChapters.ts

@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+import { useState, useCallback, useEffect } from 'react';
+import client from 'util/client';
+
+export default function useChaptersFetch(id: string): [IChapter[], () => void, boolean] {
+    const [chapters, setChapters] = useState<IChapter[]>([]);
+    const [noChaptersFound, setNoChaptersFound] = useState(false);
+    const [chapterUpdateTriggerer, setChapterUpdateTriggerer] = useState(0);
+    const [fetchedOnline, setFetchedOnline] = useState(false);
+    const [fetchedOffline, setFetchedOffline] = useState(false);
+
+    const triggerChaptersUpdate = useCallback(() => setChapterUpdateTriggerer((prev) => prev + 1),
+        []);
+
+    useEffect(() => {
+        const shouldFetchOnline = fetchedOffline && !fetchedOnline;
+
+        client.get(`/api/v1/manga/${id}/chapters?onlineFetch=${shouldFetchOnline}`)
+            .then((response) => response.data)
+            .then((data) => {
+                if (data.length === 0 && fetchedOffline) {
+                    setNoChaptersFound(true);
+                }
+                setChapters(data);
+            })
+            .then(() => {
+                if (shouldFetchOnline) {
+                    setFetchedOnline(true);
+                } else setFetchedOffline(true);
+            });
+    }, [fetchedOnline, fetchedOffline, chapterUpdateTriggerer]);
+
+    return [chapters, triggerChaptersUpdate, noChaptersFound];
+}