HomeWork1/React/CodePen/src/components/nickHeader.js

import { connect }          from "react-redux";
import { Redirect }         from "react-router";
import { Link }             from "react-router-dom";
import ConnectedAvaLogo     from "./ava";
import { actionAuthLogout } from "../actions/actionAuthLogout";


const NickName = ({nick, onLogOut}) => {
    return (
        <>
            <div className="container" style={{marginTop: '20px'}}>
                <div className="row">
                    <div style={{width: "100%", paddingBottom: "20px"}}>
                        <span style={{color: "black", left:"50px"}}>Your nickname </span>
                        <a href="/cabinet" style={{textDecoration: "none", color: "dark"}}>
                            {nick} &nbsp;&nbsp;
                            <ConnectedAvaLogo style={{width: "300px"}}/> &nbsp;&nbsp;
                        </a>
                        <button className="btn btn-danger btn-sm" onClick={() => onLogOut()}>
                            Log out
                        </button>
                    </div>
                </div>  
            </div>
        </>
    );
};

const ConnectedNick = connect((state) => ({nick: state?.auth?.payload?.sub?.login, logedIn: state.auth.token}),{onLogOut: actionAuthLogout})(NickName);

export default ConnectedNick;