From 0c6dd082da6face9598b1383afadcf00c355d5de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A2=D0=B0=D1=82=D1=8C=D1=8F=D0=BD=D0=B0=20=D0=90=D0=BD?=
 =?UTF-8?q?=D0=B4=D1=80=D0=B5=D0=B5=D0=B2=D0=B0?= <tan-andreeva@mail.ru>
Date: Mon, 20 Jan 2025 00:36:58 +0400
Subject: [PATCH]  add socket

---
 .DS_Store                                     | Bin 0 -> 6148 bytes
 frontend/src/components/MessageField.jsx      |   2 +-
 frontend/src/components/MessageForm.jsx       |   2 +-
 "frontend/src/components/\320\241hannels.jsx" |  28 ++------------
 frontend/src/init.jsx                         |  36 ++++++++++++++----
 frontend/src/locales/ru.js                    |   2 +-
 frontend/src/pages/MainPage.jsx               |  11 +++++-
 .../{store => slices}/activeChannelSlice.js   |   0
 frontend/src/store/index.js                   |  16 --------
 9 files changed, 45 insertions(+), 52 deletions(-)
 create mode 100644 .DS_Store
 rename frontend/src/{store => slices}/activeChannelSlice.js (100%)
 delete mode 100644 frontend/src/store/index.js

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..58a14305566f47c07656fa684e5351deea894d77
GIT binary patch
literal 6148
zcmeHKO-jQ+6#k|SG**#r1ee)}3qj2dVu>qp<pC@;+6t{H+HNIKUFi{2dIVR37w`~*
z2k-=LeQ#!}6Vnz~Qsh0D_s!3HGhe=tnG66`A0#1A1K?9(^s3}07>{!)SjqNqvf?>9
zt?=L|?e+?h(jf|n0`sVV{_wGh7EaO6eZLFqPej-ok9E^HZg$cp_4yy8VK{nt*~yP5
zGsk;vXKz@0WGyP=xzWY|&D`oJzZD}~4*Qo^*SAB>;m17P^qa}_s2m>z%*V$G&XM8_
zeH@cdTt?NsmAgqXE~kyKv}JWE%;mD073cC=t~8j}5^+h95T`?Qb!~tSwJuzKrRVMY
zS+Oq9n^%l^PMzE3`<r-|xA(5!FLM{0Uj^vQX7d*fiWdb$0a4&f0p1@1DvXiE%%I*n
z$muHpp-0`?sLsC>oD*1#EM^92giM)KLX)cO6+@YH>JMyOWHB>n(xL3-L)n#;y`d<*
zI?W&GaHz<jcu_zU$SY7b%^IKoyVLLg`6OwH0;0gbQb2j}L0qRtvS(}I;rOf#s5Gds
paa?9lr;xM9v99n@yh=qIjRjmGj4WmbsfSE{1hfp|M1en5;1hC%mc9T0

literal 0
HcmV?d00001

diff --git a/frontend/src/components/MessageField.jsx b/frontend/src/components/MessageField.jsx
index bb4f3ec..c92a098 100644
--- a/frontend/src/components/MessageField.jsx
+++ b/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';
diff --git a/frontend/src/components/MessageForm.jsx b/frontend/src/components/MessageForm.jsx
index 8e4b7b2..e56d0d1 100644
--- a/frontend/src/components/MessageForm.jsx
+++ b/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();
diff --git "a/frontend/src/components/\320\241hannels.jsx" "b/frontend/src/components/\320\241hannels.jsx"
index 487fe87..6ea7701 100644
--- "a/frontend/src/components/\320\241hannels.jsx"
+++ "b/frontend/src/components/\320\241hannels.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">
diff --git a/frontend/src/init.jsx b/frontend/src/init.jsx
index ba25164..58927a3 100644
--- a/frontend/src/init.jsx
+++ b/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}>
diff --git a/frontend/src/locales/ru.js b/frontend/src/locales/ru.js
index d4e1bb6..7eb0412 100644
--- a/frontend/src/locales/ru.js
+++ b/frontend/src/locales/ru.js
@@ -22,7 +22,7 @@ export default {
         messages_few: '{{count}} сообщения',
         messages_many: '{{count}} сообщений',
       },
-      loading: 'Loading...',
+      isChannelsLoading: 'Loading...',
       formMesseges: {
         placeholder: 'Введите сообщение...',
         button: 'Отправить',
diff --git a/frontend/src/pages/MainPage.jsx b/frontend/src/pages/MainPage.jsx
index c1a435a..53ddc5c 100644
--- a/frontend/src/pages/MainPage.jsx
+++ b/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">
diff --git a/frontend/src/store/activeChannelSlice.js b/frontend/src/slices/activeChannelSlice.js
similarity index 100%
rename from frontend/src/store/activeChannelSlice.js
rename to frontend/src/slices/activeChannelSlice.js
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
deleted file mode 100644
index fcc90cd..0000000
--- a/frontend/src/store/index.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { combineReducers, configureStore } from '@reduxjs/toolkit';
-import { chatApi } from '../api/chatApi.js';
-import activeChannelReducer from './activeChannelSlice.js';
-
-const rootReducer = combineReducers({
-  [chatApi.reducerPath]: chatApi.reducer,
-  activeChannel: activeChannelReducer,
-});
-
-const store = configureStore ({
-    reducer: rootReducer,
-    middleware: (getDefaultMiddleware) =>
-      getDefaultMiddleware().concat(chatApi.middleware),
-  });
-
-export default store;
\ No newline at end of file