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

// @flow

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

import { UserContext } from '../context/User';
import UserStatus from '../helpers/UserStatus';
import BookingRenderer from '../relay/BookingRenderer';
import MobileBookingDetail from './MobileBookingDetail';
import type { UserContextType } from '../context/User';
import type { MobileSelectedBookingSingleQueryResponse as QueryResponseType } from './__generated__/MobileSelectedBookingSingleQuery.graphql';
import { maybeGetAuthToken } from '../../shared/relay/utils';

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

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

type Props = {
  bookingId: number,
};

class MobileSelectedBooking extends React.Component<Props> {
  renderMobileSelectedBooking = (renderState: RenderState) => {
    if (renderState.error) {
      return <div>Error</div>;
    }

    if (!renderState.props) {
      return <div>Loading</div>;
    }

    const booking = renderState.props?.singleBooking;

    if (!booking) {
      return <div>Not found</div>;
    }

    return <MobileBookingDetail booking={booking} />;
  };

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

    return (
      <UserStatus.LoggedIn>
        <UserContext.Consumer>
          {(userContext: UserContextType) => {
            const authToken = maybeGetAuthToken(userContext);

            return (
              <BookingRenderer
                query={selectedSingleBookingQuery}
                variables={{
                  id: bookingId,
                  authToken,
                  brand: userContext.brand,
                }}
                render={this.renderMobileSelectedBooking}
              />
            );
          }}
        </UserContext.Consumer>
      </UserStatus.LoggedIn>
    );
  }
}

export default MobileSelectedBooking;