@kiwicom/smart-faq/src/SmartFAQ/AllBookings/PastBookingsPaginationContainer.js

// @flow

import * as React from 'react';
import { graphql, createPaginationContainer } from 'react-relay';
import Translate from '@kiwicom/nitro/lib/components/Translate';
import type { RelayPaginationProp } from 'react-relay';

import BookingError from '../SingleBookingPage/BookingError';
import Loader from '../common/Loader';
import {
  getVariables,
  getFragmentVariables,
  createPaginator,
} from './paginationHelpers';
import BookingCardsList from './BookingCardsList';
import type { PastBookingsPaginationContainerQueryResponse } from './__generated__/PastBookingsPaginationContainerQuery.graphql';

export type Props = {|
  +relay: RelayPaginationProp,
  +data: ?PastBookingsPaginationContainerQueryResponse,
  +error: ?Error,
|};

type State = {|
  isLoading: boolean,
|};

class PastBookingsPaginationContainer extends React.Component<Props, State> {
  state = {
    isLoading: false,
  };

  loadMore = () => createPaginator(this);

  render() {
    const { error, data, relay } = this.props;
    const { isLoading } = this.state;

    // FIXME
    // $FlowExpectedError: Doesn't exist according to relay props, do something with it...
    const customerBookings = data?.past;
    const edges = customerBookings?.edges ?? [];
    const bookings = edges.map(edge => edge.node);

    if (error) {
      return <BookingError />;
    }

    return (
      <React.Fragment>
        {bookings && (
          <div data-cy="past-bookings">
            <BookingCardsList
              bookings={bookings}
              loadMore={this.loadMore}
              isLoading={isLoading}
              hasMore={relay.hasMore()}
              title={<Translate t="smartfaq.all_bookings.past.subtitle" />}
            />
          </div>
        )}
        {isLoading && <Loader />}
      </React.Fragment>
    );
  }
}

export default createPaginationContainer(
  PastBookingsPaginationContainer,
  graphql`
    fragment PastBookingsPaginationContainer on RootQuery {
      past: customerBookings(
        only: PAST
        first: $first
        after: $after
        brand: $brand
        order: DESC
      ) @connection(key: "PastBookingsPaginationContainer_past") {
        pageInfo {
          hasNextPage
          endCursor
        }
        edges {
          node {
            ...BookingCardsList_bookings
          }
        }
      }
    }
  `,
  {
    getFragmentVariables,
    getVariables,
    query: graphql`
      query PastBookingsPaginationContainerQuery(
        $after: String
        $first: Int
        $brand: String!
      ) {
        ...PastBookingsPaginationContainer
      }
    `,
  },
);