hw-react-1/src/components/Navigation/Navigation.tsx

import Button from './Button/Button';
import { connect } from 'react-redux';
import { asyncLogout } from '../../redux/authorization/operation';
import { INavigationProps } from '../../typescript/components/Navigation/interfaces';
import s from './Navigation.module.css';

const Navigation = ({ doLogout }: INavigationProps) => {
  const handleLogout = async () => doLogout();
  return (
    <div className={s.wrapper__button}>
      <Button text="Categories" to="/categories" />
      <Button text="Orders" to="/orders" />
      <div className={s.wrapper__button__logout}>
        <div onClick={handleLogout}>
          <Button text="Logout" to="/authorization" />
        </div>
      </div>
    </div>
  );
};

const mapDispatchToProps = (
  dispatch: (dispatchAction: any) => Promise<void>,
) => ({
  doLogout: () => dispatch(asyncLogout()),
});

export default connect(null, mapDispatchToProps)(Navigation);