Refactoring and rename

frontend/src/page/ChatPage.js

@@ -3,34 +3,30 @@ import { useEffect, useContext, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import getRoutes from '../routes.js';
 import { AuthContext } from '../hoc/AuthProvider';
-import { addChennels } from '../slices/channelSlice';
+import { addChannels } from '../slices/channelSlice';
 import { addMessages } from '../slices/messagesSlice.js';
 import Loader from '../Components/Loader.js';
 import Channels from '../Components/Channels.js';
 import ChatChannel from '../Components/ChatChannel.js';
 import getModal from '../Components/Modals/index.js';
 
 const ChatPage = () => {
-  const { userToken } = useContext(AuthContext);
+  const { user, getAuthHeader } = useContext(AuthContext);
   const dispatch = useDispatch();
-  const [isLoaded, setIsLoaded] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const { type } = useSelector(((state) => state.modal));
 
   useEffect(() => {
     const fetchData = async () => {
-      const response = await axios.get(getRoutes.data(), {
-        headers: {
-          Authorization: `Bearer ${userToken}`,
-        },
-      });
+      const response = await axios.get(getRoutes.data(), getAuthHeader());
       const { data } = response;
-      dispatch(addChennels(data));
+      dispatch(addChannels(data));
       dispatch(addMessages(data));
-      setIsLoaded(true);
+      setIsLoading(true);
     };
     fetchData();
-  }, [userToken]);
-  if (!isLoaded) return (<Loader />);
+  }, [user]);
+  if (!isLoading) return (<Loader />);
   return (
     <>
       <div className="container h-100 my-4 overflow-hidden rounded shadow">

frontend/src/page/LoginPage.js

@@ -23,7 +23,7 @@ const LoginPage = () => {
                   {t('LoginPage.card_footer')}
                   {' '}
                 </span>
-                <Link to={getRoutes.signuppage()}>{t('LoginPage.card_footer_registrationBtn')}</Link>
+                <Link to={getRoutes.signupPage()}>{t('LoginPage.card_footer_registrationBtn')}</Link>
               </div>
             </div>
           </div>

frontend/src/page/NotfoundPage.js

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import notFoundImg from '../assets/notFound.svg';
 import getRoutes from '../routes.js';
 
-const Notfoundpage = () => {
+const NotFoundPage = () => {
   const { t } = useTranslation();
   return (
     <div className="text-center">
@@ -22,4 +22,4 @@ const Notfoundpage = () => {
   );
 };
 
-export default Notfoundpage;
+export default NotFoundPage;

frontend/src/routes.js

@@ -1,8 +1,8 @@
 export default {
   main: () => '/',
-  loginpage: () => '/login',
-  signuppage: () => '/signup',
+  loginPage: () => '/login',
+  signupPage: () => '/signup',
   login: () => '/api/v1/login',
-  signup: () => '/api/v1/signup',
+  signUp: () => '/api/v1/signup',
   data: () => '/api/v1/data',
 };

frontend/src/slices/channelSlice.js

@@ -11,12 +11,12 @@ export const channelSlice = createSlice({
   name: 'channels',
   initialState,
   reducers: {
-    addChennels: (state, { payload }) => {
+    addChannels: (state, { payload }) => {
       const { channels, currentChannelId } = payload;
       state.currentChannelID = currentChannelId;
       state.channels = channels;
     },
-    addChennel: (state, { payload }) => {
+    addChannel: (state, { payload }) => {
       const isCopy = Boolean(state.channels.find(({ id }) => id === payload.id));
       if (!isCopy) {
         state.channels.push(payload);
@@ -38,7 +38,7 @@ export const channelSlice = createSlice({
 });
 
 export const {
-  addChennels, addChennel, setCurrentChannel, removeChannel, renameChannel,
+  addChannels, addChannel, setCurrentChannel, removeChannel, renameChannel,
 } = channelSlice.actions;
 
 export default channelSlice.reducer;

frontend/src/store/store.js

@@ -1,13 +1,13 @@
 import { configureStore } from '@reduxjs/toolkit';
 import channelReducer from '../slices/channelSlice';
-import messagesReduser from '../slices/messagesSlice';
-import modalReduser from '../slices/modalSlice';
+import messagesReducer from '../slices/messagesSlice';
+import modalReducer from '../slices/modalSlice';
 
 const store = configureStore({
   reducer: {
     channelsInfo: channelReducer,
-    messagesInfo: messagesReduser,
-    modal: modalReduser,
+    messagesInfo: messagesReducer,
+    modal: modalReducer,
   },
 });