refactor: split hook api get all chapter

src/components/Export/ButtonDownload.tsx

@@ -8,24 +8,9 @@ interface Props {
   close: () => void;
 }
 
-// interface Api {
-//   chapterId: string;
-//   novelId: string;
-//   file: string;
-//   server: string;
-// }
-
 const ButtonDownload = ({ novelId, file, server, close }: Props) => {
-  // const callApiDownload = useMutation({
-  //   mutationFn:
-  //     async ({ chapterId, novelId, file, server}: Api) =>
-  //       ApiDownloadChapter(server, file, novelId, chapterId),
-  // })
-
   const handleDownload = () => {
     close();
-    //callApiDownload.mutate({server, file, novelId, chapterId});
-    // window.open(`${import.meta.env.VITE_REACT_APP_BASE_URL}/${server}/tai-truyen/${file}/${novelId}/${chapterId}`);
     toast.info("Truyện đang được tải");
     window.open(`${import.meta.env.VITE_REACT_APP_BASE_URL}/${server}/tai-truyen/${novelId}/${file}`);
   };

src/components/Popup/ChapterPopup.tsx

@@ -1,17 +1,12 @@
-import { IChapterRoot } from "../../types/novel";
+import { useEffect } from "react";
+import { useModal } from "../../hooks/useModal";
+import { getCurrentScrollByChapterId } from "../../utils/helpers";
 import ChapterRow from "./ChapterRow";
-import { useQuery } from "@tanstack/react-query";
-import { IResponse } from "../../types/response";
-import { ApiGetAllChapter } from "../../api/apiNovel";
-import { useEffect, useState } from "react";
 import ListChapterSkeleton from "../Loading/ListChapterSkeleton";
 import CustomPagination from "../CustomPagination";
-import { useSelector } from "react-redux";
-import { getListChapterReaded } from "../../store/readed/selector";
-import { useModal } from "../../hooks/useModal";
 import EmptyResult from "../EmptyResult";
 import ButtonClose from "../Button/ButtonClose";
-import { getCurrentPageByChapterId, getCurrentScrollByChapterId } from "../../utils/helpers";
+import useGetAllChapter from "../../hooks/query/useGetAllChapter";
 
 interface Props {
   close: () => void;
@@ -22,29 +17,12 @@ interface Props {
 }
 
 const ChapterPopup = ({ close, novelId, name, server, chapterId }: Props) => {
-  const [chapters, setChapters] = useState<IChapterRoot[]>([]);
-  const [currentPage, setCurrentPage] = useState<number>(getCurrentPageByChapterId(server, chapterId || "1"));
-  const [firstSelectedPage] = useState(currentPage);
-
-  const [, setPerPage] = useState<number>(0);
-  const [totalPage, setTotalPage] = useState<number>(1);
-
-  const listChapterReaded = useSelector(getListChapterReaded(novelId));
-
-  const { isFetching, isError } = useQuery({
-    queryKey: ["all_chapter", novelId, currentPage, server],
-    queryFn: async () => {
-      const data: IResponse<IChapterRoot[]> = await ApiGetAllChapter(server, novelId, currentPage);
-
-      setPerPage(data.perPage);
-      setTotalPage(data.totalPage);
-      setChapters(data.data);
-
-      return data;
-    },
-    retry: 1,
-  });
-
+  const { isLoading, isError, totalPage, currentPage, setCurrentPage, firstSelectedPage, chapters, listChapterReaded } =
+    useGetAllChapter({
+      server,
+      chapterId,
+      novelId,
+    });
   const { modalRef, handleClickOutside } = useModal(close);
 
   useEffect(() => {
@@ -54,8 +32,6 @@ const ChapterPopup = ({ close, novelId, name, server, chapterId }: Props) => {
     };
   }, []);
 
-  const isLoading = isFetching || chapters.length <= 0;
-
   useEffect(() => {
     const container = document.getElementById("scroll_chapter");
     if (!container || isLoading || currentPage != firstSelectedPage) return;

src/components/Popup/CustomSelection.tsx

@@ -5,10 +5,10 @@ import data from "../../constants/selection.json";
 import MenuItem from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
 
-import "../../assets/style/selection.scss";
 import { ThemeContext } from "../../contexts/ThemeContext";
 import { THEME } from "../../types/theme";
 import { SelectionKey } from "../../types/key";
+import "../../assets/style/selection.scss";
 
 interface Props {
   value: string;

src/components/Popup/SettingPopup.tsx

@@ -13,6 +13,7 @@ import { useModal } from "../../hooks/useModal";
 interface Props {
   close: () => void;
 }
+
 const SettingPopup = ({ close }: Props) => {
   const { background, color, setColor, resetSettings } = useContext(SettingsContext)!;
 

src/hooks/query/useGetAllChapter.tsx

@@ -0,0 +1,44 @@
+import { useState } from "react";
+import { IChapterRoot } from "../../types/novel";
+import { getCurrentPageByChapterId } from "../../utils/helpers";
+import { useSelector } from "react-redux";
+import { getListChapterReaded } from "../../store/readed/selector";
+import { useQuery } from "@tanstack/react-query";
+import { IResponse } from "../../types/response";
+import { ApiGetAllChapter } from "../../api/apiNovel";
+
+interface Props {
+  server: string;
+  chapterId: string | undefined;
+  novelId: string;
+}
+
+const useGetAllChapter = ({ server, chapterId, novelId }: Props) => {
+  const [chapters, setChapters] = useState<IChapterRoot[]>([]);
+  const [currentPage, setCurrentPage] = useState<number>(getCurrentPageByChapterId(server, chapterId || "1"));
+  const [firstSelectedPage] = useState(currentPage);
+
+  const [, setPerPage] = useState<number>(0);
+  const [totalPage, setTotalPage] = useState<number>(1);
+
+  const listChapterReaded = useSelector(getListChapterReaded(novelId));
+
+  const { isFetching, isError } = useQuery({
+    queryKey: ["all_chapter", novelId, currentPage, server],
+    queryFn: async () => {
+      const data: IResponse<IChapterRoot[]> = await ApiGetAllChapter(server, novelId, currentPage);
+
+      setPerPage(data.perPage);
+      setTotalPage(data.totalPage);
+      setChapters(data.data);
+
+      return data;
+    },
+    retry: 1,
+  });
+
+  const isLoading = isFetching || chapters.length <= 0;
+  return { isLoading, isError, totalPage, currentPage, setCurrentPage, firstSelectedPage, chapters, listChapterReaded };
+};
+
+export default useGetAllChapter;