From 92c4ba8bd9436bcbe0a818b7718387b64be21208 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A2=D0=B0=D1=82=D1=8C=D1=8F=D0=BD=D0=B0=20=D0=90=D0=BD?=
 =?UTF-8?q?=D0=B4=D1=80=D0=B5=D0=B5=D0=B2=D0=B0?= <tan-andreeva@mail.ru>
Date: Sun, 26 Jan 2025 15:14:01 +0400
Subject: [PATCH] add removeModal

---
 frontend/eslint.config.js                     |  3 +-
 frontend/src/components/AddModal.jsx          | 71 ++++++++++++++
 .../src/components/ChannelAddButtom.jsx.jsx   | 11 +--
 frontend/src/components/MessageForm.jsx       |  1 -
 frontend/src/components/Modal.jsx             | 56 -----------
 frontend/src/components/RemoveModel.jsx       | 29 ++++++
 "frontend/src/components/\320\241hannels.jsx" | 95 ++++++++++++-------
 frontend/src/context/AuthProvider.jsx         |  2 -
 frontend/src/init.jsx                         |  6 +-
 frontend/src/locales/ru.js                    | 13 +++
 frontend/src/pages/MainPage.jsx               | 29 ++----
 frontend/src/slices/modalsSlice.js            |  1 -
 12 files changed, 191 insertions(+), 126 deletions(-)
 create mode 100644 frontend/src/components/AddModal.jsx
 delete mode 100644 frontend/src/components/Modal.jsx
 create mode 100644 frontend/src/components/RemoveModel.jsx

diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
index 4ed310b..73fb307 100644
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@@ -15,6 +15,7 @@ export default [
   pluginReact.configs.flat.recommended,
   {rules: 
     {semi: "error",
-    'react/react-in-jsx-scope': 'off'},
+    'react/react-in-jsx-scope': 'off',
+    'react/prop-types': 'off'},
   },
 ];
diff --git a/frontend/src/components/AddModal.jsx b/frontend/src/components/AddModal.jsx
new file mode 100644
index 0000000..7ecaa08
--- /dev/null
+++ b/frontend/src/components/AddModal.jsx
@@ -0,0 +1,71 @@
+import { useEffect, useRef } from 'react';
+import { useFormik } from 'formik';
+import { Modal, FormGroup, FormControl, Button, Form } from 'react-bootstrap';
+import { useSelector, useDispatch } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { useAddChannelMutation } from '../api/chatApi';
+import { selectActiveTab } from '../slices/activeChannelSlice.js';
+
+const AddChannel = ({ onHide }) => {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+  const [ addChannel ] = useAddChannelMutation();
+  const modals = useSelector((state) => state.modals);
+  const formControlEl = useRef(null);
+  
+  const formik = useFormik({
+    initialValues: {
+      channelName: '',
+    },
+    onSubmit: async (values, ) => {
+      try {
+        const response = await addChannel({name: values.channelName});
+        dispatch(selectActiveTab(response.data));
+        onHide();
+        console.log(modals)
+      } catch (error) {
+        console.log(error);
+      }
+      formik.resetForm();
+    }
+  });
+
+  useEffect(() => {
+    formControlEl.current.focus();
+  }, []);
+
+return (
+  <>
+  <div className='fade modal-backdrop show'></div>
+  <div role="dialog" aria-modal="true" className="fade modal show" tabIndex="-1"style={{ display: 'block'}}>
+    <Modal.Dialog  className="modal-dialog-centered">
+      <Modal.Header closeButton onHide={onHide}>
+        <Modal.Title className="h4">{t('modal.addButton')}</Modal.Title>
+      </Modal.Header>
+        <Modal.Body>
+          <Form onSubmit={formik.handleSubmit}>
+            <FormGroup>
+              <FormControl
+                name="channelName"
+                className='mb-2' 
+                value={formik.values.channelName}
+                onChange={formik.handleChange}
+                ref={formControlEl}
+              />
+              <Form.Label className='visually-hidden' htmlFor='channelName'>{t('modal.name')}</Form.Label>
+              <Form.Control.Feedback type="invalid"></Form.Control.Feedback>
+              <div className='d-flex justify-content-end'>
+                <Button type="button" className='me-2' variant="secondary" onHide={onHide}>{t('modal.cancel')}</Button> 
+                <Button type="submit" variant="primary">{t('modal.send')}</Button> 
+              </div>
+            </FormGroup>
+          </Form>
+        </Modal.Body>
+    </Modal.Dialog>
+  </div>
+  </>
+
+  );
+};
+
+export default AddChannel;
\ No newline at end of file
diff --git a/frontend/src/components/ChannelAddButtom.jsx.jsx b/frontend/src/components/ChannelAddButtom.jsx.jsx
index e3ff9ee..a2bb900 100644
--- a/frontend/src/components/ChannelAddButtom.jsx.jsx
+++ b/frontend/src/components/ChannelAddButtom.jsx.jsx
@@ -1,14 +1,11 @@
 import { Button } from 'react-bootstrap';
 
