@kiwicom/smart-faq/src/SmartFAQ/common/layout/SignOutButton.js

// @flow

import * as React from 'react';
import Text from '@kiwicom/nitro/lib/components/Text';
import { withRouter } from 'react-router-dom';
import type { ContextRouter } from 'react-router-dom';

import { BookingState } from '../../context/BookingState';
import type { onLogout } from '../../../types';
import { track } from '../../../shared/cuckoo/tracker';

type OwnProps = {|
  ...ContextRouter,
|};

type Props = {|
  ...OwnProps,
  onLogout: onLogout,
|};

class SignOutButton extends React.Component<Props> {
  onSignOut = async () => {
    await this.props.onLogout();
    this.props.history.push('/');
    track('Login', 'signOut');
  };

  render() {
    return (
      <div
        className="signOut"
        onClick={this.onSignOut}
        onKeyUp={this.onSignOut}
        role="button"
        tabIndex={0}
        data-cy="sign-out-button"
      >
        <Text type="attention" t="smartfaq.header.sign_out" />
        <style jsx>
          {`
            .signOut {
              cursor: pointer;
              font-weight: bold;
            }
          `}
        </style>
      </div>
    );
  }
}

const WrappedSignOutButton = (props: OwnProps) => {
  const { onLogout } = React.useContext(BookingState);

  return <SignOutButton {...props} onLogout={onLogout} />;
};

export default withRouter(WrappedSignOutButton);