@kiwicom/smart-faq/src/SmartFAQ/relay/BookingRenderer.js

// @flow

import * as React from 'react';
import { withRouter } from 'react-router-dom';
import type { ContextRouter } from 'react-router-dom';

import type { onLogout } from '../../types';
import QueryRenderer from './QueryRenderer';
import type { Props as QueryRendererProps } from './QueryRenderer';
import GuaranteeNeededResolver from '../../shared/relay/GuaranteeNeededResolver';
import BookingAnalyticsTracker from './BookingAnalyticsTracker';
import { BookingState } from '../context/BookingState';
import { UserContext } from '../context/User';
import { ERROR_FORBIDDEN } from '../../shared/relay/environment';

type RenderState<RenderProps> = {
  props: ?RenderProps,
  error: ?Error,
};

type OwnProps<RenderProps> = {|
  ...QueryRendererProps<RenderProps>,
  ...ContextRouter,
|};

type Props<RenderProps> = {|
  ...OwnProps<RenderProps>,
  onLogout: onLogout,
  kwAuthToken: ?string,
|};

class BookingRenderer<RenderProps> extends React.Component<Props<RenderProps>> {
  // FIXME
  // $FlowExpectedError: Not sure how to type this now.
  renderBooking = (renderState: RenderState<RenderProps>) => {
    if (renderState.error) {
      if (renderState.error.message === ERROR_FORBIDDEN) {
        (async () => {
          await this.props.onLogout();
          this.props.history.push({
            pathname: '/',
            state: { sessionExpired: true },
          });
        })().catch(console.error); // eslint-disable-line no-console

        return this.props.render({ error: null, props: null });
      }
    }

    const booking =
      renderState.props?.singleBooking || renderState.props?.nearestBooking;

    return (
      <React.Fragment>
        {renderState.props && (
          <GuaranteeNeededResolver booking={booking} eventSource="smartFAQ" />
        )}
        {renderState.props && booking && (
          <BookingAnalyticsTracker booking={booking} />
        )}
        {this.props.render(renderState)}
      </React.Fragment>
    );
  };

  render() {
    const { query, cacheConfig, variables, kwAuthToken } = this.props;

    return (
      <QueryRenderer
        query={query}
        cacheConfig={cacheConfig}
        variables={variables}
        render={this.renderBooking}
        kwAuthToken={kwAuthToken}
      />
    );
  }
}

const WrappedBookingRenderer = <RenderProps>(props: OwnProps<RenderProps>) => {
  const { kwAuthToken } = React.useContext(UserContext);
  const { onLogout } = React.useContext(BookingState);

  return (
    <BookingRenderer {...props} kwAuthToken={kwAuthToken} onLogout={onLogout} />
  );
};

export default withRouter(WrappedBookingRenderer);