add channelsApi

frontend/src/api/channelsApi.js

@@ -0,0 +1,25 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+
+export const channelsApi = createApi({
+  reducerPath: 'channels',
+  baseQuery: fetchBaseQuery({ 
+    baseUrl: '/api/v1',
+    prepareHeaders: (headers) => {
+      const token = localStorage.getItem('token');
+      if (token) {
+        headers.set('Authorization', `Bearer ${token}`);
+      }
+      return headers;
+    }
+  }),
+  endpoints: (builder) => ({
+    getChannels: builder.query({
+      query: () => 'channels',
+    }),
+  }),
+});
+
+export const {
+  useGetChannelsQuery,
+} = channelsApi;

frontend/src/components/Сhannels.jsx

@@ -1,42 +1,44 @@
-import { Nav } from 'react-bootstrap';
-import axios from 'axios';
-import { useEffect, useState } from 'react';
-import router from '../utils/routes.js';
-
-const getAuthHeader = () => {
-  const token = localStorage.getItem('token');
-  if (token) {
-    return { Authorization: `Bearer ${token}`};
-  }
-  return {};
-};
+import { Nav, Button } from 'react-bootstrap';
+import { useGetChannelsQuery } from '../api/channelsApi.js';
+import { useRef, useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { selectActiveTab, activeChannelSelector } from '../store/activeChannelSlice.js';
 
 const Channels = () => {
-  const [channels, setChannels] = useState([]);
+  const { data, error, isLoading, refetch } = useGetChannelsQuery();
+  const dispatch = useDispatch();
+  const channels = data;
+  const channelsRef = useRef(null);
+  const activeChannel = useSelector(activeChannelSelector);
   useEffect(() => {
-  const fetchContent = async () => {
-    const { data } = await axios.get(router.channelsPath(), { headers: getAuthHeader() });
-    console.log(data);
-    setChannels(data);
-  };
 
-  fetchContent();
-}, []);
+  }, []);
+  console.log(channels);
+console.log(activeChannel);
 
 return (
-  <Nav as="ul" id="channels-box" className="flex-column nav-pills nav-fill px-2 mb-3 overflow-auto h-100 d-block">
-    <li className="nav-item w-100">
-      <button type="button" className="w-100 rounded-0 text-start btn btn-secondary">
-        <span className="me-1"># </span>
-          general
-      </button>
-    </li>
-    <li className="nav-item w-100">
-      <button type="button" className="w-100 rounded-0 text-start btn">
-        <span className="me-1"># </span>
-          random
-        </button>
-    </li>
+  <Nav 
+    as="ul" 
+    id="channels-box" 
+    className="flex-column nav-pills nav-fill px-2 mb-3 overflow-auto h-100 d-block"
+    ref={channelsRef}
+  >
+    {channels?.map((channel) => {
+     return (
+      <Nav.Item as="li" key={channel.id} className="w-100">
+        <Button  
+          type="button" 
+          className="w-100 rounded-0 text-start"
+          variant={channel.id === activeChannel ? "secondary" : ""}
+          onClick={() => dispatch(selectActiveTab({ id: channel.id }))}
+        >
+          <span className="me-1"># </span>
+           {channel.name}
+        </Button>
+      </Nav.Item>
+      );
+    }
+    )}
   </Nav>
   );
 };

frontend/src/context/AuthProvider.jsx

@@ -6,6 +6,8 @@ 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) => {
     localStorage.setItem('token', token);
@@ -18,6 +20,7 @@ const AuthProvider = ({ children }) => {
     localStorage.removeItem('username');
     setLoggedIn(false);
   };
+
   useEffect(() => {
     const token = localStorage.getItem('token');
     if (token) {
@@ -26,7 +29,7 @@ const AuthProvider = ({ children }) => {
   }, []);
 
   return (
-    <AuthContext.Provider value={{ loggedIn, logIn, logOut }}>
+    <AuthContext.Provider value={{ loggedIn, logIn, logOut, token }}>
       {children}
     </AuthContext.Provider>
   );

frontend/src/pages/LoginPage.jsx

@@ -31,10 +31,7 @@ const LoginPage = () => {
       setAuthFailed(false);
         try {
           const res = await axios.post(router.loginPath(), values);
-          localStorage.setItem('token', res.data.token);
-          localStorage.setItem('username', res.data.username);
           auth.logIn(res.data.token, res.data.username);
-          console.log(auth.loggedIn);
           navigate(router.main());
         } catch (err) {
           formik.setSubmitting(false);

frontend/src/store/activeChannelSlice.js

@@ -0,0 +1,19 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+  currentChannel: 1,
+};
+
+const activeChannelSlice = createSlice({
+  name: 'activeChannel',
+  initialState,
+  reducers: {
+    selectActiveTab: (state, { payload }) => {
+      state.activeChannel = payload;
+    },
+  },
+});
+
+export const activeChannelSelector = (state) => state.activeChannel.currentChannel;
+export const { selectActiveTab } = activeChannelSlice.actions;
+export default activeChannelSlice.reducer;

frontend/src/store/index.js

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

frontend/vite.config.js

@@ -9,7 +9,7 @@ export default defineConfig({
       // Проксируем запросы к API
       '/api': {
         target: 'http://127.0.0.1:5001',
-        // changeOrigin: true,
+        changeOrigin: true,
       },
       // Проксируем WebSocket соединения
       '/socket.io': {