@kiwicom/smart-faq/src/SmartFAQ/AllBookings/FutureBookingsPaginationContainer.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 { FutureBookingsPaginationContainerQueryResponse } from './__generated__/FutureBookingsPaginationContainerQuery.graphql';

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

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

class FutureBookingsPaginationContainer 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?.future;
    const edges = customerBookings?.edges ?? [];
    const bookings = edges.map(edge => edge.node);

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

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

export default createPaginationContainer(
  FutureBookingsPaginationContainer,
  graphql`
    fragment FutureBookingsPaginationContainer on RootQuery {
      future: customerBookings(
        only: FUTURE
        first: $first
        after: $after
        brand: $brand
      ) @connection(key: "FutureBookingsPaginationContainer_future") {
        pageInfo {
          hasNextPage
          endCursor
        }
        edges {
          node {
            ...BookingCardsList_bookings
          }
        }
      }
    }
  `,
  {
    getFragmentVariables,
    getVariables,
    query: graphql`
      query FutureBookingsPaginationContainerQuery(
        $after: String
        $first: Int
        $brand: String!
      ) {
        ...FutureBookingsPaginationContainer
      }
    `,
  },
);