Переделал авторизацию через useContext

src/App.jsx

@@ -5,19 +5,25 @@ import { Outlet } from 'react-router-dom';
 import { Container } from 'react-bootstrap'
 import BottomMenu from './components/bottommenu/bottommenu';
 import LeftMenu from './components/leftmenu/leftmenu';
-import { useIsAuthenticated } from './hooks/AuthHooks';
+import { CurrentUserContext } from './contexts/currentusercontext';
+import { useState } from 'react';
 
 const App = ({ routes }) => {
-  useIsAuthenticated();
+  const [currentUser, setCurrentUser] = useState(null);
   return (
     <>
-      <Header routes={routes}></Header>
+      <CurrentUserContext.Provider value={{
-      <Container as="main" className="px-1 px-sm-2 px-lg-4 pt-2 pt-sm-4 d-flex position-relative flex-fill">
+        currentUser,
-        <LeftMenu routes={routes} />
+        setCurrentUser,
-        <Outlet />
+      }}>
-      </Container>
+        <Header routes={routes}></Header>
-      <BottomMenu routes={routes} />
+        <Container as="main" className="px-1 px-sm-2 px-lg-4 pt-2 pt-sm-4 d-flex position-relative flex-fill">
-      <Footer></Footer>
+          <LeftMenu routes={routes} />
+          <Outlet />
+        </Container>
+        <BottomMenu routes={routes} />
+        <Footer></Footer>
+      </CurrentUserContext.Provider>
     </>
   );
 };

src/components/bottommenu/bottommenu.jsx

