Project/projectreact/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: "67%" }}>
      <Link to = "/search"> <button
          className="btn btn-outline-success  border-success mr-3"
        >
          Search
        </button> </Link>
        <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>
    </>
  );
};

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