@kiwicom/smart-faq/src/SmartFAQ/MobileBookingHeader/MobileUserDetail.js

Smart FAQ

// @flow

import * as React from 'react';
import css from 'styled-jsx/css';
import { Text } from '@kiwicom/orbit-components';

import { UserContext } from '../context/User';
import type { UserContextType } from '../context/User';
import type { User } from '../../types';
import SignOutButton from '../common/layout/SignOutButton';

const MobileUserDetailStyle = css`
  .MobileUserDetail {
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
  }
`;

const getUsername = (user: ?User): string | null => {
  if (user && user.firstname) {
    return user.firstname;
  }

  if (user && user.email) {
    return user.email;
  }

  return null;
};

const MobileUserDetail = () => (
  <React.Fragment>
    <UserContext.Consumer>
      {({ user }: UserContextType) => {
        return (
          <div className="MobileUserDetail">
            <Text type="secondary">{getUsername(user)}</Text>
            <SignOutButton />
            <style jsx>{MobileUserDetailStyle}</style>
          </div>
        );
      }}
    </UserContext.Consumer>
  </React.Fragment>
);

export default MobileUserDetail;