-const ButtonPlus = ({ showModal }) => {
-
-  return (
-    <>
+const ButtonPlus = ({ showModal, channel }) => (
       <Button 
         type="button" 
         className="p-0 text-primary btn btn-group-vertical"
         variant="link"
-        onClick={showModal}
+        onClick={() => showModal('adding', channel)}
       >
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20" fill="currentColor">
           <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z">
@@ -18,10 +15,6 @@ const ButtonPlus = ({ showModal }) => {
         </svg>
         <span className="visually-hidden">+</span>
       </Button>
-    </>
-
-
   );            
-};
 
 export default ButtonPlus;
\ No newline at end of file
diff --git a/frontend/src/components/MessageForm.jsx b/frontend/src/components/MessageForm.jsx
index e56d0d1..7d24243 100644
--- a/frontend/src/components/MessageForm.jsx
+++ b/frontend/src/components/MessageForm.jsx
@@ -13,7 +13,6 @@ const MessageForm = ({ activeChannelId, username, addMessage }) => {
     onSubmit: async (values, { setFieldValue }) => {
       try {
         const newMessege = { body: values.body, channelId: activeChannelId, username };
-        // console.log(newMessege)
         await addMessage(newMessege);
         setFieldValue('body', newMessege.body);
         formik.resetForm();
diff --git a/frontend/src/components/Modal.jsx b/frontend/src/components/Modal.jsx
deleted file mode 100644
index 2fd6c29..0000000
--- a/frontend/src/components/Modal.jsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { useFormik } from 'formik';
-import { Modal, FormGroup, FormControl, Button, Form } from 'react-bootstrap';
-import { useSelector } from 'react-redux';
-
-const Component = ({ onHide, show }) => {
-  const modals = useSelector((state) => state.modals);
-  const formControlEl = useRef(null);
-  const formik = useFormik({
-    initialValues: {
-      taskName: '',
-    },
-    onSubmit: (values) => {
-      modals.type = 'addChannel';
-      modals.channel = values.taskName;
-      console.log(modals);
-      formik.resetForm();
-    }
-  });
-
-  useEffect(() => {
-    if (formControlEl.current) {
-      formControlEl.current.focus();
-    }
-  }, []);
-
-return (
-    <Modal.Dialog  show dialogClassName="modal-dialog-centered">
-      <Modal.Header closeButton onHide={onHide}>
-        <Modal.Title className="h4">Add</Modal.Title>
-      </Modal.Header>
-        <Modal.Body>
-          <Form onSubmit={formik.handleSubmit}>
-            <FormGroup>
-            <FormControl
-              data-testid="input-body" 
-              name="taskName" 
-              required 
-              value={formik.values.taskName}
-              onChange={formik.handleChange}
-              ref={formControlEl}
-            />
-            </FormGroup>
-            <Button
-              as="input"
-              variant="primary" 
-              type="submit" 
-              value="submit" 
-            />
-          </Form>
-        </Modal.Body>
-    </Modal.Dialog>
-  );
-};
-
-export default Component;
\ No newline at end of file
diff --git a/frontend/src/components/RemoveModel.jsx b/frontend/src/components/RemoveModel.jsx
new file mode 100644
index 0000000..3a48fdd
--- /dev/null
+++ b/frontend/src/components/RemoveModel.jsx
@@ -0,0 +1,29 @@
+import { Modal, Button } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+const RemoveChannel = ({ onHide }) => {
+  const { t } = useTranslation();
+
+return (
+  <>
+  <div className='fade modal-backdrop show'></div>
+  <div role="dialog" aria-modal="true" className="fade modal show" tabIndex="-1"style={{ display: 'block'}}>
+    <Modal.Dialog  className="modal-dialog-centered">
+      <Modal.Header closeButton onHide={onHide}>
+        <Modal.Title className="h4">{t('modal.removeChannel')}</Modal.Title>
+      </Modal.Header>
+        <Modal.Body>
+          <p className='lead'>{t('modal.removeText')}</p>
+              <div className='d-flex justify-content-end'>
+                <Button type="button" className='me-2' variant="secondary" onHide={onHide}>{t('modal.cancel')}</Button> 
+                <Button type="submit" variant="danger">{t('modal.removeButton')}</Button> 
+              </div>
+        </Modal.Body>
+    </Modal.Dialog>
+  </div>
+  </>
+
+  );
+};
+
+export default RemoveChannel;
\ No newline at end of file
diff --git "a/frontend/src/components/\320\241hannels.jsx" "b/frontend/src/components/\320\241hannels.jsx"
index 1761bf7..a9f64e3 100644
--- "a/frontend/src/components/\320\241hannels.jsx"
+++ "b/frontend/src/components/\320\241hannels.jsx"
@@ -1,50 +1,75 @@
-import { Nav, Button } from 'react-bootstrap';
+import { Nav, Button, Dropdown } from 'react-bootstrap';
 import { useGetChannelsQuery } from '../api/chatApi.js';
 import { useRef } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
+import { useTranslation } from 'react-i18next';
 import { selectActiveTab, activeChannelSelector } from '../slices/activeChannelSlice.js';
-import { openModal, closeModal } from '../slices/modalsSlice';
-import Component from './Modal';
+import ButtonPlus from './ChannelAddButtom.jsx.jsx';
+import AddChannel from './AddModal.jsx';
+import RemoveChannel from './RemoveModel.jsx';
+import { closeModal, openModal } from '../slices/modalsSlice';
 
 const Channels = () => {
+  const { t } = useTranslation();
   const dispatch = useDispatch();
   const channelsRef = useRef(null);
-
-  const { data: channels = [], refetch } = useGetChannelsQuery();
+  
+  const { data: channels = [] } = useGetChannelsQuery();
   const activeChannel = useSelector(activeChannelSelector);
-    const modals = useSelector((state) => state.modals);
+  const modals = useSelector((state) => state.modals);
 
-    const hideModal = () =>  dispatch(closeModal());
-  
-    // const showModal = () => {
-    //   dispatch(openModal({ type: 'addChannel'}));
-    // };
+  const variant = (channel) => channel.id === activeChannel.id ? "secondary" : "";
+  const hideModal = () =>  dispatch(closeModal());
+  const showModal = (type, channel) => {
+        dispatch(openModal({ type, channel }));
+      };
 
 return (
-  <Nav 
-    as="ul" 
-    id="channels-box" 
-    className="flex-column nav-pills nav-fill px-2 mb-3 overflow-auto h-100 d-block"
-    ref={channelsRef}
-  >
-    {channels.map((channel) => {
-     return (
-      <Nav.Item as="li" key={channel.id} className="w-100">
-        <Button
-          type="button" 
-          className="w-100 rounded-0 text-start"
-          variant={channel.id === activeChannel.id ? "secondary" : ""}
-          onClick={() => dispatch(selectActiveTab(channel))}
-        >
-          <span className="me-1"># </span>
-           {channel.name}
-           {modals.type === 'addChannel' && (<Component onHide={hideModal}/>)} 
-        </Button>
-      </Nav.Item>
-      );
-    }
-    )}
-  </Nav>
+  <>
+    <div className="d-flex mt-1 justify-content-between mb-2 ps-4 pe-2 p-4">
+      <b>{t('channels.title')}</b>
+      <ButtonPlus showModal={showModal} channel={activeChannel}/>
+        {modals.type === 'adding' && (<AddChannel onHide={hideModal} />)}
+    </div>
+    <Nav 
+      as="ul" 
+      id="channels-box" 
+      className="flex-column nav-pills nav-fill px-2 mb-3 overflow-auto h-100 d-block"
+      ref={channelsRef}
+    >
+      {channels.map((channel) => {
+      return (
+          <Nav.Item as="li" key={channel.id} className="w-100">
+            {!channel.removable && (<Button
+              type="button" 
+              className="w-100 rounded-0 text-start"
+              variant={variant(channel)}
+              onClick={() => dispatch(selectActiveTab(channel))}
+            >
+              <span className="me-1"># </span>
+              {channel.name}
+            </Button>)}
+            {channel.removable && (
+              <Dropdown role="group" className='d-flex btn-group'>
+                <Button className='w-100 rounded-0 text-start text-truncate' variant={variant(channel)} onClick={() => dispatch(selectActiveTab(channel))}>
+                  <span className="me-1"># </span>
+                  {channel.name}  
+                </Button>
+                <Dropdown.Toggle className="flex-grow-0 dropdown-toggle-split" variant={variant(channel)}>
+                  <span className="visually-hidden">{t('channels.setupChannel')}</span>
+                </Dropdown.Toggle>
+                <Dropdown.Menu>
+                  <Dropdown.Item role="button"onClick={() => showModal('removing', activeChannel)}>{t('channels.dropdownButtonRemove')}</Dropdown.Item>
+                  <Dropdown.Item role="button">{t('channels.dropdownButtonRename')}</Dropdown.Item>
+                </Dropdown.Menu>
+            </Dropdown>)}
+          </Nav.Item> 
+          );
+        }
+        )}
+        {modals.type === 'removing' && (<RemoveChannel onHide={hideModal} />)} 
+    </Nav>
+  </>
   );
 };
 
diff --git a/frontend/src/context/AuthProvider.jsx b/frontend/src/context/AuthProvider.jsx
index b291d02..160f71f 100644
--- a/frontend/src/context/AuthProvider.jsx
+++ b/frontend/src/context/AuthProvider.jsx
@@ -3,7 +3,6 @@ import  { Navigate } from 'react-router-dom';
 import AuthContext from '../context/index.jsx';
 import useAuth from '../hooks/index.jsx';
 
-// eslint-disable-next-line react/prop-types
 const AuthProvider = ({ children }) => {
   const [loggedIn, setLoggedIn] = useState(!!localStorage.getItem('token'));
 
@@ -36,7 +35,6 @@ const AuthProvider = ({ children }) => {
   );
 };
 
-// eslint-disable-next-line react/prop-types
 export const PrivateRoute = ({ children }) => {
   const { loggedIn } = useAuth();
 
diff --git a/frontend/src/init.jsx b/frontend/src/init.jsx
index ed94266..f6cefb9 100644
--- a/frontend/src/init.jsx
+++ b/frontend/src/init.jsx
@@ -42,7 +42,11 @@ const init = async () => {
       draft.push({ payload });
       }));
     });
-
+    socket.on('newChannel', (payload) => {
+      store.dispatch(chatApi.util.updateQueryData('getChannels', undefined, (draft) => {
+        draft.push({ payload });
+        }));
+      });
   // socket.on('renameMessage', (payload) => {
   // })
 
diff --git a/frontend/src/locales/ru.js b/frontend/src/locales/ru.js
index 7eb0412..0bff69d 100644
--- a/frontend/src/locales/ru.js
+++ b/frontend/src/locales/ru.js
@@ -1,3 +1,4 @@
+import { Dropdown } from "react-bootstrap";
 import Channels from "../components/Сhannels";
 
 export default {
@@ -16,6 +17,18 @@ export default {
       },
       channels: {
         title: 'Каналы',
+        setupChannel: 'Управление каналом',
+        dropdownButtonRemove: 'Удалить',
+        dropdownButtonRename: 'Переименовать',
+      },
+      modal: {
+        name: 'Имя канала',
+        addButton: 'Добавить канал',
+        cancel: 'Отменить',
+        send: 'Отправить',
+        removeChannel: 'Удалить канал',
+        removeText: 'Уверены?',
+        removeButton: 'Удалить',
       },
       countMessages: {
         messages_one: '{{count}} сообщение',
diff --git a/frontend/src/pages/MainPage.jsx b/frontend/src/pages/MainPage.jsx
index 808ed96..a14cb4d 100644
--- a/frontend/src/pages/MainPage.jsx
+++ b/frontend/src/pages/MainPage.jsx
@@ -1,37 +1,26 @@
 import { Container, Row, Col, Spinner } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
-import { useDispatch } from 'react-redux';
 import { useGetChannelsQuery } from '../api/chatApi.js';
 import Channels from '../components/Сhannels.jsx';
-import ButtonPlus from '../components/ChannelAddButtom.jsx.jsx';
 import MessageField from '../components/MessageField.jsx';
-import { openModal } from '../slices/modalsSlice';
-
 
   const MainPage = () => {
     const { t } = useTranslation();
-    const dispatch = useDispatch();
     const { isLoading: isChannelsLoading, error: channelsError } = useGetChannelsQuery();
-    const showModal = () => {
-      dispatch(openModal({ type: 'addChannel'}));
-    };
 
+  
     return (
       <Container className="h-100 my-4 overflow-hidden rounded shadow">
+        {isChannelsLoading && (      
+          <Spinner animation="border" role="status">
+            <span className="visually-hidden">{t('isChannelsLoading')}</span>
+          </Spinner>
+        )}
+        {channelsError && (
+          console.log(error.message)
+        )}
        <Row className="h-100 bg-white flex-md-row">
         <Col sx={4} className="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>{t('channels.title')}</b>
-            <ButtonPlus showModal={showModal} />
-          </div>
-          {isChannelsLoading && (      
-            <Spinner animation="border" role="status">
-              <span className="visually-hidden">{t('isChannelsLoading')}</span>
-            </Spinner>
-          )}
-          {channelsError && (
-            console.log(error.message)
-          )}
           <Channels />
         </Col>
         <Col className="p-0 h-100">
diff --git a/frontend/src/slices/modalsSlice.js b/frontend/src/slices/modalsSlice.js
index 52c3947..11a1681 100644
--- a/frontend/src/slices/modalsSlice.js
+++ b/frontend/src/slices/modalsSlice.js
@@ -20,6 +20,5 @@ const modalsSlice = createSlice({
   },
 });
 
-// export const activeChannelSelector = (state) => state.activeChannel.currentChannel;
 export const { openModal, closeModal } = modalsSlice.actions;
 export default modalsSlice.reducer;
\ No newline at end of file