Replace Bootstrap with Mantine (#1795)

2 files changed, 22 insertions, 30 deletions

diff --git a/frontend/src/apis/queries/client.ts b/frontend/src/apis/queries/client.ts
index da73aab8b..91a0af712 100644
--- a/frontend/src/apis/queries/client.ts
+++ b/frontend/src/apis/queries/client.ts
@@ -1,15 +1,15 @@
+import SocketIO from "@/modules/socketio";
+import { setLoginRequired } from "@/utilities/event";
 import Axios, { AxiosError, AxiosInstance, CancelTokenSource } from "axios";
-import { setUnauthenticated } from "../../modules/redux/actions";
-import { AppDispatch } from "../../modules/redux/store";
-import { Environment, isProdEnv } from "../../utilities";
+import { Environment } from "../../utilities";
 class BazarrClient {
   axios!: AxiosInstance;
   source!: CancelTokenSource;
-  dispatch!: AppDispatch;
 
   constructor() {
     const baseUrl = `${Environment.baseUrl}/api/`;
     this.initialize(baseUrl, Environment.apiKey);
+    SocketIO.initialize();
   }
 
   initialize(url: string, apikey?: string) {
@@ -48,16 +48,10 @@ class BazarrClient {
     );
   }
 
-  _resetApi(apikey: string) {
-    if (!isProdEnv) {
-      this.axios.defaults.headers.common["X-API-KEY"] = apikey;
-    }
-  }
-
   handleError(code: number) {
     switch (code) {
       case 401:
-        this.dispatch(setUnauthenticated());
+        setLoginRequired();
         break;
       case 500:
         break;
diff --git a/frontend/src/apis/queries/hooks.ts b/frontend/src/apis/queries/hooks.ts
index db76cd32e..0b36421ea 100644
--- a/frontend/src/apis/queries/hooks.ts
+++ b/frontend/src/apis/queries/hooks.ts
@@ -1,4 +1,4 @@
-import { GetItemId } from "@/utilities";
+import { GetItemId, useOnValueChange } from "@/utilities";
 import { usePageSize } from "@/utilities/storage";
 import { useCallback, useEffect, useState } from "react";
 import {
@@ -13,17 +13,14 @@ export type UsePaginationQueryResult<T extends object> = UseQueryResult<
   DataWrapperWithTotal<T>
 > & {
   controls: {
-    previousPage: () => void;
-    nextPage: () => void;
     gotoPage: (index: number) => void;
   };
   paginationStatus: {
+    isPageLoading: boolean;
     totalCount: number;
     pageSize: number;
     pageCount: number;
     page: number;
-    canPrevious: boolean;
-    canNext: boolean;
   };
 };
 
@@ -67,16 +64,6 @@ export function usePaginationQuery<
   const totalCount = data?.total ?? 0;
   const pageCount = Math.ceil(totalCount / pageSize);
 
-  const previousPage = useCallback(() => {
-    setIndex((index) => Math.max(0, index - 1));
-  }, []);
-
-  const nextPage = useCallback(() => {
-    if (pageCount > 0) {
-      setIndex((index) => Math.min(pageCount - 1, index + 1));
-    }
-  }, [pageCount]);
-
   const gotoPage = useCallback(
     (idx: number) => {
       if (idx >= 0 && idx < pageCount) {
@@ -86,6 +73,20 @@ export function usePaginationQuery<
     [pageCount]
   );
 
+  const [isPageLoading, setIsPageLoading] = useState(false);
+
+  useOnValueChange(page, () => {
+    if (results.isFetching) {
+      setIsPageLoading(true);
+    }
+  });
+
+  useEffect(() => {
+    if (!results.isFetching) {
+      setIsPageLoading(false);
+    }
+  }, [results.isFetching]);
+
   // Reset page index if we out of bound
   useEffect(() => {
     if (pageCount === 0) return;
@@ -100,17 +101,14 @@ export function usePaginationQuery<
   return {
     ...results,
     paginationStatus: {
+      isPageLoading,
       totalCount,
       pageCount,
       pageSize,
       page,
-      canPrevious: page > 0,
-      canNext: page < pageCount - 1,
     },
     controls: {
       gotoPage,
-      previousPage,
-      nextPage,
     },
   };
 }