some improvements

frontend/src/components/AppHeader.jsx

@@ -1,18 +1,18 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import {
   Navbar, Container, Button,
 } from 'react-bootstrap';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import AuthContext from '../context/AuthProvider';
+import useAuth from '../hooks/useAuth';
 
 const AppHeader = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const { auth, unSetAuth } = useContext(AuthContext);
+  const { auth, logout } = useAuth();
   const { token } = auth;
   const signOut = () => {
-    unSetAuth();
+    logout();
     navigate('/login');
   };
   return (

frontend/src/components/Chat.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import axios from 'axios';
 import { useSelector, useDispatch } from 'react-redux';
 import {
@@ -17,12 +17,12 @@ import AddChannelButton from './AddChannelButton';
 import RemoveChannelModal from './RemoveChannelModal';
 import RenameChannelModal from './RenameChannelModal';
 import AppHeader from './AppHeader';
-import AuthContext from '../context/AuthProvider';
+import useAuth from '../hooks/useAuth';
 
 const Chat = () => {
   const { t } = useTranslation();
   const modals = useSelector((state) => state.modals);
-  const { auth } = useContext(AuthContext);
+  const { auth } = useAuth();
   const dispatch = useDispatch();
   useEffect(() => {
     const getChats = async () => {

frontend/src/components/Login.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
-import React, { useContext } from 'react';
+import React from 'react';
 import { useFormik } from 'formik';
 import axios from 'axios';
 import { useNavigate, useLocation, Navigate } from 'react-router-dom';
@@ -11,13 +11,12 @@ import { useTranslation } from 'react-i18next';
 import image from '../img/download.jpeg';
 import { loginValidation } from './validations';
 import { loginError } from '../slices/errorSlice';
-import { setName } from '../slices/userSlice';
 import AppHeader from './AppHeader';
-import AuthContext from '../context/AuthProvider';
+import useAuth from '../hooks/useAuth';
 
 const Login = () => {
   const { t } = useTranslation();
-  const { auth, setAuthentication } = useContext(AuthContext);
+  const { auth, login } = useAuth();
   const location = useLocation();
   const navigate = useNavigate();
   const error = useSelector((state) => state.errors.loginError);
@@ -32,11 +31,7 @@ const Login = () => {
       try {
         const res = await axios.post('/api/v1/login', values);
         if (res.status === 200) {
-          setAuthentication({
-            token: res.data.token,
-            username: values.username,
-          });
-          dispatch(setName(values.username));
+          login(res.data);
           dispatch(loginError(null));
           navigate('/');
         }

frontend/src/components/NewChannelModal.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
-import React, { useContext, useRef, useEffect } from 'react';
+import React, { useRef, useEffect } from 'react';
 import {
   Modal, Form, FormGroup, Button,
 } from 'react-bootstrap';
@@ -10,7 +10,7 @@ import { toast } from 'react-toastify';
 import { useTranslation } from 'react-i18next';
 import { hideModal } from '../slices/modalsSlice';
 import { channelNameValidation } from './validations';
-import SocketContext from '../context/SocketContext';
+import useApi from '../hooks/useApi';
 
 const NewChannelModal = () => {
   const { t } = useTranslation();
@@ -21,7 +21,7 @@ const NewChannelModal = () => {
   const channelNames = useSelector(({ channels }) => Object
     .values(channels.value)
     .map(({ name }) => name));
-  const { newChannelEmit } = useContext(SocketContext);
+  const { newChannel } = useApi();
   const nameField = useRef(null);
   useEffect(() => {
     nameField.current.focus();
@@ -32,7 +32,7 @@ const NewChannelModal = () => {
     },
     validationSchema: channelNameValidation(channelNames),
     onSubmit: ({ name }) => {
-      newChannelEmit({
+      newChannel({
         name,
         removable: true,
       }).then(() => {

frontend/src/components/RemoveChannelModal.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
-import React, { useContext } from 'react';
+import React from 'react';
 import {
   Modal, Form, FormGroup, Button,
 } from 'react-bootstrap';
@@ -9,20 +9,25 @@ import { useDispatch, useSelector } from 'react-redux';
 import { toast } from 'react-toastify';
 import { useTranslation } from 'react-i18next';
 import { hideModal } from '../slices/modalsSlice';
-import SocketContext from '../context/SocketContext';
+import useApi from '../hooks/useApi';
+import { makeActive } from '../slices/channelSlice';
 
 const RemoveChannelModal = () => {
   const { t } = useTranslation();
+  const activeId = useSelector(({ channels }) => channels.activeId);
   const dispatch = useDispatch();
   const onHide = () => {
     dispatch(hideModal('removeChannel'));
   };
-  const { removeChannelEmit } = useContext(SocketContext);
+  const { removeChannel } = useApi();
   const id = useSelector((state) => state.modals.removeChannel);
   const formik = useFormik({
     initialValues: { id },
     onSubmit: (values) => {
-      removeChannelEmit(values).then(() => {
+      if (+activeId === +id) {
+        dispatch(makeActive(1));
+      }
+      removeChannel(values).then(() => {
         dispatch(hideModal('removeChannel'));
         toast.success(t('channelRemoved'));
       }).catch((e) => {

frontend/src/components/RenameChannelModal.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
-import React, { useRef, useContext, useEffect } from 'react';
+import React, { useRef, useEffect } from 'react';
 import {
   Form, Modal, FormGroup, Button,
 } from 'react-bootstrap';
@@ -10,14 +10,14 @@ import { toast } from 'react-toastify';
 import { useTranslation } from 'react-i18next';
 import { hideModal } from '../slices/modalsSlice';
 import { channelNameValidation } from './validations';
-import SocketContext from '../context/SocketContext';
+import useApi from '../hooks/useApi';
 
 const RenameChannelModal = () => {
   const { t } = useTranslation();
   const dispatch = useDispatch();
   const id = useSelector((state) => state.modals.renameChannel);
   const initialName = useSelector((state) => state.channels.value[id].name);
-  const { renameChannelEmit } = useContext(SocketContext);
+  const { renameChannel } = useApi();
   const onHide = () => {
     dispatch(hideModal('renameChannel'));
   };
@@ -37,7 +37,7 @@ const RenameChannelModal = () => {
         name: values.name,
         removable: true,
       };
-      renameChannelEmit(newVals).then(() => {
+      renameChannel(newVals).then(() => {
         dispatch(hideModal('renameChannel'));
       }).then(() => {
         toast.success(t('channelRenamed'));

frontend/src/components/RequireAuth.jsx

@@ -1,11 +1,11 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { useLocation, Navigate } from 'react-router-dom';
 import Chat from './Chat';
-import AuthContext from '../context/AuthProvider';
+import useAuth from '../hooks/useAuth';
 
 const RequireAuth = () => {
   const location = useLocation();
-  const { auth } = useContext(AuthContext);
+  const { auth } = useAuth();
   const { token } = auth;
 
   return (

frontend/src/components/SendMessageForm.jsx

@@ -1,11 +1,11 @@
-import React, { useContext, useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useFormik } from 'formik';
 import { Form } from 'react-bootstrap';
 import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import SocketContext from '../context/SocketContext';
 import { newMessageValidation } from './validations';
-import AuthContext from '../context/AuthProvider';
+import useAuth from '../hooks/useAuth';
+import useApi from '../hooks/useApi';
 
 const SendMessageForm = () => {
   const channelId = useSelector((state) => state.channels.activeId);
@@ -14,9 +14,9 @@ const SendMessageForm = () => {
     messageInput.current.focus();
   }, [channelId]);
   const { t } = useTranslation();
-  const { auth } = useContext(AuthContext);
+  const { auth } = useAuth();
   const { username } = auth;
-  const { newMessageEmit } = useContext(SocketContext);
+  const { newMessage } = useApi();
   const formik = useFormik({
     initialValues: { body: '' },
     validationSchema: newMessageValidation,
@@ -26,7 +26,7 @@ const SendMessageForm = () => {
         channelId,
         username,
       };
-      newMessageEmit(newValues).then(() => {
+      newMessage(newValues).then(() => {
         resetForm();
       }).catch((e) => {
         console.log(e);

frontend/src/components/SignUp.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useNavigate, useLocation, Navigate } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import axios from 'axios';
@@ -9,14 +9,13 @@ import { useFormik } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { signupValidation } from './validations';
 import { signUpError } from '../slices/errorSlice';
-import { setName } from '../slices/userSlice';
 import image from '../img/signup.jpeg';
 import AppHeader from './AppHeader';
-import AuthContext from '../context/AuthProvider';
+import useAuth from '../hooks/useAuth';
 
 const SignUp = () => {
   const { t } = useTranslation();
-  const { auth, setAuthentication } = useContext(AuthContext);
+  const { auth, login } = useAuth();
   const location = useLocation();
   const navigate = useNavigate();
   const error = useSelector((state) => state.errors.signUpError);
@@ -42,12 +41,8 @@ const SignUp = () => {
         const { username, password } = values;
         const res = await axios.post('/api/v1/signup', { username, password });
         if (res.status === 201) {
-          setAuthentication({
-            token: res.data.token,
-            username,
-          });
+          login(res.data);
           dispatch(signUpError(null));
-          dispatch(setName(values.username));
           navigate('/');
         }
       } catch (err) {

frontend/src/context/AuthProvider.jsx

@@ -8,18 +8,18 @@ export const AuthProvider = ({ children }) => {
   const token = window.localStorage.getItem('token');
   const username = window.localStorage.getItem('username');
   const [auth, setAuth] = useState({ token: token || undefined, username: username || undefined });
-  const setAuthentication = (creds) => {
+  const login = (creds) => {
     window.localStorage.setItem('username', creds.username);
     window.localStorage.setItem('token', creds.token);
     setAuth(creds);
   };
-  const unSetAuth = () => {
+  const logout = () => {
     window.localStorage.removeItem('token');
     window.localStorage.removeItem('username');
     setAuth({ token: undefined });
   };
   return (
-    <AuthContext.Provider value={{ auth, setAuthentication, unSetAuth }}>
+    <AuthContext.Provider value={{ auth, login, logout }}>
       {children}
     </AuthContext.Provider>
   );

frontend/src/hooks/useApi.js

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import ApiContext from '../context/ApiContext';
+
+const useApi = () => useContext(ApiContext);
+
+export default useApi;

frontend/src/hooks/useAuth.js

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import AuthContext from '../context/AuthProvider';
+
+const useAuth = () => useContext(AuthContext);
+
+export default useAuth;

frontend/src/init.jsx

@@ -7,11 +7,11 @@ import { Provider as RollbarProvider, ErrorBoundary } from '@rollbar/react';
 import App from './App';
 import resources from './locales/index';
 import {
-  newChannel, removeChannel, renameChannel,
+  addChannel, deleteChannel, changeChannelName,
 } from './slices/channelSlice';
-import { newMessage } from './slices/messageSlice';
+import { sendMessage } from './slices/messageSlice';
 import store from './slices/index';
-import SocketContext from './context/SocketContext';
+import ApiContext from './context/ApiContext';
 import { AuthProvider } from './context/AuthProvider';
 
 const init = async () => {
@@ -23,29 +23,29 @@ const init = async () => {
   };
 
   const newMessageCallback = (socket) => {
-    store.dispatch(newMessage(socket));
+    store.dispatch(sendMessage(socket));
   };
   const newChannelCallback = (socket) => {
     if (socket.name) {
-      store.dispatch(newChannel(socket));
+      store.dispatch(addChannel(socket));
     }
   };
   const removeChannelCallback = ({ id }) => {
-    store.dispatch(removeChannel(id));
+    store.dispatch(deleteChannel(id));
   };
   const renameChannelCallback = (data) => {
-    store.dispatch(renameChannel(data));
+    store.dispatch(changeChannelName(data));
   };
   const promisify = (asyncFn) => (...args) => {
     const promise = new Promise((resolve, reject) => {
       asyncFn.call(Socket, ...args, (data, err) => (err ? reject(err) : resolve(data)));
     });
     return promise;
   };
-  const newMessageEmit = (data) => promisify(Socket.emit)('newMessage', data);
-  const newChannelEmit = (data) => promisify(Socket.emit)('newChannel', data);
-  const removeChannelEmit = (data) => promisify(Socket.emit)('removeChannel', data);
-  const renameChannelEmit = (data) => promisify(Socket.emit)('renameChannel', data);
+  const newMessage = (data) => promisify(Socket.emit)('newMessage', data);
+  const newChannel = (data) => promisify(Socket.emit)('newChannel', data);
+  const removeChannel = (data) => promisify(Socket.emit)('removeChannel', data);
+  const renameChannel = (data) => promisify(Socket.emit)('renameChannel', data);
   Socket.on('newMessage', newMessageCallback);
   Socket.on('newChannel', newChannelCallback);
   Socket.on('removeChannel', removeChannelCallback);
@@ -62,14 +62,14 @@ const init = async () => {
       <ErrorBoundary>
         <AuthProvider>
           <Provider store={store}>
-            <SocketContext.Provider value={{
-              newMessageEmit, newChannelEmit, removeChannelEmit, renameChannelEmit,
+            <ApiContext.Provider value={{
+              newMessage, newChannel, removeChannel, renameChannel,
             }}
             >
               <I18nextProvider i18={i18n}>
                 <App />
               </I18nextProvider>
-            </SocketContext.Provider>
+            </ApiContext.Provider>
           </Provider>
         </AuthProvider>
       </ErrorBoundary>