first

src/store/index.js

@@ -0,0 +1,19 @@
+// third-party
+import { configureStore } from '@reduxjs/toolkit';
+import { useDispatch as useAppDispatch, useSelector as useAppSelector } from 'react-redux';
+
+// project import
+import reducers from './reducers';
+
+// ==============================|| REDUX TOOLKIT - MAIN STORE ||============================== //
+
+const store = configureStore({
+  reducer: reducers
+});
+
+const { dispatch } = store;
+
+const useDispatch = () => useAppDispatch();
+const useSelector = useAppSelector;
+
+export { store, dispatch, useSelector, useDispatch };

src/store/reducers/actions.js

@@ -0,0 +1,4 @@
+// action - account reducer
+export const LOGIN = '@auth/LOGIN';
+export const LOGOUT = '@auth/LOGOUT';
+export const REGISTER = '@auth/REGISTER';

src/store/reducers/auth.js

@@ -0,0 +1,45 @@
+// action - state management
+import { REGISTER, LOGIN, LOGOUT } from './actions';
+
+// initial state
+export const initialState = {
+  isLoggedIn: false,
+  isInitialized: false,
+  user: null
+};
+
+// ==============================|| AUTH REDUCER ||============================== //
+
+const auth = (state = initialState, action) => {
+  switch (action.type) {
+    case REGISTER: {
+      const { user } = action.payload;
+      return {
+        ...state,
+        user
+      };
+    }
+    case LOGIN: {
+      const { user } = action.payload;
+      return {
+        ...state,
+        isLoggedIn: true,
+        isInitialized: true,
+        user
+      };
+    }
+    case LOGOUT: {
+      return {
+        ...state,
+        isInitialized: true,
+        isLoggedIn: false,
+        user: null
+      };
+    }
+    default: {
+      return { ...state };
+    }
+  }
+};
+
+export default auth;

src/store/reducers/index.js

@@ -0,0 +1,15 @@
+// third-party
+import { combineReducers } from 'redux';
+
+// project import
+import menu from './menu';
+import snackbar from './snackbar';
+
+// ==============================|| COMBINE REDUCERS ||============================== //
+
+const reducers = combineReducers({
+  menu,
+  snackbar
+});
+
+export default reducers;

src/store/reducers/menu.js

@@ -0,0 +1,63 @@
+// third-party
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+
+// project import
+import axios from 'utils/axios';
+
+// initial state
+const initialState = {
+  openItem: ['dashboard'],
+  openComponent: 'buttons',
+  selectedID: null,
+  drawerOpen: false,
+  componentDrawerOpen: true,
+  menu: {},
+  error: null
+};
+
+// ==============================|| SLICE - MENU ||============================== //
+
+export const fetchMenu = createAsyncThunk('', async () => {
+  const response = await axios.get('/api/menu/dashboard');
+  return response.data;
+});
+
+const menu = createSlice({
+  name: 'menu',
+  initialState,
+  reducers: {
+    activeItem(state, action) {
+      state.openItem = action.payload.openItem;
+    },
+
+    activeID(state, action) {
+      state.selectedID = action.payload;
+    },
+
+    activeComponent(state, action) {
+      state.openComponent = action.payload.openComponent;
+    },
+
+    openDrawer(state, action) {
+      state.drawerOpen = action.payload;
+    },
+
+    openComponentDrawer(state, action) {
+      state.componentDrawerOpen = action.payload.componentDrawerOpen;
+    },
+
+    hasError(state, action) {
+      state.error = action.payload;
+    }
+  },
+
+  extraReducers(builder) {
+    builder.addCase(fetchMenu.fulfilled, (state, action) => {
+      state.menu = action.payload.dashboard;
+    });
+  }
+});
+
+export default menu.reducer;
+
+export const { activeItem, activeComponent, openDrawer, openComponentDrawer, activeID } = menu.actions;

src/store/reducers/snackbar.js

@@ -0,0 +1,67 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+  action: false,
+  open: false,
+  message: 'Note archived',
+  anchorOrigin: {
+    vertical: 'bottom',
+    horizontal: 'right'
+  },
+  variant: 'default',
+  alert: {
+    color: 'primary',
+    variant: 'filled'
+  },
+  transition: 'Fade',
+  close: true,
+  actionButton: false,
+  maxStack: 3,
+  dense: false,
+  iconVariant: 'usedefault'
+};
+
+// ==============================|| SLICE - SNACKBAR ||============================== //
+
+const snackbar = createSlice({
+  name: 'snackbar',
+  initialState,
+  reducers: {
+    openSnackbar(state, action) {
+      const { open, message, anchorOrigin, variant, alert, transition, close, actionButton } = action.payload;
+
+      state.action = !state.action;
+      state.open = open || initialState.open;
+      state.message = message || initialState.message;
+      state.anchorOrigin = anchorOrigin || initialState.anchorOrigin;
+      state.variant = variant || initialState.variant;
+      state.alert = {
+        color: alert?.color || initialState.alert.color,
+        variant: alert?.variant || initialState.alert.variant
+      };
+      state.transition = transition || initialState.transition;
+      state.close = close === false ? close : initialState.close;
+      state.actionButton = actionButton || initialState.actionButton;
+    },
+
+    closeSnackbar(state) {
+      state.open = false;
+    },
+    handlerIncrease(state, action) {
+      const { maxStack } = action.payload;
+      state.maxStack = maxStack;
+    },
+    handlerDense(state, action) {
+      const { dense } = action.payload;
+      state.dense = dense;
+    },
+    handlerIconVariants(state, action) {
+      const { iconVariant } = action.payload;
+      state.iconVariant = iconVariant;
+    }
+  }
+});
+
+export default snackbar.reducer;
+
+export const { closeSnackbar, openSnackbar, handlerIncrease, handlerDense, handlerIconVariants } = snackbar.actions;