@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 LogContext from '@kiwicom/nitro/lib/services/log/context';

import { BookingState } from '../../context/BookingState';
import type { onLogout } from '../../../types';
import { events } from '../../../const/events';
import type { log } from '../../../const/events';

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

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

class SignOutButton extends React.Component<Props> {
  onSignOut = async () => {
    const { onLogout, history, log } = this.props;

    await onLogout();
    history.push('/');
    log(events.SIGN_OUT, {});
  };

  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);
  const { log } = React.useContext(LogContext);

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

export default withRouter(WrappedSignOutButton);