feat: add authorization header to query

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

@@ -1,9 +1,10 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+import prepareHeaders from '../helpers/prepareHeaders';
 import apiPath from './apiPath';
 
 export const channelsApi = createApi({
   reducerPath: 'channels',
-  baseQuery: fetchBaseQuery({ baseUrl: apiPath.channels() }),
+  baseQuery: fetchBaseQuery({ baseUrl: apiPath.channels(), prepareHeaders }),
   endpoints: (builder) => ({
     getChannels: builder.query({
       query: () => '',

frontend/src/components/Channels.jsx

@@ -2,7 +2,7 @@ import Nav from 'react-bootstrap/Nav';
 import Col from 'react-bootstrap/Col';
 import Button from 'react-bootstrap/Button';
 import { Plus } from 'react-bootstrap-icons';
-import { useGetChannelsQuery } from '../api/getChannels';
+import { useGetChannelsQuery } from '../api/channelsApi';
 
 const Channels = () => {
   const channels = useGetChannelsQuery;

frontend/src/helpers/prepareHeaders.js

@@ -0,0 +1,11 @@
+const prepareHeaders = (headers, { getState }) => {
+  const state = getState();
+  const { token } = state.auth;
+
+  if (token) {
+    headers.set('Authorization', `Bearer ${token}`);
+  }
+  return headers;
+};
+
+export default prepareHeaders;

frontend/src/store/store.js

@@ -1,5 +1,5 @@
 import { configureStore } from '@reduxjs/toolkit';
-import { channelsApi } from '../api/getChannels';
+import { channelsApi } from '../api/channelsApi';
 
 import authReducer from './slices/authSlice';