Skip to content

Commit

Permalink
chore: load list source when click icon server (not get from localsto…
Browse files Browse the repository at this point in the history
…rage)
  • Loading branch information
nxhawk committed Jun 15, 2024
1 parent 6987650 commit b173b0c
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 54 deletions.
76 changes: 42 additions & 34 deletions src/components/Popup/PriorityServerPopup.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ 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";

interface Props {
close: () => void;
Expand All @@ -15,13 +16,16 @@ interface Props {
const PriorityServerPopup = ({ close }: Props) => {
const dispatch = useDispatch<AppDispatch>();
const { listServer } = useSelector((state: AppState) => state.server);
const { isLoading, refetch } = useGetListServer();
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
}, []);

const { modalRef, handleClickOutside } = useModal(close);
Expand Down Expand Up @@ -67,40 +71,44 @@ const PriorityServerPopup = ({ close }: Props) => {
<ButtonClose close={close} />
</div>

<div className="border border-slate-400 p-2 px-3 rounded">
<DragDropContext onDragEnd={handleDragDrop}>
<div className="md:mt-2 flex gap-1 flex-col text-white md:text-base text-sm mb-1">
<Droppable droppableId="ROOT" type="group">
{(provided) => (
<div className="flex gap-1 flex-col" {...provided.droppableProps} ref={provided.innerRef}>
{stores.map((srv, index) => (
<Draggable draggableId={srv} key={srv} index={index}>
{(provided) => (
<div
{...provided.dragHandleProps}
{...provided.draggableProps}
ref={provided.innerRef}
className="border border-slate-800 dark:border-slate-50 text-white rounded px-10 py-2 mb-0.5 text-center bg-amber-500 hover:bg-amber-500/90 md:text-lg text-base"
>
{srv}
</div>
)}
</Draggable>
))}
{provided.placeholder}
</div>
)}
</Droppable>
</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>
)}
<i className="md:text-base w-full flex flex-wrap font-semibold text-sky-500 items-center justify-center text-sm gap-1">
<FaInfoCircle />
Kéo thả để thay đổi độ ưu tiên
</i>
</div>
{isLoading ? (
<div>Loading...</div>
) : (
<div className="border border-slate-400 p-2 px-3 rounded">
<DragDropContext onDragEnd={handleDragDrop}>
<div className="md:mt-2 flex gap-1 flex-col text-white md:text-base text-sm mb-1">
<Droppable droppableId="ROOT" type="group">
{(provided) => (
<div className="flex gap-1 flex-col" {...provided.droppableProps} ref={provided.innerRef}>
{stores.map((srv, index) => (
<Draggable draggableId={srv} key={srv} index={index}>
{(provided) => (
<div
{...provided.dragHandleProps}
{...provided.draggableProps}
ref={provided.innerRef}
className="border border-slate-800 dark:border-slate-50 text-white rounded px-10 py-2 mb-0.5 text-center bg-amber-500 hover:bg-amber-500/90 md:text-lg text-base"
>
{srv}
</div>
)}
</Draggable>
))}
{provided.placeholder}
</div>
)}
</Droppable>
</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>
)}
<i className="md:text-base w-full flex flex-wrap font-semibold text-sky-500 items-center justify-center text-sm gap-1">
<FaInfoCircle />
Kéo thả để thay đổi độ ưu tiên
</i>
</div>
)}

<div className="flex mt-5 gap-3 justify-around pb-1">
<button
Expand Down
28 changes: 28 additions & 0 deletions src/hooks/query/useGetListServer.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { useDispatch } from "react-redux";
import { AppDispatch } from "../../store";
import { useLocation } from "react-router-dom";
import { ApiGetAllServer } from "../../api/apiPlugin";
import { updateListServer } from "../../store/server";
import { useQuery } from "@tanstack/react-query";

const useGetListServer = () => {
const dispatch = useDispatch<AppDispatch>();
const location = useLocation();

const { isLoading, isError, refetch } = useQuery({
queryKey: ["server", location.pathname],
queryFn: async () => {
const data: string[] = await ApiGetAllServer();

if (data.length === 0) throw new Error();
dispatch(updateListServer(data));

return data;
},
retry: 0,
});

return { isLoading, isError, refetch };
};

export default useGetListServer;
23 changes: 3 additions & 20 deletions src/routers/CheckNewServer.tsx
Original file line number Diff line number Diff line change
@@ -1,34 +1,17 @@
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";
import LoadingSpinner from "../components/Loading/LoadingSpinner";
import { toast } from "react-toastify";
import useGetListServer from "../hooks/query/useGetListServer";

const CheckNewServer = ({ children }: { children: React.ReactNode }) => {
const { isLoading, isError } = useGetListServer();
const dispatch = useDispatch<AppDispatch>();
const location = useLocation();

const { isLoading, isError } = useQuery({
queryKey: ["server", location.pathname],
queryFn: async () => {
const data: string[] = await ApiGetAllServer();

if (data.length === 0) throw new Error();

dispatch(updateListServer(data));

return data;
},
retry: 0,
});

if (isLoading) return <LoadingSpinner />;
if (isError) {
dispatch(updateListServer([]));
toast.error("Không thể tải nguồn truyền");
toast.error("Không nguồn truyện nào");
}

return children;
Expand Down

0 comments on commit b173b0c

Please sign in to comment.