@kiwicom/smart-faq/src/SmartFAQ/SingleBookingPage/SelectedBooking.js

// @flow

import * as React from 'react';
import { graphql } from 'react-relay';

import BookingRenderer from '../relay/BookingRenderer';
import BookingError from './BookingError';
import BookingDetail from './BookingDetail';
import BookingNotFound from './BookingNotFound';
import BookingLoader from './BookingLoader';
import { UserContext } from '../context/User';
import type { UserContextType } from '../context/User';
import type { SelectedBookingBySimpleTokenQueryResponse } from './__generated__/SelectedBookingBySimpleTokenQuery.graphql';
import UserStatus from '../helpers/UserStatus';
import { maybeGetAuthToken } from '../../shared/relay/utils';

type Props = {|
  bookingId: number,
|};

type RenderState = {
  props: ?SelectedBookingBySimpleTokenQueryResponse,
  error: ?Error,
};

const singleBookingQuery = graphql`
  query SelectedBookingBySimpleTokenQuery(
    $id: Int!
    $authToken: String
    $brand: String!
  ) {
    singleBooking(id: $id, authToken: $authToken, brand: $brand) {
      type: __typename
      ...BookingDetail_booking
      ...GuaranteeNeededResolver_booking
      ...BookingAnalyticsTracker_booking
    }
  }
`;

class SelectedBooking extends React.Component<Props> {
  renderSelectedBooking = (renderState: RenderState) => {
    let content = null;
    const booking = renderState.props?.singleBooking;

    if (booking) {
      content = <BookingDetail booking={booking} />;
    } else {
      content = <BookingNotFound />;
    }

    if (!renderState.props) {
      content = <BookingLoader />;
    }

    if (renderState.error) {
      content = <BookingError />;
    }

    return (
      <div style={{ height: '100%', backgroundColor: '#f5f7f9' }}>
        {content}
      </div>
    );
  };

  render() {
    const { bookingId } = this.props;

    return (
      <>
        <UserStatus.LoggedIn>
          <UserContext.Consumer>
            {({
              simpleToken,
              loginToken,
              kwAuthToken,
              brand,
            }: UserContextType) => {
              // use simpleToken as last option because it would fail when selecting another booking
              const authToken = maybeGetAuthToken({
                simpleToken,
                loginToken,
                kwAuthToken,
              });

              return (
                <BookingRenderer
                  query={singleBookingQuery}
                  variables={{ id: bookingId, authToken, brand }}
                  render={this.renderSelectedBooking}
                />
              );
            }}
          </UserContext.Consumer>
        </UserStatus.LoggedIn>
        <UserStatus.LoggedOut>
          {/* TODO log that this component was rendered */}
          <BookingError />
        </UserStatus.LoggedOut>
      </>
    );
  }
}

export default SelectedBooking;