add chatApi

frontend/src/api/channelsApi.js → frontend/src/api/chatApi.js

@@ -1,8 +1,7 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 
-
-export const channelsApi = createApi({
-  reducerPath: 'channels',
+export const chatApi = createApi({
+  reducerPath: 'chatApi',
   baseQuery: fetchBaseQuery({ 
     baseUrl: '/api/v1',
     prepareHeaders: (headers) => {
@@ -17,9 +16,13 @@ export const channelsApi = createApi({
     getChannels: builder.query({
       query: () => 'channels',
     }),
+    getMessages: builder.query({
+      query: () => 'messages',
+    })
   }),
 });
 
 export const {
   useGetChannelsQuery,
-} = channelsApi;
+  useGetMessagesQuery,
+} = chatApi;

frontend/src/components/MessageField.jsx

@@ -1,16 +1,29 @@
-import { Container, Row, Col, Nav } from 'react-bootstrap';
+import { useSelector, useDispatch } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { activeChannelSelector } from '../store/activeChannelSlice.js';
 import MessageForm from './MessageForm.jsx';
+import { useGetMessagesQuery } from '../api/chatApi.js';
 
 const MessageField = () => {
+    const { t } = useTranslation(); 
+  const { data, error, isLoading, refetch } =  useGetMessagesQuery();
+  const activeChannel = useSelector(activeChannelSelector);
+  const dispatch = useDispatch();
+  const messages = data;
+  const countMessages = messages?.length || 0;
+  console.log(messages)
+
   return (
     <div className="d-flex flex-column h-100">
       <div className="bg-light mb-4 p-3 shadow-sm small">
         <p className="m-0">
-          <b># general</b>
+          <b># {activeChannel.name}</b>
         </p>
-        <span className="text-muted">0 сообщений</span>
+        <span className="text-muted">
+          {t('countMessages.messages', { count: countMessages })}
+        </span>
       </div>
-      <div id="messages-box" className="chat-messages overflow-auto px-5 ">{}</div>
+      <div id="messages-box" className="chat-messages overflow-auto px-5 ">{messages}</div>
       <MessageForm />
     </div>
   );

frontend/src/components/Сhannels.jsx

@@ -1,5 +1,5 @@
 import { Nav, Button } from 'react-bootstrap';
-import { useGetChannelsQuery } from '../api/channelsApi.js';
+import { useGetChannelsQuery } from '../api/chatApi.js';
 import { useRef, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectActiveTab, activeChannelSelector } from '../store/activeChannelSlice.js';
@@ -11,10 +11,14 @@ const Channels = () => {
   const channelsRef = useRef(null);
   const activeChannel = useSelector(activeChannelSelector);
   useEffect(() => {
+    try {
+      if (isLoading) {
 
+      }
+    } catch (err) {
+      console.log(err);
+    }
   }, []);
-  console.log(channels);
-console.log(activeChannel);
 
 return (
   <Nav 
@@ -26,11 +30,11 @@ return (
     {channels?.map((channel) => {
      return (
       <Nav.Item as="li" key={channel.id} className="w-100">
-        <Button  
+        <Button
           type="button" 
           className="w-100 rounded-0 text-start"
-          variant={channel.id === activeChannel ? "secondary" : ""}
-          onClick={() => dispatch(selectActiveTab({ id: channel.id }))}
+          variant={channel.id === activeChannel.id ? "secondary" : ""}
+          onClick={() => dispatch(selectActiveTab(channel))}
         >
           <span className="me-1"># </span>
            {channel.name}

frontend/src/context/AuthProvider.jsx

@@ -6,7 +6,7 @@ import useAuth from '../hooks/index.jsx';
 // eslint-disable-next-line react/prop-types
 const AuthProvider = ({ children }) => {
   const [loggedIn, setLoggedIn] = useState(!!localStorage.getItem('token'));
-  
+
   const token = localStorage.getItem('token');
 
   const logIn = (token, username) => {

frontend/src/locales/ru.js

@@ -16,6 +16,11 @@ export default {
       },
       channels: {
         title: 'Каналы',
+      },
+      countMessages: {
+        messages_one: '{{count}} сообщение',
+        messages_fwe: '{{count}} сообщения',
+        messages_many: '{{count}} сообщений',
       }
       // singUpForm: {
       //   username: ''

frontend/src/store/activeChannelSlice.js

@@ -1,15 +1,22 @@
 import { createSlice } from '@reduxjs/toolkit';
 
+const defaultChannel = {
+  id: '1', 
+  name: 'general', 
+  removable: false,
+};
+
 const initialState = {
-  currentChannel: 1,
+  currentChannel: defaultChannel,
 };
 
 const activeChannelSlice = createSlice({
   name: 'activeChannel',
   initialState,
   reducers: {
     selectActiveTab: (state, { payload }) => {
-      state.activeChannel = payload;
+      state.currentChannel = payload;
+      // console.log(payload);
     },
   },
 });

frontend/src/store/index.js

@@ -1,17 +1,17 @@
 import { combineReducers, configureStore } from '@reduxjs/toolkit';
-import { channelsApi } from '../api/channelsApi.js';
+import { chatApi } from '../api/chatApi.js';
 import activeChannelReducer from './activeChannelSlice.js';
 
 const rootReducer = combineReducers({
-  [channelsApi.reducerPath]: channelsApi.reducer,
+  [chatApi.reducerPath]: chatApi.reducer,
   activeChannel: activeChannelReducer,
   // messages: mesagesReducer,
 });
 
 const store = configureStore ({
     reducer: rootReducer,
     middleware: (getDefaultMiddleware) =>
-      getDefaultMiddleware().concat(channelsApi.middleware),
+      getDefaultMiddleware().concat(chatApi.middleware),
   });
 
 export default store;