From 58eda2cdc9a439e72990cb6f2b043c2370b46e9a Mon Sep 17 00:00:00 2001
From: 21120447 <haonhat2729@gmail.com>
Date: Sun, 9 Jun 2024 23:40:41 +0700
Subject: [PATCH] refactor: split hook call api

---
 src/components/Novel/ListNovel.tsx | 28 ++-----------------------
 src/hooks/query/useListNovel.tsx   | 33 ++++++++++++++++++++++++++++++
 2 files changed, 35 insertions(+), 26 deletions(-)
 create mode 100644 src/hooks/query/useListNovel.tsx

diff --git a/src/components/Novel/ListNovel.tsx b/src/components/Novel/ListNovel.tsx
index ec2a080..f89b7b8 100644
--- a/src/components/Novel/ListNovel.tsx
+++ b/src/components/Novel/ListNovel.tsx
@@ -1,36 +1,12 @@
-import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import BoxNovel from "../Novel/BoxNovel";
 import TitleTab from "../TitleTab";
-import { IResponse } from "../../types/response";
-import { ApiGetAllNovel } from "../../api/apiNovel";
-import { useState } from "react";
-import { INovelRoot } from "../../types/novel";
 import ListNovelSkeleton from "../Loading/ListNovelSkeleton";
 import CustomPagination from "../CustomPagination";
-import { useSelector } from "react-redux";
-import { AppState } from "../../store";
 import EmptyResult from "../EmptyResult";
+import useListNovel from "../../hooks/query/useListNovel";
 
 const ListNovel = () => {
-  const [currentPage, setCurrentPage] = useState<number>(1);
-  const [, setPerPage] = useState<number>(0);
-  const [totalPage, setTotalPage] = useState<number>(1);
-  const [novels, setNovels] = useState<INovelRoot[]>([]);
-  const server = useSelector((state: AppState) => state.server.server);
-
-  const { isLoading, isFetching, isError } = useQuery({
-    queryKey: ["all_novel", currentPage, server],
-    queryFn: async () => {
-      const data: IResponse<INovelRoot[]> = await ApiGetAllNovel(server, currentPage);
-
-      setPerPage(data.perPage);
-      setNovels(data.data);
-      setTotalPage(data.totalPage);
-
-      return data.data;
-    },
-    placeholderData: keepPreviousData,
-  });
+  const { isLoading, isFetching, isError, novels, totalPage, currentPage, setCurrentPage } = useListNovel();
 
   if (isError)
     return (
diff --git a/src/hooks/query/useListNovel.tsx b/src/hooks/query/useListNovel.tsx
new file mode 100644
index 0000000..ac0bfce
--- /dev/null
+++ b/src/hooks/query/useListNovel.tsx
@@ -0,0 +1,33 @@
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { IResponse } from "../../types/response";
+import { INovelRoot } from "../../types/novel";
+import { ApiGetAllNovel } from "../../api/apiNovel";
+import { useState } from "react";
+import { AppState } from "../../store";
+import { useSelector } from "react-redux";
+
+const useListNovel = () => {
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const [, setPerPage] = useState<number>(0);
+  const [totalPage, setTotalPage] = useState<number>(1);
+  const [novels, setNovels] = useState<INovelRoot[]>([]);
+  const server = useSelector((state: AppState) => state.server.server);
+
+  const { isLoading, isFetching, isError } = useQuery({
+    queryKey: ["all_novel", currentPage, server],
+    queryFn: async () => {
+      const data: IResponse<INovelRoot[]> = await ApiGetAllNovel(server, currentPage);
+
+      setPerPage(data.perPage);
+      setNovels(data.data);
+      setTotalPage(data.totalPage);
+
+      return data.data;
+    },
+    placeholderData: keepPreviousData,
+  });
+
+  return { isLoading, isFetching, isError, novels, totalPage, currentPage, setCurrentPage };
+};
+
+export default useListNovel;