@kiwicom/smart-faq/src/SmartFAQ/SingleBookingPage/NearestBooking.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 type { NearestBookingQueryResponse as QueryResponseType } from './__generated__/NearestBookingQuery.graphql';
import { UserContext } from '../context/User';
import type { UserContextType } from '../context/User';

type Props = {||};

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

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

class NearestBooking extends React.Component<Props> {
  renderBooking = (renderState: RenderState) => {
    let content = null;
    const booking = renderState.props?.nearestBooking;

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

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

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

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

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

export default NearestBooking;