better performance

src/core/components/ActivityCodeLog.jsx

@@ -1,30 +1,36 @@
 "use client";
+
+import { useEffect, useState, memo } from "react";
 import useRequest from "@/lib/hooks/useRequest";
-import { useEffect } from "react";
 import { ACTIVITY_LOG } from "@/core/utils/routes";
 
-const ActivityCodeLog = ({ activity_code }) => {
+const ActivityCodeLog = memo(({ activity_code }) => {
     const requestServer = useRequest({ notificationShow: false });
+    const [hasLogged, setHasLogged] = useState(false);
 
     useEffect(() => {
-        if (!activity_code) return;
+        if (!activity_code || hasLogged) return;
 
-        const fetchSubItems = async () => {
+        const controller = new AbortController();
+
+        const fetchActivityLog = async () => {
             try {
                 await requestServer(ACTIVITY_LOG, "post", {
-                    data: {
+                    data: { activityCode: activity_code },
-                        activityCode: activity_code,
+                    signal: controller.signal,
-                    },
                 });
-            } catch (error) {
+                setHasLogged(true);
-                console.error(error); // Always helpful to log the error for debugging.
+            } catch (error) {}
-            }
         };
 
-        fetchSubItems();
+        fetchActivityLog();
-    }, [activity_code, requestServer]);
 
-    return null; // Ensure the component still renders something.
+        return () => {
-};
+            controller.abort();
+        };
+    }, [activity_code, hasLogged, requestServer]);
+
+    return null;
+});
 
 export default ActivityCodeLog;

src/core/middlewares/withPermission.js

@@ -2,16 +2,24 @@
 
 import { Box, Typography } from "@mui/material";
 import { usePermissions } from "@/lib/hooks/usePermissions";
+import { useEffect, useState } from "react";
 
 function WithPermission({ children, permission_name }) {
     const { data, error, isLoading } = usePermissions();
+    const [cachedData, setCachedData] = useState(null);
 
-    if (error || isLoading || !data || !permission_name) {
+    useEffect(() => {
+        if (data) {
+            setCachedData(data);
+        }
+    }, [data]);
+
+    if (error || isLoading || !cachedData || !permission_name) {
         return null;
     }
 
     const hasPermission =
-        permission_name.includes("all") || permission_name.some((permission) => data.includes(permission));
+        permission_name.includes("all") || permission_name.some((permission) => cachedData.includes(permission));
 
     if (!hasPermission) {
         return (

src/lib/hooks/usePermissions.js

@@ -14,5 +14,5 @@ export const usePermissions = () => {
         }
     };
 
-    return useSWR(GET_PERMISSIONS_ROUTE, fetcher, { keepPreviousData: true });
+    return useSWR(GET_PERMISSIONS_ROUTE, fetcher, { keepPreviousData: true, dedupingInterval: 30000 });
 };

src/lib/hooks/useSidebarBadge.js

@@ -14,5 +14,5 @@ export const useSidebarBadge = () => {
         }
     };
 
-    return useSWR(GET_SIDEBAR_BADGE_ROUTE, fetcher, { keepPreviousData: true });
+    return useSWR(GET_SIDEBAR_BADGE_ROUTE, fetcher, { keepPreviousData: true, dedupingInterval: 30000 });
 };