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

// @flow

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

import BookingRenderer from '../relay/BookingRenderer';
import type { MobileNearestBookingQueryResponse as QueryResponseType } from './__generated__/MobileNearestBookingQuery.graphql';
import MobileBookingDetail from './MobileBookingDetail';
import { UserContext } from '../context/User';
import type { UserContextType } from '../context/User';

const query = graphql`
  query MobileNearestBookingQuery($brand: String!) {
    nearestBooking(brand: $brand) {
      ...MobileBookingDetail_booking
      ...GuaranteeNeededResolver_booking
      ...BookingAnalyticsTracker_booking
    }
  }
`;

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

type Props = {||};

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

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

    const booking = renderState.props.nearestBooking;

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

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

  render() {
    return (
      <UserContext.Consumer>
        {({ brand }: UserContextType) => {
          return (
            <BookingRenderer
              query={query}
              render={this.renderBooking}
              variables={{ brand }}
            />
          );
        }}
      </UserContext.Consumer>
    );
  }
}

export default MobileNearestBooking;