add channelButton

Tatyana-js · Jan 23, 2025 · 32db2c9 · 32db2c9
1 parent b1cd040
commit 32db2c9
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 27 deletions.
diff --git a/frontend/src/components/ChannelAddButtom.jsx.jsx b/frontend/src/components/ChannelAddButtom.jsx.jsx
@@ -1,17 +1,6 @@
 import { Button } from 'react-bootstrap';
-import { useDispatch, useSelector } from 'react-redux';
-import { openModal, closeModal } from '../slices/modalsSlice';
-import Component from './Modal';
 
-const ButtonPlus = () => {
-  const dispatch = useDispatch();
-  const modals = useSelector((state) => state.modals);
-  console.log(modals)
-  const hideModal = () =>  dispatch(closeModal());
-
-  const showModal = () => {
-    dispatch(openModal({ type: 'addChannel'}));
-  };
+const ButtonPlus = ({ showModal }) => {
 
   return (
     <>
@@ -29,7 +18,6 @@ const ButtonPlus = () => {
         </svg>
         <span className="visually-hidden">+</span>
       </Button>
-      {modals.type === 'addChannel' && (<Component onHide={hideModal} show={showModal}/>)} 
     </>
 
 

diff --git a/frontend/src/components/Modal.jsx b/frontend/src/components/Modal.jsx
@@ -25,16 +25,14 @@ const Component = ({ onHide, show }) => {
   }, []);
 
 return (
-    <Modal.Dialog  show={show} dialogClassName="modal-dialog-centered">
-      <Modal.Header>
+    <Modal.Dialog  show dialogClassName="modal-dialog-centered">
+      <Modal.Header closeButton onHide={onHide}>
         <Modal.Title className="h4">Add</Modal.Title>
-        <Button type="button" className="btn-close" aria-label="Close" onClick={onHide}></Button>
       </Modal.Header>
         <Modal.Body>
           <Form onSubmit={formik.handleSubmit}>
             <FormGroup>
             <FormControl
-              id="taskName"
               data-testid="input-body" 
               name="taskName" 
               required 

diff --git a/frontend/src/components/Сhannels.jsx b/frontend/src/components/Сhannels.jsx
@@ -3,12 +3,22 @@ import { useGetChannelsQuery } from '../api/chatApi.js';
 import { useRef } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectActiveTab, activeChannelSelector } from '../slices/activeChannelSlice.js';
+import { openModal, closeModal } from '../slices/modalsSlice';
+import Component from './Modal';
 
 const Channels = () => {
-  const { data: channels = [], refetch } = useGetChannelsQuery();
   const dispatch = useDispatch();
   const channelsRef = useRef(null);
+
+  const { data: channels = [], refetch } = useGetChannelsQuery();
   const activeChannel = useSelector(activeChannelSelector);
+    const modals = useSelector((state) => state.modals);
+
+    const hideModal = () =>  dispatch(closeModal());
+
+    // const showModal = () => {
+    //   dispatch(openModal({ type: 'addChannel'}));
+    // };
 
 return (
   <Nav 
@@ -28,6 +38,7 @@ return (
         >
           <span className="me-1"># </span>
            {channel.name}
+           {modals.type === 'addChannel' && (<Component onHide={hideModal}/>)} 
         </Button>
       </Nav.Item>
       );

diff --git a/frontend/src/init.jsx b/frontend/src/init.jsx
@@ -1,4 +1,5 @@
 import i18next from 'i18next';
+import { I18nextProvider } from 'react-i18next';
 import { combineReducers, configureStore } from '@reduxjs/toolkit';
 import { chatApi } from './api/chatApi.js';
 import activeChannelReducer from './slices/activeChannelSlice.js';
@@ -10,7 +11,6 @@ import App from './App.jsx';
 import resources from './locales/index.js';
 
 const init = async () => {
-
   const i18n = i18next.createInstance();
 
   await i18n
@@ -40,19 +40,19 @@ const init = async () => {
   socket.on('newMessage', (payload) => {
     store.dispatch(chatApi.util.updateQueryData('getMessages', undefined, (draft) => {
       draft.push({ payload });
-      console.log(payload); 
       }));
     });
-
-  // messages.push(payload);
 
   // socket.on('renameMessage', (payload) => {
   // })
 
   return (
-    <Provider store={store}>
-      <App />
-    </Provider>
+    <I18nextProvider i18n={i18n}>
+      <Provider store={store}>
+        <App />
+      </Provider>
+    </I18nextProvider>
+
   );
 };
 

diff --git a/frontend/src/pages/MainPage.jsx b/frontend/src/pages/MainPage.jsx
@@ -1,21 +1,28 @@
-import { Container, Row, Col, Spinner, Button } from 'react-bootstrap';
+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">
        <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 />
+            <ButtonPlus showModal={showModal} />
           </div>
           {isChannelsLoading && (      
             <Spinner animation="border" role="status">