Add Modal and modalSlice

frontend/src/Components/Layout.js

@@ -3,6 +3,7 @@ import {
 } from 'react-router-dom';
 import getRoutes from '../routes';
 import useAuth from '../hook/useAuth';
+import Modal from './Modal';
 
 const Layout = () => {
   const location = useLocation();
@@ -18,6 +19,7 @@ const Layout = () => {
         </div>
       </nav>
       <Outlet />
+      <Modal />
     </>
   );
 };

frontend/src/Components/Modal.js

@@ -0,0 +1,27 @@
+import { useSelector } from 'react-redux';
+import { Modal as Mbs } from 'react-bootstrap';
+
+const getTitle = (type) => {
+  switch (type) {
+    case 'addChannel':
+      return 'Добавить канал';
+
+    default:
+      return 'Неизвестная модалка!!! О_О';
+  }
+};
+
+const Modal = () => {
+  const { isOpened, type, extra } = useSelector((state) => state.modal);
+
+  return (
+    <Mbs show={isOpened}>
+      <Mbs.Header closeButton>
+        <Mbs.Title>{getTitle(type)}</Mbs.Title>
+      </Mbs.Header>
+      <Mbs.Body>{getBody(type)}</Mbs.Body>
+    </Mbs>
+  );
+};
+
+export default Modal;

frontend/src/slices/channelSlice.js

@@ -1,4 +1,5 @@
 /* eslint-disable no-param-reassign */
+
 import { createSlice } from '@reduxjs/toolkit';
 
 const initialState = {
@@ -10,17 +11,20 @@ export const channelSlice = createSlice({
   name: 'channels',
   initialState,
   reducers: {
-    addChennels: (state, action) => {
-      const { channels, currentChannelId } = action.payload;
+    addChennels: (state, { payload }) => {
+      const { channels, currentChannelId } = payload;
       state.currentChannelID = currentChannelId;
       state.channels = channels;
     },
+    addChennel: (state, { payload }) => {
+      console.log(payload, state);
+    },
     setCurrentChannel: (state, { payload: id }) => {
       state.currentChannelID = id;
     },
   },
 });
 
-export const { addChennels, setCurrentChannel } = channelSlice.actions;
+export const { addChennels, addChennel, setCurrentChannel } = channelSlice.actions;
 
 export default channelSlice.reducer;

frontend/src/slices/modalSlice.js

@@ -0,0 +1,31 @@
+/* eslint-disable no-param-reassign */
+
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+  isOpened: false,
+  type: null,
+  extra: null,
+};
+
+export const modalSlice = createSlice({
+  name: 'modal',
+  initialState,
+  reducers: {
+    modalClose: (state) => {
+      state.isOpened = null;
+      state.extra = null;
+      state.type = null;
+    },
+    openModal: (state, { payload }) => {
+      const { type, extra } = payload;
+      state.type = type;
+      state.extra = extra ?? null;
+      state.isOpened = true;
+    },
+  },
+});
+
+export const { modalClose } = modalSlice.actions;
+
+export default modalSlice.reducer;

frontend/src/store/store.js

@@ -1,11 +1,13 @@
 import { configureStore } from '@reduxjs/toolkit';
 import channelReducer from '../slices/channelSlice';
 import messagesReduser from '../slices/messagesSlice';
+import modalReduser from '../slices/modalSlice';
 
 const store = configureStore({
   reducer: {
     channelsInfo: channelReducer,
     messagesInfo: messagesReduser,
+    modal: modalReduser,
   },
 });