π§ 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:
parent
59dabf09b9
commit
95edd9d278
@ -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,
|
||||
|
||||
Loadingβ¦
x
Reference in New Issue
Block a user