From 9540f355f54a69e45c46c2bcbf982792dc2bcf11 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: Sun, 5 Jan 2025 20:00:43 +0300
Subject: [PATCH] add channelsApi

---
 frontend/src/api/channelsApi.js               | 25 +++++++
 "frontend/src/components/\320\241hannels.jsx" | 68 ++++++++++---------
 frontend/src/context/AuthProvider.jsx         |  5 +-
 frontend/src/pages/LoginPage.jsx              |  3 -
 frontend/src/store/activeChannelSlice.js      | 19 ++++++
 frontend/src/store/channelsSlice.js           | 17 -----
 frontend/src/store/index.js                   | 23 +++++--
 frontend/vite.config.js                       |  2 +-
 8 files changed, 100 insertions(+), 62 deletions(-)
 create mode 100644 frontend/src/api/channelsApi.js
 create mode 100644 frontend/src/store/activeChannelSlice.js
 delete mode 100644 frontend/src/store/channelsSlice.js

diff --git a/frontend/src/api/channelsApi.js b/frontend/src/api/channelsApi.js
new file mode 100644
index 0000000..9948af3
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git "a/frontend/src/components/\320\241hannels.jsx" "b/frontend/src/components/\320\241hannels.jsx"
index a187c1e..f5f9e66 100644
--- "a/frontend/src/components/\320\241hannels.jsx"
+++ "b/frontend/src/components/\320\241hannels.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>
   );
 };
diff --git a/frontend/src/context/AuthProvider.jsx b/frontend/src/context/AuthProvider.jsx
index ae849a2..0481186 100644
--- a/frontend/src/context/AuthProvider.jsx
+++ b/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>
   );
diff --git a/frontend/src/pages/LoginPage.jsx b/frontend/src/pages/LoginPage.jsx
index fc2e44f..818451c 100644
--- a/frontend/src/pages/LoginPage.jsx
+++ b/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);
diff --git a/frontend/src/store/activeChannelSlice.js b/frontend/src/store/activeChannelSlice.js
new file mode 100644
index 0000000..115af18
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/frontend/src/store/channelsSlice.js b/frontend/src/store/channelsSlice.js
deleted file mode 100644
index 125f008..0000000
--- a/frontend/src/store/channelsSlice.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit';
-
-const initialState = {
-  channels: [],
-  activeChannel: 1,
-};
-
-const channelsSlice = createSlice({
-  name: 'channels',
-  initialState,
-  reducers: {
-
-  }
-});
-
-export const { actions } = channelsSlice;
-export default channelsSlice.reducer;
\ No newline at end of file
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 9e551b8..f84773c 100644
--- a/frontend/src/store/index.js
+++ b/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,
-  }
-});
\ No newline at end of file
+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;
\ No newline at end of file
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index e09a4d6..98cab99 100644
--- a/frontend/vite.config.js
+++ b/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': {