add socket

frontend/src/components/MessageField.jsx

@@ -1,7 +1,7 @@
 import { useRef } from 'react';
 import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import { activeChannelSelector } from '../store/activeChannelSlice.js';
+import { activeChannelSelector } from '../slices/activeChannelSlice.js';
 import MessageForm from './MessageForm.jsx';
 import useAuth from '../hooks/index.jsx';
 import { useGetMessagesQuery, useAddMessageMutation } from '../api/chatApi.js';

frontend/src/components/MessageForm.jsx

@@ -13,7 +13,7 @@ const MessageForm = ({ activeChannelId, username, addMessage }) => {
     onSubmit: async (values, { setFieldValue }) => {
       try {
         const newMessege = { body: values.body, channelId: activeChannelId, username };
-        console.log(newMessege)
+        // console.log(newMessege)
         await addMessage(newMessege);
         setFieldValue('body', newMessege.body);
         formik.resetForm();

frontend/src/components/Сhannels.jsx

@@ -1,29 +1,14 @@
-import { Nav, Button, Spinner } from 'react-bootstrap';
-import { useTranslation } from 'react-i18next';
+import { Nav, Button } from 'react-bootstrap';
 import { useGetChannelsQuery } from '../api/chatApi.js';
-import { useRef, useEffect } from 'react';
+import { useRef } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { selectActiveTab, activeChannelSelector } from '../store/activeChannelSlice.js';
+import { selectActiveTab, activeChannelSelector } from '../slices/activeChannelSlice.js';
 
 const Channels = () => {
-  const { data: channels = [], error, isLoading, refetch } = useGetChannelsQuery();
-  const { t } = useTranslation();
+  const { data: channels = [], refetch } = useGetChannelsQuery();
   const dispatch = useDispatch();
   const channelsRef = useRef(null);
   const activeChannel = useSelector(activeChannelSelector);
-  // useEffect(() => {
-  //   try {
-  //     if (isLoading) {
-  //       return (
-  //         <Spinner animation="border" role="status">
-  //           <span className="visually-hidden">Loading...</span>
-  //         </Spinner>
-  //         );
-  //       }
-  //   } catch (error) {
-  //     console.log(error.messege);
-  //   }
-  // }, []);
 
 return (
   <Nav 
@@ -32,11 +17,6 @@ return (
     className="flex-column nav-pills nav-fill px-2 mb-3 overflow-auto h-100 d-block"
     ref={channelsRef}
   >
-    {isLoading && (
-      <Spinner animation="border" role="status">
-        <span className="visually-hidden">{t('loading')}</span>
-      </Spinner>
-          )}
     {channels.map((channel) => {
      return (
       <Nav.Item as="li" key={channel.id} className="w-100">

frontend/src/init.jsx

@@ -1,13 +1,15 @@
 import i18next from 'i18next';
+import { combineReducers, configureStore } from '@reduxjs/toolkit';
+import { chatApi } from './api/chatApi.js';
+import activeChannelReducer from './slices/activeChannelSlice.js';
 import { io } from 'socket.io-client';
 import { initReactI18next } from 'react-i18next';
 import { Provider } from 'react-redux';
-import store from './store/index.js';
 import App from './App.jsx';
 import resources from './locales/index.js';
-import { useGetMessagesQuery } from './api/chatApi.js';
 
 const init = async () => {
+
   const i18n = i18next.createInstance();
 
   await i18n
@@ -20,12 +22,30 @@ const init = async () => {
       }
     });
 
-const socket = io();
-const { data: messages = []} =  useGetMessagesQuery();
-socket.on('newMessage', (payload) =>  {
-  console.log(payload)
-  messages.push(payload);
-});
+  const rootReducer = combineReducers({
+    [chatApi.reducerPath]: chatApi.reducer,
+    activeChannel: activeChannelReducer,
+  });
+
+  const store = configureStore ({
+    reducer: rootReducer,
+    middleware: (getDefaultMiddleware) =>
+      getDefaultMiddleware().concat(chatApi.middleware),
+  });
+
+  const socket = io();
+
+  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}>

frontend/src/locales/ru.js

@@ -22,7 +22,7 @@ export default {
         messages_few: '{{count}} сообщения',
         messages_many: '{{count}} сообщений',
       },
-      loading: 'Loading...',
+      isChannelsLoading: 'Loading...',
       formMesseges: {
         placeholder: 'Введите сообщение...',
         button: 'Отправить',

frontend/src/pages/MainPage.jsx

@@ -1,5 +1,6 @@
-import { Container, Row, Col } from 'react-bootstrap';
+import { Container, Row, Col, Spinner } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
+import { useGetChannelsQuery } from '../api/chatApi.js';
 import Channels from '../components/Сhannels.jsx';
 import MessageField from '../components/MessageField.jsx';
 
@@ -14,6 +15,7 @@ const ButtonPlus = () => (
 
   const MainPage = () => {
     const { t } = useTranslation();
+    const { isLoading: isChannelsLoading, error: channelsError } = useGetChannelsQuery();
 
     return (
       <Container className="h-100 my-4 overflow-hidden rounded shadow">
@@ -26,6 +28,13 @@ const ButtonPlus = () => (
               <span className="visually-hidden">+</span>
             </button>
           </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">