add toast

frontend/src/App.jsx

@@ -1,5 +1,6 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
+import 'react-toastify/dist/ReactToastify.css';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import  MainNavbar from './components/Navbar.jsx';
 import PageNotFound from './pages/PageNotFound.jsx';
 import MainPage from './pages/MainPage.jsx';

frontend/src/components/AddModal.jsx

@@ -3,6 +3,7 @@ import { useFormik } from 'formik';
 import { Modal, FormGroup, FormControl, Button, Form } from 'react-bootstrap';
 import { useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
 import { channelSchema } from '../utils/validate.js';
 import { useAddChannelMutation, useGetChannelsQuery } from '../api/chatApi';
 import { selectActiveTab } from '../slices/activeChannelSlice.js';
@@ -27,6 +28,9 @@ const AddChannel = ({ onHide }) => {
       try {
         const response = await addChannel({name: values.name});
         dispatch(selectActiveTab(response.data));
+        toast.success(t('channels.create'), {
+          position: 'top-right',
+        });
         onHide();
       } catch (error) {
         console.log(error);

frontend/src/components/MessageForm.jsx

@@ -1,6 +1,6 @@
 import { Button, Form } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
 import { useFormik } from 'formik';
 
 const MessageForm = ({ activeChannelId, username, addMessage }) => {
@@ -23,10 +23,6 @@ const MessageForm = ({ activeChannelId, username, addMessage }) => {
     },
   });
 
-  // useEffect(() => {
-  //   formControlEl.current.focus();
-  // }, []);
-
   return (
     <div className="mt-auto px-5 py-3">
       <Form  className="py-1 border rounded-2" onSubmit={formik.handleSubmit} noValidate>
@@ -52,7 +48,6 @@ const MessageForm = ({ activeChannelId, username, addMessage }) => {
               </svg>
               <span className="visually-hidden">{t('formMesseges.button')}</span>  
             </Button>
-
         </Form.Group>
       </Form>
     </div>

frontend/src/components/RemoveModel.jsx

@@ -2,6 +2,7 @@ import { Modal, Button } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import { useRemoveChannelMutation } from '../api/chatApi';
 import { useSelector, useDispatch } from 'react-redux';
+import { toast } from 'react-toastify';
 import { selectActiveTab, defaultChannel } from '../slices/activeChannelSlice.js';
 
 const RemoveChannel = ({ onHide }) => {
@@ -14,6 +15,9 @@ const RemoveChannel = ({ onHide }) => {
     try {
       await removeChannel(id);
       dispatch(selectActiveTab(defaultChannel));
+      toast.success(t('channels.delete'), {
+        position: 'top-right',
+      });
       onHide();
     } catch (err) {
       console.log(err);

frontend/src/components/RenameModal.jsx

@@ -3,6 +3,7 @@ import { Modal, FormGroup, FormControl, Button, Form } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import { useFormik } from 'formik';
 import { useSelector } from 'react-redux';
+import { toast } from 'react-toastify';
 import { useRenameChannelMutation, useGetChannelsQuery } from '../api/chatApi';
 import { channelSchema } from '../utils/validate.js';
 
@@ -26,6 +27,9 @@ const RenameChannel = ({ onHide }) => {
     onSubmit: async (values) => {
       try {
         await renameChannel({name: values.name, id: channelId});
+        toast.success(t('channels.rename'), {
+          position: 'top-right',
+        });
         onHide();
       } catch (error) {
         console.log(error);

frontend/src/init.jsx

@@ -1,5 +1,5 @@
 import i18next from 'i18next';
-import { I18nextProvider } from 'react-i18next';
+import { ToastContainer } from 'react-toastify';
 import { combineReducers, configureStore } from '@reduxjs/toolkit';
 import { chatApi } from './api/chatApi.js';
 import activeChannelReducer from './slices/activeChannelSlice.js';
@@ -62,6 +62,7 @@ const init = async () => {
   return (
       <Provider store={store}>
         <App />
+        <ToastContainer />
       </Provider>
   );
 };

frontend/src/locales/ru.js

@@ -20,6 +20,9 @@ export default {
         setupChannel: 'Управление каналом',
         dropdownButtonRemove: 'Удалить',
         dropdownButtonRename: 'Переименовать',
+        create: 'Канал создан',
+        rename: 'Канал переименован',
+        delete: 'Канал удалён',
       },
       modal: {
         name: 'Имя канала',