add removeModal

Tatyana-js · Jan 26, 2025 · 92c4ba8 · 92c4ba8
1 parent 32db2c9
commit 92c4ba8
Show file tree

Hide file tree

Showing 12 changed files with 191 additions and 126 deletions.
diff --git 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
@@ -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;
diff --git 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;
diff --git 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
diff --git a/frontend/src/components/RemoveModel.jsx 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;
diff --git a/frontend/src/components/Сhannels.jsx b/frontend/src/components/Сhannels.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
@@ -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
@@ -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
@@ -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}} сообщение',