project/shop/src/components/header.js

import {Footer, Links} from "./index"
import {BrowserRouter as Router, Route, Link, Switch, Redirect, useHistory} from 'react-router-dom';
import {Provider, connect} from 'react-redux';
import React, {Component, useState, useEffect} from 'react';
// import createHistory from "history/createBrowserHistory";
import {actionAuthLogout, actionUserFindOne} from "../reducers"
import {createStore, combineReducers, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';






const StandartMenu = ({className = "standartMenu", getCat = null}) => {


    return (
        <>
            <ul className = {className}>

                <Links url = {"/catalog"} text = {"Каталог"}/>
                <Links url = {"/about"} text = {"Про нас"}/>
                {/* <Links url = {"/post"} text = {"Оплата і доставка"}/> */}
                <Links url = {"/contacts"} text = {"Контакти"}></Links>

            </ul>
        </>
    )
}



const TabletMenu = ({}) => {
    const [show, setShow] = useState(false)
    const divStyle = "mobileMenu"
    function onClick() {

        setShow(!show)
    }

    return (
        <>
            
            <svg onClick = {onClick} xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" className="bi bi-justify-left" viewBox="0 0 16 16">
            <path fillRule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
            </svg>
            {show && <StandartMenu className = {divStyle}/>}
        </>
    )
}

const ToLoginPage = ({login, onLogout, getData, NickName = "User", loginId}) => {
    // useEffect(() => login && getData(loginId),[login])
    const history = useHistory();

    
    useEffect(() =>  history.location.pathname.includes(`/profile/`) && (login ?  history.push(`/profile/`) : history.push(`/login`)),[login])
    return(
        <>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-person" viewBox="0 0 16 16">
        <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
        </svg>
        <Link to = {login ? "/profile/": "/login"} >
            <span className = "link">{login ? login : "Вхід"}</span>
            {login && <button onClick = {() => onLogout()}>Вихід</button>}
        </Link>
        </>
    )
}

const CToLoginPage = connect(s => ({
    login: s.auth.payload && s.auth.payload.sub.login,
    loginId: s.auth.payload && s.auth.payload.sub._id,
    NickName: s.promiseRed && s.promiseRed.user &&
    s.promiseRed.user.payload && s.promiseRed.user.payload.data &&
    s.promiseRed.user.payload.data.UserFindOne &&
    s.promiseRed.user.payload.data.UserFindOne.login,
}), {onLogout: actionAuthLogout,
     getData: actionUserFindOne,
}) (ToLoginPage);


const Wishes = ({wishesCount}) => {

    return(
        <div>
            <Link to = "/wishes">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-heart" viewBox="0 0 16 16">
                <path d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
                </svg>
                <span>Хочу({wishesCount})</span>
            </Link>
        </div>
    )
}

const CWishes = connect(s => ({wishesCount: s.wishListReducer.count}), {})(Wishes)


const Basket = ({basketCount, className = "basket"}) => {

    return(
    <div className = {className}>
        <Link to = "/basket">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-bag" viewBox="0 0 16 16">
            <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"/>
            </svg>
            <span>{basketCount || "0"}грн</span>
        </Link>
    </div>
    )
}
const CBasket = connect(s => ({data: s.basket, basketCount: s.basket.price}), {})(Basket)



const Header = ({}) => {

    // const [wishes, wishesCount] = useState(0);
    console.log(connect((s) => ({isLoggedIn: s.auth.payload})))
    return(
        <>
            <div className = "header">
                
                <div className = "tabletMenu">
                    <TabletMenu/>
                </div>
                <StandartMenu/>

                <div className = "rightSide">
                    <CWishes/>
                    {/* <div>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-heart" viewBox="0 0 16 16">
                        <path d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
                        </svg>
                        <span>Хочу({wishes})</span>
                    </div> */}
                    <div>
                        <CToLoginPage/>

                    </div>
                    <CBasket/>

                </div>
            </div>          
        </>
    )
}

export default Header;