|
@@ -5,14 +5,14 @@ import { useDispatch, useSelector } from 'react-redux';
|
|
import { fetchUser } from '../../store/user/actions/fetchUser';
|
|
import { fetchUser } from '../../store/user/actions/fetchUser';
|
|
import { useEffect } from 'react';
|
|
import { useEffect } from 'react';
|
|
import { getUserIdFromJwt } from '../../utils/getUserIdFromJwt';
|
|
import { getUserIdFromJwt } from '../../utils/getUserIdFromJwt';
|
|
-import userInitImage from '../../assets/img/initialUserImage.jpeg';
|
|
|
|
import { usePopup } from '../../hooks/usePopup';
|
|
import { usePopup } from '../../hooks/usePopup';
|
|
import { UserPopup } from '../UserPopup/UserPopup';
|
|
import { UserPopup } from '../UserPopup/UserPopup';
|
|
|
|
+import { LoadingPage } from '../../pages/LoadingPage/LoadingPage';
|
|
|
|
|
|
export const Header = () => {
|
|
export const Header = () => {
|
|
const dispatch = useDispatch();
|
|
const dispatch = useDispatch();
|
|
const { isAuth } = useSelector((state) => state.auth);
|
|
const { isAuth } = useSelector((state) => state.auth);
|
|
- const { avatar } = useSelector((state) => state.user);
|
|
|
|
|
|
+ const { login, avatar, isLoading } = useSelector((state) => state.user);
|
|
const userPopup = usePopup();
|
|
const userPopup = usePopup();
|
|
|
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
@@ -23,6 +23,7 @@ export const Header = () => {
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
}, []);
|
|
|
|
|
|
|
|
+ if (isLoading) return <LoadingPage />;
|
|
return (
|
|
return (
|
|
<header className={style.header}>
|
|
<header className={style.header}>
|
|
<NavLink className={style.logoBlock} to="/">
|
|
<NavLink className={style.logoBlock} to="/">
|
|
@@ -31,11 +32,8 @@ export const Header = () => {
|
|
|
|
|
|
{isAuth ? (
|
|
{isAuth ? (
|
|
<nav>
|
|
<nav>
|
|
- <img
|
|
|
|
- src={avatar ? avatar : userInitImage}
|
|
|
|
- onClick={userPopup.open}
|
|
|
|
- alt="userImage"
|
|
|
|
- />
|
|
|
|
|
|
+ <span>Hello, {login}!</span>
|
|
|
|
+ <img src={avatar} onClick={userPopup.open} alt="userImage" />
|
|
<UserPopup
|
|
<UserPopup
|
|
popupRef={userPopup.ref}
|
|
popupRef={userPopup.ref}
|
|
isOpen={userPopup.isPopupVisible}
|
|
isOpen={userPopup.isPopupVisible}
|