chore: load source all page, toast message in mobile

src/App.tsx

@@ -8,10 +8,13 @@ import { ThemeContext } from "./contexts/ThemeContext";
 import { THEME } from "./types/theme";
 import { useSelector } from "react-redux";
 import { AppState } from "./store";
+import useMediaQuery from "@mui/material/useMediaQuery";
 import "react-toastify/dist/ReactToastify.css";
 import "react-loading-skeleton/dist/skeleton.css";
 
 function App() {
+  const position = useMediaQuery("(max-width:500px)") ? "top-center" : "top-right";
+  console.log(position);
   const isOpen = useSelector((state: AppState) => state.chapterOpen.isOpen);
 
   const { theme } = useContext(ThemeContext)!;
@@ -34,7 +37,7 @@ function App() {
       )}
 
       <ToastContainer
-        position="top-right"
+        position={position}
         autoClose={2000}
         hideProgressBar={false}
         newestOnTop={false}
@@ -43,7 +46,7 @@ function App() {
         pauseOnHover
         theme={theme}
         pauseOnFocusLoss={false}
-        className="w-fit hidden md:block"
+        className="w-fit"
         limit={5}
       />
     </div>

src/components/Loading/LoadingSpinner.tsx

@@ -1,6 +1,6 @@
 const LoadingSpinner = () => {
   return (
-    <div className="flex items-center justify-center w-full h-[50vh] text-gray-900 dark:text-gray-100 dark:bg-gray-950">
+    <div className="flex items-center justify-center w-full h-screen text-gray-900 dark:text-gray-100 dark:bg-gray-950">
       <div>
         <h1 className="text-xl md:text-6xl font-bold flex items-center">
           L

src/components/Popup/PriorityServerPopup.tsx

@@ -93,7 +93,7 @@ const PriorityServerPopup = ({ close }: Props) => {
               </Droppable>
             </div>
           </DragDropContext>
-          <i className="md:text-base w-full flex flex-wrap font-semibold text-rose-500 items-center justify-center text-sm gap-1">
+          <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>

src/routers/CheckNewServer.tsx

@@ -1,17 +1,18 @@
 import { useDispatch } from "react-redux";
-import { Outlet, useNavigate } from "react-router-dom";
+import { Outlet, 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";
 
 const CheckNewServer = () => {
   const dispatch = useDispatch<AppDispatch>();
-  const navigate = useNavigate();
+  const location = useLocation();
 
   const { isLoading, isError } = useQuery({
-    queryKey: ["server"],
+    queryKey: ["server", location.pathname],
     queryFn: async () => {
       const data: string[] = await ApiGetAllServer();
 
@@ -21,14 +22,11 @@ const CheckNewServer = () => {
 
       return data;
     },
-    retry: 1,
+    retry: 0,
   });
 
   if (isLoading) return <LoadingSpinner />;
-  if (isError)
-    navigate("/notfound", {
-      replace: true,
-    });
+  if (isError) toast.error("Không thể tải nguồn truyền");
 
   return <Outlet />;
 };

src/routers/router.tsx

@@ -19,60 +19,60 @@ const router = createHashRouter([
     element: <ScrollToTop />,
     children: [
       {
-        element: <Layout />,
+        element: <CheckNewServer />,
         children: [
           {
-            path: "/",
-            element: <Home />,
-          },
-          {
-            path: "/tu-truyen",
-            element: <Bookcase />,
-          },
-          {
-            path: "/truyen/:novelId",
+            element: <Layout />,
             children: [
               {
-                path: "",
-                element: <NovelPreview />,
+                path: "/",
+                element: <Home />,
               },
               {
-                element: <CheckNewServer />,
+                path: "/tu-truyen",
+                element: <Bookcase />,
+              },
+              {
+                path: "/truyen/:novelId",
                 children: [
+                  {
+                    path: "",
+                    element: <NovelPreview />,
+                  },
                   {
                     path: ":chapterId",
                     element: <NovelChapter />,
                   },
                 ],
               },
-            ],
-          },
-          {
-            path: "/tac-gia/:authorId",
-            element: <AuthorPage />,
-          },
-          {
-            path: "/tim-kiem",
-            element: <FilterPage />,
-          },
-          {
-            path: "/thong-tin",
-            children: [
-              {
-                path: "dieu-khoan-dich-vu",
-                element: <TermOfService />,
-              },
               {
-                path: "chinh-sach-bao-mat",
-                element: <PrivacyPolicy />,
+                path: "/tac-gia/:authorId",
+                element: <AuthorPage />,
               },
               {
-                path: "ve-ban-quyen",
-                element: <AboutLicense />,
+                path: "/tim-kiem",
+                element: <FilterPage />,
               },
               {
-                path: "nhom-phat-trien",
-                element: <AboutUs />,
+                path: "/thong-tin",
+                children: [
+                  {
+                    path: "dieu-khoan-dich-vu",
+                    element: <TermOfService />,
+                  },
+                  {
+                    path: "chinh-sach-bao-mat",
+                    element: <PrivacyPolicy />,
+                  },
+                  {
+                    path: "ve-ban-quyen",
+                    element: <AboutLicense />,
+                  },
+                  {
+                    path: "nhom-phat-trien",
+                    element: <AboutUs />,
+                  },
+                ],
               },
             ],
           },