Переделал авторизацию через useContext
This commit is contained in:
parent
29aee233be
commit
06671dc1ec
24
src/App.jsx
24
src/App.jsx
@ -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>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -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">
|
||||||
|
@ -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>
|
||||||
|
@ -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
|
||||||
|
@ -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;
|
||||||
|
|
||||||
|
@ -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">
|
||||||
|
3
src/contexts/currentusercontext.js
Normal file
3
src/contexts/currentusercontext.js
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import { createContext } from "react";
|
||||||
|
|
||||||
|
export const CurrentUserContext = createContext(null);
|
@ -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);
|
||||||
|
@ -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>
|
||||||
|
@ -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 (
|
||||||
<>
|
<>
|
||||||
|
@ -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);
|
||||||
|
@ -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);
|
||||||
|
@ -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;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user