added dispatch inside useAuth hook

frontend/src/components/Header.jsx

@@ -3,19 +3,16 @@ import Button from 'react-bootstrap/esm/Button';
 import Nav from 'react-bootstrap/Nav';
 import Navbar from 'react-bootstrap/Navbar';
 import { Link } from 'react-router-dom';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import { setUserData } from '../store/slices/appSlice';
 import useAuth from '../hooks';
 
 const Header = () => {
-  const dispatch = useDispatch();
   const { logOut } = useAuth();
   const { t } = useTranslation();
   const app = useSelector((state) => state.app);
   const logOutUser = () => {
     logOut();
-    dispatch(setUserData({ nickname: '', token: null }));
   };
   return (
     <Navbar expand="lg" className="bg-body-tertiary mb-2">

frontend/src/hooks/useAuth.js

@@ -1,12 +1,22 @@
-const useAuth = () => ({
-  logOut: () => {
-    localStorage.removeItem('token');
-    localStorage.removeItem('nickname');
-  },
-  logIn: (token, nickname) => {
+import { useDispatch } from 'react-redux';
+import { setUserData } from '../store/slices/appSlice';
+
+const useAuth = () => {
+  const dispatch = useDispatch();
+
+  const logIn = (token, nickname) => {
     localStorage.setItem('token', token);
     localStorage.setItem('nickname', nickname);
-  },
-});
+    dispatch(setUserData({ nickname, token }));
+  };
+
+  const logOut = () => {
+    localStorage.removeItem('token');
+    localStorage.removeItem('nickname');
+    dispatch(setUserData({ nickname: '', token: null }));
+  };
+
+  return { logIn, logOut };
+};
 
 export default useAuth;

frontend/src/pages/Login.jsx

@@ -1,4 +1,3 @@
-import { useDispatch } from 'react-redux';
 import { Formik } from 'formik';
 import { useNavigate, Link } from 'react-router-dom';
 import Container from 'react-bootstrap/Container';
@@ -10,7 +9,6 @@ import Button from 'react-bootstrap/Button';
 import Form from 'react-bootstrap/Form';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
-import { setUserData } from '../store/slices/appSlice';
 import { useLoginMutation } from '../api/auth';
 import { appPaths } from '../routes';
 import useAuth from '../hooks';
@@ -19,7 +17,6 @@ const Login = () => {
   const { t } = useTranslation();
   const { logIn } = useAuth();
   const navigate = useNavigate();
-  const dispatch = useDispatch();
   const [login] = useLoginMutation();
   const handleFormSubmit = async (values, { setErrors }) => {
     const { nickname, password } = values;
@@ -29,7 +26,6 @@ const Login = () => {
     };
     const { data, error } = await login(user);
     if (data) {
-      dispatch(setUserData({ nickname, token: data.token }));
       logIn(data.token, nickname);
       navigate(appPaths.home());
     }