TF-102 Add network config

src/lib/app/hooks/useNetwork.jsx

@@ -0,0 +1,58 @@
+import {useEffect, useState} from "react";
+
+function getNetworkConnection() {
+    return (
+        navigator.connection ||
+        navigator.mozConnection ||
+        navigator.webkitConnection ||
+        null
+    );
+}
+
+function getNetworkConnectionInfo() {
+    const connection = getNetworkConnection();
+    if (!connection) {
+        return {};
+    }
+    return {
+        rtt: connection.rtt,
+        type: connection.type,
+        saveData: connection.saveData,
+        downLink: connection.downLink,
+        downLinkMax: connection.downLinkMax,
+        effectiveType: connection.effectiveType,
+    };
+}
+
+function useNetwork() {
+    const [state, setState] = useState(() => {
+        return {
+            online: navigator.onLine,
+        };
+    });
+    useEffect(() => {
+        const handleOnline = () => {
+            setState((prevState) => ({
+                ...prevState,
+                online: true,
+            }));
+        };
+        const handleOffline = () => {
+            setState((prevState) => ({
+                ...prevState,
+                online: false,
+            }));
+        };
+
+        window.addEventListener("online", handleOnline);
+        window.addEventListener("offline", handleOffline);
+        return () => {
+            window.removeEventListener("online", handleOnline);
+            window.removeEventListener("offline", handleOffline);
+        };
+    }, []);
+
+    return state;
+}
+
+export default useNetwork;

src/lib/app/hooks/useRequest.js

@@ -4,27 +4,23 @@ import PendingNotification from "@/core/components/notifications/PendingNotifica
 import {useTranslations} from "next-intl";
 import useUser from "@/lib/app/hooks/useUser";
 import {errorRequest, errorResponse, errorSetting} from "@/core/utils/errorHandler";
+import useNetwork from "@/lib/app/hooks/useNetwork";
 
 const defaultOptions = {
-    auth: false,
-    data: {},
-    requestOptions: {
+    auth: false, data: {}, requestOptions: {
         headers: {}
-    },
-    notification: true,
-    pending: true,
-    success: {
+    }, notification: true, pending: true, success: {
         notification: {
             show: true,
         },
-    },
-    failed: {
+    }, failed: {
         notification: {
             show: true,
         },
     },
 }
 const useRequest = (initOptions) => {
+    const network = useNetwork()
     const t = useTranslations()
     const {token, clearToken} = useUser()
     let _options = {...defaultOptions, ...initOptions}
@@ -32,20 +28,20 @@ const useRequest = (initOptions) => {
     function requestServer(url = '', method = 'get', options) {
         _options = {..._options, ...options}
         if (_options.auth) _options = {
-            ..._options,
-            requestOptions: {
+            ..._options, requestOptions: {
                 ..._options.requestOptions,
                 headers: {..._options.requestOptions.headers, authorization: `Bearer ${token}`}
             }
         }
 
         return new Promise((resolve, reject) => {
+            if (!network.online) {
+                reject()
+                return
+            }
             if (_options.notification && _options.failed.notification.show && _options.pending) PendingNotification(t)
             axios({
-                url: url,
-                method: method,
-                data: _options.data,
-                ..._options.requestOptions
+                url: url, method: method, data: _options.data, ..._options.requestOptions
             })
                 .then(response => {
                     successRequest(response, t, _options)