@@ -1,11 +1,14 @@
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import './bottommenu.css';
-import { useIsAuthenticated } from '../../hooks/AuthHooks';
+import { CurrentUserContext } from '../../contexts/currentusercontext';
+import { useContext } from 'react';
 
 const BottomMenu = ({ routes }) => {
-    const isAuthenticated = useIsAuthenticated();
+    const { currentUser } = useContext(
-    if (!isAuthenticated) return;
+        CurrentUserContext
+    );
+    if (!currentUser) return;
     return (
         <>
             <div className="bottom-menu d-flex d-sm-none justify-content-around sticky-bottom">

src/components/headerusermenu/headerusermenu.jsx

@@ -2,13 +2,13 @@ import { Dropdown } from 'react-bootstrap';
 import PropTypes from "prop-types";
 import React from 'react';
 import { Person, Gear, BoxArrowRight } from 'react-bootstrap-icons';
-import { useIsAuthenticated } from '../../hooks/AuthHooks';
 import { deauth } from '../../utils/user';
 import { getUserAvatarImg } from '../../utils/user';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
-
+import { CurrentUserContext } from '../../contexts/currentusercontext';
+import { useContext } from 'react';
 import './headerusermenu.css';
-import { useCurrentUser } from '../../hooks/UserHooks';
+
 
 // eslint-disable-next-line react/display-name
 const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
@@ -33,25 +33,27 @@ CustomToggle.propTypes = {
 
 
 const HeaderUserMenu = () => {
-	const isAuthenticated = useIsAuthenticated();
+	const { currentUser, setCurrentUser } = useContext(
-	const user = useCurrentUser();
+		CurrentUserContext
-	if (!isAuthenticated) return;
+	);
+	const navigate = useNavigate();
+	if (!currentUser) return;
 	return (
 		<Dropdown className='headerusermenu__dropdown'>
 			<Dropdown.Toggle as={CustomToggle} className='d-flex align-items-center'>
-				<img src={getUserAvatarImg(user.avatarImg)} className="user-avatar avatar-small img-fluid rounded-circle" />
+				<img src={getUserAvatarImg(currentUser.avatarImg)} className="user-avatar avatar-small img-fluid rounded-circle" />
 				<div className="post-author-name px-2 d-none d-md-block">
-					{user.name} {user.surname}
+					{currentUser.name} {currentUser.surname}
 				</div>
 			</Dropdown.Toggle>
 			<Dropdown.Menu className='dropdown-menu-end'>
-				<Dropdown.Item as={Link} to={`/user/${user.username}`} className='headerusermenu__dropdownitem d-flex align-items-center d-sm-none'>
+				<Dropdown.Item as={Link} to={`/user/${currentUser.username}`} className='headerusermenu__dropdownitem d-flex align-items-center d-sm-none'>
 					<Person className='me-2' /><span>Моя страница</span>
 				</Dropdown.Item>
 				<Dropdown.Item href='#' className='headerusermenu__dropdownitem d-flex align-items-center'>
 					<Gear className='me-2' /><span>Настройки</span>
 				</Dropdown.Item>
-				<Dropdown.Item href='#' onClick={() => { deauth(); window.location.pathname = '/auth' }} className='headerusermenu__dropdownitem d-flex align-items-center'>
+				<Dropdown.Item href='#' onClick={() => { setCurrentUser(null); navigate('/auth'); }} className='headerusermenu__dropdownitem d-flex align-items-center'>
 					<BoxArrowRight className='me-2' /><span>Выход</span>
 				</Dropdown.Item>
 			</Dropdown.Menu>

src/components/leftmenu/leftmenu.jsx

@@ -1,11 +1,14 @@
 import PropTypes from "prop-types";
 import { Link } from 'react-router-dom';
 import './leftmenu.css';
-import { useIsAuthenticated } from "../../hooks/AuthHooks";
+import { useContext } from "react";
+import { CurrentUserContext } from "../../contexts/currentusercontext";
 
 const LeftMenu = ({ routes }) => {
-    const isAuthenticated = useIsAuthenticated();
+    const { currentUser } = useContext(
-    if (!isAuthenticated) return;
+        CurrentUserContext
+    );
+    if (!currentUser) return;
     return (
         <>
             <div

src/components/post/post.jsx

@@ -1,17 +1,19 @@
 import { PropTypes } from 'prop-types';
 import { Link } from 'react-router-dom';
 import { Trash, Pencil } from 'react-bootstrap-icons';
-
+import { CurrentUserContext } from '../../contexts/currentusercontext';
+import { useContext } from 'react';
 import './post.css';
 import { getUserAvatarImg, getUserLink } from '../../utils/user';
-import { useCurrentUser } from '../../hooks/UserHooks';
 import PostsApiService from '../../services/PostsApiService';
 import toast from 'react-hot-toast';
 
 const options = { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' };
 
 const Post = ({ post, handlePostsChange, postInputFormState }) => {
-    const currentUser = useCurrentUser();
+    const { currentUser } = useContext(
+        CurrentUserContext
+    );
 
     if (!postInputFormState) return;
 

src/components/userrow/userrow.jsx

@@ -4,11 +4,14 @@ import { PlusLg, Trash } from 'react-bootstrap-icons';
 import './userrow.css'
 import { getUserAvatarImg, getUserLink } from '../../utils/user';
 import { getAgeString } from '../../utils/user';
-import { useCurrentUser } from '../../hooks/UserHooks';
 import { useUserSubscribe } from '../../hooks/SubscribeHook';
+import { CurrentUserContext } from '../../contexts/currentusercontext';
+import { useContext } from 'react';
 
 const UserRow = ({ user }) => {
-    const currentUser = useCurrentUser();
+    const { currentUser } = useContext(
+        CurrentUserContext
+    );
     const { sub, removeSub, addSub } = useUserSubscribe(currentUser.id, user.id);
     return (
         <div className="user-row hoverable border-bottom border-dark p-2 d-flex justify-content-between align-items-center">

src/contexts/currentusercontext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const CurrentUserContext = createContext(null);

src/pages/AuthPage.jsx

@@ -2,13 +2,20 @@ import Wrapper from "../components/wrapper/wrapper";
 import AuthPageLogo from "../components/authpagelogo/authpagelogo";
 import { useState, useEffect } from "react";
 import UsersApiService from "../services/UsersApiService";
-import { setCurrentUserId, getCurrentUserId } from "../utils/user";
+import { getCurrentUserId } from "../utils/user";
-import { useIsAuthenticated } from "../hooks/AuthHooks";
+import { CurrentUserContext } from "../contexts/currentusercontext";
+import { useContext } from "react";
+import { useNavigate } from "react-router-dom";
 
 const AuthPage = () => {
-    const isAuthenticated = useIsAuthenticated();
+    const { currentUser, setCurrentUser } = useContext(
-    if (isAuthenticated) {
+        CurrentUserContext
-        window.location.pathname = '/';
+    );
+
+    const navigate = useNavigate();
+
+    if (currentUser) {
+        navigate('/');
     }
 
     const [inputFields, setInputFields] = useState({
@@ -47,7 +54,7 @@ const AuthPage = () => {
                 })
             }
             else if (data.length == 1) {
-                await setCurrentUserId(data.pop().id);
+                setCurrentUser(data.pop());
             }
         }
         setSubmitting(true);

src/pages/ChatPage.jsx

@@ -1,10 +1,16 @@
 import Wrapper from "../components/wrapper/wrapper";
 import Center from "../components/center/center";
 import ChatRow from "../components/chatrow/chatrow";
-import { useRequireAuthenticated } from "../hooks/AuthHooks";
+import { useNavigate } from "react-router-dom";
+import { useContext } from "react";
+import { CurrentUserContext } from "../contexts/currentusercontext";
 
 const ChatPage = () => {
-    useRequireAuthenticated();
+    const { currentUser } = useContext(
+        CurrentUserContext
+    );
+    const navigate = useNavigate();
+    if (!currentUser) navigate('/auth');
     return (
         <>
             <Wrapper>

src/pages/ErrorPage.jsx

@@ -1,11 +1,9 @@
-import { useRequireAuthenticated } from '../hooks/AuthHooks';
 import Wrapper from '../components/wrapper/wrapper';
 import { Container } from 'react-bootstrap';
 import Footer from '../components/footer/footer';
 import { useNavigate } from 'react-router-dom';
 
 const ErrorPage = () => {
-    useRequireAuthenticated();
     const navigate = useNavigate();
     return (
         <>

src/pages/FeedPage.jsx

@@ -2,16 +2,22 @@ import Wrapper from "../components/wrapper/wrapper";
 import Center from "../components/center/center";
 import PostInputForm from "../components/postinputform/postinputform";
 import Post from "../components/post/post";
-import { useRequireAuthenticated } from "../hooks/AuthHooks";
 import { usePosts } from "../hooks/PostHooks";
 import { useUserSubscribes } from "../hooks/SubscribeHook";
-import { useCurrentUser } from "../hooks/UserHooks";
 import { usePostInputForm } from "../hooks/PostInputFormHook";
+import { CurrentUserContext } from "../contexts/currentusercontext";
+import { useContext } from "react";
+import { useNavigate } from "react-router-dom";
 
 const FeedPage = () => {
-    useRequireAuthenticated();
+    const { currentUser } = useContext(
+        CurrentUserContext
+    );
+    const navigate = useNavigate();
+    if (!currentUser) {
+        navigate('/auth');
+    }
     let { posts, handlePostsChange } = usePosts();
-    const currentUser = useCurrentUser();
     const postInputFormState = usePostInputForm(currentUser, handlePostsChange);
     const { subs } = useUserSubscribes(currentUser.id);
     const subsIds = subs.map((sub) => sub.userId);

src/pages/SubscribesPage.jsx

@@ -2,14 +2,18 @@ import Wrapper from "../components/wrapper/wrapper";
 import Center from "../components/center/center";
 import SearchGroup from "../components/searchgroup/searchgroup";
 import UserRow from "../components/userrow/userrow";
-import { useRequireAuthenticated } from "../hooks/AuthHooks";
+import { useUsers } from "../hooks/UserHooks";
-import { useCurrentUser, useUsers } from "../hooks/UserHooks";
 import { useUserSubscribes } from "../hooks/SubscribeHook";
-
+import { useNavigate } from "react-router-dom";
+import { CurrentUserContext } from "../contexts/currentusercontext";
+import { useContext } from "react";
 
 const SubscribesPage = () => {
-    useRequireAuthenticated();
+    const { currentUser } = useContext(
-    const currentUser = useCurrentUser();
+        CurrentUserContext
+    );
+    const navigate = useNavigate();
+    if (!currentUser) navigate('/auth');
     const users = useUsers();
     const { subs } = useUserSubscribes(currentUser.id);
     const subsIds = subs.map((sub) => sub.userId);

src/pages/UserProfilePage.jsx

@@ -3,17 +3,21 @@ import Center from "../components/center/center";
 import PostInputForm from "../components/postinputform/postinputform";
 import Post from "../components/post/post";
 import UserProfileBlock from "../components/userprofileblock/userprofileblock";
-import { useRequireAuthenticated } from "../hooks/AuthHooks";
-import { useCurrentUser } from "../hooks/UserHooks";
 import { useUserPosts } from "../hooks/PostHooks";
 import { useParams } from "react-router-dom";
 import { useUserByUsername } from "../hooks/UserHooks";
 import { usePostInputForm } from "../hooks/PostInputFormHook";
+import { CurrentUserContext } from "../contexts/currentusercontext";
+import { useContext } from "react";
+import { useNavigate } from "react-router-dom";
 
 const UserProfilePage = () => {
-    useRequireAuthenticated();
+    const { currentUser } = useContext(
+        CurrentUserContext
+    );
+    const navigate = useNavigate();
+    if (!currentUser) navigate('/auth');
     const params = useParams();
-    const currentUser = useCurrentUser();
     const userByUsername = useUserByUsername(params.username);
 
     const user = userByUsername ? userByUsername : currentUser;