From 595f65ee856ce47d42e93c27dd0495a74973f643 Mon Sep 17 00:00:00 2001
From: AxeRicin <AxeRicin@yandex.ru>
Date: Thu, 7 Dec 2023 18:09:06 +0300
Subject: [PATCH] Add Modal and modalSlice

---
 frontend/src/Components/Layout.js   |  2 ++
 frontend/src/Components/Modal.js    | 27 +++++++++++++++++++++++++
 frontend/src/slices/channelSlice.js | 10 +++++++---
 frontend/src/slices/modalSlice.js   | 31 +++++++++++++++++++++++++++++
 frontend/src/store/store.js         |  2 ++
 5 files changed, 69 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/Components/Modal.js
 create mode 100644 frontend/src/slices/modalSlice.js

diff --git a/frontend/src/Components/Layout.js b/frontend/src/Components/Layout.js
index 73948b0..5a26285 100644
--- a/frontend/src/Components/Layout.js
+++ b/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 />
     </>
   );
 };
diff --git a/frontend/src/Components/Modal.js b/frontend/src/Components/Modal.js
new file mode 100644
index 0000000..8d14af1
--- /dev/null
+++ b/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;
diff --git a/frontend/src/slices/channelSlice.js b/frontend/src/slices/channelSlice.js
index d0dbd1b..5095eea 100644
--- a/frontend/src/slices/channelSlice.js
+++ b/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;
diff --git a/frontend/src/slices/modalSlice.js b/frontend/src/slices/modalSlice.js
new file mode 100644
index 0000000..5bf6eda
--- /dev/null
+++ b/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;
diff --git a/frontend/src/store/store.js b/frontend/src/store/store.js
index cc736e8..5683841 100644
--- a/frontend/src/store/store.js
+++ b/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,
   },
 });