add removeSocket

Tatyana-js · Jan 27, 2025 · 85a8f06 · 85a8f06
1 parent 92c4ba8
commit 85a8f06
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 6 deletions.
diff --git a/frontend/src/components/AddModal.jsx b/frontend/src/components/AddModal.jsx
@@ -17,12 +17,12 @@ const AddChannel = ({ onHide }) => {
     initialValues: {
       channelName: '',
     },
-    onSubmit: async (values, ) => {
+    onSubmit: async (values) => {
       try {
         const response = await addChannel({name: values.channelName});
         dispatch(selectActiveTab(response.data));
         onHide();
-        console.log(modals)
+        console.log(modals);
       } catch (error) {
         console.log(error);
       }
@@ -55,7 +55,7 @@ return (
               <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="button" className='me-2' variant="secondary" onClick={onHide}>{t('modal.cancel')}</Button> 
                 <Button type="submit" variant="primary">{t('modal.send')}</Button> 
               </div>
             </FormGroup>

diff --git a/frontend/src/components/RemoveModel.jsx b/frontend/src/components/RemoveModel.jsx
@@ -1,8 +1,22 @@
 import { Modal, Button } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
+import { useRemoveChannelMutation } from '../api/chatApi';
+import { useSelector } from 'react-redux';
 
 const RemoveChannel = ({ onHide }) => {
   const { t } = useTranslation();
+  const [ removeChannel ] = useRemoveChannelMutation();
+  const channel = useSelector((state) => state.modals.channel);
+  console.log(channel)
+
+  const handleRemove = async (id) => {
+    try {
+      await removeChannel(id);
+      onHide();
+    } catch (err) {
+      console.log(err);
+    }
+  };
 
 return (
   <>
@@ -15,8 +29,8 @@ return (
         <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> 
+                <Button type="button" className='me-2' variant="secondary" onClick={onHide}>{t('modal.cancel')}</Button> 
+                <Button type="submit" variant="danger" onClick={() => handleRemove(channel.id)}>{t('modal.removeButton')}</Button> 
               </div>
         </Modal.Body>
     </Modal.Dialog>

diff --git a/frontend/src/components/Сhannels.jsx b/frontend/src/components/Сhannels.jsx
@@ -59,7 +59,7 @@ return (
                   <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" onClick={() => showModal('removing', activeChannel)}>{t('channels.dropdownButtonRemove')}</Dropdown.Item>
                   <Dropdown.Item role="button">{t('channels.dropdownButtonRename')}</Dropdown.Item>
                 </Dropdown.Menu>
             </Dropdown>)}

diff --git a/frontend/src/init.jsx b/frontend/src/init.jsx
@@ -47,6 +47,11 @@ const init = async () => {
         draft.push({ payload });
         }));
       });
+    socket.on('removeChannel', ({ payload } ) => {
+      store.dispatch(chatApi.util.updateQueryData('getChannels', undefined, (draft) => {
+        draft.filter((channel) => channel.id !== payload.id);
+        }));
+      });
   // socket.on('renameMessage', (payload) => {
   // })