Added a window for adding a new channel.

.gitattributes

@@ -0,0 +1,2 @@
+* text=auto
+* text eol=lf

frontend/src/Components/Channels.js

@@ -1,16 +1,22 @@
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { PlusSquare } from 'react-bootstrap-icons';
 import ChannelBtn from './ChannelBtn';
+import { openModal } from '../slices/modalSlice';
 
 const Channels = () => {
   const channelsInfo = useSelector((state) => state.channelsInfo);
+  const dispatch = useDispatch();
   const { channels } = channelsInfo;
 
+  const handleAddChannel = () => {
+    dispatch(openModal({ type: 'addChannel' }));
+  };
+
   return (
     <div className="col-4 col-md-2 border-end px-0 bg-light flex-column h-100 d-flex">
       <div className="d-flex mt-1 justify-content-between mb-2 ps-4 pe-2 p-4">
         <b>Каналы</b>
-        <button className="p-0 text-primary btn btn-group-vertical" type="button">
+        <button onClick={handleAddChannel} className="p-0 text-primary btn btn-group-vertical" type="button">
           <PlusSquare width="20" height="20" />
           <span className="visually-hidden">+</span>
         </button>

frontend/src/Components/Layout.js

@@ -1,13 +1,15 @@
 import {
   Link, Outlet, useLocation, Navigate,
 } from 'react-router-dom';
+import { useSelector } from 'react-redux';
 import getRoutes from '../routes';
 import useAuth from '../hook/useAuth';
-import Modal from './Modal';
+import getModal from './Modals/index';
 
 const Layout = () => {
   const location = useLocation();
   const { userToken } = useAuth();
+  const { type } = useSelector(((state) => state.modal));
   if (location.pathname === getRoutes.main() && !userToken) {
     return <Navigate to="/login" state={{ from: location }} />;
   }
@@ -19,7 +21,7 @@ const Layout = () => {
         </div>
       </nav>
       <Outlet />
-      <Modal />
+      {getModal(type)}
     </>
   );
 };

frontend/src/Components/LoginForm.js

@@ -26,7 +26,6 @@ const LoginForm = () => {
       try {
         setAuthFailed(false);
         const response = (await axios.post('/api/v1/login', values));
-        console.log(response);
         const { data } = response;
         signIn(data, () => navigate(fromPage, { replace: true }));
       } catch (err) {

frontend/src/Components/Modals/AddChannel.js

@@ -0,0 +1,63 @@
+import { Modal, Form, Button } from 'react-bootstrap';
+import { useDispatch, useSelector } from 'react-redux';
+import { useFormik } from 'formik';
+import {
+  useContext, useEffect, useRef, useState,
+} from 'react';
+import cn from 'classnames';
+import { modalClose } from '../../slices/modalSlice';
+import { ApiContext } from '../../hoc/ApiProvider';
+
+const ModalAddChannel = () => {
+  const { isOpened } = useSelector((state) => state.modal);
+  const { sendNewChannel } = useContext(ApiContext);
+  const dispatch = useDispatch();
+  const inputRef = useRef();
+  const [inputInvalid] = useState(false);
+  // setInputInvalid
+  const handlerСlosure = () => dispatch(modalClose());
+
+  const formik = useFormik({
+    initialValues: {
+      name: '',
+    },
+    onSubmit: async (values) => {
+      sendNewChannel(values.name);
+    },
+  });
+
+  useEffect(() => {
+    inputRef.current.select();
+  }, []);
+
+  return (
+    <Modal dialogClassName="modal-dialog-centered" show={isOpened} onHide={handlerСlosure}>
+      <Modal.Header closeButton>
+        <Modal.Title>Добавить канал</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <Form onSubmit={formik.handleSubmit}>
+          <Form.Group controlId="name">
+            <Form.Control
+              ref={inputRef}
+              className={cn({
+                'mb-2': true,
+                'is-invalid': inputInvalid,
+              })}
+              name="name"
+              value={formik.values.name}
+              onChange={formik.handleChange}
+            />
+            <Form.Label className="visually-hidden">Имя канала</Form.Label>
+            <div className="d-flex justify-content-end">
+              <Button className="me-2" variant="secondary">Отменить</Button>
+              <Button variant="primary" type="submit">Отправить</Button>
+            </div>
+          </Form.Group>
+        </Form>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+export default ModalAddChannel;

frontend/src/Components/Modals/index.js

@@ -0,0 +1,11 @@
+import AddChannel from './AddChannel.js';
+// import RemoveChannel from './RemoveChannel.jsx';
+// import RenameChannel from './RenameChannel.jsx';
+
+const modals = {
+  addChannel: <AddChannel />,
+  // removeChannel: RemoveChannel,
+  // renameChannel: RenameChannel,
+};
+
+export default (modalType) => modals[modalType];

frontend/src/hoc/ApiProvider.js

@@ -25,9 +25,16 @@ const ApiProvider = ({ children }) => {
     });
   };
 
+  const sendNewChannel = (nameNewChannel) => {
+    socket.timeout(msTimeout).emit('newChannel', { nameNewChannel }, (err, response) => {
+      console.log(err, response);
+    });
+  };
+
   const value = useMemo(() => ({
     sendMessage,
     takeMessage,
+    sendNewChannel,
   }), []);
 
   return (<ApiContext.Provider value={value}>{children}</ApiContext.Provider>);

frontend/src/slices/modalSlice.js

@@ -13,19 +13,20 @@ export const modalSlice = createSlice({
   initialState,
   reducers: {
     modalClose: (state) => {
-      state.isOpened = null;
+      state.isOpened = false;
       state.extra = null;
       state.type = null;
     },
     openModal: (state, { payload }) => {
       const { type, extra } = payload;
+      console.log(type);
       state.type = type;
       state.extra = extra ?? null;
       state.isOpened = true;
     },
   },
 });
 
-export const { modalClose } = modalSlice.actions;
+export const { modalClose, openModal } = modalSlice.actions;
 
 export default modalSlice.reducer;