fix: api get source return empty

src/components/Popup/PriorityServerPopup.tsx

@@ -7,25 +7,24 @@ import ButtonClose from "../Button/ButtonClose";
 import { changeServerIndex } from "../../store/server";
 import { toast } from "react-toastify";
 import { FaInfoCircle } from "react-icons/fa";
-import useGetListServer from "../../hooks/query/useGetListServer";
+import useGetListServerPopup from "../../hooks/query/useGetListServerPopup";
+import CircularProgress from "@mui/material/CircularProgress";
 
 interface Props {
   close: () => void;
 }
 
 const PriorityServerPopup = ({ close }: Props) => {
   const dispatch = useDispatch<AppDispatch>();
-  const { isLoading, refetch } = useGetListServer();
+  const { isLoading } = useGetListServerPopup();
   const listServer = useSelector((state: AppState) => state.server.listServer);
   const [stores, setStores] = useState(listServer);
 
   useEffect(() => {
     document.body.style.overflowY = "hidden";
-    refetch();
     return () => {
       document.body.style.overflowY = "scroll";
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
@@ -76,7 +75,9 @@ const PriorityServerPopup = ({ close }: Props) => {
         </div>
 
         {isLoading ? (
-          <div>Loading...</div>
+          <div className="flex items-center justify-center mt-2">
+            <CircularProgress />
+          </div>
         ) : (
           <div className="border border-slate-400 p-2 px-3 rounded">
             <DragDropContext onDragEnd={handleDragDrop}>
@@ -105,7 +106,7 @@ const PriorityServerPopup = ({ close }: Props) => {
               </div>
             </DragDropContext>
             {stores.length <= 0 && (
-              <div className="text-red-600 font-bold text-center text-xl  mb-2 ">Không có nguồn truyện nào</div>
+              <div className="text-red-600 font-bold text-center text-xl mb-2 ">Không có nguồn truyện nào</div>
             )}
             <i className="md:text-base w-full flex flex-wrap font-semibold text-sky-500 items-center justify-center text-sm gap-1">
               <FaInfoCircle />

src/hooks/query/useGetListServer.tsx

@@ -9,7 +9,7 @@ const useGetListServer = () => {
   const dispatch = useDispatch<AppDispatch>();
   const location = useLocation();
 
-  const { isLoading, isError, refetch } = useQuery({
+  const { isLoading, isError } = useQuery({
     queryKey: ["server", location.pathname],
     queryFn: async () => {
       const data: string[] = await ApiGetAllServer();
@@ -21,7 +21,7 @@ const useGetListServer = () => {
     retry: 0,
   });
 
-  return { isLoading, isError, refetch };
+  return { isLoading, isError };
 };
 
 export default useGetListServer;

src/hooks/query/useGetListServerPopup.tsx

@@ -0,0 +1,27 @@
+import { useDispatch } from "react-redux";
+import { useLocation } from "react-router-dom";
+import { AppDispatch } from "../../store";
+import { useQuery } from "@tanstack/react-query";
+import { ApiGetAllServer } from "../../api/apiPlugin";
+import { updateListServer } from "../../store/server";
+
+const useGetListServerPopup = () => {
+  const dispatch = useDispatch<AppDispatch>();
+  const location = useLocation();
+
+  const { isLoading } = useQuery({
+    queryKey: ["server_popup", location.pathname],
+    queryFn: async () => {
+      const data: string[] = await ApiGetAllServer();
+      dispatch(updateListServer(data));
+
+      return data;
+    },
+
+    retry: 0,
+  });
+
+  return { isLoading };
+};
+
+export default useGetListServerPopup;

src/store/server/reducer.ts

@@ -15,6 +15,6 @@ export const serverReducer = {
 
     state.listServer = state.listServer.filter((srv) => action.payload.includes(srv));
 
-    state.server = state.listServer[0] || "metruyencv";
+    state.server = state.listServer[0] || "";
   },
 };