From 9724756f2b250821c100f8386c7b4f808faa6ef3 Mon Sep 17 00:00:00 2001 From: 21120447 Date: Mon, 10 Jun 2024 11:27:47 +0700 Subject: [PATCH] refactor: split hook api get all chapter --- src/components/Export/ButtonDownload.tsx | 15 -------- src/components/Popup/ChapterPopup.tsx | 44 ++++++------------------ src/components/Popup/CustomSelection.tsx | 2 +- src/components/Popup/SettingPopup.tsx | 1 + src/hooks/query/useGetAllChapter.tsx | 44 ++++++++++++++++++++++++ 5 files changed, 56 insertions(+), 50 deletions(-) create mode 100644 src/hooks/query/useGetAllChapter.tsx diff --git a/src/components/Export/ButtonDownload.tsx b/src/components/Export/ButtonDownload.tsx index 9a4d952..a02c302 100644 --- a/src/components/Export/ButtonDownload.tsx +++ b/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}`); }; diff --git a/src/components/Popup/ChapterPopup.tsx b/src/components/Popup/ChapterPopup.tsx index cb5fd45..0e57ac3 100644 --- a/src/components/Popup/ChapterPopup.tsx +++ b/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([]); - const [currentPage, setCurrentPage] = useState(getCurrentPageByChapterId(server, chapterId || "1")); - const [firstSelectedPage] = useState(currentPage); - - const [, setPerPage] = useState(0); - const [totalPage, setTotalPage] = useState(1); - - const listChapterReaded = useSelector(getListChapterReaded(novelId)); - - const { isFetching, isError } = useQuery({ - queryKey: ["all_chapter", novelId, currentPage, server], - queryFn: async () => { - const data: IResponse = 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; diff --git a/src/components/Popup/CustomSelection.tsx b/src/components/Popup/CustomSelection.tsx index 6c5f747..2a99d4f 100644 --- a/src/components/Popup/CustomSelection.tsx +++ b/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; diff --git a/src/components/Popup/SettingPopup.tsx b/src/components/Popup/SettingPopup.tsx index 99c3573..015466a 100644 --- a/src/components/Popup/SettingPopup.tsx +++ b/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)!; diff --git a/src/hooks/query/useGetAllChapter.tsx b/src/hooks/query/useGetAllChapter.tsx new file mode 100644 index 0000000..81c37dc --- /dev/null +++ b/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([]); + const [currentPage, setCurrentPage] = useState(getCurrentPageByChapterId(server, chapterId || "1")); + const [firstSelectedPage] = useState(currentPage); + + const [, setPerPage] = useState(0); + const [totalPage, setTotalPage] = useState(1); + + const listChapterReaded = useSelector(getListChapterReaded(novelId)); + + const { isFetching, isError } = useQuery({ + queryKey: ["all_chapter", novelId, currentPage, server], + queryFn: async () => { + const data: IResponse = 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;