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

import {Link, Switch} from "react-router-dom";
import {connect} from "react-redux";
import {actionAuthLogout, actionPromise} from "../../reducers";
import {CLoginForm} from "./login";
import {CRegForm} from "./registration";
import {useState} from "react";
import {CAvatar,CAvatarDropZone} from "./avatar";
import {Logo} from "./logo";
import {history} from "../../App";
import {gql} from "../../actions";
import {takeEvery, select, call} from "redux-saga/effects";
import {promiseWorker} from "../../reducers/promiseReducer";
import {CTrackSearch} from "../tools/search";
import {CProtectedRoute} from "../../reducers/routeReducer";


export const actionSetUserPassword = (password) =>
    ({type:'SET_USER_PASSWORD', password})

export function* setUserPasswordWorker (action) {
        let {password} = action
        let {auth} = yield select()
        let userId = auth.payload?.sub?.id
        console.log(userId, password)
        // yield put (actionAuthLogout())
        yield call(promiseWorker,actionPromise('register', gql(`mutation reg($user:UserInput) {
         UserUpsert(user:$user) {
         _id 
         }
      }`, {user: {userId, password}})))
        // yield put (actionFullLogin)
}


export function* setUserPasswordWatcher() {
    yield takeEvery ('SET_USER_PASSWORD',setUserPasswordWorker)
}

const ChangePasswordForm = ({onChangePassword}) => {
    const [p, setP] = useState ('')
    return (
        <div>
            <input type='password' placeholder='Введите пароль' style={{backgroundColor:"skyblue"}} onChange={e => setP(e.target.value)}></input>
            <button onClick={() => {onChangePassword(p); history.push('/')}}>Сменить пароль</button>
        </div>
    )
}

export const CChangePasswordForm = connect(null,{onChangePassword:actionSetUserPassword})(ChangePasswordForm)


export const Header = () =>
    <header className="Header">
        <Logo />
        <Link to={`/music`}><h2>Все песни</h2></Link>
        <Link to={`/mymusic`}> <h2>Моя музыка</h2></Link>
        <h2><CTrackSearch /></h2>
        <Switch>
            <CProtectedRoute roles={["anon", "user"]} path="/login" component={CLoginForm}/>
            <CProtectedRoute roles={["anon", "user"]} path="/registration" component={CRegForm}/>
            <CProtectedRoute roles={["anon", "user"]} path='*' component={CLoginButtons} exact/>
        </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 />
                        <CChangePasswordForm/>
                        <button onClick={() => {onLogout(); history.push('/')}}>Выйти</button>
                    </Spoiler>
                </div>)
            }
        </>
    )
}
export const CLoginButtons = connect(state => ({token: state.auth.token}), {onLogout: actionAuthLogout})(LoginButtons)