From 95edd9d278d6d9982a98dabfcc4d04216257d3a6 Mon Sep 17 00:00:00 2001
From: "tuan.cna" <tuan.cna@ots/vn>
Date: Fri, 30 May 2025 15:39:35 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Fix=20React=20Hooks=20Rules=20Vi?=
 =?UTF-8?q?olation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🚨 Fixed Rules of Hooks Error:
- Moved useSelector hook call outside of getIsDarkMode function
- useSelector must be called directly in component, not in nested function
- Proper React hooks usage following React guidelines

🔄 Refactored Theme Detection:
- Direct useSelector call for Redux theme state
- Separate variables for localStorage and document theme detection
- Combined theme detection with logical OR operator
- Maintained same functionality with proper hook usage

✅ Code Quality Improvements:
- No more React hooks rules violations
- Cleaner code structure
- Better separation of concerns
- Maintained all theme detection functionality

🎯 Technical Details:
- useSelector called at component level
- Theme detection logic simplified
- Debug logging preserved
- All theme sources still checked properly
---
 src/feature-module/projects/projecttracker.jsx | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/feature-module/projects/projecttracker.jsx b/src/feature-module/projects/projecttracker.jsx
index 528d788..6c8e0dc 100644
--- a/src/feature-module/projects/projecttracker.jsx
+++ b/src/feature-module/projects/projecttracker.jsx
@@ -17,20 +17,18 @@ const ProjectTracker = () => {
   // Theme state for force re-render
   const [themeKey, setThemeKey] = useState(0);
 
+  // Get theme from Redux
+  const reduxTheme = useSelector((state) => state.theme?.isDarkMode);
+
   // Get theme from multiple sources with real-time detection
-  const getIsDarkMode = () => {
-    const reduxTheme = useSelector((state) => state.theme?.isDarkMode);
-    const localStorageTheme = localStorage.getItem('colorschema') === 'dark_mode';
-    const documentTheme = document.documentElement.getAttribute('data-layout-mode') === 'dark_mode';
+  const localStorageTheme = localStorage.getItem('colorschema') === 'dark_mode';
+  const documentTheme = document.documentElement.getAttribute('data-layout-mode') === 'dark_mode';
 
-    return reduxTheme || localStorageTheme || documentTheme;
-  };
-
-  const isDarkMode = getIsDarkMode();
+  const isDarkMode = reduxTheme || localStorageTheme || documentTheme;
 
   // Debug theme state
   console.log('Theme Debug:', {
-    reduxTheme: useSelector((state) => state.theme),
+    reduxTheme: reduxTheme,
     localStorage: localStorage.getItem('colorschema'),
     documentAttribute: document.documentElement.getAttribute('data-layout-mode'),
     isDarkMode: isDarkMode,