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

This commit is contained in:
Никита Потапов 2024-01-09 15:30:26 +04:00
parent 29aee233be
commit 06671dc1ec
14 changed files with 207 additions and 154 deletions

206
data.json

File diff suppressed because one or more lines are too long

View File

@ -5,19 +5,25 @@ import { Outlet } from 'react-router-dom';
import { Container } from 'react-bootstrap' import { Container } from 'react-bootstrap'
import BottomMenu from './components/bottommenu/bottommenu'; import BottomMenu from './components/bottommenu/bottommenu';
import LeftMenu from './components/leftmenu/leftmenu'; import LeftMenu from './components/leftmenu/leftmenu';
import { useIsAuthenticated } from './hooks/AuthHooks'; import { CurrentUserContext } from './contexts/currentusercontext';
import { useState } from 'react';
const App = ({ routes }) => { const App = ({ routes }) => {
useIsAuthenticated(); const [currentUser, setCurrentUser] = useState(null);
return ( 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>
</> </>
); );
}; };

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,10 +1,16 @@
import Wrapper from "../components/wrapper/wrapper"; import Wrapper from "../components/wrapper/wrapper";
import Center from "../components/center/center"; import Center from "../components/center/center";
import ChatRow from "../components/chatrow/chatrow"; 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 = () => { const ChatPage = () => {
useRequireAuthenticated(); const { currentUser } = useContext(
CurrentUserContext
);
const navigate = useNavigate();
if (!currentUser) navigate('/auth');
return ( return (
<> <>
<Wrapper> <Wrapper>

View File

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

View File

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

View File

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

View File

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