music-player/src/pages/header/header-build.js

import {Link, Route, Switch} from "react-router-dom";
import {connect} from "react-redux";
import {actionAuthLogout} from "../../reducers";
import {CLoginForm} from "./login";
import {CRegForm} from "./registration";
import {useState} from "react";
import {CAvatar,CAvatarDropZone} from "./avatar";
import {Logo} from "./logo";


export const Header = () =>
    <header className="Header">
        <Logo />
        <Switch>
            <Route path="/login" component={CLoginForm}/>
            <Route path="/registration" component={CRegForm}/>
            <Route path='*' component={CLoginButtons} />
        </Switch>
    </header>


const Spoiler = ({ header, children, open=false }) => {
    const [openSpoiler, setOpenSpoiler] = useState(open)
    return (
        <>
            <section className="Spoiler" onClick={() => setOpenSpoiler(!openSpoiler)}>
                {header}
            </section>
            {openSpoiler && (
                <div className="SpoilerContent">
                    {children}
                </div>
            )}
        </>
    );
};


const LoginButtons = ({onLogout, history, token}) => {
    return (
        <>
            {!token ?
                ( <div className='LoginButtons'>
                    <Link to='/login'><button onClick={() => history.push('/')}>Вход</button></Link>
                    <Link to='/registration'><button>Регистрация</button></Link></div>) :
                (<div className='LoginColumn'>
                    <Spoiler header={<CAvatar/>}>
                        <strong>{JSON.parse(atob(token.split(".")[1])).sub.login}</strong>
                        <CAvatarDropZone />
                        <button onClick={() => {onLogout(); history.push('/')}}>Выйти</button>
                    </Spoiler>
                </div>)
            }
        </>
    )
}
export const CLoginButtons = connect(state => ({token: state.auth.token}), {onLogout: actionAuthLogout})(LoginButtons)