E-Commerce-Module/frontend/src/features/ui/uiSlice.js
2025-04-25 00:41:30 -05:00

59 lines
No EOL
1.5 KiB
JavaScript

import { createSlice } from '@reduxjs/toolkit';
const initialState = {
notifications: [],
darkMode: localStorage.getItem('darkMode') === 'true',
mobileMenuOpen: false,
};
export const uiSlice = createSlice({
name: 'ui',
initialState,
reducers: {
addNotification: (state, action) => {
state.notifications.push({
id: Date.now(),
...action.payload,
});
},
removeNotification: (state, action) => {
state.notifications = state.notifications.filter(
(notification) => notification.id !== action.payload
);
},
clearNotifications: (state) => {
state.notifications = [];
},
toggleDarkMode: (state) => {
state.darkMode = !state.darkMode;
localStorage.setItem('darkMode', state.darkMode);
},
setDarkMode: (state, action) => {
state.darkMode = action.payload;
localStorage.setItem('darkMode', action.payload);
},
toggleMobileMenu: (state) => {
state.mobileMenuOpen = !state.mobileMenuOpen;
},
closeMobileMenu: (state) => {
state.mobileMenuOpen = false;
},
},
});
export const {
addNotification,
removeNotification,
clearNotifications,
toggleDarkMode,
setDarkMode,
toggleMobileMenu,
closeMobileMenu,
} = uiSlice.actions;
// Selectors
export const selectNotifications = (state) => state.ui.notifications;
export const selectDarkMode = (state) => state.ui.darkMode;
export const selectMobileMenuOpen = (state) => state.ui.mobileMenuOpen;
export default uiSlice.reducer;