πŸ”§ Fix React Hooks Rules Violation

🚨 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
This commit is contained in:
tuan.cna 2025-05-30 15:39:35 +07:00
parent 59dabf09b9
commit 95edd9d278

View File

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