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

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

const NickName = ({nick, onLogOut}) => {
  return (
    <>
      <div style={{position: "relative", left: "50%", paddingTop:"10px"}}>
          <div>
              <span style={{color: "black"}}>Your nickname </span>
              <a href="/cabinet" style={{textDecoration: "none", color: "#5F9EA0"}}>
                  {nick} &nbsp;&nbsp;
                  <ConnectedAvaLogo px={"50px"} mrgn={"10px"} />
              </a>
              <button className="btn btn-secondary btn-sm" onClick={() => onLogOut()}>
                  Log out
              </button>
          </div>
          <div style={{}}>
              <Link to = "/search"> 
                  <button className="btn btn-info btn-sm">Search</button> 
              </Link>
          </div>
      </div>
    </>
  );
};

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