diff --git a/src/components/Popup/PriorityServerPopup.tsx b/src/components/Popup/PriorityServerPopup.tsx index d5d31aa..4942e74 100644 --- a/src/components/Popup/PriorityServerPopup.tsx +++ b/src/components/Popup/PriorityServerPopup.tsx @@ -7,7 +7,8 @@ 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; @@ -15,17 +16,15 @@ interface Props { const PriorityServerPopup = ({ close }: Props) => { const dispatch = useDispatch(); - 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) => { {isLoading ? ( -
Loading...
+
+ +
) : (
@@ -105,7 +106,7 @@ const PriorityServerPopup = ({ close }: Props) => {
{stores.length <= 0 && ( -
Không có nguồn truyện nào
+
Không có nguồn truyện nào
)} diff --git a/src/hooks/query/useGetListServer.tsx b/src/hooks/query/useGetListServer.tsx index aa998b6..9b84fbd 100644 --- a/src/hooks/query/useGetListServer.tsx +++ b/src/hooks/query/useGetListServer.tsx @@ -9,7 +9,7 @@ const useGetListServer = () => { const dispatch = useDispatch(); 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; diff --git a/src/hooks/query/useGetListServerPopup.tsx b/src/hooks/query/useGetListServerPopup.tsx new file mode 100644 index 0000000..697bfc9 --- /dev/null +++ b/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(); + 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; diff --git a/src/store/server/reducer.ts b/src/store/server/reducer.ts index 99e98fc..3d8ab16 100644 --- a/src/store/server/reducer.ts +++ b/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] || ""; }, };