@kiwicom/smart-faq/src/shared/StaticFAQ/FAQExtraInfo/BoardingPassesInfo/index.js

// @flow

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

import { SelectedBooking } from '../../../../SmartFAQ/context/SelectedBooking';
import type { State } from '../../../../SmartFAQ/context/SelectedBooking';
import QueryRenderer from '../../../../SmartFAQ/relay/QueryRenderer';
import { UserContext } from '../../../../SmartFAQ/context/User';
import type { UserContextType } from '../../../../SmartFAQ/context/User';
import type { BoardingPassesInfoNearestQueryResponse } from './__generated__/BoardingPassesInfoNearestQuery.graphql';
import type { BoardingPassesInfoSingleQueryResponse } from './__generated__/BoardingPassesInfoSingleQuery.graphql';
import { maybeGetAuthToken } from '../../../relay/utils';
import InfoBox from './InfoBox';
import BoardingPassesList from './BoardingPassesList';

type Props = {||};

type SingleBookingProps = {
  error: ?Error,
  props: ?BoardingPassesInfoSingleQueryResponse,
};

type NearestBookingProps = {
  error: ?Error,
  props: ?BoardingPassesInfoNearestQueryResponse,
};

const nearestInfoBoardingPasses = graphql`
  query BoardingPassesInfoNearestQuery($brand: String!) {
    nearestBooking(brand: $brand) {
      assets {
        ...BoardingPassesList
      }
      directAccessURL
    }
  }
`;

const singleBookingBoardingPasses = graphql`
  query BoardingPassesInfoSingleQuery(
    $id: Int!
    $authToken: String
    $brand: String!
  ) {
    singleBooking(id: $id, authToken: $authToken, brand: $brand) {
      assets {
        ...BoardingPassesList
      }
      directAccessURL
    }
  }
`;

class BoardingPassesInfo extends React.Component<Props> {
  // TODO - handle + log errors in query render methods!!!
  // TODO Refactor this component:
  // - loading shouldn't be in BoardingPassesList
  // - do not use "data" prop
  // - directAccessURL should be part of fragment in BoardingPassesList
  renderBPForNearestBooking = (queryProps: NearestBookingProps) => {
    const boardingPasses = queryProps.props?.nearestBooking?.assets;
    const directAccessURL = queryProps.props?.nearestBooking?.directAccessURL;

    return (
      <InfoBox>
        <BoardingPassesList data={boardingPasses} mmbUrl={directAccessURL} />
      </InfoBox>
    );
  };

  renderBPForSingleBooking = (queryProps: SingleBookingProps) => {
    const boardingPasses = queryProps.props?.singleBooking?.assets;
    const directAccessURL = queryProps.props?.singleBooking?.directAccessURL;

    return (
      <InfoBox>
        <BoardingPassesList data={boardingPasses} mmbUrl={directAccessURL} />
      </InfoBox>
    );
  };

  render() {
    return (
      <UserContext.Consumer>
        {(userContext: UserContextType) => (
          <SelectedBooking.Consumer>
            {({ selectedBooking }: State) => {
              return selectedBooking ? (
                <QueryRenderer
                  query={singleBookingBoardingPasses}
                  variables={{
                    id: selectedBooking,
                    authToken: maybeGetAuthToken(userContext),
                    brand: userContext.brand,
                  }}
                  render={this.renderBPForSingleBooking}
                />
              ) : (
                <QueryRenderer
                  query={nearestInfoBoardingPasses}
                  render={this.renderBPForNearestBooking}
                  variables={{ brand: userContext.brand }}
                />
              );
            }}
          </SelectedBooking.Consumer>
        )}
      </UserContext.Consumer>
    );
  }
}

export default BoardingPassesInfo;